feat(navigation-bar): add white and black themes

Sage · Jan 14, 2022 · 1663dfd · 1663dfd
1 parent cd6b276
commit 1663dfd
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 29 deletions.
diff --git a/src/components/navigation-bar/navigation-bar.component.js b/src/components/navigation-bar/navigation-bar.component.js
@@ -35,7 +35,7 @@ NavigationBar.propTypes = {
   children: PropTypes.node,
   ariaLabel: PropTypes.string,
   /** Color scheme of navigation component */
-  navigationType: PropTypes.oneOf(["light", "dark"]),
+  navigationType: PropTypes.oneOf(["light", "dark", "white", "black"]),
   /** If 'true' the children will not be visible */
   isLoading: PropTypes.bool,
   /** Defines the position of sticky navigation bar */

diff --git a/src/components/navigation-bar/navigation-bar.d.ts b/src/components/navigation-bar/navigation-bar.d.ts
@@ -4,7 +4,7 @@ import { SpaceProps } from "styled-system";
 export interface NavigationBarProps extends SpaceProps {
   children?: React.ReactNode;
   ariaLabel?: string;
-  navigationType?: "light" | "dark";
+  navigationType?: "light" | "dark" | "white" | "black";
   isLoading?: boolean;
   stickyPosition?: "top" | "bottom";
   stickyOffset?: string;

diff --git a/src/components/navigation-bar/navigation-bar.spec.js b/src/components/navigation-bar/navigation-bar.spec.js
@@ -75,7 +75,7 @@ describe("NavigationBar", () => {
 
   it("should render correct styles in `light` scheme", () => {
     wrapper = mount(
-      <StyledNavigationBar>
+      <StyledNavigationBar navigationType="light">
         <div>test content</div>
       </StyledNavigationBar>
     );
@@ -106,6 +106,38 @@ describe("NavigationBar", () => {
     );
   });
 
+  it("should render correct styles in `white` scheme", () => {
+    wrapper = mount(
+      <StyledNavigationBar navigationType="white">
+        <div>test content</div>
+      </StyledNavigationBar>
+    );
+
+    assertStyleMatch(
+      {
+        backgroundColor: baseTheme.colors.white,
+        borderBottom: `1px solid ${baseTheme.navigationBar.white.borderBottom}`,
+      },
+      wrapper
+    );
+  });
+
+  it("should render correct styles in `black` scheme", () => {
+    wrapper = mount(
+      <StyledNavigationBar navigationType="black">
+        <div>test content</div>
+      </StyledNavigationBar>
+    );
+
+    assertStyleMatch(
+      {
+        backgroundColor: baseTheme.navigationBar.black.background,
+        color: baseTheme.colors.white,
+      },
+      wrapper
+    );
+  });
+
   it.each([
     ["only screen and (max-width: 599px)", "0 16px"],
     ["only screen and (max-width: 959px)", "0 24px"],

diff --git a/src/components/navigation-bar/navigation-bar.stories.mdx b/src/components/navigation-bar/navigation-bar.stories.mdx
@@ -6,7 +6,7 @@ import VerticalDivider from "../vertical-divider";
 import { SageIcon } from "../../../.storybook/welcome-page/footer/footer.style.js";
 import StyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
-<Meta title="Navigation Bar" />
+<Meta title="Navigation Bar" parameters={{ info: { disable: true } }} />
 
 # Navigation Bar
 
@@ -26,44 +26,45 @@ import NavigationBar from "carbon-react/lib/components/navigation-bar";
 
 ## Examples
 
-### Light Theme
+### Default - Light Theme
 
 <Canvas>
-  <Story name="default" parameters={{ info: { disable: true } }}>
+  <Story name="default">
     <NavigationBar>Example content</NavigationBar>
   </Story>
 </Canvas>
 
-### Light Theme Loading State
+### Dark Theme
 
-If `isLoading={true}` the children will not be visible
+<Canvas>
+  <Story name="dark theme">
+    <NavigationBar navigationType="dark">Example content</NavigationBar>
+  </Story>
+</Canvas>
+
+### White Theme
 
 <Canvas>
-  <Story name="isLoading" parameters={{ info: { disable: true } }}>
-    <NavigationBar isLoading>
-      <Menu>
-        <MenuItem>menu item one</MenuItem>
-        <MenuItem>menu item two</MenuItem>
-      </Menu>
-    </NavigationBar>
+  <Story name="white theme">
+    <NavigationBar navigationType="white">Example content</NavigationBar>
   </Story>
 </Canvas>
 
-### Dark Theme
+### Black Theme
 
 <Canvas>
-  <Story name="dark theme" parameters={{ info: { disable: true } }}>
-    <NavigationBar navigationType="dark">Example content</NavigationBar>
+  <Story name="black theme">
+    <NavigationBar navigationType="black">Example content</NavigationBar>
   </Story>
 </Canvas>
 
-### Dark Theme Loading State
+### Loading State
 
 If `isLoading={true}` the children will not be visible
 
 <Canvas>
-  <Story name="dark theme isLoading" parameters={{ info: { disable: true } }}>
-    <NavigationBar navigationType="dark" isLoading>
+  <Story name="isLoading">
+    <NavigationBar isLoading>
       <Menu>
         <MenuItem>menu item one</MenuItem>
         <MenuItem>menu item two</MenuItem>
@@ -78,7 +79,7 @@ The spacing props (see prop table below) accept either a number between 1 and 8
 valid CSS string.
 
 <Canvas>
-  <Story name="with custom spacing" parameters={{ info: { disable: true } }}>
+  <Story name="with custom spacing">
     <NavigationBar py={2} px={7}>
       <Menu>
         <MenuItem>menu item one</MenuItem>
@@ -91,10 +92,7 @@ valid CSS string.
 ### Set content max width using Box
 
 <Canvas>
-  <Story
-    name="content max width using Box"
-    parameters={{ info: { disable: true } }}
-  >
+  <Story name="content max width using Box">
     <NavigationBar>
       <Box display="flex" flex="1" maxWidth="1000px" margin="0 auto">
         <SageIcon style={{ alignSelf: "center" }} />
@@ -132,7 +130,7 @@ valid CSS string.
 The `stickyPosition` prop can be used to make the navigation bar stick to the top or bottom of it's nearest scrolling ancestor. Then the position relative to the top/bottom can be offset using the `stickyOffset` prop.
 
 <Canvas>
-  <Story name="sticky" parameters={{ info: { disable: true } }}>
+  <Story name="sticky">
     <div style={{ overflow: "scroll" }}>
       <div
         style={{

diff --git a/src/components/navigation-bar/navigation-bar.style.js b/src/components/navigation-bar/navigation-bar.style.js
@@ -45,15 +45,31 @@ const StyledNavigationBar = styled.nav`
 
   ${({ navigationType, theme }) => css`
     min-height: 40px;
-    background-color: ${theme.navigationBar.light.background};
-    border-bottom: 1px solid ${theme.navigationBar.light.borderBottom};
+
+    ${navigationType === "light" &&
+    css`
+      background-color: ${theme.navigationBar.light.background};
+      border-bottom: 1px solid ${theme.navigationBar.light.borderBottom};
+    `}
 
     ${navigationType === "dark" &&
     css`
       background-color: ${theme.navigationBar.dark.background};
       border-bottom: 1px solid ${theme.navigationBar.dark.borderBottom};
       color: ${theme.colors.white};
     `}
+
+    ${navigationType === "black" &&
+    css`
+      background-color: ${theme.navigationBar.black.background};
+      color: ${theme.colors.white};
+    `}
+
+    ${navigationType === "white" &&
+    css`
+      background-color: ${theme.colors.white};
+      border-bottom: 1px solid ${theme.navigationBar.white.borderBottom};
+    `}
   `}
 `;