From b235b88646a887b0195096f866a270d4406e32d4 Mon Sep 17 00:00:00 2001 From: Filip Frincu Date: Fri, 22 May 2020 23:00:51 +0300 Subject: [PATCH 1/5] fix: ImageGalleryImage - change margin bottom of images from 1.5 rem to -07 (32px) --- .../src/components/ImageGallery/ImageGalleryImage.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby-theme-carbon/src/components/ImageGallery/ImageGalleryImage.module.scss b/packages/gatsby-theme-carbon/src/components/ImageGallery/ImageGalleryImage.module.scss index b73b54f9f..3bbde1205 100644 --- a/packages/gatsby-theme-carbon/src/components/ImageGallery/ImageGalleryImage.module.scss +++ b/packages/gatsby-theme-carbon/src/components/ImageGallery/ImageGalleryImage.module.scss @@ -1,5 +1,5 @@ .figure { - margin-bottom: 1.5rem; + margin-bottom: $spacing-07; } .image-button-wrapper { From b9268de8dcf4ddeace817ba4145cae942d82c2e7 Mon Sep 17 00:00:00 2001 From: Filip Frincu Date: Tue, 23 Jun 2020 17:49:15 +0300 Subject: [PATCH 2/5] feat: ability to use dividers in side navigation #865 --- .../src/pages/guides/navigation/sidebar.mdx | 19 +++++++ packages/gatsby-theme-carbon/gatsby-node.js | 1 + .../src/components/LeftNav/LeftNav.js | 7 ++- .../components/LeftNav/LeftNav.module.scss | 7 +++ .../src/components/LeftNav/LeftNavItem.js | 56 +++++++++++-------- .../components/LeftNav/LeftNavItemProvider.js | 1 + 6 files changed, 66 insertions(+), 25 deletions(-) diff --git a/packages/example/src/pages/guides/navigation/sidebar.mdx b/packages/example/src/pages/guides/navigation/sidebar.mdx index 2b89fb4dd..2e3aeacb5 100644 --- a/packages/example/src/pages/guides/navigation/sidebar.mdx +++ b/packages/example/src/pages/guides/navigation/sidebar.mdx @@ -34,6 +34,25 @@ Some important things to note here: - You can make a `Page/index.mdx` file if you’d prefer to have assets in a folder. The path would still just look like `/Page` +## Add divider + +You can add divider(s) between the items of your nav item list by adding `hasDivider: true` in `src/data/nav-items.yaml`. + +```yaml +- title: Menu + pages: + - title: Page 1 + path: /menu/Page-1 + - title: Page 2 + path: /menu/Page-2 + hasDivider: true +- title: Single Page + pages: + - path: /single-page +``` + +In the example above, a divider will appear between **Menu** and **Single Page**. + ## Customizing The nav item list can be customized using Gatsby theme [shadowing](../shadowing). diff --git a/packages/gatsby-theme-carbon/gatsby-node.js b/packages/gatsby-theme-carbon/gatsby-node.js index 6de143faa..3dd98df54 100644 --- a/packages/gatsby-theme-carbon/gatsby-node.js +++ b/packages/gatsby-theme-carbon/gatsby-node.js @@ -64,6 +64,7 @@ exports.createSchemaCustomization = ({ actions, schema }) => { type NavItemsYaml implements Node { title: String! pages: [NavItemsYamlPage]! + hasDivider: Boolean }`, schema.buildObjectType({ name: 'MediumFeed', diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js index f96a360c3..fd4bc5619 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js @@ -55,7 +55,12 @@ const LeftNav = (props) => { > {navItems.map((item, i) => ( - + ))} diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss index 974c57a76..c57905955 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.module.scss @@ -11,6 +11,13 @@ color: $ui-05; } +.divider { + margin: $spacing-03 $spacing-05; + border-color: var(--cds-ui-03, #e0e0e0); + border-style: solid; + border-bottom: none; +} + .resource-link { &:first-of-type { margin-top: $spacing-05; diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js index b83826d8f..844c870f7 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.js @@ -8,13 +8,13 @@ import { SideNavMenuItem, } from 'carbon-components-react'; -import styles, { currentItem } from './LeftNav.module.scss'; +import styles from './LeftNav.module.scss'; import NavContext from '../../util/context/NavContext'; import usePathprefix from '../../util/hooks/usePathprefix'; const LeftNavItem = (props) => { - const { items, category } = props; + const { items, category, hasDivider } = props; const { toggleNavState } = useContext(NavContext); const closeLeftNav = () => { toggleNavState('leftNavIsOpen', 'close'); @@ -34,31 +34,39 @@ const LeftNavItem = (props) => { if (items.length === 1) { return ( - dummy icon} - element={Link} - className={cx({ [currentItem]: isActive })} - isActive={isActive} - to={`${items[0].path}`} - > - {category} - + <> + dummy icon} + element={Link} + className={cx({ + [styles.currentItem]: isActive, + })} + isActive={isActive} + to={`${items[0].path}`} + > + {category} + + {hasDivider &&
} + ); } return ( - dummy icon} - isActive={isActive} // TODO similar categories - defaultExpanded={isActive} - title={category} - > - - + <> + dummy icon} + isActive={isActive} // TODO similar categories + defaultExpanded={isActive} + title={category} + > + + + {hasDivider &&
} + ); }} diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItemProvider.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItemProvider.js index b06497c96..6e4dcd825 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItemProvider.js +++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavItemProvider.js @@ -13,6 +13,7 @@ export function useNavItems() { title path } + hasDivider } } } From 7eb11b476390b5892c2ef369e2e99a1d80b47f46 Mon Sep 17 00:00:00 2001 From: Filip Frincu Date: Wed, 24 Jun 2020 19:19:25 +0300 Subject: [PATCH 3/5] feat: update documentation related to divider useage Co-authored-by: Scott Strubberg --- packages/example/src/pages/guides/navigation/sidebar.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/example/src/pages/guides/navigation/sidebar.mdx b/packages/example/src/pages/guides/navigation/sidebar.mdx index 2e3aeacb5..d45ceffca 100644 --- a/packages/example/src/pages/guides/navigation/sidebar.mdx +++ b/packages/example/src/pages/guides/navigation/sidebar.mdx @@ -36,7 +36,7 @@ Some important things to note here: ## Add divider -You can add divider(s) between the items of your nav item list by adding `hasDivider: true` in `src/data/nav-items.yaml`. +You can add divider(s) between the items of your nav item list by adding `hasDivider: true` in `src/data/nav-items.yaml`. Note the divider is only for top-level nav items and can only be used with the left sidebar navigation style. It can not be used in conjunction with the [header navigation style](/guides/configuration#navigation-style). ```yaml - title: Menu From 853d6ff7338bdd98fd8ce7a9b37000ed40fb5b74 Mon Sep 17 00:00:00 2001 From: Filip Frincu Date: Thu, 25 Jun 2020 18:58:18 +0300 Subject: [PATCH 4/5] fix typo in documentation Co-authored-by: Scott Strubberg --- packages/example/src/pages/guides/navigation/sidebar.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/example/src/pages/guides/navigation/sidebar.mdx b/packages/example/src/pages/guides/navigation/sidebar.mdx index d45ceffca..ac320d40d 100644 --- a/packages/example/src/pages/guides/navigation/sidebar.mdx +++ b/packages/example/src/pages/guides/navigation/sidebar.mdx @@ -36,7 +36,7 @@ Some important things to note here: ## Add divider -You can add divider(s) between the items of your nav item list by adding `hasDivider: true` in `src/data/nav-items.yaml`. Note the divider is only for top-level nav items and can only be used with the left sidebar navigation style. It can not be used in conjunction with the [header navigation style](/guides/configuration#navigation-style). +You can add divider(s) between the items of your nav item list by adding `hasDivider: true` in `src/data/nav-items.yaml`. Note the divider is only for top-level nav items and can only be used with the left sidebar navigation style. It cannot be used in conjunction with the [header navigation style](/guides/configuration#navigation-style). ```yaml - title: Menu From 8329692f4dd7f5ab3a4124ca2faab2ce039f266e Mon Sep 17 00:00:00 2001 From: Filip Frincu Date: Fri, 26 Jun 2020 21:09:24 +0300 Subject: [PATCH 5/5] feate: update divider documentation title Co-authored-by: Vince Picone --- packages/example/src/pages/guides/navigation/sidebar.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/example/src/pages/guides/navigation/sidebar.mdx b/packages/example/src/pages/guides/navigation/sidebar.mdx index ac320d40d..9b9a052b0 100644 --- a/packages/example/src/pages/guides/navigation/sidebar.mdx +++ b/packages/example/src/pages/guides/navigation/sidebar.mdx @@ -34,7 +34,7 @@ Some important things to note here: - You can make a `Page/index.mdx` file if you’d prefer to have assets in a folder. The path would still just look like `/Page` -## Add divider +## Adding a divider You can add divider(s) between the items of your nav item list by adding `hasDivider: true` in `src/data/nav-items.yaml`. Note the divider is only for top-level nav items and can only be used with the left sidebar navigation style. It cannot be used in conjunction with the [header navigation style](/guides/configuration#navigation-style).