Use new spacing util class names

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>
     );

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>

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>

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>);

stories/Datapair.js

@@ -6,15 +6,15 @@ 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" />
       </CardBlock>
     </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>

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!" />