feat(ui-toolkit): components titles should be H3

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

@@ -61,7 +61,7 @@ Whoever required that `<Button />`, will be able to declare any of the
 properties especified above and have the style of the component be applied
 accordingly.
 
-#### examples
+### examples
 
 ```
 const React = require('react');

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

@@ -1,4 +1,4 @@
-#### Primary Button
+### Primary Button
 
 Primary button to be used once per page. Only use to indicate main action per pattern.
 Min. width: 120px
@@ -20,7 +20,7 @@ const { default: Button } = require('./');
 </span>;
 ```
 
-#### Secondary Button
+### Secondary Button
 
 Secondary buttons can be used freely to indicate other actions on patterns.
 Min. width: 120px
@@ -44,7 +44,7 @@ const { default: Button } = require('./');
 </span>;
 ```
 
-#### Loading Button
+### Loading Button
 
 ```jsx
 const React = require('react');
@@ -57,7 +57,7 @@ const { default: Button } = require('./');
 </span>;
 ```
 
-#### Quick Action
+### Quick Action
 
 Quick action buttons can be embedded in components to give additional functionality. They can be used in either primary or secondary color palettes, depending on importance.
 
@@ -83,7 +83,7 @@ const { Actions } = require('../icons');
 </span>;
 ```
 
-#### Primary
+### Primary
 
 Primary anchor is a type of a link that sits outside the body text.
 
@@ -94,7 +94,7 @@ const Anchor = require('../text').Anchor;
 <Anchor href="https://joyent.com">Inspire the lazy</Anchor>;
 ```
 
-#### Disabled
+### Disabled
 
 Disabled anchors cannot be actioned and the cursor is disabled.
 

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

@@ -1,4 +1,4 @@
-#### Icon Button
+### Icon Button
 
 Icon buttons are to be used to illustrate important actions and for when we are redirecting users to seperate services such as Github.
 
@@ -14,7 +14,7 @@ const { StartIcon } = require('../');
 </Button>;
 ```
 
-#### Delete Button
+### Delete Button
 
 The delete button is basically an icon button, however it is coloured red to display the destructive nature of the action.
 
@@ -40,7 +40,7 @@ const { DeleteIcon } = require('../');
 </Button>;
 ```
 
-#### Dropdown Button
+### Dropdown Button
 
 Dropdown Button is to be used when users have choices that are secondary to the one shown as the main action
 
@@ -65,7 +65,7 @@ const { StartIcon } = require('../');
 </ButtonGroup>;
 ```
 
-#### Toggle Switch
+### Toggle Switch
 
 Toggle switch is to be used when users have the choice to turn a service or feature on or off.
 

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

@@ -1,4 +1,4 @@
-#### Basic Card
+### Basic Card
 
 ```jsx
 const React = require('react');
@@ -10,7 +10,7 @@ const { default: Card } = require('.');
 </Card>;
 ```
 
-#### Simple Card Header
+### Simple Card Header
 
 ```jsx
 const React = require('react');
@@ -34,7 +34,7 @@ const { Actions } = require('../icons');
 </Card>;
 ```
 
-#### Inactive Card
+### Inactive Card
 
 ```jsx
 const React = require('react');
@@ -58,7 +58,7 @@ const { Actions } = require('../icons');
 </Card>;
 ```
 
-#### Display-Only Listed Card
+### Display-Only Listed Card
 
 ```jsx
 const React = require('react');
@@ -306,7 +306,7 @@ const { Fragment } = React;
 </Fragment>;
 ```
 
-#### Select Card
+### Select Card
 
 ```jsx
 const React = require('react');

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

@@ -1,4 +1,4 @@
-#### Card
+### Card
 
 ```jsx
 const React = require('react');
@@ -32,7 +32,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Collapsed
+### Card > Collapsed
 
 ```jsx
 const React = require('react');
@@ -66,7 +66,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Shadow
+### Card > Shadow
 
 ```jsx
 const React = require('react');
@@ -124,7 +124,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Actionable
+### Card > Actionable
 
 ```jsx
 const React = require('react');
@@ -182,7 +182,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Active
+### Card > Active
 
 ```jsx
 const React = require('react');
@@ -240,7 +240,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Header
+### Card > Header
 
 ```jsx
 const React = require('react');
@@ -313,7 +313,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Header > Shadow
+### Card > Header > Shadow
 
 ```jsx
 const React = require('react');
@@ -386,7 +386,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Header > Transparent
+### Card > Header > Transparent
 
 ```jsx
 const React = require('react');
@@ -459,7 +459,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Header > Box
+### Card > Header > Box
 
 ```jsx
 const React = require('react');
@@ -586,7 +586,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Header > Meta
+### Card > Header > Meta
 
 ```jsx
 const React = require('react');
@@ -725,7 +725,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Header > Secondary
+### Card > Header > Secondary
 
 ```jsx
 const React = require('react');
@@ -864,7 +864,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Outlet
+### Card > Outlet
 
 ```jsx
 const React = require('react');
@@ -1024,7 +1024,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Outlet > Card
+### Card > Outlet > Card
 
 ```jsx
 const React = require('react');
@@ -1229,7 +1229,7 @@ const { Row, Col } = require('joyent-react-styled-flexboxgrid');
 ];
 ```
 
-#### Card > Disabled
+### Card > Disabled
 
 ```jsx
 const React = require('react');

packages/ui-toolkit/src/footer/sticky.md

@@ -1,4 +1,4 @@
-#### Quick Action Toast
+### Quick Action Toast
 
 Quick Action Toasts are used to show contextually relevent commands and actions and should stick to the bottom of the page when they are active.
 

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

@@ -1,4 +1,4 @@
-#### Checkbox > Default
+### Checkbox > Default
 
 ```jsx
 const React = require('react');
@@ -20,7 +20,7 @@ const { FormLabel, Checkbox } = require('./');
 </FormGroup>;
 ```
 
-#### Checkbox > Active/Focused
+### Checkbox > Active/Focused
 
 ```jsx
 const React = require('react');
@@ -42,7 +42,7 @@ const { FormLabel, Checkbox } = require('./');
 </FormGroup>;
 ```
 
-#### Checkbox > Disabled
+### Checkbox > Disabled
 
 ```jsx
 const React = require('react');
@@ -64,7 +64,7 @@ const { FormLabel, Checkbox } = require('./');
 </FormGroup>;
 ```
 
-#### Checkbox > Error
+### Checkbox > Error
 
 ```jsx
 const React = require('react');

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

@@ -1,4 +1,4 @@
-#### Text Entry
+### Text Entry
 
 ```jsx
 // Name: Active

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

@@ -1,4 +1,4 @@
-#### Radio > Default
+### Radio > Default
 
 ```jsx
 const React = require('react');
@@ -25,7 +25,7 @@ const { FormLabel } = require('./');
 </FormGroup>;
 ```
 
-#### Checkbox > Active/Focused
+### Checkbox > Active/Focused
 
 ```jsx
 const React = require('react');
@@ -52,7 +52,7 @@ const { FormLabel } = require('./');
 </FormGroup>;
 ```
 
-#### Checkbox > Disabled
+### Checkbox > Disabled
 
 ```jsx
 const React = require('react');
@@ -79,7 +79,7 @@ const { FormLabel } = require('./');
 </FormGroup>;
 ```
 
-#### Radio input validation
+### Radio input validation
 
 ```jsx
 const React = require('react');

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

@@ -1,4 +1,4 @@
-#### Select
+### Select
 
 This is the standard dropdown menu to be used in forms and for multiple choice selections.
 

packages/ui-toolkit/src/grids/Baseline.md

@@ -1,4 +1,4 @@
-#### Baseline & Spacing
+### Baseline & Spacing
 
 Most of the horizontal spacing between different elements and components is derived from 6 px. For example, the most common horizontal distance between elements of a component or components is 18 px. Another, less frequent, measurement is 12 px. The choice between 6, 12 or 18 px is based on visual and functional proximity of objects.
 

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

@@ -1,4 +1,4 @@
-#### Large Grid
+### Large Grid
 
 ```jsx noeditor
 const big = require('./big.svg');
@@ -10,7 +10,7 @@ const big = require('./big.svg');
 }} src={big} />
 ```
 
-#### Medium Grid
+### Medium Grid
 
 ```jsx noeditor
 const medium = require('./medium.svg');
@@ -22,7 +22,7 @@ const medium = require('./medium.svg');
 }} src={medium} />
 ```
 
-#### Small Grid
+### Small Grid
 
 ```jsx noeditor
 const small = require('./small.svg');

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

@@ -1,4 +1,4 @@
-#### Page Message
+### Page Message
 
 ```jsx
 const React = require('react');

packages/ui-toolkit/src/navigation.md

@@ -1,4 +1,4 @@
-#### Breadcrumb
+### Breadcrumb
 
 ```jsx
 // Name: Active
@@ -19,7 +19,7 @@ const { Breadcrumb, BreadcrumbItem, Anchor } = require('./index.js');
 </Breadcrumb>;
 ```
 
-#### Footer
+### Footer
 
 ```jsx
 // Name: Active

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

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import styled, { keyframes } from 'styled-components';
 import remcalc from 'remcalc';
-import { P, H4 } from '../';
+import { P, H3 } from '../';
 
 const chevron =
   'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJ0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsiIGNsYXNzPSJiYXNlbGluZS1idFRncEsgaGltUHhaIj48cGF0aCBmaWxsPSJyZ2JhKDczLCA3MywgNzMsIDEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiPjwvcGF0aD48L3N2Zz4=';
@@ -92,7 +92,7 @@ export default ({
   return (
     <Fragment>
       <header>
-        <H4 white>{heading.props.children}</H4>
+        <H3 white>{heading.props.children}</H3>
         {description &&
           description.props && <P white>{description.props.text}</P>}
       </header>

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

@@ -1,4 +1,4 @@
-#### Table Header
+### Table Header
 
 ```jsx
 // Name: Active
@@ -30,7 +30,7 @@ const { default: Table, Thead, Tr, Th, Tbody } = require('./');
 </Table>;
 ```
 
-#### Table Footer
+### Table Footer
 
 ```jsx
 // Name: Active
@@ -93,7 +93,7 @@ const { default: Table, Tfoot, Tr, Th } = require('./');
 </Table>;
 ```
 
-#### Empty Table
+### Empty Table
 
 ```jsx
 // Name: Active
@@ -175,7 +175,7 @@ const { default: Flex } = require('styled-flex-component');
 </div>;
 ```
 
-#### Multiple Selection List
+### Multiple Selection List
 
 ```jsx
 // Name: Active
@@ -251,7 +251,7 @@ const { Dot, Actions } = require('../icons');
 </Table>;
 ```
 
-#### Single Selection List
+### Single Selection List
 
 ```jsx
 // Name: Active

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

@@ -1,4 +1,4 @@
-#### Standard Tags
+### Standard Tags
 
 ```jsx
 // Name: Active
@@ -26,7 +26,7 @@ const { TagItem, TagList } = require('./');
 <TagItem error>Tags:4lyf</TagItem>;
 ```
 
-#### Deleteable Tags
+### Deleteable Tags
 
 ```jsx
 // Name: Active

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

@@ -1,4 +1,4 @@
-#### Large Type Scale
+### Large Type Scale
 
 ```jsx
 const React = require('react');
@@ -33,7 +33,7 @@ const styles = {
 </div>;
 ```
 
-#### Small Type Scale
+### Small Type Scale
 
 ```jsx
 const React = require('react');

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

@@ -1,4 +1,4 @@
-#### Default Superscript
+### Default Superscript
 
 The default superscript was intially designed to offer supporting information on the service menu regarding service status. It can used as a typographic ident to support titles and names without the need for iconography.
 
@@ -26,7 +26,7 @@ const styles = {
 </div>;
 ```
 
-#### Alert Superscript
+### Alert Superscript
 
 The Alert variation of superscript is to be used as an excliamation, to announce supporting information that requires action, such as ‘New service’ or ‘Available now’.
 
@@ -54,7 +54,7 @@ const styles = {
 </div>;
 ```
 
-#### Badge Superscript
+### Badge Superscript
 
 The badge variation of superscript is for when a specific element of information is repeated numberous times in one page/component. In being more visual, it becomes an ‘ident’ in information dense areas to allow for clear recognition.
 

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

@@ -40,7 +40,7 @@ const { P } = require('../text');
 </Row>;
 ```
 
-#### Tooltip > hover
+### Tooltip > hover
 
 ```jsx
 const React = require('react');
@@ -60,7 +60,7 @@ const { P } = require('../text');
 </Row>;
 ```
 
-#### Tooltip > click
+### Tooltip > click
 
 ```jsx
 const React = require('react');