docs(typography): Clean up css and update documentation

src/components/Notification/Notification.jsx

@@ -45,7 +45,7 @@ const renderContent = (variant, children) => {
 
 /**
  * A banner that highlights important messages.
- * <span class="docs--badge green">new!</span> <span class="docs--badge purple">v0.21.0</span>
+ * <span class="docs--badge green">updated!</span> <span class="docs--badge purple">v0.21.0</span>
  */
 const Notification = ({ variant, children, ...rest }) => (
   <div {...safeRest(rest)} className={styles[variant]}>

src/components/Typography/DisplayHeading/DisplayHeading.modules.scss

@@ -3,18 +3,12 @@
 @import '../../../scss/settings/responsive-grid';
 @import '../../../scss/utility/responsive';
 
-.baseHeadingSupSubScripts {
-  position: relative;
-  vertical-align: baseline;
-  padding-left: 0.1em;
-}
-
 .sup {
-  composes: baseHeadingSupSubScripts;
+  composes: baseSupSubScripts from '../Text/Text.modules.scss';
 }
 
 .sub {
-  composes: baseHeadingSupSubScripts;
+  composes: baseSupSubScripts from '../Text/Text.modules.scss';
 }
 
 .displayHeading {

src/components/Typography/DisplayHeading/DisplayHeadingSup/DisplayHeadingSup.md

@@ -3,7 +3,5 @@
 The Display Heading Sup component wraps text in a `<sup>` tag. It assures proper font sizes are rendered depending on the parent font size.
 
 ```
-<div>
   <DisplayHeading>Great Deals<DisplayHeading.Sup>1</DisplayHeading.Sup></DisplayHeading>
-</div>
 ```

src/components/Typography/Heading/Heading.modules.scss

@@ -3,18 +3,12 @@
 @import '../../../scss/settings/typography';
 @import '../../../scss/utility/responsive';
 
-.baseHeadingSupSubScripts {
-  position: relative;
-  vertical-align: baseline;
-  padding-left: 0.1em;
-}
-
 .sup {
-  composes: baseHeadingSupSubScripts;
+  composes: baseSupSubScripts from '../Text/Text.modules.scss';
 }
 
 .sub {
-  composes: baseHeadingSupSubScripts;
+  composes: baseSupSubScripts from '../Text/Text.modules.scss';
 }
 
 .largeHeading {

src/components/Typography/Heading/HeadingSup/HeadingSup.md

@@ -13,19 +13,11 @@ The Heading Sup component wraps text in a `<sup>` tag. It assures proper font si
     <Heading level="h3">Optik TV<Heading.Sup>®</Heading.Sup></Heading>
     <Heading level="h4">Optik TV<Heading.Sup>®</Heading.Sup></Heading>
   </div>
-
   <div>
     <Heading level="h1">TELUS Pik TV<Heading.Sup>&trade;</Heading.Sup></Heading>
     <Heading level="h2">TELUS Pik TV<Heading.Sup>&trade;</Heading.Sup></Heading>
     <Heading level="h3">TELUS Pik TV<Heading.Sup>&trade;</Heading.Sup></Heading>
     <Heading level="h4">TELUS Pik TV<Heading.Sup>&trade;</Heading.Sup></Heading>
   </div>
-
-  <div>
-    <Heading level="h1">Beats Solo<Heading.Sup>3</Heading.Sup> Wireless Headphones</Heading>
-    <Heading level="h2">Beats Solo<Heading.Sup>3</Heading.Sup> Wireless Headphones</Heading>
-    <Heading level="h3">Beats Solo<Heading.Sup>3</Heading.Sup> Wireless Headphones</Heading>
-    <Heading level="h4">Beats Solo<Heading.Sup>3</Heading.Sup> Wireless Headphones</Heading>
-  </div>
 </div>
 ```

src/components/Typography/Small/Small.jsx

@@ -5,13 +5,21 @@ import safeRest from '../../../safeRest'
 
 import styles from '../Text/Text.modules.scss'
 
+/**
+ * The text you wish to display in small print
+ *
+ * <span class="docs--badge green">new!</span> <span class="docs--badge purple">v0.22.0</span>
+ */
 const Small = ({ children, ...rest }) => (
   <small {...safeRest(rest)} className={`${styles.small} ${styles.smallFont}`}>
     {children}
   </small>
 )
 
 Small.propTypes = {
+  /**
+   * The text you wish to display in small print
+   */
   children: PropTypes.string.isRequired
 }
 

src/components/Typography/Small/Small.md

@@ -1,3 +1,5 @@
+### Usage
+
 ```
-<Small>This is legal text</Small>
+<Small>Taxes and pay-per-use charges (including long distance, roaming and additional airtime or data) are extra.</Small>
 ```

src/components/Typography/Strong/Strong.jsx

@@ -12,6 +12,9 @@ const Strong = ({ children, ...rest }) => (
 )
 
 Strong.propTypes = {
+  /**
+   * The text you wish to embolden
+   */
   children: PropTypes.string.isRequired
 }
 

src/components/Typography/Strong/Strong.md

@@ -1,3 +1,4 @@
+### Usage
 
 ```
 <Strong>This text is bold</Strong>

src/components/Typography/Text/Text.jsx

@@ -7,6 +7,11 @@ import TextSub from './TextSub/TextSub'
 
 import styles from './Text.modules.scss'
 
+/**
+ * Use to style small print, including copyright and legal text
+ *
+ * <span class="docs--badge green">new!</span> <span class="docs--badge purple">v0.22.0</span>
+ */
 const Text = ({ bold, size, invert, children, ...rest }) => {
   const classes = `
     ${styles[size]}

src/components/Typography/Text/Text.md

@@ -1,7 +1,23 @@
+### Usage
+
+The Text component can be used within other typography components such as [Paragraph](#paragraph). It is useful for modifying text appearance such as **bold**, or changing text size.
+
 ```
-<Text>TELUS Pik TV<Text.Sup>&trade;</Text.Sup></Text>
+<Text size="small" bold>Tell us what you think</Text>
 ```
 
-### Usage
+### Inherits props from Paragraph
 
-The Text component can be used within other typography components such as [Paragraph](#paragraph). It is useful for modifying text appearance such as **bold**, or changing text size.
+```
+<Paragraph size="small"><Text size="small">Tell us what you think></Text>  It's in our nature to listen.</Paragraph>
+```
+
+### Invert on dark colours
+
+```
+const PurpleBlock = require('../../__docs__/PurpleBlock').default;
+
+<PurpleBlock>
+  <Text invert>Personal</Text>
+</PurpleBlock>
+```

src/components/Typography/Text/Text.modules.scss

@@ -5,6 +5,9 @@
   position: relative;
   vertical-align: baseline;
   padding-left: 0.1em;
+}
+
+.sup, .sub {
   font-size: .875rem;
 }