style: lint and format

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

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

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

@@ -249,11 +249,13 @@ 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>
@@ -263,13 +265,16 @@ export default withTheme(
             {instance.image && (
               <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) => (
               <CopiableField
                 text={`$ ssh root@${instance.primary_ip}`}
                 label="Login"
               />
-
+            ))}
             {instance.ips.map((ip, i) => (
               <CopiableField
                 key={i}

packages/ui-toolkit/src/baseline/readme.md

@@ -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}
 

packages/ui-toolkit/src/button/Readme.md

@@ -1,4 +1,5 @@
 #### Primary Button
+
 Primary button to be used once per page. Only use to indicate main action per pattern.
 Min. width: 120px
 
@@ -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
@@ -76,7 +85,7 @@ const { Actions } = require('../icons');
   <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

packages/ui-toolkit/src/button/index.js

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

packages/ui-toolkit/src/card/demo.md

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

packages/ui-toolkit/src/form/base/toggle.js

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

packages/ui-toolkit/src/form/usage-checkbox.md

@@ -1,13 +1,13 @@
-
 #### 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>
   </Checkbox>
@@ -17,18 +17,19 @@ const { FormLabel } = require('./');
   <Checkbox>
     <Label>Hints</Label>
   </Checkbox>
-</FormGroup>
+</FormGroup>;
 ```
 
 #### 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>
   </Checkbox>
@@ -38,17 +39,19 @@ const { FormLabel } = require('./');
   <Checkbox>
     <Label>Hints</Label>
   </Checkbox>
-</FormGroup>
+</FormGroup>;
 ```
+
 #### 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>
   </Checkbox>
@@ -58,7 +61,7 @@ const { FormLabel } = require('./');
   <Checkbox disabled>
     <Label>Hints</Label>
   </Checkbox>
-</FormGroup>
+</FormGroup>;
 ```
 
 #### Checkbox > Error
@@ -68,10 +71,10 @@ 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>
   </Checkbox>
@@ -81,8 +84,6 @@ const { FormLabel } = require('./');
   <Checkbox>
     <Label>Hints</Label>
   </Checkbox>
-  <FormMeta error>
-    Something’s missing
-  </FormMeta>
-</FormGroup>
+  <FormMeta error>Something’s missing</FormMeta>
+</FormGroup>;
 ```

packages/ui-toolkit/src/form/usage-radio.md

@@ -5,11 +5,12 @@ 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
+
 ```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
+
 ```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>;
 ```

packages/ui-toolkit/src/form/usage-select.md

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

packages/ui-toolkit/src/form/usage-toggle.md

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

packages/ui-toolkit/src/header/brand.js

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

packages/ui-toolkit/src/header/usage.md

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

packages/ui-toolkit/src/section-list/usage.md

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

packages/ui-toolkit/src/styleguide/renderer.js

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

packages/ui-toolkit/src/styleguide/section.js

@@ -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>

packages/ui-toolkit/src/styleguide/sectionHeading.js

@@ -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 : (
+  const Heading =
+    level === 1 ? null : (
       <Tag {...props} className={headingClasses}>
         {children}
       </Tag>
-  )
+    );
 
-
-  return Heading
+  return Heading;
 }
 
 const Heading = Styled(styles)(HeadingRenderer);

packages/ui-toolkit/src/styleguide/wrapper.js

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

packages/ui-toolkit/src/table/usage.md

@@ -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>

packages/ui-toolkit/src/text/Readme.md

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