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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -214,7 +214,7 @@ export default withTheme(
disabled={instance.state === 'RUNNING'}
onClick={() => onAction('start')}
>
<StartIcon disabled={instance.state === 'RUNNING'} />
<StartIcon disabled={instance.state === 'RUNNING'} />
<Padding left={1}>Start</Padding>
</Button>
<Button
@ -249,27 +249,32 @@ export default withTheme(
disabled={instance.state === 'PROVISIONING'}
onClick={() => onAction('delete')}
>
<DeleteIcon fill={theme.red} disabled={instance.state === 'PROVISIONING'} />
<DeleteIcon
fill={theme.red}
disabled={instance.state === 'PROVISIONING'}
/>
<Padding left={1}>Delete</Padding>
</Button>
</FlexEnd>
</Flex>
<Margin bottom={5} top={4}>
<Divider height={remcalc(1)} />
</Margin>
<CopiableField text={instance.id.split('-')[0]} label="Short ID" />
<CopiableField text={instance.id} label="ID" />
<CopiableField text={instance.compute_node} label="CN UUID" />
{instance.image && (
<CopiableField text={instance.image.id} label="Image UUID" />
)}
<CopiableField text={`$ ssh root@${instance.primary_ip}`} label="Login" />
{instance.ips.map((ip, i) => (
<Margin bottom={5} top={4}>
<Divider height={remcalc(1)} />
</Margin>
<CopiableField text={instance.id.split('-')[0]} label="Short ID" />
<CopiableField text={instance.id} label="ID" />
<CopiableField text={instance.compute_node} label="CN UUID" />
{instance.image && (
<CopiableField text={instance.image.id} label="Image UUID" />
)}
<CopiableField
text={`$ ssh root@${instance.primary_ip}`}
label="Login"
/>
{instance.ips.map((ip, i) => (
<CopiableField
text={`$ ssh root@${instance.primary_ip}`}
label="Login"
/>
))}
{instance.ips.map((ip, i) => (
<CopiableField
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.
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`.
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`.
{insert image from sketch}

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

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

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

@ -206,7 +206,7 @@ const StyledLink = styled(Link)`
`;
/**
* Buttons are the core of any UI kit, and we are no exception. Here we have documented to most basic variations of the button states, which include but are limited to; Default, Hover, Clicked, and Disabled.
* Buttons are the core of any UI kit, and we are no exception. Here we have documented to most basic variations of the button states, which include but are limited to; Default, Hover, Clicked, and Disabled.
*/
const Button = props => {
const { href = '', to = '', loading = false, secondary } = props;
@ -256,7 +256,7 @@ Button.propTypes = {
/**
* Set to true to show loading animation
*/
loading: PropTypes.bool,
loading: PropTypes.bool
};
Button.defaultProps = {

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

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

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

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

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

@ -1,64 +1,67 @@
#### Checkbox > Default
#### Checkbox > Default
```jsx
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel } = require('./');
const { FormLabel, Checkbox } = require('./');
<FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
<FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
<Checkbox>
<Label>Detailed explanations</Label>
<Label>Detailed explanations</Label>
</Checkbox>
<Checkbox>
<Label>Tips and tricks</Label>
<Label>Tips and tricks</Label>
</Checkbox>
<Checkbox>
<Label>Hints</Label>
<Label>Hints</Label>
</Checkbox>
</FormGroup>
</FormGroup>;
```
#### Checkbox > Active/Focused
#### Checkbox > Active/Focused
```jsx
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel } = require('./');
const { FormLabel, Checkbox } = require('./');
<FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
<FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
<Checkbox checked>
<Label>Detailed explanations</Label>
<Label>Detailed explanations</Label>
</Checkbox>
<Checkbox checked>
<Label>Tips and tricks</Label>
<Label>Tips and tricks</Label>
</Checkbox>
<Checkbox>
<Label>Hints</Label>
<Label>Hints</Label>
</Checkbox>
</FormGroup>
</FormGroup>;
```
#### Checkbox > Disabled
#### Checkbox > Disabled
```jsx
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel } = require('./');
const { FormLabel, Checkbox } = require('./');
<FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
<FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
<Checkbox disabled>
<Label>Detailed explanations</Label>
<Label>Detailed explanations</Label>
</Checkbox>
<Checkbox disabled>
<Label>Tips and tricks</Label>
<Label>Tips and tricks</Label>
</Checkbox>
<Checkbox disabled>
<Label>Hints</Label>
<Label>Hints</Label>
</Checkbox>
</FormGroup>
</FormGroup>;
```
#### Checkbox > Error
@ -68,21 +71,19 @@ const React = require('react');
const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { FormLabel } = require('./');
const { FormLabel, Checkbox } = require('./');
<FormGroup name="test">
<FormLabel style={{marginBottom: '12px'}}>Label name</FormLabel>
<FormLabel style={{ marginBottom: '12px' }}>Label name</FormLabel>
<Checkbox error checked>
<Label>Detailed explanations</Label>
<Label>Detailed explanations</Label>
</Checkbox>
<Checkbox checked>
<Label>Tips and tricks</Label>
<Label>Tips and tricks</Label>
</Checkbox>
<Checkbox>
<Label>Hints</Label>
<Label>Hints</Label>
</Checkbox>
<FormMeta error>
Something’s missing
</FormMeta>
</FormGroup>
<FormMeta error>Something’s missing</FormMeta>
</FormGroup>;
```

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

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

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

@ -1,14 +1,10 @@
```jsx
const React = require('react');
const { ToggleList } = require('./toggle');
const { default: FormGroup } = require('./group');
const { default: Legend } = require('./legend');
const { default: Toggle } = require('./toggle');
<FormGroup name="who-killed-1">
<Toggle value="video">
Video
</Toggle>
<Toggle value="video">Video</Toggle>
</FormGroup>;
```
@ -16,12 +12,12 @@ const { default: Toggle } = require('./toggle');
```jsx
const React = require('react');
const { ToggleList } = require('./toggle');
const { default: FormGroup } = require('./group');
const { default: Legend } = require('./legend');
const { default: Toggle } = require('./toggle');
<FormGroup name="who-killed-2" disabled>
<Toggle value="video" disabled>Video</Toggle>
<Toggle value="video" disabled>
Video
</Toggle>
</FormGroup>;
```

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

@ -15,7 +15,7 @@ const Brand = H2.extend`
display: flex;
align-items: center;
justify-content: center;
`}
`};
`;
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 { default: HeaderNav } = require('./nav.js');
const { Triton, DataCenter, User } = require('../icons');
const { default: Header } = require('./index');
<Header>
<HeaderBrand beta center>
@ -15,14 +16,12 @@ const { Triton, DataCenter, User } = require('../icons');
<HeaderAnchor>Compute</HeaderAnchor>
</li>
</HeaderNav>
<HeaderItem>
Return to existing portal
</HeaderItem>
<HeaderItem>Return to existing portal</HeaderItem>
<HeaderItem>
<DataCenter light />eu-east-1
</HeaderItem>
<HeaderItem>
<User light />Nicola
</HeaderItem>
</Header>
</Header>;
```

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

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

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

@ -18,6 +18,8 @@ const Sticky = styled.div`
${is('sidebar')`
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 => {
const {
name,
content,
components,
sections,
depth,
description
} = allProps;
const { name, content, components, sections, depth, description } = allProps;
const Tag = depth === 2 ? CardStyled : 'div';
const TagMain = depth === 2 ? Main : 'div';
@ -49,9 +42,7 @@ export default allProps => {
depth !== 1 && (
<Header>
<H2 style={{ color: 'white' }}>{name}</H2>
{description && (
<P style={{ color: 'white' }}>{description}</P>
)}
{description && <P style={{ color: 'white' }}>{description}</P>}
</Header>
)}
<TagMain>

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

@ -41,14 +41,14 @@ function HeadingRenderer({ classes, level, children, ...props }) {
const Tag = `h${level}`;
const headingClasses = cx(classes.heading, classes[`heading${level}`]);
const Heading = level === 1 ? null : (
<Tag {...props} className={headingClasses}>
{children}
</Tag>
)
const Heading =
level === 1 ? null : (
<Tag {...props} className={headingClasses}>
{children}
</Tag>
);
return Heading
return Heading;
}
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 }) => (
<ThemeProvider theme={theme}>
<StyledBase>
<RootContainer>
{children}
</RootContainer>
<RootContainer>{children}</RootContainer>
</StyledBase>
</ThemeProvider>
);

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

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

2
packages/ui-toolkit/src/tags/list.js
View File

@ -6,4 +6,4 @@ export default styled.ul`
display: flex;
list-style: none;
flex-wrap: wrap;
`;
`;

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

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