feat(docs): improve docs css for flex selection

telus · Oct 18, 2017 · 4249997 · 4249997
1 parent 60f835b
commit 4249997
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/docs/scss/_layout.scss b/docs/scss/_layout.scss
@@ -1,12 +1,20 @@
 .docs__layout-vertically {
-  div {
+  .wrapper,
+  .wrapperExtend > * {
     display: flex;
     flex-direction: column;
   }
 }
 
+.docs__layout-horizontally {
+  .wrapper {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
 .docs__horizontal-spacing {
-  div > * {
+  .wrapperExtend > * {
     margin-right: 1rem;
   }
 }
diff --git a/src/components/Card/Card.md b/src/components/Card/Card.md
@@ -1,9 +1,27 @@
 ```
 <Card>
-  <h2>Specifications</h2>
-  <ul>
-    <li>2.2gHz CPU</li>
-    <li>250GB Storage</li>
-  </ul>
+  <Heading level="h2">Specifications</Heading>
+  <div style={{ padding: "1rem 0" }}>
+    <UnorderedList>
+      <UnorderedList.Item>2.2gHz CPU</UnorderedList.Item>
+      <UnorderedList.Item>250GB Storage</UnorderedList.Item>
+    </UnorderedList>
+  </div>
 </Card>
 ```
+
+### Coloured variants
+
+```jsx {"props": {"className": "docs__layout-horizontally docs__horizontal-spacing"}}
+<div className="wrapper">
+  <Card variant="lavender">
+    <Heading level="h2">Need a hand?</Heading>
+    <Paragraph>Our newest, best handset.</Paragraph>
+  </Card>
+
+  <Card variant="gray">
+    <Heading level="h2">Ourtech Phone 2</Heading>
+    <Paragraph>Our newest, best handset.</Paragraph>
+  </Card>
+</div>
+```
diff --git a/src/components/Icons/icons.md b/src/components/Icons/icons.md
@@ -1,7 +1,7 @@
 ### Available icons
 
 ```jsx { "props": { "className": "docs__horizontal-spacing" } }
-<div>
+<div className="wrapperExtend">
   <DecorativeIcon symbol="caretDown" />
   <DecorativeIcon symbol="caretUp" />
   <DecorativeIcon symbol="checkmark" />
@@ -24,7 +24,7 @@
 Use the `variant` prop to alter the icon's colour. Each variant has semantic meaning.
 
 ```jsx { "props": { "className": "docs__horizontal-spacing" } }
-<div>
+<div className="wrapperExtend">
   <DecorativeIcon symbol="checkmark" variant="primary" />
   <DecorativeIcon symbol="times" variant="secondary" />
   <DecorativeIcon symbol="exclamationPointCircle" variant="error" />
@@ -36,7 +36,7 @@ Use the `variant` prop to alter the icon's colour. Each variant has semantic mea
 Use the `size` prop to adjust the icon's size.
 
 ```jsx { "props": { "className": "docs__horizontal-spacing" } }
-<div>
+<div className="wrapperExtend">
   <DecorativeIcon symbol="exclamationPointCircle" size={16} />
   <DecorativeIcon symbol="exclamationPointCircle" size={24} />
 </div>

diff --git a/src/old-components/Icon/Icon.md b/src/old-components/Icon/Icon.md
@@ -1,7 +1,7 @@
 ## Available icons
 
 ```jsx { "props": { "className": "docs__horizontal-spacing" } }
-<div>
+<div className="wrapperExtend">
   <Icon glyph="caret-down" />
   <Icon glyph="caret-up" />
   <Icon glyph="checkmark" />
@@ -26,7 +26,7 @@ By default, all icons will inherit the color of the text around them, except for
 have special meaning, and are pre-colored.
 
 ```jsx { "props": { "className": "docs__horizontal-spacing" } }
-<div>
+<div className="wrapperExtend">
   <Icon glyph="checkmark" />
   <Icon glyph="exclamation-point-circle" />
   <Icon glyph="incomplete" />
@@ -74,11 +74,13 @@ Indicates a problem.
 Use the `fixedWidth` prop when aligning icons vertically.
 
 ```jsx { "props": { "className": "docs__layout-vertically" } }
-<Text block size="medium">
-  <span><Icon glyph='hamburger' fixedWidth /> Close the menu</span>
-  <span><Icon glyph='chevron' fixedWidth /> Account</span>
-  <span><Icon glyph='chevron' fixedWidth /> Sign out</span>
-</Text>
+<div className="wrapperExtend">
+  <Text block size="medium">
+    <span><Icon glyph='hamburger' fixedWidth /> Close the menu</span>
+    <span><Icon glyph='chevron' fixedWidth /> Account</span>
+    <span><Icon glyph='chevron' fixedWidth /> Sign out</span>
+  </Text>
+</div>
 ```
 
 ## Accessibility considerations