From 1ae8b885221800197e570b30ffcb56d74f9147f8 Mon Sep 17 00:00:00 2001
From: Gary Thomas <gary.thomas@appfolio.com>
Date: Tue, 1 Nov 2016 12:16:47 -0700
Subject: [PATCH] gt - Use new spacing utils class names

---
 src/components/Alert.js    |  2 +-
 src/components/Datapair.js |  2 +-
 stories/Alerts.js          |  6 +++---
 stories/Buttons.js         |  9 +++++----
 stories/Datapair.js        |  4 ++--
 stories/Forms.js           | 14 +++++++-------
 6 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/Alert.js b/src/components/Alert.js
index b3d38c6dd..069878f5f 100644
--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@@ -27,7 +27,7 @@ class AlertComponent extends React.Component {
 
     return (
       <Alert color={color} isOpen={this.state.visible} toggle={dismissible ? this.toggle : null}>
-        {icon ? <Icon name={iconMap[color]} className="pull-xs-left m-r-1" style={{ lineHeight: 'inherit' }} /> : null}
+        {icon ? <Icon name={iconMap[color]} className="pull-xs-left mr-1" style={{ lineHeight: 'inherit' }} /> : null}
         {icon ? <div style={{ overflow: 'hidden' }}>{children}</div> : children}
       </Alert>
     );
diff --git a/src/components/Datapair.js b/src/components/Datapair.js
index 00b1fdaed..5ba62eb2a 100644
--- a/src/components/Datapair.js
+++ b/src/components/Datapair.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Col, Row } from 'reactstrap';
 
 const Datapair = (props) => (
-  <Row className="m-b-1">
+  <Row className="mb-1">
     <Col sm="4" className="text-sm-right text-muted">{props.label}</Col>
     <Col sm="8">{props.children || props.value}</Col>
   </Row>
diff --git a/stories/Alerts.js b/stories/Alerts.js
index a91518384..ecdf40a52 100644
--- a/stories/Alerts.js
+++ b/stories/Alerts.js
@@ -9,7 +9,7 @@ storiesOf('Alerts', module)
     <div>
       <Alert>
         <p>The default alert is a "warning". It supports any sort of custom markup.</p>
-        <p className="m-b-0"><Button>Like This!</Button></p>
+        <p className="mb-0"><Button>Like This!</Button></p>
       </Alert>
       <Alert color="success">
         You can specify an alert color. This one has <code>color="success"</code>
@@ -27,7 +27,7 @@ storiesOf('Alerts', module)
         You can specify an alert color. This one has <code>color="success"</code>
       </Alert>
       <Alert icon color="danger">
-        <p className="m-b-0">
+        <p className="mb-0">
           Humblebrag prism twee, gochujang seitan whatever asymmetrical ramps enamel pin austin
           salvia swag helvetica. Chartreuse food truck tofu raclette, 3 wolf moon poke chia paleo
           skateboard. Pickled tote bag echo park raclette. Irony fashion axe sartorial, cornhole
@@ -59,7 +59,7 @@ storiesOf('Alerts', module)
           This example text is going to run a bit longer so that you can see how spacing within
           an alert works with this kind of content.
         </p>
-        <p className="m-b-0">
+        <p className="mb-0">
           Whenever you need to, be sure to use margin utilities to keep things
           nice and tidy.
         </p>
diff --git a/stories/Buttons.js b/stories/Buttons.js
index b30032882..4ce9a95a4 100644
--- a/stories/Buttons.js
+++ b/stories/Buttons.js
@@ -53,17 +53,17 @@ storiesOf('Buttons', module)
   )
   .addWithInfo('Groups', () => (
     <div>
-      <Row className="m-b-1">
+      <Row className="mb-1">
         <Button size="lg" block>Block level button</Button>
       </Row>
-      <Row className="m-b-1">
+      <Row className="mb-1">
         <ButtonGroup>
           <Button>Left</Button>
           <Button>Middle</Button>
           <Button>Right</Button>
         </ButtonGroup>
       </Row>
-      <Row className="m-b-1">
+      <Row className="mb-1">
         <ButtonToolbar>
           <ButtonGroup>
             <Button>1</Button>
@@ -104,7 +104,8 @@ storiesOf('Buttons', module)
         </ButtonGroup>
       </Row>
     </div>
-  ))
+  ));
+// TODO
 //  .addWithInfo('with dropdowns', () => <h1>TODO</h1>)
 //  .addWithInfo('with split dropdowns', () => <h1>TODO</h1>)
 //  .addWithInfo('with dropups', () => <h1>TODO</h1>);
diff --git a/stories/Datapair.js b/stories/Datapair.js
index 4d0bec2bc..d7d42f3b4 100644
--- a/stories/Datapair.js
+++ b/stories/Datapair.js
@@ -6,7 +6,7 @@ import { Datapair } from '../src';
 
 storiesOf('Datapair', module)
   .addWithInfo('with props', () => (
-    <Card className="m-t-1">
+    <Card className="mt-1">
       <CardBlock>
         <Datapair label="Key" value="Some simple content would go here" />
         <Datapair label="Another Key" value="More content" />
@@ -14,7 +14,7 @@ storiesOf('Datapair', module)
     </Card>
   ))
   .addWithInfo('with HTML value', () => (
-    <Card className="m-t-1">
+    <Card className="mt-1">
       <CardBlock>
         <Datapair label="Label">
           Custom markup <Button color="primary">can go here</Button>
diff --git a/stories/Forms.js b/stories/Forms.js
index 7873d01ee..1fabfc017 100644
--- a/stories/Forms.js
+++ b/stories/Forms.js
@@ -6,24 +6,24 @@ import { FormRow, FormChoice, CurrencyInput } from '../src';
 
 storiesOf('Forms', module)
   .addWithInfo('Inputs', () => (
-    <Container className="m-t-3">
-      <h1 className="display-4 m-b-3">Inputs</h1>
+    <Container className="mt-3">
+      <h1 className="display-4 mb-3">Inputs</h1>
       <p className="lead">An <code>Input</code> is the simplest unit for building forms.</p>
 
-      <h2 className="m-y-3">Default (Text) Input</h2>
+      <h2 className="my-3">Default (Text) Input</h2>
       <Input placeholder="I'm a placeholder!" />
 
-      <h2 className="m-y-3">Custom Inputs</h2>
+      <h2 className="my-3">Custom Inputs</h2>
       <p><code>&lt;CurrencyInput/&gt;</code></p>
       <CurrencyInput />
     </Container>
   ))
   .addWithInfo('Form Rows', () => (
-    <Container className="m-t-3">
-      <h1 className="display-4 m-b-3">Form Rows</h1>
+    <Container className="mt-3">
+      <h1 className="display-4 mb-3">Form Rows</h1>
       <p className="lead">A <code>FormRow</code> combines a label and an input with an interface to provide feedback, hints, and can specify whether or not the field is required.</p>
 
-      <h2 className="m-y-3">Example</h2>
+      <h2 className="my-3">Example</h2>
       <FormRow label="First Name" />
       <FormRow label="Last Name" feedback="can't be blank" color="danger" />
       <FormRow label="Nickname" hint="A fun name to describe yourself!" />