Merge pull request #1334 from dxc-technology/gomezivann-quicknav-fix

Refactoring the html code of the quick nav

Author: Jialecl

lib/src/quick-nav/QuickNav.stories.tsx

@@ -11,6 +11,36 @@ export default {
   component: DxcQuickNav,
 };
 
+const defaultLinks = [
+  {
+    label: "Overview",
+    id: "overview",
+  },
+  {
+    label: "Principles",
+    id: "principles",
+    links: [
+      { label: "Color", id: "color" },
+      { label: "Spacing", id: "spacing" },
+      { label: "Typography", id: "typography" },
+    ],
+  },
+  {
+    label: "Components",
+    id: "components",
+    links: [
+      {
+        label: "Accordion",
+        id: "accordion",
+      },
+      {
+        label: "Button",
+        id: "button",
+      },
+    ],
+  },
+];
+
 const links = [
   {
     label: "Overview",
@@ -48,19 +78,25 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Default" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav links={links}></DxcQuickNav>
+        <DxcQuickNav links={defaultLinks} />
+      </QuickNavContainer>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Text overflow" level={4} />
+      <QuickNavContainer>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Link hovered" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav links={links}></DxcQuickNav>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Link focus" level={4} />
       <QuickNavContainer>
-        <DxcQuickNav links={links}></DxcQuickNav>
+        <DxcQuickNav links={links} />
       </QuickNavContainer>
     </ExampleContainer>
     <ExampleContainer>
@@ -233,7 +269,7 @@ export const Chromatic = () => (
           </Content>
         </ContentContainer>
         <QuickNavContainer>
-          <DxcQuickNav title="Sections" links={links}></DxcQuickNav>
+          <DxcQuickNav title="Sections" links={links} />
         </QuickNavContainer>
       </Container>
     </ExampleContainer>

lib/src/quick-nav/QuickNav.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import slugify from "slugify";
@@ -20,26 +19,26 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => {
         <DxcFlex direction="column" gap="0.5rem">
           <DxcHeading level={4} text={title || translatedLabels.quickNav.contentTitle} />
           <ListColumn>
-            <DxcFlex direction="column" gap="0.5rem">
-              {links.map((link) => (
-                <ListRow key={link.label}>
-                  <DxcInset space="0.25rem">
-                    <DxcTypography>
-                      <Link href={`#${slugify(link?.label, { lower: true })}`}>{link?.label}</Link>
+            {links.map((link) => (
+              <li key={link.label}>
+                <DxcInset space="0.25rem">
+                  <DxcTypography>
+                    <Link href={`#${slugify(link?.label, { lower: true })}`}>{link?.label}</Link>
+                    <ListSecondColumn>
                       {link.links?.map((sublink) => (
-                        <ListRow key={sublink.label}>
+                        <li key={sublink.label}>
                           <DxcInset horizontal="0.5rem">
                             <DxcTypography>
                               <Link href={`#${slugify(sublink?.label, { lower: true })}`}>{sublink?.label}</Link>
                             </DxcTypography>
                           </DxcInset>
-                        </ListRow>
+                        </li>
                       ))}
-                    </DxcTypography>
-                  </DxcInset>
-                </ListRow>
-              ))}
-            </DxcFlex>
+                    </ListSecondColumn>
+                  </DxcTypography>
+                </DxcInset>
+              </li>
+            ))}
           </ListColumn>
         </DxcFlex>
       </QuickNavContainer>
@@ -56,14 +55,20 @@ const QuickNavContainer = styled.div`
 `;
 
 const ListColumn = styled.ul`
-  list-style-type: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   margin: 0;
   padding: 0;
-  width: 100%;
+  list-style-type: none;
 `;
 
-const ListRow = styled.li`
-  width: 100%;
+const ListSecondColumn = styled.ul`
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
 `;
 
 const Link = styled.a`