From 5eb8a4abe5a70bc72a1c7c8e3803875964b6b48d Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 8 May 2018 16:19:40 +0200
Subject: [PATCH 1/7] refactor: buttons view

---
 src/views/Buttons/Buttons/Buttons.js | 877 +++++++++++----------------
 1 file changed, 355 insertions(+), 522 deletions(-)

diff --git a/src/views/Buttons/Buttons/Buttons.js b/src/views/Buttons/Buttons/Buttons.js
index 9fc90d4..5b45a81 100644
--- a/src/views/Buttons/Buttons/Buttons.js
+++ b/src/views/Buttons/Buttons/Buttons.js
@@ -10,100 +10,100 @@ class Buttons extends Component {
             <strong>Standard Buttons</strong>
           </CardHeader>
           <CardBody>
-            <Row className="d-flex justify-content-between align-items-center">
-              <Col>
-                <p>Normal</p>
+            <Row className="align-items-center">
+              <Col col="12" xl className="mb-3 mb-xl-0">
+                Normal
               </Col>
-              <Col>
-                <Button block color="primary" type="button">Primary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary">Primary</Button>
               </Col>
-              <Col>
-                <Button block color="secondary" type="button">Secondary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary">Secondary</Button>
               </Col>
-              <Col>
-                <Button block color="success" type="button">Success</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success">Success</Button>
               </Col>
-              <Col>
-                <Button block color="warning" type="button">Warning</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning">Warning</Button>
               </Col>
-              <Col>
-                <Button block color="danger" type="button">Danger</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger">Danger</Button>
               </Col>
-              <Col>
-                <Button block color="info" type="button">Info</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info">Info</Button>
               </Col>
-              <Col>
-                <Button block color="light" type="button">Light</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light">Light</Button>
               </Col>
-              <Col>
-                <Button block color="dark" type="button">Dark</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark">Dark</Button>
               </Col>
-              <Col>
-                <Button block color="link" type="button">Link</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link">Link</Button>
               </Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Active State
               </Col>
-              <Col>
-                <Button active block color="primary" type="button" aria-pressed="true">Primary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="primary" aria-pressed="true">Primary</Button>
               </Col>
-              <Col>
-                <Button active block color="secondary" type="button" aria-pressed="true">Secondary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="secondary" aria-pressed="true">Secondary</Button>
               </Col>
-              <Col>
-                <Button active block color="success" type="button" aria-pressed="true">Success</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="success" aria-pressed="true">Success</Button>
               </Col>
-              <Col>
-                <Button active block color="warning" type="button" aria-pressed="true">Warning</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="warning" aria-pressed="true">Warning</Button>
               </Col>
-              <Col>
-                <Button active block color="danger" type="button" aria-pressed="true">Danger</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="danger" aria-pressed="true">Danger</Button>
               </Col>
-              <Col>
-                <Button active block color="info" type="button" aria-pressed="true">Info</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="info" aria-pressed="true">Info</Button>
               </Col>
-              <Col>
-                <Button active block color="light" type="button" aria-pressed="true">Light</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="light" aria-pressed="true">Light</Button>
               </Col>
-              <Col>
-                <Button active block color="dark" type="button" aria-pressed="true">Dark</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="dark" aria-pressed="true">Dark</Button>
               </Col>
-              <Col>
-                <Button active block color="link" type="button" aria-pressed="true">Link</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="link" aria-pressed="true">Link</Button>
               </Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <Button block color="primary" type="button" disabled>Primary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" disabled>Primary</Button>
               </Col>
-              <Col>
-                <Button block color="secondary" type="button" disabled>Secondary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <Button block color="success" type="button" disabled>Success</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" disabled>Success</Button>
               </Col>
-              <Col>
-                <Button block color="warning" type="button" disabled>Warning</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" disabled>Warning</Button>
               </Col>
-              <Col>
-                <Button block color="danger" type="button" disabled>Danger</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" disabled>Danger</Button>
               </Col>
-              <Col>
-                <Button block color="info" type="button" disabled>Info</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" disabled>Info</Button>
               </Col>
-              <Col>
-                <Button block color="light" type="button" disabled>Light</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" disabled>Light</Button>
               </Col>
-              <Col>
-                <Button block color="dark" type="button" disabled>Dark</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" disabled>Dark</Button>
               </Col>
-              <Col>
-                <Button block color="link" type="button" disabled>Link</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" disabled>Link</Button>
               </Col>
             </Row>
           </CardBody>
@@ -114,97 +114,97 @@ class Buttons extends Component {
           </CardHeader>
           <CardBody>
             <p>
-              Use <code>.btn-outline-*</code> class for outline buttons.
+              Use <code>outline</code> prop
             </p>
             <Row className="align-items-center">
-              <Col className="col">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-primary">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="primary">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-secondary">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="secondary">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-success">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="success">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-warning">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="warning">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-danger">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="danger">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-info">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="info">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-light">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="light">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-dark">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="dark">Dark</Button>
               </Col>
-              <Col></Col>
-            </Row>
-            <Row className="row align-items-center mt-3">
-              <Col className="col">
-                Active State
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-primary active" aria-pressed="true">Primary</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-secondary active" aria-pressed="true">Secondary</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-success active" aria-pressed="true">Success</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-warning active" aria-pressed="true">Warning</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-danger active" aria-pressed="true">Danger</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-info active" aria-pressed="true">Info</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-light active" aria-pressed="true">Light</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-dark active" aria-pressed="true">Dark</button>
-              </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
+                Active State
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="primary" aria-pressed="true">Primary</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="secondary" aria-pressed="true">Secondary</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="success" aria-pressed="true">Success</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="warning" aria-pressed="true">Warning</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="danger" aria-pressed="true">Danger</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="info" aria-pressed="true">Info</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="light" aria-pressed="true">Light</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="dark" aria-pressed="true">Dark</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
+            </Row>
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-primary" disabled>Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="primary" disabled>Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-secondary" disabled>Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="secondary" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-success" disabled>Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="success" disabled>Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-warning" disabled>Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="warning" disabled>Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-danger" disabled>Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="danger" disabled>Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-info" disabled>Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="info" disabled>Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-light" disabled>Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="light" disabled>Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-dark" disabled>Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="dark" disabled>Dark</Button>
               </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
           </CardBody>
         </Card>
@@ -218,94 +218,94 @@ class Buttons extends Component {
               <code>.btn-ghost-*</code> class for ghost buttons.
             </p>
             <Row className="align-items-center">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-primary">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-primary">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-secondary">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-secondary">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-success">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-success">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-warning">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-warning">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-danger">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-danger">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-info">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-info">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-light">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-light">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-dark">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-dark">Dark</Button>
               </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Active State
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-primary active" aria-pressed="true">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-primary" aria-pressed="true">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-secondary active" aria-pressed="true">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-secondary" aria-pressed="true">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-success active" aria-pressed="true">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-success" aria-pressed="true">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-warning active" aria-pressed="true">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-warning" aria-pressed="true">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-danger active" aria-pressed="true">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-danger" aria-pressed="true">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-info active" aria-pressed="true">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-info" aria-pressed="true">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-light active" aria-pressed="true">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-light" aria-pressed="true">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-dark active" aria-pressed="true">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-dark" aria-pressed="true">Dark</Button>
               </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-primary" disabled>Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-primary" disabled>Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-secondary" disabled>Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-secondary" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-success" disabled>Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-success" disabled>Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-warning" disabled>Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-warning" disabled>Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-danger" disabled>Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-danger" disabled>Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-info" disabled>Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-info" disabled>Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-light" disabled>Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-light" disabled>Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-dark" disabled>Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-dark" disabled>Dark</Button>
               </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
           </CardBody>
         </Card>
@@ -319,99 +319,99 @@ class Buttons extends Component {
               <code>.btn-square</code> class for square buttons.
             </p>
             <Row className="align-items-center">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-primary">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" className="btn-square">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-secondary">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" className="btn-square">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-success">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" className="btn-square">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-warning">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" className="btn-square">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-danger">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" className="btn-square">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-info">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" className="btn-square">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-light">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" className="btn-square">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-dark">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" className="btn-square">Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-link">Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" className="btn-square">Link</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col>
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Active State
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-primary active" aria-pressed="true">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="primary" className="btn-square" aria-pressed="true">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-secondary active" aria-pressed="true">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="secondary" className="btn-square" aria-pressed="true">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-success active" aria-pressed="true">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="success" className="btn-square" aria-pressed="true">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-warning active" aria-pressed="true">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="warning" className="btn-square" aria-pressed="true">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-danger active" aria-pressed="true">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="danger" className="btn-square" aria-pressed="true">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-info active" aria-pressed="true">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="info" className="btn-square" aria-pressed="true">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-light active" aria-pressed="true">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="light" className="btn-square" aria-pressed="true">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-dark active" aria-pressed="true">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="dark" className="btn-square" aria-pressed="true">Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-link active" aria-pressed="true">Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="link" className="btn-square" aria-pressed="true">Link</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col className="col">
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-primary" disabled>Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" className="btn-square" disabled>Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-secondary" disabled>Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" className="btn-square" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-success" disabled>Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" className="btn-square" disabled>Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-warning" disabled>Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" className="btn-square" disabled>Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-danger" disabled>Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" className="btn-square" disabled>Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-info" disabled>Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" className="btn-square" disabled>Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-light" disabled>Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" className="btn-square" disabled>Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-dark" disabled>Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" className="btn-square" disabled>Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-link" disabled>Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" className="btn-square" disabled>Link</Button>
               </Col>
             </Row>
           </CardBody>
@@ -426,99 +426,99 @@ class Buttons extends Component {
               <code>.btn-pill</code> class for pill buttons.
             </p>
             <Row className="align-items-center">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-primary">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" className="btn-pill">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-secondary">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" className="btn-pill">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-success">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" className="btn-pill">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-warning">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" className="btn-pill">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-danger">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" className="btn-pill">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-info">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" className="btn-pill">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-light">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" className="btn-pill">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-dark">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" className="btn-pill">Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-link">Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" className="btn-pill">Link</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col>
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Active State
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-primary active" aria-pressed="true">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="primary" className="btn-pill" aria-pressed="true">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-secondary active" aria-pressed="true">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="secondary" className="btn-pill" aria-pressed="true">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-success active" aria-pressed="true">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="success" className="btn-pill" aria-pressed="true">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-warning active" aria-pressed="true">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="warning" className="btn-pill" aria-pressed="true">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-danger active" aria-pressed="true">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="danger" className="btn-pill" aria-pressed="true">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-info active" aria-pressed="true">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="info" className="btn-pill" aria-pressed="true">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-light active" aria-pressed="true">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="light" className="btn-pill" aria-pressed="true">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-dark active" aria-pressed="true">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="dark" className="btn-pill" aria-pressed="true">Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-link active" aria-pressed="true">Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="link" className="btn-pill" aria-pressed="true">Link</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col>
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-primary" disabled>Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" className="btn-pill" disabled>Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-secondary" disabled>Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" className="btn-pill" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-success" disabled>Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" className="btn-pill" disabled>Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-warning" disabled>Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" className="btn-pill" disabled>Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-danger" disabled>Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" className="btn-pill" disabled>Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-info" disabled>Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" className="btn-pill" disabled>Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-light" disabled>Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" className="btn-pill" disabled>Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-dark" disabled>Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" className="btn-pill" disabled>Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-link" disabled>Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" className="btn-pill" disabled>Link</Button>
               </Col>
             </Row>
           </CardBody>
@@ -528,66 +528,65 @@ class Buttons extends Component {
             <strong>Sizes</strong>
           </CardHeader>
           <CardBody>
-            <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
-            <Row className="row align-items-center">
-              <Col>
-                Small add
-                <code>.btn-sm</code>
+            <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
+            <Row className="align-items-center">
+              <Col col="2" xl className="mb-3 mb-xl-0">
+                Small
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-primary">Standard Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="primary" size="sm">Standard Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-outline-secondary">Outline Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="secondary" outline size="sm">Outline Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-ghost-success">Ghost Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button size="sm" color="ghost-success">Ghost Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-square btn-warning">Square Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="warning" size="sm" className="btn-square">Square Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-pill btn-danger">Pill Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="danger" size="sm" className="btn-pill">Pill Button</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col className="col">
+            <Row className="align-items-center mt-3">
+              <Col col="2" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-primary">Standard Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="primary">Standard Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-outline-secondary">Outline Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button outline color="secondary" >Outline Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-ghost-success">Ghost Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="ghost-success">Ghost Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-square btn-warning">Square Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="warning" className="btn-square">Square Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-pill btn-danger">Pill Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="danger" className="btn-pill">Pill Button</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col className="col">
-                Large add <code>.btn-lg</code>.
+            <Row className="align-items-center mt-3">
+              <Col col="2" xl className="mb-3 mb-xl-0">
+                Large
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-primary">Standard Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="primary" size="lg">Standard Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-outline-secondary">Outline Button</button>
+              <Col col="2"className="mb-3 mb-xl-0 text-center">
+                <Button outline color="secondary" size="lg">Outline Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-ghost-success">Ghost Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="ghost-success" size="lg">Ghost Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-square btn-warning">Square Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="warning" size="lg" className="btn-square">Square Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-pill btn-danger">Pill Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="danger" size="lg" className="btn-pill">Pill Button</Button>
               </Col>
             </Row>
           </CardBody>
@@ -598,128 +597,42 @@ class Buttons extends Component {
           </CardHeader>
           <CardBody>
             <Row className="align-items-center mt-3">
-              <Col className="col text-center">
-                <button type="button" className="btn btn-primary">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="primary">
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Standard Button
-                </button>
+                </Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-outline-secondary">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="secondary" outline>
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Outline Button
-                </button>
+                </Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-ghost-success">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="ghost-success">
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Ghost Button
-                </button>
+                </Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-square btn-warning">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="warning" className="btn-square">
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Square Button
-                </button>
+                </Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-pill btn-danger">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="danger" className="btn-pill">
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Pill Button
-                </button>
+                </Button>
               </Col>
             </Row>
           </CardBody>
         </Card>
         <Row>
           <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                <strong>Options</strong>
-              </CardHeader>
-              <CardBody>
-                <Button color="primary" className="mr-1">Primary</Button>
-                <Button color="secondary" className="mr-1">Secondary</Button>
-                <Button color="success" className="mr-1">Success</Button>
-                <Button color="warning">Warning</Button>{' '}
-                <Button color="danger">Danger</Button>{' '}
-                <Button color="link">Link</Button>{' '}
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>With Icons</strong>
-              </CardHeader>
-              <CardBody>
-                <Button color="primary" className="mr-1"><i className="fa fa-star"></i>{'\u00A0'} Primary</Button>
-                <Button color="secondary" className="mr-1"><i className="fa fa-lightbulb-o"></i>{'\u00A0 Secondary'}</Button>
-                <Button color="success" className="mr-1"><i className="fa fa-magic"></i>&nbsp; Success</Button>
-                <Button color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>{' '}
-                <Button color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>{' '}
-                <Button color="link"><i className="fa fa-link"></i>&nbsp; Link</Button>{' '}
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Size Large</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add this class <code>.btn-lg</code></p>
-                <Button color="primary" size="lg">Primary</Button>
-                <Button color="secondary" size="lg">Secondary</Button>
-                <Button color="success" size="lg">Success</Button>
-                <Button color="info" size="lg">Info</Button>
-                <Button color="warning" size="lg">Warning</Button>
-                <Button color="danger" size="lg">Danger</Button>
-                <Button color="link" size="lg">Link</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Size Small</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.btn-sm</code></p>
-                <Button color="primary" size="sm">Primary</Button>
-                <Button color="secondary" size="sm">Secondary</Button>
-                <Button color="success" size="sm">Success</Button>
-                <Button color="info" size="sm">Info</Button>
-                <Button color="warning" size="sm">Warning</Button>
-                <Button color="danger" size="sm">Danger</Button>
-                <Button color="link" size="sm">Link</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Disabled state</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add <code>disabled="disabled"</code></p>
-                <Button color="primary" disabled>Primary</Button>
-                <Button color="secondary" disabled>Secondary</Button>
-                <Button color="success" disabled>Success</Button>
-                <Button color="info" disabled>Info</Button>
-                <Button color="warning" disabled>Warning</Button>
-                <Button color="danger" disabled>Danger</Button>
-                <Button color="link" disabled>Link</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Active state</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.active</code></p>
-                <Button color="primary" active>Primary</Button>
-                <Button color="secondary" active>Secondary</Button>
-                <Button color="success" active>Success</Button>
-                <Button color="info" active>Info</Button>
-                <Button color="warning" active>Warning</Button>
-                <Button color="danger" active>Danger</Button>
-                <Button color="link" active>Link</Button>
-              </CardBody>
-            </Card>
             <Card>
               <CardHeader>
                 <strong>Block Level Buttons</strong>
               </CardHeader>
               <CardBody>
-                <p>Add class <code>.btn-block</code></p>
+                <p>Add prop <code>block</code></p>
                 <Button color="secondary" size="lg" block>Block level button</Button>
                 <Button color="primary" size="lg" block>Block level button</Button>
                 <Button color="success" size="lg" block>Block level button</Button>
@@ -731,99 +644,19 @@ class Buttons extends Component {
             </Card>
           </Col>
           <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                <strong>Options</strong>
-              </CardHeader>
-              <CardBody>
-                <Button outline color="primary">Primary</Button>
-                <Button outline color="secondary">Secondary</Button>
-                <Button outline color="success">Success</Button>
-                <Button outline color="warning">Warning</Button>
-                <Button outline color="danger">Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>With Icons</strong>
-              </CardHeader>
-              <CardBody>
-                <Button outline color="primary"><i className="fa fa-star"></i>&nbsp; Primary</Button>
-                <Button outline color="secondary"><i className="fa fa-lightbulb-o"></i>&nbsp; Secondary</Button>
-                <Button outline color="success"><i className="fa fa-magic"></i>&nbsp; Success</Button>
-                <Button outline color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>
-                <Button outline color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Size Large</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.btn-lg</code></p>
-                <Button outline color="primary" size="lg">Primary</Button>
-                <Button outline color="secondary" size="lg">Secondary</Button>
-                <Button outline color="success" size="lg">Success</Button>
-                <Button outline color="info" size="lg">Info</Button>
-                <Button outline color="warning" size="lg">Warning</Button>
-                <Button outline color="danger" size="lg">Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Size Small</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.btn-sm</code></p>
-                <Button outline color="primary" size="sm">Primary</Button>
-                <Button outline color="secondary" size="sm">Secondary</Button>
-                <Button outline color="success" size="sm">Success</Button>
-                <Button outline color="info" size="sm">Info</Button>
-                <Button outline color="warning" size="sm">Warning</Button>
-                <Button outline color="danger" size="sm">Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Disabled state</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add <code>disabled="disabled"</code></p>
-                <Button outline color="primary" disabled>Primary</Button>
-                <Button outline color="secondary" disabled>Secondary</Button>
-                <Button color="success" disabled>Success</Button>
-                <Button outline color="info" disabled>Info</Button>
-                <Button outline color="warning" disabled>Warning</Button>
-                <Button outline color="danger" disabled>Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Active state</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.active</code></p>
-                <Button outline color="primary" active>Primary</Button>
-                <Button outline color="secondary" active>Secondary</Button>
-                <Button outline color="success" active>Success</Button>
-                <Button outline color="info" active>Info</Button>
-                <Button outline color="warning" active>Warning</Button>
-                <Button outline color="danger" active>Danger</Button>
-              </CardBody>
-            </Card>
             <Card>
               <CardHeader>
                 <strong>Block Level Buttons</strong>
-                {/*<small>Add this class <code>.btn-block</code></small>*/}
               </CardHeader>
               <CardBody>
-                <p>Add class <code>.btn-block</code></p>
+                <p>Add prop <code>block</code></p>
                 <Button outline color="secondary" size="lg" block>Block level button</Button>
                 <Button outline color="primary" size="lg" block>Block level button</Button>
                 <Button outline color="success" size="lg" block>Block level button</Button>
                 <Button outline color="info" size="lg" block>Block level button</Button>
                 <Button outline color="warning" size="lg" block>Block level button</Button>
                 <Button outline color="danger" size="lg" block>Block level button</Button>
+                <Button color="ghost-info" size="lg" block>Block level button</Button>
               </CardBody>
             </Card>
           </Col>

From 59d43f7ef2518ca2417f2b872d44b480fca2ff63 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 8 May 2018 16:20:41 +0200
Subject: [PATCH 2/7] refactor(modals view): button margins

---
 src/views/Notifications/Modals/Modals.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/views/Notifications/Modals/Modals.js b/src/views/Notifications/Modals/Modals.js
index c8e7bc5..99c1005 100644
--- a/src/views/Notifications/Modals/Modals.js
+++ b/src/views/Notifications/Modals/Modals.js
@@ -84,7 +84,7 @@ class Modals extends Component {
                 <i className="fa fa-align-justify"></i> Bootstrap Modals
               </CardHeader>
               <CardBody>
-                <Button onClick={this.toggle}>Launch demo modal</Button>
+                <Button onClick={this.toggle} className="mr-1">Launch demo modal</Button>
                 <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                   <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                   <ModalBody>
@@ -100,7 +100,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button onClick={this.toggleLarge}>Launch large modal</Button>
+                <Button onClick={this.toggleLarge} className="mr-1">Launch large modal</Button>
                 <Modal isOpen={this.state.large} toggle={this.toggleLarge}
                        className={'modal-lg ' + this.props.className}>
                   <ModalHeader toggle={this.toggleLarge}>Modal title</ModalHeader>
@@ -117,7 +117,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button onClick={this.toggleSmall}>Launch small modal</Button>
+                <Button onClick={this.toggleSmall} className="mr-1">Launch small modal</Button>
                 <Modal isOpen={this.state.small} toggle={this.toggleSmall}
                        className={'modal-sm ' + this.props.className}>
                   <ModalHeader toggle={this.toggleSmall}>Modal title</ModalHeader>
@@ -136,7 +136,7 @@ class Modals extends Component {
 
                 <hr />
 
-                <Button color="primary" onClick={this.togglePrimary}>Primary modal</Button>
+                <Button color="primary" onClick={this.togglePrimary} className="mr-1">Primary modal</Button>
                 <Modal isOpen={this.state.primary} toggle={this.togglePrimary}
                        className={'modal-primary ' + this.props.className}>
                   <ModalHeader toggle={this.togglePrimary}>Modal title</ModalHeader>
@@ -153,7 +153,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button color="success" onClick={this.toggleSuccess}>Success modal</Button>
+                <Button color="success" onClick={this.toggleSuccess} className="mr-1">Success modal</Button>
                 <Modal isOpen={this.state.success} toggle={this.toggleSuccess}
                        className={'modal-success ' + this.props.className}>
                   <ModalHeader toggle={this.toggleSuccess}>Modal title</ModalHeader>
@@ -170,7 +170,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button color="warning" onClick={this.toggleWarning}>Warning modal</Button>
+                <Button color="warning" onClick={this.toggleWarning} className="mr-1">Warning modal</Button>
                 <Modal isOpen={this.state.warning} toggle={this.toggleWarning}
                        className={'modal-warning ' + this.props.className}>
                   <ModalHeader toggle={this.toggleWarning}>Modal title</ModalHeader>
@@ -187,7 +187,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button color="danger" onClick={this.toggleDanger}>Danger modal</Button>
+                <Button color="danger" onClick={this.toggleDanger} className="mr-1">Danger modal</Button>
                 <Modal isOpen={this.state.danger} toggle={this.toggleDanger}
                        className={'modal-danger ' + this.props.className}>
                   <ModalHeader toggle={this.toggleDanger}>Modal title</ModalHeader>
@@ -204,7 +204,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button color="info" onClick={this.toggleInfo}>Info modal</Button>
+                <Button color="info" onClick={this.toggleInfo} className="mr-1">Info modal</Button>
                 <Modal isOpen={this.state.info} toggle={this.toggleInfo}
                        className={'modal-info ' + this.props.className}>
                   <ModalHeader toggle={this.toggleInfo}>Modal title</ModalHeader>

From 0c88adc9c827451c262853ab528ce2e558b7586a Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 8 May 2018 16:21:49 +0200
Subject: [PATCH 3/7] refactor(widgets): add missing line charts to Widget03

---
 src/views/Widgets/Widgets.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/views/Widgets/Widgets.js b/src/views/Widgets/Widgets.js
index 2bddcbe..e94374c 100644
--- a/src/views/Widgets/Widgets.js
+++ b/src/views/Widgets/Widgets.js
@@ -156,7 +156,11 @@ class Widgets extends Component {
             </Widget03>
           </Col>
           <Col xs={12} sm={6} md={3}>
-            <Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} />
+            <Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
+              <div className="chart-wrapper">
+                <Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
+              </div>
+            </Widget03>
           </Col>
           <Col xs={12} sm={6} md={3}>
             <Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
@@ -166,7 +170,11 @@ class Widgets extends Component {
             </Widget03>
           </Col>
           <Col xs={12} sm={6} md={3}>
-            <Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} />
+            <Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
+              <div className="chart-wrapper">
+                <Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
+              </div>
+            </Widget03>
           </Col>
         </Row>
         <CardGroup className="mb-4">

From 245263a1add5e47f172ef322f8904ea6866fd63b Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 8 May 2018 16:22:46 +0200
Subject: [PATCH 4/7] fix(styles): ie temp fix align-items-center

---
 src/scss/_ie-fix.scss | 2 +-
 src/scss/style.css    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/scss/_ie-fix.scss b/src/scss/_ie-fix.scss
index 24dd340..ce6bc77 100644
--- a/src/scss/_ie-fix.scss
+++ b/src/scss/_ie-fix.scss
@@ -1,3 +1,3 @@
-html body .align-items-center {
+html body .app.flex-row.align-items-center {
   height: 100vh;
 }
diff --git a/src/scss/style.css b/src/scss/style.css
index 9170eca..b4ed1dd 100644
--- a/src/scss/style.css
+++ b/src/scss/style.css
@@ -9939,5 +9939,5 @@ body {
 .app-header .navbar-nav .dropdown-menu-right {
   right: auto; }
 
-html body .align-items-center {
+html body .app.flex-row.align-items-center {
   height: 100vh; }

From f75010f0b40cd6b1380f24260ea5cd3b5b14ef58 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 8 May 2018 16:43:19 +0200
Subject: [PATCH 5/7] chore: dependencies update, version bump

---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index c99cf9c..748ea60 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-rc.0",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,12 +12,13 @@
     "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
+    "@coreui/coreui": "^2.0.0-rc.2",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/react": "^2.0.0-beta.3",
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.5",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "flag-icon-css": "^3.0.0",

From 22774fdb15898c19a8ba3214492b859799280881 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 8 May 2018 16:48:12 +0200
Subject: [PATCH 6/7] refactor(switches): cleanup

---
 src/views/Base/Switches/Switches.js | 40 ++---------------------------
 1 file changed, 2 insertions(+), 38 deletions(-)

diff --git a/src/views/Base/Switches/Switches.js b/src/views/Base/Switches/Switches.js
index 026a367..f76ccd4 100644
--- a/src/views/Base/Switches/Switches.js
+++ b/src/views/Base/Switches/Switches.js
@@ -84,25 +84,7 @@ class Switches extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                3d Switch <small><code>outline label</code></small>
-              </CardHeader>
-              <CardBody>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
-              </CardBody>
-            </Card>
-          </Col>
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                3d Switch <small><code>outline={'alt'} label</code></small>
+                3d Switch <small><code>outline="alt" label</code></small>
               </CardHeader>
               <CardBody>
                 <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
@@ -120,25 +102,7 @@ class Switches extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                3d Switch <small><code>outline label</code></small>
-              </CardHeader>
-              <CardBody>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label />
-              </CardBody>
-            </Card>
-          </Col>
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                3d Switch <small><code>outline={'alt'} label</code></small>
+                3d Switch <small><code>outline="alt" label</code></small>
               </CardHeader>
               <CardBody>
                 <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label />

From 697e49b54e62ba72e07760d2959b9b2051004a86 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 8 May 2018 18:33:33 +0200
Subject: [PATCH 7/7] chore: update @coreui/react dependency

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 748ea60..6215830 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@coreui/coreui": "^2.0.0-rc.2",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
-    "@coreui/react": "^2.0.0-beta.3",
+    "@coreui/react": "^2.0.0-rc.0",
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.5",