style: lint and format

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

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(

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}

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}

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

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 = {

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>

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`

View File

@ -1,10 +1,10 @@
#### 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>
@ -17,15 +17,16 @@ 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>
@ -38,14 +39,16 @@ 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>
@ -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,7 +71,7 @@ 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>
@ -81,8 +84,6 @@ const { FormLabel } = require('./');
<Checkbox> <Checkbox>
<Label>Hints</Label> <Label>Hints</Label>
</Checkbox> </Checkbox>
<FormMeta error> <FormMeta error>Somethings missing</FormMeta>
Somethings missing </FormGroup>;
</FormMeta>
</FormGroup>
``` ```

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>Somethings missing</FormMeta>
Somethings missing </FormGroup>;
</FormMeta>
</FormGroup>
``` ```

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

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>;
``` ```

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`

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>;
``` ```

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>;
``` ```

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;
`}; `};
`; `;

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>

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);

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>
); );

View File

@ -1,10 +1,10 @@
#### 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>
@ -27,16 +27,16 @@ const { Dot, Actions } = require('../icons');
</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>
@ -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');
@ -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>

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',
@ -19,30 +19,16 @@ const styles = {
<div> <div>
<H1>H1 - Dont say it, shout it</H1> <H1>H1 - Dont 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
</Small>
<H2>H2 - Breadcrumb? More like breadloaf</H2> <H2>H2 - Breadcrumb? More like breadloaf</H2>
<Small style={styles}> <Small style={styles}>Libre Franklin Regular - 24px with 30px leading</Small>
Libre Franklin Regular - 24px with 30px leading
</Small>
<H3>H3 - Your friendly neighbourhood workhorse</H3> <H3>H3 - Your friendly neighbourhood workhorse</H3>
<Small style={styles}> <Small style={styles}>Libre Franklin Regular - 21px with 26px leading</Small>
Libre Franklin Regular - 21px with 26px leading
</Small>
<H4>H4 - Bodies bigger brother</H4> <H4>H4 - Bodies bigger brother</H4>
<Small style={styles}> <Small style={styles}>Libre Franklin Semibold - 15px with 24px leading</Small>
Libre Franklin Semibold - 15px with 24px leading <P>P - Body copy</P>
</Small> <Small style={styles}>Libre Franklin Regular - 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> C - Caption text</Small>
<Small style={styles}> <Small style={styles}>Libre Franklin Regular - 13px with 18px leadings</Small>
Libre Franklin Regular - 13px with 18px leadings </div>;
</Small>
</div>
``` ```