fix(ui-toolkit): header, button, and checkbox. new toggle

This commit is contained in:
Sara Vieira 2017-12-06 15:03:40 +00:00 committed by Sérgio Ramos
parent 6f226b5d7d
commit bba8c99ee6
19 changed files with 583 additions and 373 deletions

View File

@ -1,6 +1,10 @@
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); @import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin'); @import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
body {
overflow-x: hidden;
}
body .rsg--sidebar-4 { body .rsg--sidebar-4 {
padding: 36px 30px; padding: 36px 30px;
} }

View File

@ -45,14 +45,14 @@
"pascal-case": "^2.0.1", "pascal-case": "^2.0.1",
"prop-types": "^15.6.0", "prop-types": "^15.6.0",
"react-bundle": "^1.0.4", "react-bundle": "^1.0.4",
"react-input-range": "^1.2.1", "react-input-range": "^1.2.2",
"react-popper": "^0.7.4", "react-popper": "^0.7.4",
"react-responsive": "^3.0.0", "react-responsive": "^3.0.0",
"react-styled-flexboxgrid": "^2.1.1", "react-styled-flexboxgrid": "^2.1.1",
"redrun": "^5.10.0", "redrun": "^5.10.0",
"remcalc": "^1.0.9", "remcalc": "^1.0.9",
"rnd-id": "^2.0.0", "rnd-id": "^2.0.0",
"styled-components": "^2.2.3", "styled-components": "^2.2.4",
"styled-is": "^1.1.0", "styled-is": "^1.1.0",
"unitcalc": "^1.1.1" "unitcalc": "^1.1.1"
}, },
@ -64,8 +64,8 @@
"babel-plugin-transform-es3-property-literals": "^6.22.0", "babel-plugin-transform-es3-property-literals": "^6.22.0",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"babel-preset-joyent-portal": "^3.3.3", "babel-preset-joyent-portal": "^3.3.3",
"codemirror": "^5.31.0", "codemirror": "^5.32.0",
"eslint": "^4.11.0", "eslint": "^4.12.1",
"eslint-config-joyent-portal": "^3.2.0", "eslint-config-joyent-portal": "^3.2.0",
"http-server": "^0.10.0", "http-server": "^0.10.0",
"jest": "^21.2.1", "jest": "^21.2.1",
@ -77,26 +77,26 @@
"joyent-react-scripts": "^3.1.1", "joyent-react-scripts": "^3.1.1",
"lodash.isboolean": "^3.0.3", "lodash.isboolean": "^3.0.3",
"navalia": "^1.2.0", "navalia": "^1.2.0",
"react": "^16.1.1", "react": "^16.2.0",
"react-docgen": "^3.0.0-beta8", "react-docgen": "^3.0.0-beta8",
"react-docgen-displayname-handler": "^1.0.1", "react-docgen-displayname-handler": "^1.0.1",
"react-dom": "^16.1.1", "react-dom": "^16.2.0",
"react-redux": "^5.0.6", "react-redux": "^5.0.6",
"react-router-dom": "^4.2.2", "react-router-dom": "^4.2.2",
"react-styleguidist": "^6.0.33", "react-styleguidist": "^6.0.33",
"react-test-renderer": "^16.1.1", "react-test-renderer": "^16.2.0",
"redux": "^3.7.2", "redux": "^3.7.2",
"redux-form": "^7.1.2", "redux-form": "^7.2.0",
"serve-static": "^1.13.1", "serve-static": "^1.13.1",
"stylelint": "^8.2.0", "stylelint": "^8.3.1",
"stylelint-config-joyent-portal": "^2.0.1", "stylelint-config-joyent-portal": "^2.0.1",
"webpack": "^3.8.1" "webpack": "^3.10.0"
}, },
"peerDependencies": { "peerDependencies": {
"joyent-manifest-editor": "^1.4.0", "joyent-manifest-editor": "^1.4.0",
"react": "^16.1.1", "react": "^16.2.0",
"react-dom": "^16.1.1", "react-dom": "^16.2.0",
"react-router-dom": "^4.2.2", "react-router-dom": "^4.2.2",
"redux-form": "^7.1.2" "redux-form": "^7.2.0"
} }
} }

View File

@ -22,7 +22,7 @@ const style = css`
min-width: ${remcalc(120)}; min-width: ${remcalc(120)};
margin-bottom: ${remcalc(8)}; margin-bottom: ${remcalc(8)};
margin-top: ${remcalc(8)}; margin-top: ${remcalc(8)};
padding: ${remcalc(13)} ${remcalc(18)}; padding: ${remcalc(15)} ${remcalc(18)};
position: relative; position: relative;
${typography.normal}; ${typography.normal};
@ -182,13 +182,16 @@ const style = css`
`}; `};
${is('small')` ${is('small')`
padding: ${remcalc(14)} ${remcalc(14)}; padding: ${remcalc(9)} ${remcalc(18)};
min-width: ${remcalc(48)}; font-size: ${remcalc(13)};
min-width: ${remcalc(0)};
`}; `};
${is('icon')` ${is('icon')`
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
min-width: ${remcalc(0)};
& svg + span { & svg + span {
margin-left: ${remcalc(12)}; margin-left: ${remcalc(12)};

View File

@ -1,3 +1,7 @@
#### Button > Primary
Primary button to be used once per page. Only use to indicate main action per pattern.
Min. width: 120px
```jsx ```jsx
const React = require('react'); const React = require('react');
const { default: Button } = require('./'); const { default: Button } = require('./');
@ -5,11 +9,13 @@ const { default: Button } = require('./');
<span> <span>
<Button>Inspire the lazy</Button> <Button>Inspire the lazy</Button>
<span> </span> <span> </span>
<Button href="#1">Inspire the lazy (anchor)</Button> <Button disabled>Inspire the lazy</Button>
</span>; </span>;
``` ```
#### Button > Secondary #### Button > Secondary
Secondary buttons can be used freely to indicate other actions on patterns.
Min. width: 120px
```jsx ```jsx
const React = require('react'); const React = require('react');
@ -18,43 +24,19 @@ const { default: Button } = require('./');
<span> <span>
<Button secondary>Inspire the brave</Button> <Button secondary>Inspire the brave</Button>
<span> </span> <span> </span>
<Button href="#2" secondary> <Button secondary disabled>Inspire the brave</Button>
Inspire the brave (anchor)
</Button>
</span>; </span>;
``` ```
#### Button > Tertiary #### Button > Small
Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
```jsx ```jsx
const React = require('react'); const React = require('react');
const { default: Button } = require('./'); const { default: Button } = require('./');
<span> <span>
<Button tertiary>Inspire the tertiary</Button> <Button secondary small>Inspire the brave</Button>
<span> </span>
<Button href="#3" tertiary>
Inspire the tertiary (anchor)
</Button>
<span> </span>
<Button tertiary selected>
Inspire the tertiary
</Button>
</span>;
```
#### Button > Disabled
```jsx
const React = require('react');
const { default: Button } = require('./');
<span>
<Button disabled>Inspire the liars</Button>
<span> </span>
<Button href="#4" disabled>
Inspire the liars (anchor)
</Button>
</span>; </span>;
``` ```
@ -70,3 +52,85 @@ const { default: Button } = require('./');
</Button> </Button>
</span>; </span>;
``` ```
#### Button > Quick Action
Quick action buttons are to be imbedded in components to give additional functionality. They can be used in either primary or secondary colour palettes depending on importance
```jsx
const React = require('react');
const { default: Button } = require('./');
const { Actions } = require('../icons');
<span>
<Button secondary icon rect>
<Actions />
</Button>
<Button secondary icon rect disabled>
<Actions />
</Button>
</span>
```
#### Primary
Primary anchor is a type of a link that sits outside the body text.
```jsx
const React = require('react');
const Anchor = require('../text').Anchor;
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
```
#### Reversed
Reversed anchors is used on dark backgrounds, where a default anchor would not
provide enough contrast.
```jsx
const React = require('react');
const Anchor = require('../text').Anchor;
<span
style={{
'background-color': '#3B46CC',
height: 80,
width: 250,
display: 'flex',
'align-items': 'center',
'justify-content': 'center'
}}
>
<Anchor href="https://joyent.com" reversed>
Inspire the lazy secondary
</Anchor>
</span>;
```
#### In text anchor
In-paragraph anchor is a link that sits inside a text components. The default
state does not have an underline. The underline appears on hover and click.
```jsx
const React = require('react');
const Anchor = require('../text').Anchor;
<p>
Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
momma's back. When a problem comes along.You must whip it.
<Anchor href="#">Learn More</Anchor>
</p>;
```
#### Disabled
Disabled anchors cannot be actioned and the cursor is disabled.
```jsx
const React = require('react');
const Anchor = require('../text').Anchor;
<Anchor disabled href="https://joyent.com">
Inspire the lazy disabled
</Anchor>;
```

View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { Broadcast, Subscriber } from 'joy-react-broadcast'; import { Broadcast, Subscriber } from 'joy-react-broadcast';
import { Input } from 'normalized-styled-components'; import { Input } from 'normalized-styled-components';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import is from 'styled-is'; import is, { isNot } from 'styled-is';
import rndId from 'rnd-id'; import rndId from 'rnd-id';
import BaseInput from './input'; import BaseInput from './input';
@ -19,12 +19,18 @@ const StyledInput = Input.extend`
opacity: 1; opacity: 1;
} }
&:disabled + label { ${isNot('error', 'warning', 'success')`
background-color: rgb(249, 249, 249); &:checked + label {
border-color: ${props => props.theme.primary};
} }
&:disabled + label::after { &:selected + label {
opacity: 0.3; border-color: ${props => props.theme.primary};
}
`};
&:disabled + label {
background-color: rgb(249, 249, 249);
} }
`; `;
@ -108,6 +114,14 @@ const InnerContainer = styled.div`
height: ${remcalc(18)}; height: ${remcalc(18)};
position: relative; position: relative;
cursor: pointer; cursor: pointer;
${isNot('noMargin')`
margin-bottom: ${remcalc(12)};
`}
`;
const Container = styled.div`
margin-bottom: ${remcalc(12)};
margin-left: ${remcalc(12)};
`; `;
const ToggleBase = ({ container = null, type = 'radio' }) => const ToggleBase = ({ container = null, type = 'radio' }) =>
@ -132,7 +146,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
(rest.value === true || rest.checked === true); (rest.value === true || rest.checked === true);
const toggle = ( const toggle = (
<InnerContainer {...types} type={type}> <InnerContainer {...types} type={type} {...rest}>
<StyledInput <StyledInput
{...rest} {...rest}
id={newValue.id} id={newValue.id}
@ -152,7 +166,7 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
const el = OuterContainer ? ( const el = OuterContainer ? (
<OuterContainer> <OuterContainer>
{toggle} {toggle}
{children} <Container>{children}</Container>
</OuterContainer> </OuterContainer>
) : ( ) : (
toggle toggle

View File

@ -2,6 +2,7 @@ import { Subscriber } from 'joy-react-broadcast';
import is from 'styled-is'; import is from 'styled-is';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import remcalc from 'remcalc';
import Baseline from '../baseline'; import Baseline from '../baseline';
import Label from '../label'; import Label from '../label';
@ -22,6 +23,10 @@ const StyledLabel = Label.extend`
${is('success')` ${is('success')`
color: ${props => props.theme.green}; color: ${props => props.theme.green};
`}; `};
font-size: ${remcalc(13)};
float: none;
margin-left: ${remcalc(28)};
`; `;
const Meta = props => { const Meta = props => {

View File

@ -1,6 +1,5 @@
import styled from 'styled-components'; import styled from 'styled-components';
import React from 'react'; import React from 'react';
import remcalc from 'remcalc';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import BaseToggle from './base/toggle'; import BaseToggle from './base/toggle';
@ -22,12 +21,6 @@ const Li = styled.li`
const Ul = styled.ul` const Ul = styled.ul`
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-bottom: ${remcalc(8)};
+ label {
margin-left: ${remcalc(26)};
font-size: ${remcalc(13)};
}
`; `;
const RadioItem = BaseInput(({ children, id, ...rest }) => ( const RadioItem = BaseInput(({ children, id, ...rest }) => (

View File

@ -1,146 +1,140 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Input } from 'normalized-styled-components';
import { Subscriber } from 'joy-react-broadcast'; import { Subscriber } from 'joy-react-broadcast';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import unitcalc from 'unitcalc';
import rndId from 'rnd-id'; import rndId from 'rnd-id';
import Label from './label';
import is from 'styled-is'; import is from 'styled-is';
import { border, borderRadius } from '../boxes';
import Baseline from '../baseline';
import BaseInput from './base/input'; import BaseInput from './base/input';
import typography from '../typography';
const StyledInput = Input.extend`
display: none;
&:checked + label {
color: ${props => props.theme.secondary};
font-weight: bold;
width: 100%;
position: relative;
}
&:selected + label {
color: ${props => props.theme.secondary};
font-weight: bold;
width: 100%;
}
&:disabled + label {
color: ${props => props.theme.grey};
& + .background {
display: none;
}
}
`;
const Label = styled.label`
${typography.normal};
box-sizing: border-box;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: ${props => props.theme.text};
cursor: pointer;
user-select: none;
position: relative;
z-index: 1;
${is('error')`
border-color: ${props => props.theme.redDark}
`};
${is('warning')`
border-color: ${props => props.theme.orangeDark}
`};
${is('success')`
border-color: ${props => props.theme.greenDark}
`};
&:hover {
color: ${props => props.theme.secondaryHover};
}
`;
const InputContainer = styled.div` const InputContainer = styled.div`
position: relative; position: relative;
vertical-align: text-bottom; vertical-align: text-bottom;
width: ${unitcalc(20)}; display: flex;
height: ${unitcalc(8)}; align-items: center;
`; `;
const Li = BaseInput(styled.li` const Input = styled.input`
display: inline-block; display: none;
list-style-type: none;
box-sizing: border-box;
`);
const Background = styled.span` &:checked + label {
border-right: ${border.unchecked}; background: #3B46CC;
background-color: ${props => props.theme.white}; border: ${remcalc(1)} solid ${props => props.theme.primary};
&:after {
left: 50%;
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary};
}
&:active {
box-shadow: none;
&:after {
margin-left: -0${remcalc(12)}
}
}
}
}
`;
const InputLabel = styled.label`
outline: 0;
display: block; display: block;
border-radius: ${borderRadius}; width: ${remcalc(46)};
position: absolute; height: ${remcalc(24)};
height: 100%;
width: 100%;
z-index: 0;
transition: ${props => props.theme.transition};
border: ${props => `${remcalc(1)} solid ${props.theme.grey}`};
top: ${remcalc(-1)};
`;
const Ul = styled.ul`
display: inline-block;
margin: 0;
padding: 0;
height: ${remcalc(48)};
display: inline-flex;
align-items: flex-end;
background-color: ${props => props.theme.disabled};
border-radius: ${borderRadius};
border: ${border.unchecked};
position: relative; position: relative;
margin-top: ${unitcalc(1)}; cursor: pointer;
user-select: none;
box-sizing: border-box;
background: ${props => props.theme.background};
border-radius: ${remcalc(23)};
transition: all 0.3s ease;
border: ${remcalc(1)} solid ${props => props.theme.grey};
margin-right: ${remcalc(6)};
li:first-of-type { &::selection {
input + label + .background { background: none;
transform: translateX(calc(100% - ${remcalc(3)}));
} }
input:checked + label + .background { &:active {
transform: translateX(${remcalc(-1)}); box-shadow: inset 0 0 0 ${remcalc(24)} ${props => props.theme.grey};
&:after {
padding-right: ${remcalc(12)};
} }
} }
li:last-of-type .background { &:hover {
border: ${remcalc(1)} solid ${props => props.theme.primary};
&:after {
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.primary};
}
}
&:after,
&:before {
position: relative;
display: block;
content: '';
width: 50%;
height: 100%;
}
&:after {
left: 0;
border-radius: 2em;
background: ${props => props.theme.white};
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
}
&:active {
box-shadow: inset 0 0 0 2em ${props => props.theme.grey};
&:after {
padding-right: ${remcalc(12)};
}
}
&:before {
display: none; display: none;
} }
${is('disabled')`
&:active {
box-shadow: none;
&:after {
padding-right: 0;
}
}
&:after {
background: ${props => props.theme.whiteActive};
}
&:hover {
border: ${remcalc(1)} solid ${props => props.theme.grey};
&:after {
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
}
}
`};
`; `;
const BaseToggle = BaseInput(({ children, ...rest }) => { const BaseToggle = BaseInput(({ children, ...rest }) => {
const render = value => { const render = value => {
const id = rndId(); const id = rndId();
return ( return (
<Li>
<InputContainer> <InputContainer>
<StyledInput {...value} {...rest} id={id} type="radio" /> <Input {...value} {...rest} id={id} type="checkbox" />
<Label <InputLabel
{...rest}
htmlFor={id} htmlFor={id}
error={rest.error} error={rest.error}
warning={rest.warning} warning={rest.warning}
success={rest.success} success={rest.success}
> />
{children} <Label {...rest}> {children}</Label>
</Label>
<Background className="background" />
</InputContainer> </InputContainer>
</Li>
); );
}; };
@ -155,5 +149,3 @@ const Toggle = ({ children, ...rest }) => (
); );
export default Toggle; export default Toggle;
export const ToggleList = Baseline(Ul);

View File

@ -1,9 +1,34 @@
```
#### Checkbox > Default
```jsx
const React = require('react'); const React = require('react');
const { default: FormGroup } = require('./group'); const { default: FormGroup } = require('./group');
const { default: Label } = require('./label'); const { default: Label } = require('./label');
const { FormLabel } = require('./');
<FormGroup name="test"> <FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
<Checkbox>
<Label>Detailed explanations</Label>
</Checkbox>
<Checkbox>
<Label>Tips and tricks</Label>
</Checkbox>
<Checkbox>
<Label>Hints</Label>
</Checkbox>
</FormGroup>
```
#### Checkbox > Active/Focused
```jsx
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel } = require('./');
<FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
<Checkbox checked> <Checkbox checked>
<Label>Detailed explanations</Label> <Label>Detailed explanations</Label>
</Checkbox> </Checkbox>
@ -13,44 +38,51 @@ const { default: Label } = require('./label');
<Checkbox> <Checkbox>
<Label>Hints</Label> <Label>Hints</Label>
</Checkbox> </Checkbox>
</FormGroup>
```
#### Checkbox > Disabled
```jsx
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel } = require('./');
<FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
<Checkbox disabled> <Checkbox disabled>
<Label>How to</Label> <Label>Detailed explanations</Label>
</Checkbox>
<Checkbox disabled>
<Label>Tips and tricks</Label>
</Checkbox>
<Checkbox disabled>
<Label>Hints</Label>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>
``` ```
#### Checkbox input validation #### Checkbox > Error
``` ```jsx
const React = require('react'); const React = require('react');
const { default: FormMeta } = require('./meta'); const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group'); const { default: FormGroup } = require('./group');
const { default: Label } = require('./label'); const { default: Label } = require('./label');
const { FormLabel } = require('./');
<div> <FormGroup name="test">
<FormGroup> <FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
<Checkbox checked success>
<Label>Check this out!</Label>
<FormMeta left success>
Everything looks great
</FormMeta>
</Checkbox>
</FormGroup>
<FormGroup>
<Checkbox checked warning>
<Label>Check this out!</Label>
<FormMeta left warning>
Are you sure ?
</FormMeta>
</Checkbox>
</FormGroup>
<FormGroup>
<Checkbox error checked> <Checkbox error checked>
<Label>Check this out!</Label> <Label>Detailed explanations</Label>
<FormMeta left error> </Checkbox>
<Checkbox checked>
<Label>Tips and tricks</Label>
</Checkbox>
<Checkbox>
<Label>Hints</Label>
</Checkbox>
<FormMeta error>
Somethings missing Somethings missing
</FormMeta> </FormMeta>
</Checkbox> </FormGroup>
</FormGroup>
</div>
``` ```

View File

@ -1,12 +1,39 @@
#### Radio > Default
```jsx ```jsx
const React = require('react'); const React = require('react');
const { default: Radio, RadioList } = require('./radio'); const { default: Radio, RadioList } = require('./radio');
const { default: FormGroup } = require('./group'); const { default: FormGroup } = require('./group');
const { default: Label } = require('./label'); const { default: Label } = require('./label');
const { default: Legend } = require('./legend'); const { default: Legend } = require('./legend');
const { FormLabel } = require('./');
<FormGroup name="who-killed"> <FormGroup name="who-killed">
<Legend>Who killed the radio star?</Legend> <FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
<RadioList>
<Radio name="one" value="video">
<Label>Video</Label>
</Radio>
<Radio name="one" value="tv">
<Label>TV</Label>
</Radio>
<Radio name="one" value="netflix">
<Label>Netflix</Label>
</Radio>
</RadioList>
</FormGroup>;
```
#### Checkbox > Active/Focused
```jsx
const React = require('react');
const { default: Radio, RadioList } = require('./radio');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Legend } = require('./legend');
const { FormLabel } = require('./');
<FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
<RadioList> <RadioList>
<Radio name="one" value="video" checked> <Radio name="one" value="video" checked>
<Label>Video</Label> <Label>Video</Label>
@ -14,74 +41,63 @@ const { default: Legend } = require('./legend');
<Radio name="one" value="tv"> <Radio name="one" value="tv">
<Label>TV</Label> <Label>TV</Label>
</Radio> </Radio>
<Radio disabled name="one" value="netflix"> <Radio name="one" value="netflix">
<Label>Netflix</Label> <Label>Netflix</Label>
</Radio> </Radio>
</RadioList> </RadioList>
</FormGroup>; </FormGroup>
``` ```
#### Checkbox > Disabled
```jsx
const React = require('react');
const { default: Radio, RadioList } = require('./radio');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Legend } = require('./legend');
const { FormLabel } = require('./');
<FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
<RadioList>
<Radio name="one" value="video" disabled>
<Label>Video</Label>
</Radio>
<Radio name="one" value="tv" disabled>
<Label>TV</Label>
</Radio>
<Radio name="one" value="netflix" disabled>
<Label>Netflix</Label>
</Radio>
</RadioList>
</FormGroup>
```
#### Radio input validation #### Radio input validation
```jsx ```jsx
const React = require('react'); const React = require('react');
const { default: Radio, RadioList } = require('./radio'); const { default: Radio, RadioList } = require('./radio');
const { default: FormGroup } = require('./group'); const { default: FormGroup } = require('./group');
const { default: Legend } = require('./legend');
const { default: FormMeta } = require('./meta');
const { default: Label } = require('./label'); const { default: Label } = require('./label');
const { default: Legend } = require('./legend');
const { FormLabel } = require('./');
const { default: FormMeta } = require('./meta');
<div> <FormGroup name="test">
<FormGroup name="who-killed"> <FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel>
<Legend>Who killed the radio star?</Legend>
<RadioList> <RadioList>
<Radio name="two" success value="video"> <Radio name="one" value="video" error>
<Label>Video</Label> <Label>Video</Label>
</Radio> </Radio>
<Radio name="two" success checked value="tv"> <Radio name="one" value="tv" error>
TV <Label>TV</Label>
</Radio> </Radio>
<Radio name="two" success value="netflix"> <Radio name="one" value="netflix" error>
Netflix <Label>Netflix</Label>
</Radio> </Radio>
</RadioList> </RadioList>
<FormMeta left success> <FormMeta error>
You are the best ! Somethings missing
</FormMeta> </FormMeta>
</FormGroup> </FormGroup>
<FormGroup name="who-killed">
<Legend>Who killed the radio star?</Legend>
<RadioList>
<Radio name="three" warning checked value="video">
<Label>Video</Label>
</Radio>
<Radio name="three" warning value="tv">
TV
</Radio>
<Radio name="three" warning value="netflix">
Netflix
</Radio>
</RadioList>
<FormMeta left warning>
Are you sure ?
</FormMeta>
</FormGroup>
<FormGroup name="who-killed">
<Legend>Who killed the radio star?</Legend>
<RadioList>
<Radio name="four" error value="video">
<Label>Video</Label>
</Radio>
<Radio name="four" error value="tv">
TV
</Radio>
<Radio name="four" error value="netflix">
Netflix
</Radio>
</RadioList>
<FormMeta error left>
You need to select one
</FormMeta>
</FormGroup>
</div>;
``` ```

View File

@ -6,13 +6,9 @@ const { default: Legend } = require('./legend');
const { default: Toggle } = require('./toggle'); const { default: Toggle } = require('./toggle');
<FormGroup name="who-killed-1"> <FormGroup name="who-killed-1">
<Legend>Who killed the radio star?</Legend> <Toggle value="video">
<ToggleList>
<Toggle value="video" checked>
Video Video
</Toggle> </Toggle>
<Toggle value="tv">TV</Toggle>
</ToggleList>
</FormGroup>; </FormGroup>;
``` ```
@ -26,10 +22,6 @@ const { default: Legend } = require('./legend');
const { default: Toggle } = require('./toggle'); const { default: Toggle } = require('./toggle');
<FormGroup name="who-killed-2" disabled> <FormGroup name="who-killed-2" disabled>
<Legend>Who killed the radio star?</Legend> <Toggle value="video" disabled>Video</Toggle>
<ToggleList>
<Toggle value="video">Video</Toggle>
<Toggle value="tv">TV</Toggle>
</ToggleList>
</FormGroup>; </FormGroup>;
``` ```

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import is from 'styled-is';
import { H2 } from '../text/headings'; import { H2 } from '../text/headings';
@ -9,6 +10,12 @@ const Brand = H2.extend`
color: ${props => props.theme.white}; color: ${props => props.theme.white};
font-size: ${remcalc(29)}; font-size: ${remcalc(29)};
margin: 0 auto; margin: 0 auto;
${is('center')`
display: flex;
align-items: center;
justify-content: center;
`}
`; `;
const Box = styled.div` const Box = styled.div`

View File

@ -1,17 +1,18 @@
``` ```jsx
const React = require('react'); const React = require('react');
const { default: HeaderBrand } = require('./brand.js'); const { default: HeaderBrand } = require('./brand.js');
const { default: HeaderItem } = require('./item.js'); const { default: HeaderItem } = require('./item.js');
const { Anchor: HeaderAnchor } = require('./item.js');
const { default: HeaderNav } = require('./nav.js'); const { default: HeaderNav } = require('./nav.js');
const { Triton, DataCenter, User } = require('../icons'); const { Triton, DataCenter, User } = require('../icons');
<Header> <Header>
<HeaderBrand beta> <HeaderBrand beta center>
<Triton /> <Triton light />
</HeaderBrand> </HeaderBrand>
<HeaderNav> <HeaderNav>
<li> <li>
Compute <HeaderAnchor>Compute</HeaderAnchor>
</li> </li>
</HeaderNav> </HeaderNav>
<HeaderItem> <HeaderItem>

View File

@ -1,4 +1,4 @@
``` ```jsx
const { default: SectionListItem, Anchor } = require('./item'); const { default: SectionListItem, Anchor } = require('./item');
<SectionList> <SectionList>

View File

@ -125,6 +125,7 @@ const BaseTable = styled.table`
const BaseTfoot = styled.tfoot` const BaseTfoot = styled.tfoot`
width: 100%; width: 100%;
background: ${props => props.theme.background};
th:first-child { th:first-child {
border-bottom-left-radius: ${remcalc(4)}; border-bottom-left-radius: ${remcalc(4)};
@ -141,6 +142,7 @@ const BaseTfoot = styled.tfoot`
const BaseThead = styled.thead` const BaseThead = styled.thead`
width: 100%; width: 100%;
background: ${props => props.theme.background};
th:first-child { th:first-child {
border-top-left-radius: ${remcalc(4)}; border-top-left-radius: ${remcalc(4)};
@ -149,10 +151,6 @@ const BaseThead = styled.thead`
th:last-child { th:last-child {
border-top-right-radius: ${remcalc(4)}; border-top-right-radius: ${remcalc(4)};
} }
th {
border-bottom-width: 0;
}
`; `;
const BaseTbody = styled.tbody` const BaseTbody = styled.tbody`
@ -169,6 +167,10 @@ const BaseTbody = styled.tbody`
${is('disabled')` ${is('disabled')`
border-color: ${props => props.theme.grey}; border-color: ${props => props.theme.grey};
`}; `};
tr:first-child td {
border-top: none;
}
`; `;
const BaseTh = styled.th` const BaseTh = styled.th`
@ -207,6 +209,10 @@ const BaseTd = styled.td`
border-right-width: 0; border-right-width: 0;
} }
${is('bold')`
font-weight: bold
`};
${is('selected')` ${is('selected')`
border-color: ${props => props.theme.primary}; border-color: ${props => props.theme.primary};
background-color: rgba(59, 70, 204, 0.05); background-color: rgba(59, 70, 204, 0.05);
@ -335,7 +341,7 @@ export const Tbody = Baseline(({ children, ...rest }) => (
export const Td = Baseline(({ children, ...rest }) => ( export const Td = Baseline(({ children, ...rest }) => (
<Propagate {...rest}> <Propagate {...rest}>
{value => ( {value => (
<BaseTd {...value} name="td"> <BaseTd {...value} {...rest} name="td">
{children} {children}
</BaseTd> </BaseTd>
)} )}

View File

@ -1,3 +1,4 @@
#### Table > Header
```jsx ```jsx
const React = require('react'); const React = require('react');
const remcalc = require('remcalc'); const remcalc = require('remcalc');
@ -9,11 +10,80 @@ const { Dot, Actions } = require('../icons');
<Thead> <Thead>
<Tr> <Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left> <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}> <FormGroup style={{display: 'flex', alignItems: 'center'}}>
<Checkbox /> <Checkbox noMargin/>
</FormGroup> </FormGroup>
</Th> </Th>
<Th sortOrder="asc" showSort left middle actionable> <Th sortOrder="asc" showSort left middle selected actionable>
<span>Name </span>
</Th>
<Th xs="150" left middle actionable>
<span>Status </span>
</Th>
<Th xs="0" sm="160" left middle actionable>
<span>Created </span>
</Th>
<Th xs="0" sm="130" left middle actionable>
<span>Short ID </span>
</Th>
<Th xs="60" padding="0" />
</Tr>
</Thead>
<Tbody/>
</Table>
```
#### Table > Footer
```jsx
const React = require('react');
const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Tfoot, Tr, Th, Td } = require('./');
const { Dot, Actions } = require('../icons');
<Table>
<Tfoot>
<Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup style={{display: 'flex', alignItems: 'center'}}>
<Checkbox noMargin/>
</FormGroup>
</Th>
<Th sortOrder="asc" showSort left middle selected actionable>
<span>Name </span>
</Th>
<Th xs="150" left middle actionable>
<span>Status </span>
</Th>
<Th xs="0" sm="160" left middle actionable>
<span>Created </span>
</Th>
<Th xs="0" sm="130" left middle actionable>
<span>Short ID </span>
</Th>
<Th xs="60" padding="0" />
</Tr>
</Tfoot>
</Table>
```
#### Table > Multiple Selection List
```jsx
const React = require('react');
const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
const { Dot, Actions } = require('../icons');
<Table>
<Thead>
<Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup>
<Checkbox noMargin/>
</FormGroup>
</Th>
<Th sortOrder="asc" showSort left middle selected actionable>
<span>Name </span> <span>Name </span>
</Th> </Th>
<Th xs="150" left middle actionable> <Th xs="150" left middle actionable>
@ -32,11 +102,11 @@ const { Dot, Actions } = require('../icons');
<Tr> <Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left> <Td padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}> <FormGroup paddingTop={remcalc(4)}>
<Checkbox /> <Checkbox noMargin checked/>
</FormGroup> </FormGroup>
</Td> </Td>
<Td middle left> <Td middle left bold>
<a href="/instances/hello">hello</a> percona_high-ram-32_1_snapshot_1
</Td> </Td>
<Td middle left> <Td middle left>
<span> <span>
@ -62,11 +132,11 @@ const { Dot, Actions } = require('../icons');
<Tr> <Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left> <Td padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}> <FormGroup paddingTop={remcalc(4)}>
<Checkbox /> <Checkbox noMargin/>
</FormGroup> </FormGroup>
</Td> </Td>
<Td middle left> <Td middle left bold>
<a href="/instances/world">world</a> percona_high-ram-32_1_snapshot_2
</Td> </Td>
<Td middle left> <Td middle left>
<span> <span>
@ -92,3 +162,89 @@ const { Dot, Actions } = require('../icons');
</Tbody> </Tbody>
</Table>; </Table>;
``` ```
#### Table > Single Selection List
```jsx
const React = require('react');
const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
const { Dot, Actions } = require('../icons');
<Table>
<Thead>
<Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
</Th>
<Th sortOrder="asc" showSort left middle selected actionable>
<span>Name </span>
</Th>
<Th xs="150" left middle actionable>
<span>Status </span>
</Th>
<Th xs="0" sm="160" left middle actionable>
<span>Created </span>
</Th>
<Th xs="0" sm="130" left middle actionable>
<span>Short ID </span>
</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left selected>
<FormGroup paddingTop={remcalc(4)}>
<Radio noMargin checked/>
</FormGroup>
</Td>
<Td middle left bold selected>
percona_high-ram-32_1_snapshot_1
</Td>
<Td middle left selected>
<span>
<Dot
width={remcalc(11)}
height={remcalc(11)}
borderRadius={remcalc(11)}
color="primary"
/>{' '}
Provisioning
</span>
</Td>
<Td xs="0" sm="160" middle left selected>
about 2 months
</Td>
<Td xs="0" sm="130" middle left selected>
<code>2252839</code>
</Td>
</Tr>
<Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup paddingTop={remcalc(4)}>
<Radio noMargin/>
</FormGroup>
</Td>
<Td middle left bold>
percona_high-ram-32_1_snapshot_2
</Td>
<Td middle left>
<span>
<Dot
width={remcalc(11)}
height={remcalc(11)}
borderRadius={remcalc(11)}
color="green"
/>{' '}
Running
</span>
</Td>
<Td xs="0" sm="160" middle left>
about 1 hour
</Td>
<Td xs="0" sm="130" middle left>
<code>6739567</code>
</Td>
</Tr>
</Tbody>
</Table>;
```

View File

@ -98,74 +98,3 @@ const Label = require('/').Label;
native applications native applications
</Label>; </Label>;
``` ```
### Anchors
Links in the toolkit are named `Anchor`. This is to avoid confusion with `Link`,
which is a
[React Router routing link](http://knowbody.github.io/react-router-docs/api/Link.html).
#### Primary
Primary anchor is a type of a link that sits outside the body text.
```
const React = require('react');
const Anchor = require('/').Anchor;
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
```
#### Reversed
Reversed anchors is used on dark backgrounds, where a default anchor would not
provide enough contrast.
```jsx
const React = require('react');
const Anchor = require('/').Anchor;
<span
style={{
'background-color': '#3B46CC',
height: 80,
width: 250,
display: 'flex',
'align-items': 'center',
'justify-content': 'center'
}}
>
<Anchor href="https://joyent.com" reversed>
Inspire the lazy secondary
</Anchor>
</span>;
```
#### In text anchor
In-paragraph anchor is a link that sits inside a text components. The default
state does not have an underline. The underline appears on hover and click.
```jsx
const React = require('react');
const Anchor = require('/').Anchor;
<p>
Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
momma's back. When a problem comes along.You must whip it.
<Anchor href="#">Learn More</Anchor>
</p>;
```
#### Disabled
Disabled anchors cannot be actioned and the cursor is disabled.
```jsx
const React = require('react');
const Anchor = require('/').Anchor;
<Anchor disabled href="https://joyent.com">
Inspire the lazy disabled
</Anchor>;
```

View File

@ -52,10 +52,6 @@ module.exports = {
name: 'Typography', name: 'Typography',
content: 'src/text/Readme.md' content: 'src/text/Readme.md'
}, },
{
name: 'Baseline',
content: 'src/baseline/readme.md'
},
{ {
name: 'Colors', name: 'Colors',
content: 'src/theme/colors.md' content: 'src/theme/colors.md'
@ -69,10 +65,9 @@ module.exports = {
{ {
name: 'Components', name: 'Components',
components: () => [ components: () => [
'src/card/card.js',
'src/table/index.js',
'src/breadcrumb/index.js', 'src/breadcrumb/index.js',
'src/button/index.js', 'src/button/index.js',
'src/card/card.js',
'src/form/checkbox.js', 'src/form/checkbox.js',
'src/header/index.js', 'src/header/index.js',
'src/form/input.js', 'src/form/input.js',
@ -82,6 +77,7 @@ module.exports = {
'src/form/radio.js', 'src/form/radio.js',
'src/section-list/index.js', 'src/section-list/index.js',
'src/form/select.js', 'src/form/select.js',
'src/table/index.js',
'src/form/toggle.js', 'src/form/toggle.js',
'src/tooltip/index.js' 'src/tooltip/index.js'
] ]

View File

@ -8725,7 +8725,7 @@ react-styled-flexboxgrid@^2.1.1:
dependencies: dependencies:
lodash.isinteger "^4.0.4" lodash.isinteger "^4.0.4"
react-styleguidist@^6.0.33: react-styleguidist@^6.0.31:
version "6.0.33" version "6.0.33"
resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.33.tgz#3025d9b5d47ad6a83bdbed571e3146d8c5ce8bbf" resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.0.33.tgz#3025d9b5d47ad6a83bdbed571e3146d8c5ce8bbf"
dependencies: dependencies: