From 6ed15ff7eb08fd5e608b2591d6ef951ffecd082c Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Sat, 2 Jun 2018 21:09:08 +0100
Subject: [PATCH 1/8] feat(Dropdown): add flex prop

---
 src/components/Dropdown/Dropdown.react.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.react.js b/src/components/Dropdown/Dropdown.react.js
index fc08d01c..579ad84c 100644
--- a/src/components/Dropdown/Dropdown.react.js
+++ b/src/components/Dropdown/Dropdown.react.js
@@ -28,6 +28,10 @@ type DefaultProps = {|
    * Is this Dropdown a Card option?
    */
   +isOption?: boolean,
+  /**
+   * Add flex classes to the Dropdown
+   */
+  +flex?: boolean | "xs" | "sm" | "md" | "lg" | "xl",
 |};
 
 type WithAnyTriggerProps = {|
@@ -159,13 +163,22 @@ class Dropdown extends React.Component<Props, State> {
   };
 
   render(): React.Node {
-    const { className, children, desktopOnly, isOption, ...props } = this.props;
+    const {
+      className,
+      children,
+      desktopOnly,
+      isOption,
+      flex = false,
+      ...props
+    } = this.props;
 
     const classes = cn(
       {
         dropdown: true,
         "d-none": desktopOnly,
-        "d-md-flex": desktopOnly,
+        "d-md-flex": desktopOnly || flex === "md",
+        [`d-{flex}-flex`]: ["xs", "sm", "lg", "xl"].includes(flex),
+        "d-flex": typeof flex === "boolean",
         "card-options-dropdown": isOption,
         show: this.state.isOpen,
       },

From dc9cb24e5a085de580ff6ec20c5233983ac36b79 Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Sat, 2 Jun 2018 21:11:17 +0100
Subject: [PATCH 2/8] fix(NotificationTray): make Dropdown flex

---
 src/components/Notification/NotificationTray.react.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Notification/NotificationTray.react.js b/src/components/Notification/NotificationTray.react.js
index 5f6197c1..6f37b7a4 100644
--- a/src/components/Notification/NotificationTray.react.js
+++ b/src/components/Notification/NotificationTray.react.js
@@ -33,6 +33,7 @@ function NotificationTray(props: Props): React.Node {
       position="bottom-end"
       arrow={true}
       arrowPosition="right"
+      flex
       items={
         <React.Fragment>
           {(notifications &&

From 910ea82f4b0361ca99f8ba8b72b6128643abb8d5 Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Sat, 2 Jun 2018 21:12:15 +0100
Subject: [PATCH 3/8] fix(StampCard): dont use Header.H4 shorthand component

---
 src/components/StampCard/StampCard.react.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/StampCard/StampCard.react.js b/src/components/StampCard/StampCard.react.js
index 8b903dcb..8b5ecee8 100644
--- a/src/components/StampCard/StampCard.react.js
+++ b/src/components/StampCard/StampCard.react.js
@@ -27,7 +27,11 @@ function StampCard({
       <div className="d-flex align-items-center">
         <Stamp color={color} icon={icon} className="mr-3" />
         <div>
-          {header && <Header.H4 className="m-0">{header}</Header.H4>}
+          {header && (
+            <Header size={4} className="m-0">
+              {header}
+            </Header>
+          )}
           {children}
           {footer && <Text.Small muted>{footer}</Text.Small>}
         </div>

From cc80d68ae9521b0cdc68b53b0aa4a29e9e595f09 Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Sat, 2 Jun 2018 21:18:21 +0100
Subject: [PATCH 4/8] docs(): add descriptions for all Header components

---
 src/components/Header/H1.react.js     | 3 +++
 src/components/Header/H2.react.js     | 3 +++
 src/components/Header/H3.react.js     | 3 +++
 src/components/Header/H4.react.js     | 3 +++
 src/components/Header/H5.react.js     | 3 +++
 src/components/Header/H6.react.js     | 3 +++
 src/components/Header/Header.react.js | 1 +
 7 files changed, 19 insertions(+)

diff --git a/src/components/Header/H1.react.js b/src/components/Header/H1.react.js
index 5bce552d..11dfc64e 100644
--- a/src/components/Header/H1.react.js
+++ b/src/components/Header/H1.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h1 HTML element with a margin below
+ */
 function H1({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (
diff --git a/src/components/Header/H2.react.js b/src/components/Header/H2.react.js
index 2b263b7d..43d7fd46 100644
--- a/src/components/Header/H2.react.js
+++ b/src/components/Header/H2.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h2 HTML element with a margin below
+ */
 function H2({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (
diff --git a/src/components/Header/H3.react.js b/src/components/Header/H3.react.js
index efc8dfa9..cb168148 100644
--- a/src/components/Header/H3.react.js
+++ b/src/components/Header/H3.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h3 HTML element with a margin below
+ */
 function H3({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (
diff --git a/src/components/Header/H4.react.js b/src/components/Header/H4.react.js
index 5ec19b3d..2b4c2524 100644
--- a/src/components/Header/H4.react.js
+++ b/src/components/Header/H4.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h4 HTML element with a margin below
+ */
 function H4({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (
diff --git a/src/components/Header/H5.react.js b/src/components/Header/H5.react.js
index d6ee6c87..30568585 100644
--- a/src/components/Header/H5.react.js
+++ b/src/components/Header/H5.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h5 HTML element with a margin below
+ */
 function H5({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (
diff --git a/src/components/Header/H6.react.js b/src/components/Header/H6.react.js
index 71151ae1..bf0571cf 100644
--- a/src/components/Header/H6.react.js
+++ b/src/components/Header/H6.react.js
@@ -9,6 +9,9 @@ type Props = {|
   +className?: string,
 |};
 
+/**
+ * A Header component rendered as a h6 HTML element with a margin below
+ */
 function H6({ className, children }: Props): React.Node {
   const classes: string = cn("mt-0 mb-4", className);
   return (
diff --git a/src/components/Header/Header.react.js b/src/components/Header/Header.react.js
index f8fe3103..4663e4cb 100644
--- a/src/components/Header/Header.react.js
+++ b/src/components/Header/Header.react.js
@@ -25,6 +25,7 @@ type Props = {|
 
 /**
  * A header
+ * By default renders a div not a <hX> tag and has no additional spacing classes applied
  */
 function Header({
   RootComponent,

From 090fd644e1fd369c49a3e11744fd29f83a1f3232 Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Sat, 2 Jun 2018 21:19:00 +0100
Subject: [PATCH 5/8] fix(Table): responsive class not applied correctly

---
 src/components/Table/Table.css      | 2 +-
 src/components/Table/Table.react.js | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/Table/Table.css b/src/components/Table/Table.css
index e82e49b0..705a5e49 100644
--- a/src/components/Table/Table.css
+++ b/src/components/Table/Table.css
@@ -1,3 +1,3 @@
-.Table.table-responsive {
+.table-responsive {
   overflow-x: inherit !important;
 }
diff --git a/src/components/Table/Table.react.js b/src/components/Table/Table.react.js
index 9ec45aab..fe1b5535 100644
--- a/src/components/Table/Table.react.js
+++ b/src/components/Table/Table.react.js
@@ -96,11 +96,7 @@ function Table({
     </table>
   );
 
-  return !responsive ? (
-    table
-  ) : (
-    <div className="Table.table-responsive">{table}</div>
-  );
+  return !responsive ? table : <div className="table-responsive">{table}</div>;
 }
 
 Table.defaultProps = {

From bfcdc2374ec13e02194dd9e7e106d1e6f0d29ac5 Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Sat, 2 Jun 2018 21:20:23 +0100
Subject: [PATCH 6/8] fix(Homepage): ProgressCard examples column width

---
 example/src/HomePage.react.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/example/src/HomePage.react.js b/example/src/HomePage.react.js
index f4f22d5f..56576a5a 100644
--- a/example/src/HomePage.react.js
+++ b/example/src/HomePage.react.js
@@ -327,7 +327,7 @@ function Home() {
                   </Card.Body>
                 </Card>
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="New feedback"
                   content="62"
@@ -335,7 +335,7 @@ function Home() {
                   progressWidth={28}
                 />
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="Today profit"
                   content="$652"
@@ -343,7 +343,7 @@ function Home() {
                   progressWidth={84}
                 />
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="Users online"
                   content="76"

From 5500e4480b325f57e5e541809f50f9b4921bac7b Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Sat, 2 Jun 2018 21:21:16 +0100
Subject: [PATCH 7/8] fix(Homepage): StampCards headers missing spaces

---
 example/src/HomePage.react.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/example/src/HomePage.react.js b/example/src/HomePage.react.js
index 56576a5a..783e96bb 100644
--- a/example/src/HomePage.react.js
+++ b/example/src/HomePage.react.js
@@ -359,8 +359,7 @@ function Home() {
               icon="dollar-sign"
               header={
                 <a>
-                  132
-                  <small>Sales</small>
+                  132 <small>Sales</small>
                 </a>
               }
               footer={"12 waiting payments"}
@@ -372,8 +371,7 @@ function Home() {
               icon="shopping-cart"
               header={
                 <a>
-                  78
-                  <small>Orders</small>
+                  78 <small>Orders</small>
                 </a>
               }
               footer={"32 shipped"}
@@ -385,8 +383,7 @@ function Home() {
               icon="users"
               header={
                 <a>
-                  1,352
-                  <small>Members</small>
+                  1,352 <small>Members</small>
                 </a>
               }
               footer={"163 registered today"}
@@ -398,8 +395,7 @@ function Home() {
               icon="message-square"
               header={
                 <a>
-                  132
-                  <small>Comments</small>
+                  132 <small>Comments</small>
                 </a>
               }
               footer={"16 waiting"}

From f85b58a95dd5c9d21da5aec2fcee71248f612544 Mon Sep 17 00:00:00 2001
From: Jon Thompson <jon@iu-hq.com>
Date: Sat, 2 Jun 2018 22:36:20 +0100
Subject: [PATCH 8/8] fix(Dropdown): fix d-flex class check

---
 src/components/Dropdown/Dropdown.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dropdown/Dropdown.react.js b/src/components/Dropdown/Dropdown.react.js
index 579ad84c..254dcc3a 100644
--- a/src/components/Dropdown/Dropdown.react.js
+++ b/src/components/Dropdown/Dropdown.react.js
@@ -178,7 +178,7 @@ class Dropdown extends React.Component<Props, State> {
         "d-none": desktopOnly,
         "d-md-flex": desktopOnly || flex === "md",
         [`d-{flex}-flex`]: ["xs", "sm", "lg", "xl"].includes(flex),
-        "d-flex": typeof flex === "boolean",
+        "d-flex": flex === true,
         "card-options-dropdown": isOption,
         show: this.state.isOpen,
       },