diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss index 1e74d47d31f3..a36e1f4b0753 100644 --- a/packages/components/src/components/ui-shell/_side-nav.scss +++ b/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} //---------------------------------------------------------------------------- diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 3f652fa22dbf..8ed6905d4170 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/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", diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js index d8741d0a44f9..681c374f330d 100644 --- a/packages/react/src/__tests__/index-test.js +++ b/packages/react/src/__tests__/index-test.js @@ -116,6 +116,7 @@ describe('Carbon Components React', () => { "SelectableTile", "SideNav", "SideNavDetails", + "SideNavDivider", "SideNavFooter", "SideNavHeader", "SideNavIcon", diff --git a/packages/react/src/components/UIShell/SideNavDivider.js b/packages/react/src/components/UIShell/SideNavDivider.js new file mode 100644 index 000000000000..69e583c51647 --- /dev/null +++ b/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
  • ; +} + +SideNavDivider.propTypes = { + /** + * Provide an optional class to be applied to the containing node + */ + className: PropTypes.string, +}; + +export default SideNavDivider; diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js index 07e143d62ae2..0dee9b75010b 100644 --- a/packages/react/src/components/UIShell/UIShell-story.js +++ b/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, () => ( + <> + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + + L0 menu item + + + L0 menu item + + + L0 menu item + + + + L0 link + L0 link + + + + +)); + +FixedSideNavWDivider.storyName = 'Fixed SideNav w/ Divider'; + export const SideNavRail = withReadme(readme, () => ( <> diff --git a/packages/react/src/components/UIShell/index.js b/packages/react/src/components/UIShell/index.js index 27c95fb684af..a1f583bdf015 100644 --- a/packages/react/src/components/UIShell/index.js +++ b/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'; diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 4ba2c266aa23..a57eb96e157a 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -186,6 +186,7 @@ export { SkipToContent, SideNav, SideNavDetails, + SideNavDivider, SideNavFooter, SideNavHeader, SideNavIcon,