docs(examples): Use Typography components in code examples within the…

… /old-components folder
telus · Oct 26, 2017 · 4a7d497 · 4a7d497
1 parent c15b761
commit 4a7d497
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/src/old-components/ExpandCollapse/Panel.md b/src/old-components/ExpandCollapse/Panel.md
@@ -21,10 +21,10 @@ Accordion is a special kind of Collapse, which allows only one panel to be expan
 ```
 <Group accordion>
   <Panel header="Specs">
-    <p>A fast CPU, a striking GPU.</p>
+    A fast CPU, a striking GPU.
   </Panel>
   <Panel header="Colours">
-    <p>Everything from tulips to crimsons.</p>
+    Everything from tulips to crimsons.
   </Panel>
 </Group>
 ```

diff --git a/src/old-components/SelectorCounter/SelectorCounter.md b/src/old-components/SelectorCounter/SelectorCounter.md
@@ -65,8 +65,7 @@ const handleSubmit = (e) => {
 const successful = state.succeeded;
 const invalid = (state.curr === 5);
 
-const listError = invalid? 'list--error':'';
-const listChecked = successful? 'list--checked':'';
+const listType = invalid? 'x': 'checkmark';
 
 const fieldError = invalid? 'field--error':'';
 const fieldSuccess = successful? 'field--success':'';
@@ -78,10 +77,10 @@ const helperSuccess = successful? 'helper--success':'';
   <div className={`field ${fieldError} ${fieldSuccess}`}>
     <label htmlFor="ex-selcounter">How many smartphone plans?</label>
     <div id="ex-selcounter-desc">
-      <p className="text--small">Instructions</p>
-      <ul className={`list list--compact ${listError} ${listChecked}`}>
-        <li className="list__item">Do not pick 5</li>
-      </ul>
+      <Paragraph size="small">Instructions</Paragraph>
+      <UnorderedList listStyle={listType}>
+        <UnorderedList.Item >Do not pick 5</UnorderedList.Item>
+      </UnorderedList>
     </div>
     <SelectorCounter
       ref={(counter) => this.counter = counter}

diff --git a/src/old-components/Spinner/Spinner.md b/src/old-components/Spinner/Spinner.md
@@ -21,8 +21,8 @@ Wrap the `Spinner` around the content to use embedded mode.
 ```
 <Spinner spinning>
   <section>
-    <h3>Current Bill</h3>
-    <p>View your latest bill here.</p>
+    <Heading level="h3">Current Bill</Heading>
+    <Paragraph>View your latest bill here.</Paragraph>
   </section>
 </Spinner>
 ```