From a3ec9bcd847aaf298d672d51822dd463c1ff4750 Mon Sep 17 00:00:00 2001 From: Chris Barker Date: Fri, 28 Jul 2023 14:29:45 +0100 Subject: [PATCH] NDS-391 in page nav docs (#315) * NDS-391 Update docs for in-page-nav variant; revert heading ID * Publish - @nice-digital/design-system@5.0.13-alpha.0 - @nice-digital/nds-in-page-nav@4.0.7-alpha.0 - @nice-digital/design-system-docs@1.0.13-alpha.0 * NDS-391 Update in-page-nav spacing --------- Co-authored-by: Chris Barker --- components/design-system/package.json | 4 +-- components/nds-in-page-nav/README.md | 28 ++++++++++++++++++- components/nds-in-page-nav/package.json | 2 +- .../nds-in-page-nav/scss/in-page-nav.scss | 2 ++ components/nds-in-page-nav/src/InPageNav.tsx | 4 +-- .../src/__snapshots__/InPageNav.test.tsx.snap | 8 +++--- docs/package.json | 4 +-- docs/pages/components/in-page-nav.mdx | 15 ++++++++-- package-lock.json | 14 +++++----- 9 files changed, 59 insertions(+), 22 deletions(-) diff --git a/components/design-system/package.json b/components/design-system/package.json index a514500c..b246b315 100644 --- a/components/design-system/package.json +++ b/components/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@nice-digital/design-system", - "version": "5.0.12", + "version": "5.0.13-alpha.0", "description": "Your source for quickly creating consistent on-brand NICE digital services", "author": "Ian Routledge ", "homepage": "https://design-system.nice.org.uk/", @@ -51,7 +51,7 @@ "@nice-digital/nds-grid": "^4.0.7", "@nice-digital/nds-hero": "^4.0.6", "@nice-digital/nds-horizontal-nav": "^4.0.6", - "@nice-digital/nds-in-page-nav": "^4.0.6", + "@nice-digital/nds-in-page-nav": "^4.0.7-alpha.0", "@nice-digital/nds-input": "^4.0.6", "@nice-digital/nds-maintain-ratio": "^4.0.6", "@nice-digital/nds-page-header": "^4.0.6", diff --git a/components/nds-in-page-nav/README.md b/components/nds-in-page-nav/README.md index e14cdd98..6e8c5b82 100644 --- a/components/nds-in-page-nav/README.md +++ b/components/nds-in-page-nav/README.md @@ -11,7 +11,10 @@ - [headingsContainerSelector](#headingscontainerselector) - [headingsSelector](#headingsselector) - [headingsExcludeSelector](#headingsexcludeselector) + - [headingsExcludeContainer](#headingsexcludecontainer) - [scrollTolerance](#scrolltolerance) + - [noScroll](#noScroll) + - [twoColumns](#twoColumns) - [Other props](#other-props) - [SCSS](#scss) - [HTML](#html) @@ -68,7 +71,16 @@ A selector for headings to use for the navigation. - Type: `string` - Default: `""` -A selector for any headigns to exclude from the navigation. +A selector for any headings to exclude from the navigation. + +#### headingsExcludeContainer + +- Type: `string` +- Default: `""` + +A selector for a container that will be completely ignored, i.e. all headings +within that container will be excluded. Useful in cases where it's not easy +to exclude or select individual headings. #### scrollTolerance @@ -77,6 +89,20 @@ A selector for any headigns to exclude from the navigation. The number of pixels from the top of the screen that's used to determine if a heading is considered to current/active. +#### noScroll + +- Type: `boolean` +- Default: `false` + +If true, the in-page-nav will no longer scroll along with the user's current position (i.e. it won't be sticky). + +#### twoColumns + +- Type: `boolean` +- Default: `false` + +If true, the in-page-nav will render as two columns instead of just one. This will only work if `noScroll` is set to `true`. + #### Other props Any additional props will be spread across the container. diff --git a/components/nds-in-page-nav/package.json b/components/nds-in-page-nav/package.json index 780e71a2..5b810385 100644 --- a/components/nds-in-page-nav/package.json +++ b/components/nds-in-page-nav/package.json @@ -1,6 +1,6 @@ { "name": "@nice-digital/nds-in-page-nav", - "version": "4.0.6", + "version": "4.0.7-alpha.0", "description": "In page navigation component for the NICE Design System", "author": "Ian Routledge ", "homepage": "https://design-system.nice.org.uk/", diff --git a/components/nds-in-page-nav/scss/in-page-nav.scss b/components/nds-in-page-nav/scss/in-page-nav.scss index 892b5583..1a9cee13 100644 --- a/components/nds-in-page-nav/scss/in-page-nav.scss +++ b/components/nds-in-page-nav/scss/in-page-nav.scss @@ -51,6 +51,7 @@ top: 0; &--no-scroll { + margin: utils.rem(0 0 spacing.$large); max-height: none; position: relative; } @@ -63,6 +64,7 @@ .in-page-nav--two-columns & { columns: 2; + column-gap: utils.rem(spacing.$xx-large); } .in-page-nav__list { diff --git a/components/nds-in-page-nav/src/InPageNav.tsx b/components/nds-in-page-nav/src/InPageNav.tsx index 4db0f397..087083c1 100644 --- a/components/nds-in-page-nav/src/InPageNav.tsx +++ b/components/nds-in-page-nav/src/InPageNav.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-mixed-spaces-and-tabs */ /* eslint-disable indent */ -import React, { useEffect, useState, useId } from "react"; +import React, { useEffect, useState } from "react"; import throttle from "lodash.throttle"; import { buildLinkTree, getActiveHeadingId, type LinkTreeItem } from "./utils"; @@ -33,7 +33,7 @@ export const InPageNav = ({ }: InPageNavProps) => { const [activeHeadingId, setActiveHeadingId] = useState(null); const [linkTree, setlinkTree] = useState([]); - const titleId = useId(); + const titleId = "inpagenav-title"; // Build the tree of links from the headings on the page useEffect(() => { diff --git a/components/nds-in-page-nav/src/__snapshots__/InPageNav.test.tsx.snap b/components/nds-in-page-nav/src/__snapshots__/InPageNav.test.tsx.snap index 94018db9..e98e3a5a 100644 --- a/components/nds-in-page-nav/src/__snapshots__/InPageNav.test.tsx.snap +++ b/components/nds-in-page-nav/src/__snapshots__/InPageNav.test.tsx.snap @@ -5,14 +5,14 @@ exports[`InPageNav should match snapshot 1`] = ` "asFragment": [Function], "baseElement":
, "container":