Add roll animation documentation to style guide

styleguide/components/Navigation/Navigation.js

@@ -77,6 +77,17 @@ const Navigation = ({ className, onLinkClick }) => (
             Accessibility
           </NavLink>
         </li>
+        <li className={ css.linkListItem }>
+          <NavLink
+            exact
+            activeClassName={ css.linkActive }
+            className={ css.link }
+            to="/patterns/animation"
+            onClick={ onLinkClick }
+          >
+            Animation
+          </NavLink>
+        </li>
         <li className={ css.linkListItem }>
           <NavLink
             exact

styleguide/screens/Patterns/Animation/Animation.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import dedent from 'dedent';
+
+import Specimen from '../../../components/Specimen/Specimen';
+import { D, H, T, C } from '../../../components/Scaffold/Scaffold';
+
+import Btn from '../../../../components/Btn/Btn';
+import Roll from '../../../../components/Animate/Roll';
+
+import m from '../../../../globals/modifiers.css';
+
+export default class Animation extends Component {
+  state = {
+    roll: false,
+  };
+
+  toggleRoll = () => {
+    this.setState(({ roll }) => ({
+      roll: !roll,
+    }));
+  };
+
+  render() {
+    const { roll } = this.state;
+
+    return (
+      <div>
+        <H level={ 1 }>Animation</H>
+        <D>
+          <H level={ 2 }>Roll</H>
+          <T elm="p" className={ m.mtr }>
+            <C>Roll</C> allows us to transition between two elements, pushing one
+            out, while pushing another in. This can be useful for highlighting a
+            change of state, where the resulting interface change is not obvious.
+          </T>
+          <Specimen
+            classNames={ {
+              root: m.mtr,
+              specimenContainer: m.par,
+            } }
+            code={ dedent`
+              <Btn onClick={ this.toggleRoll }>
+                <Roll width="10rem">
+                  { this.state.showMap
+                    ? <span id="list">Show list</span>
+                    : <span id="map">Show map</span>
+                  }
+                </Roll>
+              </Btn>
+            ` }
+          >
+            <Btn onClick={ this.toggleRoll }>
+              <Roll width="10rem">
+                { roll
+                  ? <span id="list">Show list</span>
+                  : <span id="map">Show map</span>
+                }
+              </Roll>
+            </Btn>
+          </Specimen>
+        </D>
+      </div>
+    );
+  }
+}

styleguide/screens/Patterns/Animation/Animation.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import Animation from './Animation';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(<Animation />, div);
+});

styleguide/screens/Patterns/Patterns.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 
 import Accessibility from './Accessibility/Accessibility';
+import Animation from './Animation/Animation';
 import Badge from './Badge/Badge';
 import Buttons from './Buttons/Buttons';
 import Cards from './Cards/Cards';
@@ -20,6 +21,7 @@ import TabBar from './TabBar/TabBar';
 const Patterns = () => (
   <Switch>
     <Route path="/patterns/accessibility" component={ Accessibility } />
+    <Route path="/patterns/animation" component={ Animation } />
     <Route path="/patterns/badge" component={ Badge } />
     <Route path="/patterns/buttons" component={ Buttons } />
     <Route path="/patterns/cards" component={ Cards } />