Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

convert tab/tabs

Browse Source
This commit is contained in:
Sérgio Ramos 2016-12-09 14:57:23 +00:00
parent 18978abf08
commit ccb53f3783
6 changed files with 236 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/src/components/tabs/index.js
View File

@ -1,19 +1,32 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const fns = require('../../shared/functions');
const Styled = require('styled-components');
const {
rndId
} = fns;
const {
default: styled
} = Styled;
const StyledTabs = styled.div`
font-size: 0;
&::after {
clear: both;
content: "";
display: table;
}
`;
const Tabs = ({
className,
children, // array of <Tab>
id,
id = rndId(),
name = '',
style
}) => {
const cn = classNames(
className,
styles.tabs
);
const _children = React.Children.map(children, (child, i) => {
return React.cloneElement(child, {
defaultChecked: i === 0,
@ -22,14 +35,14 @@ const Tabs = ({
});
return (
<div
className={cn}
<StyledTabs
className={className}
id={id}
role='tablist'
style={style}
>
{_children}
</div>
</StyledTabs>
);
};

120
ui/src/components/tabs/tab/index.js
View File

@ -1,46 +1,130 @@
const composers = require('../../../shared/composers');
const constants = require('../../../shared/constants');
const fns = require('../../../shared/functions');
const paramCase = require('param-case');
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const Styled = require('styled-components');
const {
moveZ
} = composers;
const {
boxes,
colors
} = constants;
const {
remcalc,
rndId
} = fns;
const {
default: styled
} = Styled;
const classNames = {
label: rndId(),
panel: rndId()
};
const StyledTab = styled.div`
display: inline;
`;
const StyledRadio = styled.input`
clip: rect(0 0 0 0);
height: 1px;
opacity: 0;
width: 1px;
${moveZ({
position: 'fixed',
amount: -1
})}
&:checked {
& + .${classNames.label} {
background: #FAFAFA;
border-bottom-width: 0;
padding-bottom: ${remcalc(11)};
${moveZ({
amount: 1
})}
}
& ~ .${classNames.panel} {
display: inline;
}
}
`;
const StyledLabel = styled.label`
background: #F2F2F2;
border: ${boxes.border.unchecked};
color: #646464;
display: inline-block;
font-size: ${remcalc(20)};
left: 1px;
margin-left: -1px;
padding: ${remcalc(10)};
position: relative;
vertical-align: bottom;
`;
const StyledPanel = styled.div`
display: inline-block;
height: 0;
overflow: hidden;
position: relative;
width: 0;
`;
const StyledContent = styled.div`
background: #FAFAFA;
border: ${boxes.border.unchecked};
box-sizing: border-box;
display: block;
float: left;
font-size: ${remcalc(16)};
margin-top: ${remcalc(-1)};
padding: ${remcalc('0 20')};
width: 100%;
`;
const Tab = ({
className,
children,
checked,
defaultChecked = true,
defaultChecked = false,
disabled = false,
id,
name,
title = '',
style
}) => {
const cn = classNames(
className,
styles.tab
);
const tabId = paramCase(title);
return (
<div className={cn}>
<input
<StyledTab className={className}>
<StyledRadio
checked={checked}
className={styles.radio_input}
defaultChecked={defaultChecked}
disabled={disabled}
id={tabId}
name={name}
type='radio'
/>
<label className={styles.label} htmlFor={tabId}>
<StyledLabel className={classNames.label} htmlFor={tabId}>
{title}
</label>
<div className={styles.panel}>
<div className={styles.content}>
</StyledLabel>
<StyledPanel className={classNames.panel}>
<StyledContent>
{children}
</div>
</div>
</div>
</StyledContent>
</StyledPanel>
</StyledTab>
);
};

4
ui/src/index.js
View File

@ -7,8 +7,8 @@ module.exports = {
Column: require('./components/column'),
Container: require('./components/container'),
Row: require('./components/row'),
// Tab: require('./components/tabs/tab'),
// Tabs: require('./components/tabs'),
Tab: require('./components/tabs/tab'),
Tabs: require('./components/tabs'),
Toggle: require('./components/toggle'),
// Notificaton: require('./components/notification'),
// Input: require('./components/input'),

23
ui/src/shared/composers.js
View File

@ -1,12 +1,17 @@
const constants = require('./constants');
const Styled = require('styled-components');
const {
boxes
} = constants;
const {
css
} = Styled;
module.exports = {
verticallyAlignCenter: css`
/* Need to palce position:relative on parent */
/* Need to place position:relative on parent */
left: 50%;
position: absolute;
top: 50%;
@ -16,5 +21,21 @@ module.exports = {
display: block;
content: "";
clear: both;
`,
moveZ: ({
amount = 0,
position = 'relative'
}) => css`
position: ${position};
z-index: ${amount};
`,
baseBox: ({
radius = boxes.borderRadius,
border = boxes.border.unchecked,
shadow = boxes.bottomShaddow
}) => css`
border: ${border};
border-radius: ${radius};
box-shadow: ${shadow};
`
};

14
ui/stories/index.js
View File

@ -13,6 +13,8 @@ const {
Row,
Column,
Avatar,
Tabs,
Tab,
Toggle,
Widget
} = require('../src/');
@ -126,6 +128,18 @@ storiesOf('Checkbox', module)
<Checkbox disabled />
));
storiesOf('Tabs', module)
.add('Default', () => (
<Tabs name='my-tab-group'>
<Tab title='Containers'>
<h1>Containers</h1>
</Tab>
<Tab title='Users'>
<h1>User</h1>
</Tab>
</Tabs>
))
storiesOf('Toggle', module)
.add('checked', () => (
<Toggle checked />

103
ui/yarn.lock
View File

@ -1551,6 +1551,10 @@ circular-json@^0.3.0:
version "0.3.1"
resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
clamp@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
clap@^1.0.9:
version "1.1.2"
resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
@ -1806,13 +1810,6 @@ create-error-class@^3.0.1:
dependencies:
capture-stack-trace "^1.0.0"
cross-spawn-async@^2.0.0:
version "2.2.5"
resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
dependencies:
lru-cache "^4.0.0"
which "^1.2.8"
cross-spawn@^4, cross-spawn@^4.0.0:
version "4.0.2"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
@ -1820,12 +1817,13 @@ cross-spawn@^4, cross-spawn@^4.0.0:
lru-cache "^4.0.1"
which "^1.2.9"
cross-spawn@2.0.x:
version "2.0.1"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-2.0.1.tgz#ab6fd893a099759d9b85220e3a64397de946b0f6"
cross-spawn@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.0.1.tgz#a3bbb302db2297cbea3c04edf36941f4613aa399"
dependencies:
cross-spawn-async "^2.0.0"
spawn-sync "1.0.13"
lru-cache "^4.0.1"
shebang-command "^1.2.0"
which "^1.2.9"
cryptiles@2.x.x:
version "2.0.5"
@ -1907,8 +1905,8 @@ cssesc@^0.1.0:
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
"cssnano@>=2.6.1 <4":
version "3.8.1"
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.1.tgz#008a482148ee948cf0af2ee6e44bd97c53f886ec"
version "3.8.2"
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.8.2.tgz#318551275d965956876847c16534e0ffe37bb5e6"
dependencies:
autoprefixer "^6.3.1"
decamelize "^1.1.2"
@ -3183,6 +3181,10 @@ is-my-json-valid@^2.10.0, is-my-json-valid@^2.12.4:
jsonpointer "^4.0.0"
xtend "^4.0.0"
is-nil@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-nil/-/is-nil-1.0.1.tgz#2daba29e0b585063875e7b539d071f5b15937969"
is-npm@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
@ -3197,6 +3199,10 @@ is-obj@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
is-object@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
is-observable@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-0.2.0.tgz#b361311d83c6e5d726cabf5e250b0237106f5ae2"
@ -3639,10 +3645,6 @@ lodash.isarray@^3.0.0:
version "3.0.4"
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55"
lodash.isarray@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-4.0.0.tgz#2aca496b28c4ca6d726715313590c02e6ea34403"
lodash.isequal@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.4.0.tgz#6295768e98e14dc15ce8d362ef6340db82852031"
@ -3773,6 +3775,10 @@ math-expression-evaluator@^1.2.14:
dependencies:
lodash.indexof "^4.0.5"
max-safe-int@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/max-safe-int/-/max-safe-int-1.0.0.tgz#44fba8ec993ded91fb2c5a35e71cf9c9f369ce52"
max-timeout@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/max-timeout/-/max-timeout-1.0.0.tgz#b68f69a2f99e0b476fd4cb23e2059ca750715e1f"
@ -3899,8 +3905,8 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, "mkdirp@>=0.5 0", mkdirp@~0.5.0, mkdirp@~0.5.1:
minimist "0.0.8"
mobx@^2.3.4:
version "2.6.5"
resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.6.5.tgz#9ea2a7f049c886b943981ea491bfcfba301dec49"
version "2.7.0"
resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.7.0.tgz#cf3d82d18c0ca7f458d8f2a240817b3dc7e54a01"
ms@^0.7.1, ms@0.7.2:
version "0.7.2"
@ -4724,10 +4730,11 @@ power-assert-util-string-width@^1.1.1:
eastasianwidth "^0.1.1"
pre-commit@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.1.3.tgz#6d5ed90740472072958c711a15f676aa2c231377"
version "1.2.0"
resolved "https://registry.yarnpkg.com/pre-commit/-/pre-commit-1.2.0.tgz#16a1a218861c778d1a1498719c9763717913d5b8"
dependencies:
cross-spawn "2.0.x"
cross-spawn "^5.0.1"
spawn-sync "^1.0.15"
which "1.2.x"
prelude-ls@~1.1.2:
@ -4839,6 +4846,21 @@ randexp@^0.4.2:
discontinuous-range "1.0.0"
ret "~0.1.10"
random-integral@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/random-integral/-/random-integral-1.0.3.tgz#8ff3c117565c9a04b66ddd559f3aed29bd0f0f6c"
dependencies:
clamp "^1.0.1"
max-safe-int "^1.0.0"
to-integer "^1.0.1"
random-natural@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/random-natural/-/random-natural-1.0.3.tgz#ef28615b03c2cb71aaebf7f24f487266a443c5c0"
dependencies:
max-safe-int "^1.0.0"
random-integral "^1.0.3"
randomatic@^1.1.3:
version "1.1.6"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
@ -5334,6 +5356,16 @@ shallowequal@^0.2.2, shallowequal@0.2.x:
dependencies:
lodash.keys "^3.1.2"
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
dependencies:
shebang-regex "^1.0.0"
shebang-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
shelljs@^0.7.4, shelljs@^0.7.5:
version "0.7.5"
resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.5.tgz#2eef7a50a21e1ccf37da00df767ec69e30ad0675"
@ -5400,9 +5432,9 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, sour
version "0.5.6"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
spawn-sync@1.0.13:
version "1.0.13"
resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.13.tgz#904091b9ad48a0f3afb0e84752154c01e82fd8d8"
spawn-sync@^1.0.15:
version "1.0.15"
resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
dependencies:
concat-stream "^1.4.7"
os-shim "^0.1.2"
@ -5739,6 +5771,15 @@ to-fast-properties@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
to-integer@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/to-integer/-/to-integer-1.0.1.tgz#511ad41dce6a93730a8f3b6e35a164fd829464da"
dependencies:
is-function "^1.0.1"
is-nil "^1.0.0"
is-object "^1.0.1"
is-symbol "^1.0.1"
tough-cookie@~2.3.0:
version "2.3.2"
resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
@ -5910,14 +5951,14 @@ utils-merge@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
uuid, uuid@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
uuid@^2.0.1, uuid@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
uuid@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
v8flags@^2.0.10:
version "2.0.11"
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
@ -6016,7 +6057,7 @@ which-module@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
which@^1.2.4, which@^1.2.8, which@^1.2.9, which@1.2.x:
which@^1.2.4, which@^1.2.9, which@1.2.x:
version "1.2.12"
resolved "https://registry.yarnpkg.com/which/-/which-1.2.12.tgz#de67b5e450269f194909ef23ece4ebe416fa1192"
dependencies: