feat(ui-shell): add side-nav-divider component (#7756)

* feat(ui-shell): add side-nav-divider component

* fix(side-nav-divider): use gray-20 instead of ui-03 as background

* fix(side-nav-divider): use function declaration

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: janhassel

packages/components/src/components/ui-shell/_side-nav.scss

@@ -344,6 +344,15 @@
     height: mini-units(6);
   }
 
+  //----------------------------------------------------------------------------
+  // Side-nav > Navigation > Divider
+  //----------------------------------------------------------------------------
+  .#{$prefix}--side-nav__divider {
+    height: 1px;
+    margin: $spacing-03 $spacing-05;
+    background-color: $ibm-color__gray-20;
+  }
+
   //----------------------------------------------------------------------------
   // Side-nav > Navigation > {Menu,Submenu}
   //----------------------------------------------------------------------------

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7023,6 +7023,13 @@ Map {
       },
     },
   },
+  "SideNavDivider" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
   "SideNavFooter" => Object {
     "defaultProps": Object {
       "assistiveText": "Toggle opening or closing the side navigation",

packages/react/src/__tests__/index-test.js

@@ -116,6 +116,7 @@ describe('Carbon Components React', () => {
         "SelectableTile",
         "SideNav",
         "SideNavDetails",
+        "SideNavDivider",
         "SideNavFooter",
         "SideNavHeader",
         "SideNavIcon",

packages/react/src/components/UIShell/SideNavDivider.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { settings } from 'carbon-components';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const { prefix } = settings;
+
+function SideNavDivider({ className }) {
+  const classNames = cx(`${prefix}--side-nav__divider`, className);
+  return <li role="separator" className={classNames} />;
+}
+
+SideNavDivider.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+};
+
+export default SideNavDivider;

packages/react/src/components/UIShell/UIShell-story.js

@@ -33,6 +33,7 @@ import {
   // SideNavHeader,
   // SideNavDetails,
   // SideNavSwitcher,
+  SideNavDivider,
   SideNavItems,
   SideNavLink,
   SideNavMenu,
@@ -151,6 +152,7 @@ export default {
       SkipToContent,
       SideNav,
       SideNavItems,
+      SideNavDivider,
       SideNavLink,
       SideNavMenu,
       SideNavMenuItem,
@@ -683,6 +685,58 @@ export const FixedSideNavWIcons = withReadme(readme, () => (
 
 FixedSideNavWIcons.storyName = 'Fixed SideNav w/ Icons';
 
+export const FixedSideNavWDivider = withReadme(readme, () => (
+  <>
+    <SideNav
+      isFixedNav
+      expanded={true}
+      isChildOfHeader={false}
+      aria-label="Side navigation">
+      <SideNavItems>
+        <SideNavMenu title="L0 menu">
+          <SideNavMenuItem href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+          <SideNavMenuItem href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+          <SideNavMenuItem href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+        </SideNavMenu>
+        <SideNavMenu title="L0 menu" isActive={true}>
+          <SideNavMenuItem href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+          <SideNavMenuItem aria-current="page" href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+          <SideNavMenuItem href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+        </SideNavMenu>
+        <SideNavMenu title="L0 menu">
+          <SideNavMenuItem href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+          <SideNavMenuItem href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+          <SideNavMenuItem href="javascript:void(0)">
+            L0 menu item
+          </SideNavMenuItem>
+        </SideNavMenu>
+        <SideNavDivider />
+        <SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
+        <SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
+      </SideNavItems>
+    </SideNav>
+    <StoryContent useResponsiveOffset={false} />
+  </>
+));
+
+FixedSideNavWDivider.storyName = 'Fixed SideNav w/ Divider';
+
 export const SideNavRail = withReadme(readme, () => (
   <>
     <SideNav aria-label="Side navigation" isRail>

packages/react/src/components/UIShell/index.js

@@ -27,6 +27,7 @@ export SkipToContent from './SkipToContent';
 
 export SideNav from './SideNav';
 export SideNavDetails from './SideNavDetails';
+export SideNavDivider from './SideNavDivider';
 export SideNavFooter from './SideNavFooter';
 export SideNavHeader from './SideNavHeader';
 export SideNavIcon from './SideNavIcon';

packages/react/src/index.js

@@ -186,6 +186,7 @@ export {
   SkipToContent,
   SideNav,
   SideNavDetails,
+  SideNavDivider,
   SideNavFooter,
   SideNavHeader,
   SideNavIcon,