From 6a495d5a5da6b5766a8fbb8938e4cab5ffe3481e Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Wed, 10 Feb 2021 21:10:19 +0100 Subject: [PATCH] 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> --- .../src/components/ui-shell/_side-nav.scss | 9 ++++ .../__snapshots__/PublicAPI-test.js.snap | 7 +++ packages/react/src/__tests__/index-test.js | 1 + .../src/components/UIShell/SideNavDivider.js | 27 ++++++++++ .../src/components/UIShell/UIShell-story.js | 54 +++++++++++++++++++ .../react/src/components/UIShell/index.js | 1 + packages/react/src/index.js | 1 + 7 files changed, 100 insertions(+) create mode 100644 packages/react/src/components/UIShell/SideNavDivider.js 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,