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

style: lint and format

Browse Source
This commit is contained in:
Sérgio Ramos 2017-12-15 14:53:59 +00:00
parent 890e093656
commit 1a2b278c32
21 changed files with 176 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/my-joy-beta/src/components/instances/__tests__/tags.js
View File

@ -5,7 +5,6 @@ import 'jest-styled-components';
import Tags from '../tags'; import Tags from '../tags';
it('renders <Tags /> without throwing', () => { it('renders <Tags /> without throwing', () => {
const tree = renderer const tree = renderer
.create( .create(

13
packages/my-joy-beta/src/components/instances/home.js
View File

@ -249,11 +249,13 @@ export default withTheme(
disabled={instance.state === 'PROVISIONING'} disabled={instance.state === 'PROVISIONING'}
onClick={() => onAction('delete')} onClick={() => onAction('delete')}
> >
<DeleteIcon fill={theme.red} disabled={instance.state === 'PROVISIONING'} /> <DeleteIcon
fill={theme.red}
disabled={instance.state === 'PROVISIONING'}
/>
<Padding left={1}>Delete</Padding> <Padding left={1}>Delete</Padding>
</Button> </Button>
</FlexEnd> </FlexEnd>
</Flex>
<Margin bottom={5} top={4}> <Margin bottom={5} top={4}>
<Divider height={remcalc(1)} /> <Divider height={remcalc(1)} />
</Margin> </Margin>
@ -263,13 +265,16 @@ export default withTheme(
{instance.image && ( {instance.image && (
<CopiableField text={instance.image.id} label="Image UUID" /> <CopiableField text={instance.image.id} label="Image UUID" />
)} )}
<CopiableField text={`$ ssh root@${instance.primary_ip}`} label="Login" /> <CopiableField
text={`$ ssh root@${instance.primary_ip}`}
label="Login"
/>
{instance.ips.map((ip, i) => ( {instance.ips.map((ip, i) => (
<CopiableField <CopiableField
text={`$ ssh root@${instance.primary_ip}`} text={`$ ssh root@${instance.primary_ip}`}
label="Login" label="Login"
/> />
))}
{instance.ips.map((ip, i) => ( {instance.ips.map((ip, i) => (
<CopiableField <CopiableField
key={i} key={i}

3
packages/ui-toolkit/src/baseline/readme.md
View File

@ -1,7 +1,6 @@
In the mockups, the spacing between elements is done through a baseline grid. In the mockups, the spacing between elements is done through a baseline grid.
What that means is that spacing is measured in `units` over a `base`. I.e. `1.5 What that means is that spacing is measured in `units` over a `base`. I.e. `1.5 unit` where the base is `6px` corresponds to `9px`.
unit` where the base is `6px` corresponds to `9px`.
{insert image from sketch} {insert image from sketch}

17
packages/ui-toolkit/src/button/Readme.md
View File

@ -1,4 +1,5 @@
#### Primary Button #### Primary Button
Primary button to be used once per page. Only use to indicate main action per pattern. Primary button to be used once per page. Only use to indicate main action per pattern.
Min. width: 120px Min. width: 120px
@ -12,6 +13,7 @@ const { default: Button } = require('./');
``` ```
#### Secondary Button #### Secondary Button
Secondary buttons can be used freely to indicate other actions on patterns. Secondary buttons can be used freely to indicate other actions on patterns.
Min. width: 120px Min. width: 120px
@ -25,6 +27,7 @@ const { default: Button } = require('./');
``` ```
#### Disabled Button #### Disabled Button
Disabled buttons can be used freely to indicate that no action is permitted in this button. Disabled buttons can be used freely to indicate that no action is permitted in this button.
Min. width: 120px Min. width: 120px
@ -33,11 +36,14 @@ const React = require('react');
const { default: Button } = require('./'); const { default: Button } = require('./');
<span> <span>
<Button secondary disabled>Inspire the brave</Button> <Button secondary disabled>
Inspire the brave
</Button>
</span>; </span>;
``` ```
#### Small Button #### Small Button
Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space. Small buttons are supporters of the secondary button. They can be used within cluttered or complex patterns to free up space.
```jsx ```jsx
@ -45,7 +51,9 @@ const React = require('react');
const { default: Button } = require('./'); const { default: Button } = require('./');
<span> <span>
<Button secondary small>Inspire the brave</Button> <Button secondary small>
Inspire the brave
</Button>
</span>; </span>;
``` ```
@ -63,6 +71,7 @@ const { default: Button } = require('./');
``` ```
#### Quick Action #### 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 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 ```jsx
@ -76,7 +85,7 @@ const { Actions } = require('../icons');
<Button secondary icon rect disabled> <Button secondary icon rect disabled>
<Actions /> <Actions />
</Button> </Button>
</span> </span>;
``` ```
#### Primary #### Primary
@ -87,7 +96,7 @@ Primary anchor is a type of a link that sits outside the body text.
const React = require('react'); const React = require('react');
const Anchor = require('../text').Anchor; const Anchor = require('../text').Anchor;
<Anchor href="https://joyent.com">Inspire the lazy</Anchor> <Anchor href="https://joyent.com">Inspire the lazy</Anchor>;
``` ```
#### Reversed #### Reversed

2
packages/ui-toolkit/src/button/index.js
View File

@ -256,7 +256,7 @@ Button.propTypes = {
/** /**
* Set to true to show loading animation * Set to true to show loading animation
*/ */
loading: PropTypes.bool, loading: PropTypes.bool
}; };
Button.defaultProps = { Button.defaultProps = {

12
packages/ui-toolkit/src/card/demo.md
View File

@ -403,18 +403,22 @@ const { Health, Actions, DataCenter } = require('../icons');
<H4>Nginx</H4> <H4>Nginx</H4>
</Col> </Col>
<Col xs={5} sm={3}> <Col xs={5} sm={3}>
<P style={{ <P
style={{
display: 'flex', display: 'flex',
alignItems: 'center' alignItems: 'center'
}}> }}
>
<Health healthy /> Healthy <Health healthy /> Healthy
</P> </P>
</Col> </Col>
<Col xs={5} sm={3}> <Col xs={5} sm={3}>
<P style={{ <P
style={{
display: 'flex', display: 'flex',
alignItems: 'center' alignItems: 'center'
}}> }}
>
<DataCenter /> eu-ams-1 <DataCenter /> eu-ams-1
</P> </P>
</Col> </Col>

2
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -116,7 +116,7 @@ const InnerContainer = styled.div`
cursor: pointer; cursor: pointer;
${isNot('noMargin')` ${isNot('noMargin')`
margin-bottom: ${remcalc(12)}; margin-bottom: ${remcalc(12)};
`} `};
`; `;
const Container = styled.div` const Container = styled.div`

33
packages/ui-toolkit/src/form/usage-checkbox.md
View File

@ -1,13 +1,13 @@
#### Checkbox > Default #### Checkbox > Default
```jsx ```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('./'); const { FormLabel, Checkbox } = require('./');
<FormGroup name="test"> <FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel> <FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
<Checkbox> <Checkbox>
<Label>Detailed explanations</Label> <Label>Detailed explanations</Label>
</Checkbox> </Checkbox>
@ -17,18 +17,19 @@ const { FormLabel } = require('./');
<Checkbox> <Checkbox>
<Label>Hints</Label> <Label>Hints</Label>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>;
``` ```
#### Checkbox > Active/Focused #### Checkbox > Active/Focused
```jsx ```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('./'); const { FormLabel, Checkbox } = require('./');
<FormGroup name="test"> <FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel> <FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
<Checkbox checked> <Checkbox checked>
<Label>Detailed explanations</Label> <Label>Detailed explanations</Label>
</Checkbox> </Checkbox>
@ -38,17 +39,19 @@ const { FormLabel } = require('./');
<Checkbox> <Checkbox>
<Label>Hints</Label> <Label>Hints</Label>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>;
``` ```
#### Checkbox > Disabled #### Checkbox > Disabled
```jsx ```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('./'); const { FormLabel, Checkbox } = require('./');
<FormGroup name="test"> <FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel> <FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
<Checkbox disabled> <Checkbox disabled>
<Label>Detailed explanations</Label> <Label>Detailed explanations</Label>
</Checkbox> </Checkbox>
@ -58,7 +61,7 @@ const { FormLabel } = require('./');
<Checkbox disabled> <Checkbox disabled>
<Label>Hints</Label> <Label>Hints</Label>
</Checkbox> </Checkbox>
</FormGroup> </FormGroup>;
``` ```
#### Checkbox > Error #### Checkbox > Error
@ -68,10 +71,10 @@ 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('./'); const { FormLabel, Checkbox } = require('./');
<FormGroup name="test"> <FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel> <FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
<Checkbox error checked> <Checkbox error checked>
<Label>Detailed explanations</Label> <Label>Detailed explanations</Label>
</Checkbox> </Checkbox>
@ -81,8 +84,6 @@ const { FormLabel } = require('./');
<Checkbox> <Checkbox>
<Label>Hints</Label> <Label>Hints</Label>
</Checkbox> </Checkbox>
<FormMeta error> <FormMeta error>Something’s missing</FormMeta>
Something’s missing </FormGroup>;
</FormMeta>
</FormGroup>
``` ```

34
packages/ui-toolkit/src/form/usage-radio.md
View File

@ -5,11 +5,12 @@ 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 { FormLabel } = require('./'); const { FormLabel } = require('./');
<FormGroup name="who-killed"> <FormGroup name="who-killed">
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel> <FormLabel style={{ marginBottom: '12px' }}>
Who killed the radio star?
</FormLabel>
<RadioList> <RadioList>
<Radio name="one" value="video"> <Radio name="one" value="video">
<Label>Video</Label> <Label>Video</Label>
@ -23,17 +24,20 @@ const { FormLabel } = require('./');
</RadioList> </RadioList>
</FormGroup>; </FormGroup>;
``` ```
#### Checkbox > Active/Focused #### Checkbox > Active/Focused
```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 { FormLabel } = require('./'); const { FormLabel } = require('./');
<FormGroup name="test"> <FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel> <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>
@ -45,20 +49,22 @@ const { FormLabel } = require('./');
<Label>Netflix</Label> <Label>Netflix</Label>
</Radio> </Radio>
</RadioList> </RadioList>
</FormGroup> </FormGroup>;
``` ```
#### Checkbox > Disabled #### Checkbox > Disabled
```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 { FormLabel } = require('./'); const { FormLabel } = require('./');
<FormGroup name="test"> <FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel> <FormLabel style={{ marginBottom: '12px' }}>
Who killed the radio star?
</FormLabel>
<RadioList> <RadioList>
<Radio name="one" value="video" disabled> <Radio name="one" value="video" disabled>
<Label>Video</Label> <Label>Video</Label>
@ -70,8 +76,9 @@ const { FormLabel } = require('./');
<Label>Netflix</Label> <Label>Netflix</Label>
</Radio> </Radio>
</RadioList> </RadioList>
</FormGroup> </FormGroup>;
``` ```
#### Radio input validation #### Radio input validation
```jsx ```jsx
@ -79,12 +86,13 @@ 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 { FormLabel } = require('./'); const { FormLabel } = require('./');
const { default: FormMeta } = require('./meta'); const { default: FormMeta } = require('./meta');
<FormGroup name="test"> <FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Who killed the radio star?</FormLabel> <FormLabel style={{ marginBottom: '12px' }}>
Who killed the radio star?
</FormLabel>
<RadioList> <RadioList>
<Radio name="one" value="video" error> <Radio name="one" value="video" error>
<Label>Video</Label> <Label>Video</Label>
@ -96,8 +104,6 @@ const { default: FormMeta } = require('./meta');
<Label>Netflix</Label> <Label>Netflix</Label>
</Radio> </Radio>
</RadioList> </RadioList>
<FormMeta error> <FormMeta error>Something’s missing</FormMeta>
Something’s missing </FormGroup>;
</FormMeta>
</FormGroup>
``` ```

2
packages/ui-toolkit/src/form/usage-select.md
View File

@ -13,7 +13,7 @@ const { default: FormGroup } = require('./group');
<option>Seoul, South Korea</option> <option>Seoul, South Korea</option>
<option>Tokyo, Japan</option> <option>Tokyo, Japan</option>
</Select> </Select>
</FormGroup> </FormGroup>;
``` ```
#### Select > Disabled #### Select > Disabled

12
packages/ui-toolkit/src/form/usage-toggle.md
View File

@ -1,14 +1,10 @@
```jsx ```jsx
const React = require('react'); const React = require('react');
const { ToggleList } = require('./toggle');
const { default: FormGroup } = require('./group'); const { default: FormGroup } = require('./group');
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">
<Toggle value="video"> <Toggle value="video">Video</Toggle>
Video
</Toggle>
</FormGroup>; </FormGroup>;
``` ```
@ -16,12 +12,12 @@ const { default: Toggle } = require('./toggle');
```jsx ```jsx
const React = require('react'); const React = require('react');
const { ToggleList } = require('./toggle');
const { default: FormGroup } = require('./group'); const { default: FormGroup } = require('./group');
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>
<Toggle value="video" disabled>Video</Toggle> <Toggle value="video" disabled>
Video
</Toggle>
</FormGroup>; </FormGroup>;
``` ```

2
packages/ui-toolkit/src/header/brand.js
View File

@ -15,7 +15,7 @@ const Brand = H2.extend`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
`} `};
`; `;
const Box = styled.div` const Box = styled.div`

7
packages/ui-toolkit/src/header/usage.md
View File

@ -5,6 +5,7 @@ const { default: HeaderItem } = require('./item.js');
const { Anchor: HeaderAnchor } = 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');
const { default: Header } = require('./index');
<Header> <Header>
<HeaderBrand beta center> <HeaderBrand beta center>
@ -15,14 +16,12 @@ const { Triton, DataCenter, User } = require('../icons');
<HeaderAnchor>Compute</HeaderAnchor> <HeaderAnchor>Compute</HeaderAnchor>
</li> </li>
</HeaderNav> </HeaderNav>
<HeaderItem> <HeaderItem>Return to existing portal</HeaderItem>
Return to existing portal
</HeaderItem>
<HeaderItem> <HeaderItem>
<DataCenter light />eu-east-1 <DataCenter light />eu-east-1
</HeaderItem> </HeaderItem>
<HeaderItem> <HeaderItem>
<User light />Nicola <User light />Nicola
</HeaderItem> </HeaderItem>
</Header> </Header>;
``` ```

28
packages/ui-toolkit/src/section-list/usage.md
View File

@ -1,36 +1,26 @@
```jsx ```jsx
const React = require('react');
const { default: SectionListItem, Anchor } = require('./item'); const { default: SectionListItem, Anchor } = require('./item');
const { default: SectionList } = require('./');
<SectionList> <SectionList>
<SectionListItem> <SectionListItem>
<Anchor active> <Anchor active>Overview</Anchor>
Overview
</Anchor>
</SectionListItem> </SectionListItem>
<SectionListItem> <SectionListItem>
<Anchor> <Anchor>Services</Anchor>
Services
</Anchor>
</SectionListItem> </SectionListItem>
<SectionListItem> <SectionListItem>
<Anchor> <Anchor>Instances</Anchor>
Instances
</Anchor>
</SectionListItem> </SectionListItem>
<SectionListItem> <SectionListItem>
<Anchor> <Anchor>Versions</Anchor>
Versions
</Anchor>
</SectionListItem> </SectionListItem>
<SectionListItem> <SectionListItem>
<Anchor> <Anchor>Manifest</Anchor>
Manifest
</Anchor>
</SectionListItem> </SectionListItem>
<SectionListItem> <SectionListItem>
<Anchor> <Anchor>Settings</Anchor>
Settings
</Anchor>
</SectionListItem> </SectionListItem>
</SectionList> </SectionList>;
``` ```

2
packages/ui-toolkit/src/styleguide/renderer.js
View File

@ -18,6 +18,8 @@ const Sticky = styled.div`
${is('sidebar')` ${is('sidebar')`
top: ${remcalc(100)}; top: ${remcalc(100)};
max-height: 85vh;
overflow: auto;
`}; `};
`; `;

13
packages/ui-toolkit/src/styleguide/section.js
View File

@ -32,14 +32,7 @@ const Main = styled.div`
`; `;
export default allProps => { export default allProps => {
const { const { name, content, components, sections, depth, description } = allProps;
name,
content,
components,
sections,
depth,
description
} = allProps;
const Tag = depth === 2 ? CardStyled : 'div'; const Tag = depth === 2 ? CardStyled : 'div';
const TagMain = depth === 2 ? Main : 'div'; const TagMain = depth === 2 ? Main : 'div';
@ -49,9 +42,7 @@ export default allProps => {
depth !== 1 && ( depth !== 1 && (
<Header> <Header>
<H2 style={{ color: 'white' }}>{name}</H2> <H2 style={{ color: 'white' }}>{name}</H2>
{description && ( {description && <P style={{ color: 'white' }}>{description}</P>}
<P style={{ color: 'white' }}>{description}</P>
)}
</Header> </Header>
)} )}
<TagMain> <TagMain>

8
packages/ui-toolkit/src/styleguide/sectionHeading.js
View File

@ -41,14 +41,14 @@ function HeadingRenderer({ classes, level, children, ...props }) {
const Tag = `h${level}`; const Tag = `h${level}`;
const headingClasses = cx(classes.heading, classes[`heading${level}`]); const headingClasses = cx(classes.heading, classes[`heading${level}`]);
const Heading = level === 1 ? null : ( const Heading =
level === 1 ? null : (
<Tag {...props} className={headingClasses}> <Tag {...props} className={headingClasses}>
{children} {children}
</Tag> </Tag>
) );
return Heading;
return Heading
} }
const Heading = Styled(styles)(HeadingRenderer); const Heading = Styled(styles)(HeadingRenderer);

4
packages/ui-toolkit/src/styleguide/wrapper.js
View File

@ -14,9 +14,7 @@ const StyledBase = Base.extend`
export default ({ children }) => ( export default ({ children }) => (
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<StyledBase> <StyledBase>
<RootContainer> <RootContainer>{children}</RootContainer>
{children}
</RootContainer>
</StyledBase> </StyledBase>
</ThemeProvider> </ThemeProvider>
); );

47
packages/ui-toolkit/src/table/usage.md
View File

@ -1,17 +1,17 @@
#### Header #### Header
```jsx ```jsx
const React = require('react'); const React = require('react');
const remcalc = require('remcalc'); const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form'); const { FormGroup, Checkbox } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./'); const { default: Table, Thead, Tr, Th, Tbody } = require('./');
const { Dot, Actions } = require('../icons');
<Table> <Table>
<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 style={{display: 'flex', alignItems: 'center'}}> <FormGroup style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox noMargin/> <Checkbox noMargin />
</FormGroup> </FormGroup>
</Th> </Th>
<Th sortOrder="asc" showSort left middle selected actionable> <Th sortOrder="asc" showSort left middle selected actionable>
@ -26,24 +26,24 @@ const { Dot, Actions } = require('../icons');
<Th xs="60" padding="0" /> <Th xs="60" padding="0" />
</Tr> </Tr>
</Thead> </Thead>
<Tbody/> <Tbody />
</Table> </Table>;
``` ```
#### Footer
#### Footer
```jsx ```jsx
const React = require('react'); const React = require('react');
const remcalc = require('remcalc'); const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form'); const { FormGroup, Checkbox } = require('../form');
const { default: Table, Tfoot, Tr, Th, Td } = require('./'); const { default: Table, Tfoot, Tr, Th } = require('./');
const { Dot, Actions } = require('../icons');
<Table> <Table>
<Tfoot> <Tfoot>
<Tr> <Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left> <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup style={{display: 'flex', alignItems: 'center'}}> <FormGroup style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox noMargin/> <Checkbox noMargin />
</FormGroup> </FormGroup>
</Th> </Th>
<Th sortOrder="asc" showSort left middle selected actionable> <Th sortOrder="asc" showSort left middle selected actionable>
@ -58,10 +58,11 @@ const { Dot, Actions } = require('../icons');
<Th xs="60" padding="0" /> <Th xs="60" padding="0" />
</Tr> </Tr>
</Tfoot> </Tfoot>
</Table> </Table>;
``` ```
#### Multiple Selection List #### Multiple Selection List
```jsx ```jsx
const React = require('react'); const React = require('react');
const remcalc = require('remcalc'); const remcalc = require('remcalc');
@ -74,7 +75,7 @@ const { Dot, Actions } = require('../icons');
<Tr> <Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left> <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left>
<FormGroup> <FormGroup>
<Checkbox noMargin/> <Checkbox noMargin />
</FormGroup> </FormGroup>
</Th> </Th>
<Th sortOrder="asc" showSort left middle selected actionable> <Th sortOrder="asc" showSort left middle selected actionable>
@ -93,7 +94,7 @@ 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 noMargin checked/> <Checkbox noMargin checked />
</FormGroup> </FormGroup>
</Td> </Td>
<Td middle left bold> <Td middle left bold>
@ -120,7 +121,7 @@ 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 noMargin/> <Checkbox noMargin />
</FormGroup> </FormGroup>
</Td> </Td>
<Td middle left bold> <Td middle left bold>
@ -149,18 +150,18 @@ const { Dot, Actions } = require('../icons');
``` ```
#### Single Selection List #### Single Selection List
```jsx ```jsx
const React = require('react'); const React = require('react');
const remcalc = require('remcalc'); const remcalc = require('remcalc');
const { FormGroup, Checkbox } = require('../form'); const { FormGroup, Radio } = require('../form');
const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./'); const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
const { Dot, Actions } = require('../icons'); const { Dot } = require('../icons');
<Table> <Table>
<Thead> <Thead>
<Tr> <Tr>
<Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left> <Th xs="32" padding="0" paddingLeft={remcalc(12)} middle left />
</Th>
<Th sortOrder="asc" showSort left middle selected actionable> <Th sortOrder="asc" showSort left middle selected actionable>
<span>Name </span> <span>Name </span>
</Th> </Th>
@ -176,7 +177,7 @@ const { Dot, Actions } = require('../icons');
<Tr> <Tr>
<Td padding="0" paddingLeft={remcalc(12)} middle left selected> <Td padding="0" paddingLeft={remcalc(12)} middle left selected>
<FormGroup paddingTop={remcalc(4)}> <FormGroup paddingTop={remcalc(4)}>
<Radio noMargin checked/> <Radio noMargin checked />
</FormGroup> </FormGroup>
</Td> </Td>
<Td middle left bold selected> <Td middle left bold selected>
@ -200,7 +201,7 @@ 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)}>
<Radio noMargin/> <Radio noMargin />
</FormGroup> </FormGroup>
</Td> </Td>
<Td middle left bold> <Td middle left bold>

42
packages/ui-toolkit/src/text/Readme.md
View File

@ -10,7 +10,7 @@ const P = require('/').P;
const Small = require('/').Small; const Small = require('/').Small;
const styles = { const styles = {
color: "#979797", color: '#979797',
marginBottom: '22px', marginBottom: '22px',
display: 'block', display: 'block',
marginTop: '6px', marginTop: '6px',
@ -18,31 +18,17 @@ const styles = {
}; };
<div> <div>
<H1>H1 - Don’t say it, shout it</H1> <H1>H1 - Don’t say it, shout it</H1>
<Small style={styles}> <Small style={styles}>Libre Franklin Regular - 36px with 45px leading</Small>
Libre Franklin Regular - 36px with 45px leading <H2>H2 - Breadcrumb? More like breadloaf</H2>
</Small> <Small style={styles}>Libre Franklin Regular - 24px with 30px leading</Small>
<H2>H2 - Breadcrumb? More like breadloaf</H2> <H3>H3 - Your friendly neighbourhood workhorse</H3>
<Small style={styles}> <Small style={styles}>Libre Franklin Regular - 21px with 26px leading</Small>
Libre Franklin Regular - 24px with 30px leading <H4>H4 - Bodies bigger brother</H4>
</Small> <Small style={styles}>Libre Franklin Semibold - 15px with 24px leading</Small>
<H3>H3 - Your friendly neighbourhood workhorse</H3> <P>P - Body copy</P>
<Small style={styles}> <Small style={styles}>Libre Franklin Regular - 15px with 24px leading</Small>
Libre Franklin Regular - 21px with 26px leading <Small> C - Caption text</Small>
</Small> <Small style={styles}>Libre Franklin Regular - 13px with 18px leadings</Small>
<H4>H4 - Bodies bigger brother</H4> </div>;
<Small style={styles}>
Libre Franklin Semibold - 15px with 24px leading
</Small>
<P>
P - Body copy
</P>
<Small style={styles}>
Libre Franklin Regular - 15px with 24px leading
</Small>
<Small> C - Caption text</Small>
<Small style={styles}>
Libre Franklin Regular - 13px with 18px leadings
</Small>
</div>
``` ```