Add fixes to ResponsiveDesign page

* Reorder design navigation
* Add missing note
* Fix list styling

styleguide/components/Navigation/Navigation.js

@@ -44,21 +44,21 @@ const Navigation = ({ className, onLinkClick }) => (
             exact
             activeClassName={ css.linkActive }
             className={ css.link }
-            to="/design/responsive-design"
+            to="/design/iconography"
             onClick={ onLinkClick }
           >
-            Responsive design
+            Iconography
           </NavLink>
         </li>
         <li className={ css.linkListItem }>
           <NavLink
             exact
             activeClassName={ css.linkActive }
             className={ css.link }
-            to="/design/iconography"
+            to="/design/responsive-design"
             onClick={ onLinkClick }
           >
-            Iconography
+            Responsive design
           </NavLink>
         </li>
         <li className={ css.linkListItem }>

styleguide/components/Scaffold/Scaffold.css

@@ -47,6 +47,10 @@
   color: var(--color-primary--light);
 }
 
+.orderedList {
+  padding-left: 0;
+}
+
 .descriptionList {
   display: flex;
   flex-wrap: wrap;

styleguide/components/Scaffold/Scaffold.js

@@ -20,6 +20,7 @@ export const body = css.body;
 export const section = m.mtLgIii;
 export const code = css.code;
 export const link = css.link;
+export const orderedList = css.orderedList;
 export const descriptionList = css.descriptionList;
 export const note = css.note;
 
@@ -59,6 +60,12 @@ export const A = ({ className, children, ...rest }) => (
   <a { ...rest } className={ cx(link, className) }>{ children }</a>
 );
 
+export const Ol = ({ className, children, ...rest }) => (
+  <ol { ...rest } className={ cx(orderedList, className) }>
+    { children }
+  </ol>
+);
+
 export const Dl = ({ className, children, ...rest }) => (
   <dl { ...rest } className={ cx(descriptionList, className) }>
     { children }
@@ -82,9 +89,10 @@ export const Placeholder = ({ className, children, onClick, ...rest }) => (
   </BtnContainer>
 );
 
-export const Bq = ({ className, children, citation }) => (
+export const Bq = ({ className, children, citation, ...rest }) => (
   <div>
     <blockquote
+      { ...rest }
       className={ cx(
         css.blockquote,
         className,
@@ -114,6 +122,7 @@ Bq.propTypes = {
 C.propTypes = propTypes;
 A.propTypes = propTypes;
 D.propTypes = propTypes;
+Ol.propTypes = propTypes;
 Dl.propTypes = propTypes;
 Note.propTypes = propTypes;
 

styleguide/screens/Design/ResponsiveDesign.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import dedent from 'dedent';
 
-import { H, T, D, A, Bq } from '../../components/Scaffold/Scaffold';
+import { H, T, D, A, Bq, Ol, Note } from '../../components/Scaffold/Scaffold';
 import CodeBlock from '../../components/CodeBlock/CodeBlock';
 
 import m from '../../../globals/modifiers.css';
@@ -50,7 +50,7 @@ const ResponsiveDesign = () => (
         This means, writing your CSS to address the smallest sizes first.
         We do this for two key reasons:
       </T>
-      <ol className={ m.mtr }>
+      <Ol className={ m.mtr }>
         <T elm="li">
           Larger viewport layouts are typically more complex than their small counterparts.
           With this in mind, you’ll likely end up writing fewer CSS rules to achieve the desired
@@ -60,7 +60,7 @@ const ResponsiveDesign = () => (
           By building the page for the lowest common denominator, you’ll be taking into account
           devices that we’re unable to test on, or even those that don’t exist yet.
         </T>
-      </ol>
+      </Ol>
       <T elm="p" className={ m.mtr }>
         When working “bottom up”, it should apparent become that you need to add a media query when
         the page or feature begins to look and feel rubbish. Look to increase the window size until
@@ -126,11 +126,13 @@ const ResponsiveDesign = () => (
         Rather than building for ‘devices’ we approach screen size as a whole. So if content doesn’t
         look good as your screen gets bigger, add a media query to fix it.
       </T>
-      <T elm="p" className={ m.mtr }>
-        Note: It’s important to note that "common" screen sizes don’t exist. And we can never assume
-        a user will see a piece of content based on ‘the fold’.
-        Refer to <A href="https://iamthefold.com/">iamthefold</A> for more information.
-      </T>
+      <Note className={ m.mtr }>
+        <T elm="p">
+          It’s important to note that "common" screen sizes don’t exist.
+          And we can never assume a user will see a piece of content based
+          on ‘the fold’.  Refer to <A href="https://iamthefold.com/">iamthefold</A> for more information.
+        </T>
+      </Note>
     </D>
   </div>
 );