Merge pull request #1346 from dxc-technology/aida-quicknav-website

Changed website to match fix of quick nav
dxc-technology · Oct 25, 2022 · 2f47857 · 2f47857
2 parents e26622f + c943647
commit 2f47857
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 11 deletions.
diff --git a/website/package.json b/website/package.json
@@ -8,7 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dxc-technology/halstack-react": "0.0.0-3216581",
+    "@dxc-technology/halstack-react": "0.0.0-87e1151",
     "@types/styled-components": "^5.1.18",
     "axios": "^0.27.2",
     "cross-env": "^7.0.3",

diff --git a/website/screens/common/HeadingLink.tsx b/website/screens/common/HeadingLink.tsx
@@ -8,10 +8,11 @@ type HeadingLinkProps = {
   children: string;
   level?: 1 | 2 | 3 | 4 | 5;
   as?: "h1" | "h2" | "h3" | "h4" | "h5";
+  navSubtitle?: string;
 };
 
-function HeadingLink({ children, level, as }: HeadingLinkProps) {
-  const elementId = slugify(children, { lower: true });
+function HeadingLink({ children, level, as, navSubtitle }: HeadingLinkProps) {
+  const elementId = slugify(navSubtitle ?? children, { lower: true });
   return (
     <HeadingLinkContainer id={elementId}>
       <HeadingAnchor href={`#${elementId}`}>{linkIcon}</HeadingAnchor>

diff --git a/website/screens/common/Section.tsx b/website/screens/common/Section.tsx
@@ -9,20 +9,24 @@ type SectionType = {
   level?: 1 | 2 | 3 | 4 | 5;
   subSections?: SectionType[];
   children?: React.ReactNode;
+  navSubtitle?: string;
 };
 
 const Section = ({
   title,
   subSections,
   level,
   children,
+  navSubtitle,
 }: SectionType): JSX.Element => {
   return (
     <DxcFlex
       direction="column"
       gap={level === 1 ? "3rem" : level === 2 ? "2rem" : "1.5rem"}
     >
-      <HeadingLink level={level}>{title}</HeadingLink>
+      <HeadingLink level={level} navSubtitle={navSubtitle}>
+        {title}
+      </HeadingLink>
       {children}
       {subSections?.map((subSection) => {
         return (
@@ -32,6 +36,7 @@ const Section = ({
               title={subSection.title}
               subSections={subSection.subSections}
               level={level + 1 <= 5 ? level + 1 : 5}
+              navSubtitle={`${title} ${subSection.title}`}
             >
               {subSection.content}
             </Section>

diff --git a/website/screens/components/quick-nav/QuickNavPageLayout.tsx b/website/screens/components/quick-nav/QuickNavPageLayout.tsx
@@ -14,7 +14,9 @@ const QuickNavPageHeading = ({ children }: { children: React.ReactNode }) => {
           <DxcParagraph>
             The quick nav component allows navigation inside a page. It renders
             the links according to the headings of the content in order to
-            navigate to each section.
+            navigate to each section. The navigation is done using the link
+            label or the link label plus sublink label when it is a sublink. If
+            there is any space, it will be replaced by '-'.
           </DxcParagraph>
           <TabsPageHeading tabs={tabs}></TabsPageHeading>
         </DxcFlex>

diff --git a/website/screens/components/quick-nav/code/QuickNavCodePage.tsx b/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
@@ -6,6 +6,7 @@ import Code from "@/common/Code";
 import Example from "@/common/example/Example";
 import quickNav from "./examples/quickNav";
 import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import withContent from "./examples/withContent";
 
 const sections = [
   {
@@ -60,6 +61,14 @@ const sections = [
           </>
         ),
       },
+      {
+        title: "With content",
+        content: (
+          <>
+            <Example example={withContent} defaultIsVisible />
+          </>
+        ),
+      },
     ],
   },
 ];

diff --git a/website/screens/components/quick-nav/code/examples/withContent.ts b/website/screens/components/quick-nav/code/examples/withContent.ts
@@ -0,0 +1,81 @@
+import {
+  DxcInset,
+  DxcQuickNav,
+  DxcFlex,
+  DxcHeading,
+  DxcParagraph,
+} from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  const links = [
+    {
+      label: "Accordion",
+      links: [{ label: "Code" }, { label: "Usage" }],
+    },
+    {
+      label: "Alert",
+      links: [{ label: "Code" }],
+    },
+  ];
+
+  return (
+    <DxcInset space="2rem">
+      <DxcFlex direction="row">
+        <DxcFlex direction="column" gap="2rem">
+          <div id="accordion">
+            <DxcFlex direction="column" gap="1rem">
+              <DxcHeading level={2} text="Accordion" />
+              <div id="accordion-code">
+                <DxcFlex direction="column" gap="1rem">
+                  <DxcHeading level={3} text="Code" />
+                  <DxcParagraph>
+                    Accordions are used to group similar content and hide or
+                    show it depending on user needs or preferences. Accordions
+                    give users more granular control over the interface and help
+                    digest content in stages, rather than all at once.
+                  </DxcParagraph>
+                </DxcFlex>
+              </div>
+              <div id="accordion-usage">
+                <DxcFlex direction="column" gap="1rem">
+                  <DxcHeading level={3} text="Usage" />
+                  <DxcParagraph>
+                    The accordion component delivers large amounts of content in
+                    a small space through progressive disclosure.
+                  </DxcParagraph>
+                </DxcFlex>
+              </div>
+            </DxcFlex>
+          </div>
+          <div id="alert">
+            <DxcFlex direction="column" gap="1rem">
+              <DxcHeading level={2} text="Alert" />
+              <div id="alert-code">
+                <DxcFlex direction="column" gap="1rem">
+                  <DxcHeading level={3} text="Code" />
+                  <DxcParagraph>
+                    Alert messages are meant to provide contextual feedback
+                    about important changes in the interface.
+                  </DxcParagraph>
+                </DxcFlex>
+              </div>
+            </DxcFlex>
+          </div>
+        </DxcFlex>
+        <DxcInset space="2rem">
+          <DxcQuickNav links={links}></DxcQuickNav>
+        </DxcInset>
+      </DxcFlex>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcInset,
+  DxcQuickNav,
+  DxcFlex,
+  DxcHeading,
+  DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/website/yarn.lock b/website/yarn.lock
@@ -144,18 +144,18 @@
   dependencies:
     "@date-io/core" "^1.3.13"
 
-"@dxc-technology/halstack-react@0.0.0-3216581":
-  version "0.0.0-3216581"
-  resolved "https://registry.yarnpkg.com/@dxc-technology/halstack-react/-/halstack-react-0.0.0-3216581.tgz#379a8c7eaa361e0bbff955253a857e5073e6ffcc"
-  integrity sha512-09IaHT0OyN9E960z7e+ogidistggVa7nG4feluY0LUY2LYQg1gD0gAeVKuMWodFYjT+umdRyIDR1F2/Dp1wuKA==
+"@dxc-technology/halstack-react@0.0.0-87e1151":
+  version "0.0.0-87e1151"
+  resolved "https://registry.yarnpkg.com/@dxc-technology/halstack-react/-/halstack-react-0.0.0-87e1151.tgz#9aff03bc08f523677003ba6e8b3c300f9294d3d9"
+  integrity sha512-wp1msZOaTGfIYqTn466rLX/EdiuyOZ+sMwG0qQBLLy/yOy7C0e4b3M7JtYRRFlJHJSdVGvf0J0447NQwMITrUw==
   dependencies:
     "@date-io/dayjs" "^1.3.9"
     "@material-ui/core" "4.11.1"
     "@material-ui/icons" "4.4.3"
     "@material-ui/lab" "4.0.0-alpha.17"
     "@material-ui/pickers" "3.2.2"
     "@material-ui/styles" "4.0.2"
-    "@radix-ui/react-popover" "^0.1.6"
+    "@radix-ui/react-popover" "0.1.6"
     "@types/styled-components" "^5.1.24"
     "@types/uuid" "^8.3.4"
     color "^3.1.3"
@@ -546,7 +546,7 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "0.1.0"
 
-"@radix-ui/react-popover@^0.1.6":
+"@radix-ui/react-popover@0.1.6":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-0.1.6.tgz#788e969239d9c55239678e615ab591b6b7ba5cdc"
   integrity sha512-zQzgUqW4RQDb0ItAL1xNW4K4olUrkfV3jeEPs9rG+nsDQurO+W9TT+YZ9H1mmgAJqlthyv1sBRZGdBm4YjtD6Q==