dxc-technology · Mil4n0r · Sep 10, 2025 · Sep 5, 2025 · Sep 5, 2025 · Sep 5, 2025
diff --git a/apps/website/next-env.d.ts b/apps/website/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/apps/website/pages/components/chip/code.tsx b/apps/website/pages/components/chip/code.tsx
@@ -7,7 +7,7 @@ const Code = () => {
   return (
     <>
       <Head>
-        <title>Chip Code — Halstack Design System</title>
+        <title>Chip code — Halstack Design System</title>
       </Head>
       <ChipCodePage />
     </>

diff --git a/apps/website/pages/components/data-grid/code.tsx b/apps/website/pages/components/data-grid/code.tsx
@@ -7,7 +7,7 @@ const Code = () => {
   return (
     <>
       <Head>
-        <title>Data grid — Halstack Design System</title>
+        <title>Data grid code — Halstack Design System</title>
       </Head>
       <DataGridCodePage />
     </>

diff --git a/apps/website/pages/components/date-input/code.tsx b/apps/website/pages/components/date-input/code.tsx
@@ -7,7 +7,7 @@ const Code = () => {
   return (
     <>
       <Head>
-        <title>Date Input Code — Halstack Design System</title>
+        <title>Date Input code — Halstack Design System</title>
       </Head>
       <DateInputCodePage />
     </>

diff --git a/apps/website/pages/components/dialog/code.tsx b/apps/website/pages/components/dialog/code.tsx
@@ -6,7 +6,7 @@ import DialogCodePage from "screens/components/dialog/code/DialogCodePage";
 const Code = () => (
   <>
     <Head>
-      <title>Dialog Code — Halstack Design System</title>
+      <title>Dialog code — Halstack Design System</title>
     </Head>
     <DialogCodePage />
   </>

diff --git a/apps/website/pages/components/dropdown/code.tsx b/apps/website/pages/components/dropdown/code.tsx
@@ -7,7 +7,7 @@ const Code = () => {
   return (
     <>
       <Head>
-        <title>Dropdown Code — Halstack Design System</title>
+        <title>Dropdown code — Halstack Design System</title>
       </Head>
       <DropdownCodePage />
     </>

diff --git a/apps/website/pages/components/file-input/code.tsx b/apps/website/pages/components/file-input/code.tsx
@@ -7,7 +7,7 @@ const Code = () => {
   return (
     <>
       <Head>
-        <title>File Input Code — Halstack Design System</title>
+        <title>File Input code — Halstack Design System</title>
       </Head>
       <FileInputCodePage />
     </>

diff --git a/apps/website/pages/components/paginator/code.tsx b/apps/website/pages/components/paginator/code.tsx
@@ -6,7 +6,7 @@ import PaginatorCodePage from "screens/components/paginator/code/PaginatorCodePa
 const Code = () => (
   <>
     <Head>
-      <title>Paginator Code — Halstack Design System</title>
+      <title>Paginator code — Halstack Design System</title>
     </Head>
     <PaginatorCodePage />
   </>

diff --git a/apps/website/pages/components/typography/code.tsx b/apps/website/pages/components/typography/code.tsx
@@ -6,7 +6,7 @@ import TypographyCodePage from "screens/components/typography/code/TypographyCod
 const Code = () => (
   <>
     <Head>
-      <title>Typography — Halstack Design System</title>
+      <title>Typography code — Halstack Design System</title>
     </Head>
     <TypographyCodePage />
   </>

diff --git a/apps/website/screens/common/CodeBlock.tsx b/apps/website/screens/common/CodeBlock.tsx
@@ -19,7 +19,7 @@ const Code = styled.code`
   word-wrap: break-word;
 `;
 
-export default function CodeBlock({ children }: { children: ReactNode }) {
+const CodeBlock = ({ children }: { children: ReactNode }) => {
   const [copyActionIsVisible, setCopyActionIsVisible] = useState(false);
   const [copied, setCopied] = useState(false);
 
@@ -60,3 +60,5 @@ export default function CodeBlock({ children }: { children: ReactNode }) {
     </DxcFlex>
   );
 }
+
+export default CodeBlock
diff --git a/apps/website/screens/common/ComponentHeading.tsx b/apps/website/screens/common/ComponentHeading.tsx
@@ -1,5 +1,4 @@
 import { DxcHeading } from "@dxc-technology/halstack-react";
 
-export default function ComponentHeading({ name }: { name: string }) {
-  return <DxcHeading level={1} text={name} />;
-}
+const ComponentHeading = ({ name }: { name: string }) => <DxcHeading level={1} text={name} />;
+export default ComponentHeading;
diff --git a/apps/website/screens/common/DocFooter.tsx b/apps/website/screens/common/DocFooter.tsx
@@ -3,7 +3,7 @@ import { DxcTypography, DxcLink, DxcFlex, DxcDivider } from "@dxc-technology/hal
 import Link from "next/link";
 import { getNavigationLinks } from "./pagesList";
 
-export default function DocFooter({ githubLink }: { githubLink: string }) {
+const DocFooter = ({ githubLink }: { githubLink: string }) => {
   const { pathname } = useRouter();
   const { nextLink, previousLink } = getNavigationLinks(pathname);
 
@@ -46,4 +46,6 @@ export default function DocFooter({ githubLink }: { githubLink: string }) {
       </DxcFlex>
     </div>
   );
-}
+};
+
+export default DocFooter;
diff --git a/apps/website/screens/common/HeadingLink.tsx b/apps/website/screens/common/HeadingLink.tsx
@@ -8,7 +8,7 @@ const linkIcon = (
     <path
       fillRule="evenodd"
       d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"
-    ></path>
+    />
   </svg>
 );
 
@@ -55,7 +55,7 @@ type HeadingLinkProps = {
   navSubtitle?: string;
 };
 
-export default function HeadingLink({ children, level, as, navSubtitle }: HeadingLinkProps) {
+const HeadingLink = ({ children, level, as, navSubtitle }: HeadingLinkProps) => {
   const elementId = slugify(navSubtitle ?? children, { lower: true });
   return (
     <HeadingLinkContainer id={elementId}>
@@ -69,4 +69,6 @@ export default function HeadingLink({ children, level, as, navSubtitle }: Headin
       <DxcHeading text={children} level={level} as={as} />
     </HeadingLinkContainer>
   );
-}
+};
+
+export default HeadingLink;
diff --git a/apps/website/screens/common/MainContent.tsx b/apps/website/screens/common/MainContent.tsx
@@ -20,7 +20,7 @@ const pathVersion =
       ? 0
       : parseInt(process.env.NEXT_PUBLIC_SITE_VERSION.split(".")[0]!, 10);
 
-export default function MainContent({ children }: { children: ReactNode }) {
+const MainContent = ({ children }: { children: ReactNode }) => {
   const toast = useToast();
   const [latestRelease, setLatestRelease] = useState<number | null>(null);
 
@@ -56,4 +56,6 @@ export default function MainContent({ children }: { children: ReactNode }) {
   }, [latestRelease, toast]);
 
   return <MainContainer>{children}</MainContainer>;
-}
+};
+
+export default MainContent;
diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx
@@ -57,27 +57,23 @@ const QuickNavContainer = styled.div`
   }
 `;
 
-export default function DxcQuickNavContainer({
-  sections,
-  startHeadingLevel = 1,
-  title = "On this page",
-}: QuickNavContainerTypes) {
-  return (
-    <MainContainer>
-      <DxcGrid gap="var(--spacing-gap-xxl)" templateColumns={["minmax(0, 1fr)"]}>
-        {sections.map((section) => (
-          <Section
-            key={`section-${section.title}`}
-            title={section.title}
-            level={startHeadingLevel}
-            subSections={section.subSections}
-            content={section.content}
-          />
-        ))}
-      </DxcGrid>
-      <QuickNavContainer>
-        <DxcQuickNav title={title} links={getSubSectionsLinks(sections)} />
-      </QuickNavContainer>
-    </MainContainer>
-  );
-}
+const DxcQuickNavContainer = ({ sections, startHeadingLevel = 1, title = "On this page" }: QuickNavContainerTypes) => (
+  <MainContainer>
+    <DxcGrid gap="var(--spacing-gap-xxl)" templateColumns={["minmax(0, 1fr)"]}>
+      {sections.map((section) => (
+        <Section
+          key={`section-${section.title}`}
+          title={section.title}
+          level={startHeadingLevel}
+          subSections={section.subSections}
+          content={section.content}
+        />
+      ))}
+    </DxcGrid>
+    <QuickNavContainer>
+      <DxcQuickNav title={title} links={getSubSectionsLinks(sections)} />
+    </QuickNavContainer>
+  </MainContainer>
+);
+
+export default DxcQuickNavContainer;
diff --git a/apps/website/screens/common/QuickNavContainerLayout.tsx b/apps/website/screens/common/QuickNavContainerLayout.tsx
diff --git a/apps/website/screens/common/TabsPageLayout.tsx b/apps/website/screens/common/TabsPageLayout.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import { DxcNavTabs } from "@dxc-technology/halstack-react";
 import Link from "next/link";
 
-export default function TabsPageLayout({ tabs }: { tabs: { label: string; path: string }[] }) {
+const TabsPageLayout = ({ tabs }: { tabs: { label: string; path: string }[] }) => {
   const router = useRouter();
   return (
     <DxcNavTabs>
@@ -13,4 +13,6 @@ export default function TabsPageLayout({ tabs }: { tabs: { label: string; path:
       ))}
     </DxcNavTabs>
   );
-}
+};
+
+export default TabsPageLayout;
diff --git a/apps/website/screens/common/example/Example.tsx b/apps/website/screens/common/example/Example.tsx
@@ -48,7 +48,7 @@ type ExamplePropTypes = {
   };
 };
 
-export default function Example({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) {
+const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => {
   const toast = useToast();
   const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible);
   const [liveCode, setLiveCode] = useState(example.code);
@@ -96,4 +96,6 @@ export default function Example({ actionsVisible = true, defaultIsVisible = fals
       </LiveProvider>
     </DxcFlex>
   );
-}
+};
+
+export default Example;
diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx
@@ -20,7 +20,7 @@ const Subtitle = styled.div`
   margin-left: var(--spacing-padding-s);
 `;
 
-export default function SidenavLogo({ subtitle = "Design System" }: { subtitle?: string }) {
+const SidenavLogo = ({ subtitle = "Design System" }: { subtitle?: string }) => {
   const pathVersion = process.env.NEXT_PUBLIC_SITE_VERSION;
   const isDev = process.env.NODE_ENV === "development";
 
@@ -40,4 +40,6 @@ export default function SidenavLogo({ subtitle = "Design System" }: { subtitle?:
       />
     </DxcFlex>
   );
-}
+};
+
+export default SidenavLogo;
diff --git a/apps/website/screens/components/accordion/code/AccordionCodePage.tsx b/apps/website/screens/components/accordion/code/AccordionCodePage.tsx
@@ -1,6 +1,5 @@
 import { DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
 import Example from "@/common/example/Example";
 import basicUsage from "./examples/basicUsage";
@@ -267,9 +266,7 @@ const sections = [
 
 const AccordionCodePage = () => (
   <DxcFlex direction="column" gap="4rem">
-    <QuickNavContainerLayout>
-      <QuickNavContainer sections={sections} startHeadingLevel={2} />
-    </QuickNavContainerLayout>
+    <QuickNavContainer sections={sections} startHeadingLevel={2} />
     <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/accordion/code/AccordionCodePage.tsx" />
   </DxcFlex>
 );

diff --git a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx
@@ -7,7 +7,7 @@ const code = `() => {
         <DxcAccordion.AccordionItem
           label="GET request"
           subLabel="Jan, 20 2025"
-          badge={{ position: "before", element: <DxcBadge label="GET" color="green"/> }}
+          badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }}
           statusLight={<DxcStatusLight label="Active" mode="success" />}
         >
           <DxcInset space="var(--spacing-padding-l)">

diff --git a/apps/website/screens/components/accordion/code/examples/controlled.tsx b/apps/website/screens/components/accordion/code/examples/controlled.tsx
@@ -10,7 +10,7 @@ const code = `() => {
   return (
     <DxcInset space="var(--spacing-padding-xl)">
       <DxcAccordion indexActive={indexAccordion}
-        onActiveChange={onActiveChange} independent={true}>
+        onActiveChange={onActiveChange} independent>
         <DxcAccordion.AccordionItem
           label="How to edit your profile?"
         >

diff --git a/apps/website/screens/components/accordion/code/examples/icons.tsx b/apps/website/screens/components/accordion/code/examples/icons.tsx
@@ -6,7 +6,7 @@ const code = `() => {
     <DxcInset space="var(--spacing-padding-xl)">
       <DxcAccordion>
           <DxcAccordion.AccordionItem label="How to edit your profile?" icon="filled_info"
-            assistiveText="Ref - 123645" subLabel="Jan, 23 2025">
+            assistiveText="Ref — 123645" subLabel="Jan, 23 2025">
             <DxcInset space="var(--spacing-padding-l)">
               To edit your profile you need to go to Settings and click on
               Profile.

diff --git a/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx b/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 const code = `() => {
   return (
     <DxcInset space="var(--spacing-padding-xl)">
-      <DxcAccordion defaultIndexActive={0} independent={true}>
+      <DxcAccordion defaultIndexActive={0} independent>
         <DxcAccordion.AccordionItem label="How to edit your profile?">
           <DxcInset space="var(--spacing-padding-l)">
             To edit your profile you need to go to Settings and click on Profile.

diff --git a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx
@@ -1,6 +1,5 @@
 import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
 import Image from "@/common/Image";
 import anatomy from "./images/accordion_anatomy.png";
@@ -25,7 +24,7 @@ const sections = [
     title: "Anatomy",
     content: (
       <>
-        <Image src={anatomy} alt="Accordion's anatomy" />
+        <Image src={anatomy} alt="Accordion anatomy" />
         <DxcBulletedList type="number">
           <DxcBulletedList.Item>
             <strong>Header:</strong> serves as the trigger for expanding or collapsing the section. It acts as a summary
@@ -224,7 +223,7 @@ const sections = [
               Each accordion header must include a clear, concise title that describes the content inside.
             </DxcBulletedList.Item>
             <DxcBulletedList.Item>
-              Use a sublabel only when additional context is necessary —it should not overpower the title.
+              Use a sublabel only when additional context is necessary — it should not overpower the title.
             </DxcBulletedList.Item>
             <DxcBulletedList.Item>
               Avoid hiding essential or primary information inside an accordion panel.
@@ -305,9 +304,7 @@ const sections = [
 
 const AccordionOverviewPage = () => (
   <DxcFlex direction="column" gap="4rem">
-    <QuickNavContainerLayout>
-      <QuickNavContainer sections={sections} startHeadingLevel={2} />
-    </QuickNavContainerLayout>
+    <QuickNavContainer sections={sections} startHeadingLevel={2} />
     <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx" />
   </DxcFlex>
 );

diff --git a/apps/website/screens/components/accordion/overview/examples/basicExample.tsx b/apps/website/screens/components/accordion/overview/examples/basicExample.tsx
@@ -50,7 +50,7 @@ const code = `() => {
           <DxcAccordion.AccordionItem
             badge={{ position: "after", element: <DxcBadge label="Enterprise" icon="filled_stars" color="yellow" /> }}
             label="Life Policy"
-            subLabel="Ref - 1236554546"
+            subLabel="Ref — 1236554546"
           >
             <DxcInset space="var(--spacing-padding-l)">
               Details
@@ -62,7 +62,7 @@ const code = `() => {
             badge={{ position: "before", element: <DxcBadge label="Enterprise" icon="filled_stars" /> }}
             label="Life Policy"
             statusLight={<DxcStatusLight label="Active" mode="success" />}
-            subLabel="Ref - 1236554546"
+            subLabel="Ref — 1236554546"
           >
             <DxcInset space="var(--spacing-padding-l)">
               Details

diff --git a/apps/website/screens/components/alert/code/AlertCodePage.tsx b/apps/website/screens/components/alert/code/AlertCodePage.tsx
@@ -1,7 +1,6 @@
 import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
 import DocFooter from "@/common/DocFooter";
 import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import basicUsage from "./examples/basicUsage";
 import semantic from "./examples/semantic";
 import severalMessages from "./examples/severalMessages";
@@ -161,9 +160,7 @@ const sections = [
 
 const AlertCodePage = () => (
   <DxcFlex direction="column" gap="4rem">
-    <QuickNavContainerLayout>
-      <QuickNavContainer sections={sections} startHeadingLevel={2} />
-    </QuickNavContainerLayout>
+    <QuickNavContainer sections={sections} startHeadingLevel={2} />
     <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/alert/code/AlertCodePage.tsx" />
   </DxcFlex>
 );