From c4c1012f72e3c1d68e96705a4fa1ddfddaa23309 Mon Sep 17 00:00:00 2001
From: mynameistessa <tessa@dabapps.com>
Date: Mon, 23 Sep 2019 13:47:36 +0100
Subject: [PATCH 1/5] adding classnames

---
 src/less/nav-bar.less | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/less/nav-bar.less b/src/less/nav-bar.less
index 5f2e91ad4..9c917fe1d 100644
--- a/src/less/nav-bar.less
+++ b/src/less/nav-bar.less
@@ -43,4 +43,13 @@
     transform: translate(0, -100%);
     box-shadow: @shadow-none;
   }
+
+  &.dark {
+    background-color: @tertiary;
+    color: @white;
+  }
+
+  &.light {
+    background-color: @white;
+  }
 }

From 376cce537fd8dbc22db1218cee1d0b47280f37aa Mon Sep 17 00:00:00 2001
From: mynameistessa <tessa@dabapps.com>
Date: Mon, 23 Sep 2019 13:47:40 +0100
Subject: [PATCH 2/5] adding prop

---
 src/ts/components/navigation/nav-bar.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/ts/components/navigation/nav-bar.tsx b/src/ts/components/navigation/nav-bar.tsx
index 363bde0b5..b086a656e 100644
--- a/src/ts/components/navigation/nav-bar.tsx
+++ b/src/ts/components/navigation/nav-bar.tsx
@@ -19,6 +19,7 @@ export interface NavBarProps extends ComponentProps, HTMLProps<HTMLElement> {
    * Remove NavBar shadow
    */
   noShadow?: boolean;
+  dark?: boolean;
 }
 
 export interface NavBarState {
@@ -74,6 +75,7 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
       className,
       fixed,
       shy,
+      dark,
       noShadow,
       component: Component = 'div',
       ...remainingProps
@@ -87,6 +89,7 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
       shy ? 'shy' : null,
       hidden ? 'hidden' : null,
       noShadow ? 'no-shadow' : null,
+      dark ? 'dark' : 'light',
       className,
     ];
 

From 293837c5521955067c79fd37a3ac2377a1802283 Mon Sep 17 00:00:00 2001
From: mynameistessa <tessa@dabapps.com>
Date: Mon, 23 Sep 2019 14:32:14 +0100
Subject: [PATCH 3/5] adding both variants to docs

---
 .../components/navigation/nav-bar.examples.md | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/ts/components/navigation/nav-bar.examples.md b/src/ts/components/navigation/nav-bar.examples.md
index c7d2dce96..f4b1e08d2 100644
--- a/src/ts/components/navigation/nav-bar.examples.md
+++ b/src/ts/components/navigation/nav-bar.examples.md
@@ -17,6 +17,37 @@ class NavBarExample extends React.Component {
 
     return (
       <div>
+        <NavBar fixed={type === 'fixed'} shy={type === 'shy'} dark>
+          <Column>
+            <h1 className="font-size-large display-inline-block margin-bottom-none margin-top-small">
+              Title
+            </h1>
+
+            <Nav className="float-right">
+              <NavItem active>
+                <a>
+                  One
+                </a>
+              </NavItem>
+              <NavItem>
+                <a>
+                  Two
+                </a>
+              </NavItem>
+              <NavItem>
+                <a>
+                  Three
+                </a>
+              </NavItem>
+              <NavItem className="button hollow primary">
+                <a>
+                  Logout
+                </a>
+              </NavItem>
+            </Nav>
+          </Column>
+        </NavBar>
+
         <NavBar fixed={type === 'fixed'} shy={type === 'shy'}>
           <Column>
             <h1 className="font-size-large display-inline-block margin-bottom-none margin-top-small">

From 66002c0f418ca04dacb6e8451cf971f6a3b752be Mon Sep 17 00:00:00 2001
From: mynameistessa <tessa@dabapps.com>
Date: Mon, 23 Sep 2019 15:06:31 +0100
Subject: [PATCH 4/5] adding to snapshots

---
 tests/__snapshots__/nav-bar.tsx.snap | 6 ++++++
 tests/nav-bar.tsx                    | 8 +++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/tests/__snapshots__/nav-bar.tsx.snap b/tests/__snapshots__/nav-bar.tsx.snap
index 2c482f333..eeda09e54 100644
--- a/tests/__snapshots__/nav-bar.tsx.snap
+++ b/tests/__snapshots__/nav-bar.tsx.snap
@@ -18,6 +18,12 @@ exports[`NavBar should apply shy class 1`] = `
 />
 `;
 
+exports[`NavBar should apply the dark class 1`] = `
+<div
+  className="nav-bar dark"
+/>
+`;
+
 exports[`NavBar should apply the hidden class 1`] = `
 <NavBar
   shy={true}
diff --git a/tests/nav-bar.tsx b/tests/nav-bar.tsx
index d050e481f..c86a137ff 100644
--- a/tests/nav-bar.tsx
+++ b/tests/nav-bar.tsx
@@ -44,7 +44,7 @@ describe('NavBar', () => {
   });
 
   it('should take regular element attributes', () => {
-    const tree = renderer.create(<NavBar className="my-class" />);
+    const tree = renderer.create(<NavBar dark className="my-class" />);
 
     expect(tree).toMatchSnapshot();
   });
@@ -67,6 +67,12 @@ describe('NavBar', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should apply the dark class', () => {
+    const tree = renderer.create(<NavBar dark />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should apply the hidden class', () => {
     const instance = enzyme.mount(<NavBar shy />);
 

From 57bafb70a51ce63ef9cb8889721d697f653badb4 Mon Sep 17 00:00:00 2001
From: mynameistessa <tessa@dabapps.com>
Date: Mon, 23 Sep 2019 15:19:22 +0100
Subject: [PATCH 5/5] light and dark as generic props

---
 src/ts/components/navigation/nav-bar.tsx | 5 ++++-
 tests/__snapshots__/nav-bar.tsx.snap     | 6 ++++++
 tests/nav-bar.tsx                        | 8 +++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/ts/components/navigation/nav-bar.tsx b/src/ts/components/navigation/nav-bar.tsx
index b086a656e..dd5a146de 100644
--- a/src/ts/components/navigation/nav-bar.tsx
+++ b/src/ts/components/navigation/nav-bar.tsx
@@ -20,6 +20,7 @@ export interface NavBarProps extends ComponentProps, HTMLProps<HTMLElement> {
    */
   noShadow?: boolean;
   dark?: boolean;
+  light?: boolean;
 }
 
 export interface NavBarState {
@@ -76,6 +77,7 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
       fixed,
       shy,
       dark,
+      light,
       noShadow,
       component: Component = 'div',
       ...remainingProps
@@ -89,7 +91,8 @@ export class NavBar extends PureComponent<NavBarProps, NavBarState> {
       shy ? 'shy' : null,
       hidden ? 'hidden' : null,
       noShadow ? 'no-shadow' : null,
-      dark ? 'dark' : 'light',
+      dark ? 'dark' : null,
+      light ? 'light' : null,
       className,
     ];
 
diff --git a/tests/__snapshots__/nav-bar.tsx.snap b/tests/__snapshots__/nav-bar.tsx.snap
index eeda09e54..ab6370df0 100644
--- a/tests/__snapshots__/nav-bar.tsx.snap
+++ b/tests/__snapshots__/nav-bar.tsx.snap
@@ -34,6 +34,12 @@ exports[`NavBar should apply the hidden class 1`] = `
 </NavBar>
 `;
 
+exports[`NavBar should apply the light class 1`] = `
+<div
+  className="nav-bar light"
+/>
+`;
+
 exports[`NavBar should match snapshot 1`] = `
 <div
   className="nav-bar"
diff --git a/tests/nav-bar.tsx b/tests/nav-bar.tsx
index c86a137ff..2f5d4a93f 100644
--- a/tests/nav-bar.tsx
+++ b/tests/nav-bar.tsx
@@ -44,7 +44,7 @@ describe('NavBar', () => {
   });
 
   it('should take regular element attributes', () => {
-    const tree = renderer.create(<NavBar dark className="my-class" />);
+    const tree = renderer.create(<NavBar className="my-class" />);
 
     expect(tree).toMatchSnapshot();
   });
@@ -73,6 +73,12 @@ describe('NavBar', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should apply the light class', () => {
+    const tree = renderer.create(<NavBar light />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should apply the hidden class', () => {
     const instance = enzyme.mount(<NavBar shy />);