dxc-technology · Mil4n0r · May 8, 2025 · Mar 12, 2025 · Mar 12, 2025 · Mar 13, 2025
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
@@ -2,11 +2,11 @@ import { ReactElement, ReactNode, useMemo, useState } from "react";
 import type { NextPage } from "next";
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue, HalstackProvider } from "@dxc-technology/halstack-react";
+import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue } from "@dxc-technology/halstack-react";
 import SidenavLogo from "@/common/sidenav/SidenavLogo";
 import MainContent from "@/common/MainContent";
 import { useRouter } from "next/router";
-import { LinksSectionDetails, LinksSections, themeGeneratorLinks } from "@/common/pagesList";
+import { LinksSectionDetails, LinksSections } from "@/common/pagesList";
 import Link from "next/link";
 import StatusBadge from "@/common/StatusBadge";
 import "../global-styles.css";
@@ -17,17 +17,8 @@ type NextPageWithLayout = NextPage & {
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
-type ApplicationLayoutWrapperProps = {
-  condition: boolean;
-  wrapper: (_children: ReactNode) => JSX.Element;
-  children: ReactNode;
-};
-
-const ApplicationLayoutWrapper = ({ condition, wrapper, children }: ApplicationLayoutWrapperProps): JSX.Element => (
-  <>{condition ? wrapper(children) : children}</>
-);
 
-const App = ({ Component, pageProps }: AppPropsWithLayout) => {
+export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout || ((page) => page);
   const componentWithLayout = getLayout(<Component {...pageProps} />);
   const [filter, setFilter] = useState("");
@@ -56,69 +47,55 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
       <Head>
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </Head>
-      <HalstackProvider>
-        <ApplicationLayoutWrapper
-          condition={!themeGeneratorLinks.includes(currentPath)}
-          wrapper={(children) => (
-            <DxcApplicationLayout
-              visibilityToggleLabel="Menu"
-              sidenav={
-                <DxcApplicationLayout.SideNav title={<SidenavLogo />}>
-                  <DxcApplicationLayout.SideNav.Section>
-                    <DxcTextInput
-                      placeholder="Search docs"
-                      value={filter}
-                      onChange={({ value }: { value: string }) => {
-                        setFilter(value);
-                      }}
-                      size="fillParent"
-                      clearable
-                      margin={{
-                        top: "large",
-                        bottom: "large",
-                        right: "medium",
-                        left: "medium",
-                      }}
-                    />
-                  </DxcApplicationLayout.SideNav.Section>
-                  {filteredLinks?.map(({ label, links }) => (
-                    <DxcApplicationLayout.SideNav.Section key={label}>
-                      <DxcApplicationLayout.SideNav.Group title={label}>
-                        {links.map(({ label, path, status }) => (
-                          <Link key={`${label}-${path}`} href={path} passHref legacyBehavior>
-                            <DxcApplicationLayout.SideNav.Link selected={matchPaths(path)}>
-                              {label}
-                              {status && status !== "stable" && <StatusBadge hasTitle status={status} />}
-                            </DxcApplicationLayout.SideNav.Link>
-                          </Link>
-                        ))}
-                      </DxcApplicationLayout.SideNav.Group>
-                    </DxcApplicationLayout.SideNav.Section>
+      <DxcApplicationLayout
+        visibilityToggleLabel="Menu"
+        sidenav={
+          <DxcApplicationLayout.SideNav title={<SidenavLogo />}>
+            <DxcApplicationLayout.SideNav.Section>
+              <DxcTextInput
+                placeholder="Search docs"
+                value={filter}
+                onChange={({ value }: { value: string }) => {
+                  setFilter(value);
+                }}
+                size="fillParent"
+                clearable
+                margin={{
+                  top: "large",
+                  bottom: "large",
+                  right: "medium",
+                  left: "medium",
+                }}
+              />
+            </DxcApplicationLayout.SideNav.Section>
+            {filteredLinks?.map(({ label, links }) => (
+              <DxcApplicationLayout.SideNav.Section key={label}>
+                <DxcApplicationLayout.SideNav.Group title={label}>
+                  {links.map(({ label, path, status }) => (
+                    <Link key={`${label}-${path}`} href={path} passHref legacyBehavior>
+                      <DxcApplicationLayout.SideNav.Link selected={matchPaths(path)}>
+                        {label}
+                        {status && status !== "stable" && <StatusBadge hasTitle status={status} />}
+                      </DxcApplicationLayout.SideNav.Link>
+                    </Link>
                   ))}
-                  <DxcApplicationLayout.SideNav.Section>
-                    <DxcApplicationLayout.SideNav.Link
-                      href="https://github.com/dxc-technology/halstack-react"
-                      newWindow
-                    >
-                      GitHub
-                    </DxcApplicationLayout.SideNav.Link>
-                  </DxcApplicationLayout.SideNav.Section>
-                </DxcApplicationLayout.SideNav>
-              }
-            >
-              <DxcApplicationLayout.Main>
-                <DxcToastsQueue duration={5000}>
-                  <MainContent>{children}</MainContent>
-                </DxcToastsQueue>
-              </DxcApplicationLayout.Main>
-            </DxcApplicationLayout>
-          )}
-        >
-          {componentWithLayout}
-        </ApplicationLayoutWrapper>
-      </HalstackProvider>
+                </DxcApplicationLayout.SideNav.Group>
+              </DxcApplicationLayout.SideNav.Section>
+            ))}
+            <DxcApplicationLayout.SideNav.Section>
+              <DxcApplicationLayout.SideNav.Link href="https://github.com/dxc-technology/halstack-react" newWindow>
+                GitHub
+              </DxcApplicationLayout.SideNav.Link>
+            </DxcApplicationLayout.SideNav.Section>
+          </DxcApplicationLayout.SideNav>
+        }
+      >
+        <DxcApplicationLayout.Main>
+          <DxcToastsQueue duration={7000}>
+            <MainContent>{componentWithLayout}</MainContent>
+          </DxcToastsQueue>
+        </DxcApplicationLayout.Main>
+      </DxcApplicationLayout>
     </>
   );
-};
-
-export default App;
+}
diff --git a/apps/website/pages/components/alert/code.tsx b/apps/website/pages/components/alert/code.tsx
@@ -3,16 +3,14 @@ import type { ReactElement } from "react";
 import AlertPageLayout from "screens/components/alert/AlertPageLayout";
 import AlertCodePage from "screens/components/alert/code/AlertCodePage";
 
-const Code = () => {
-  return (
-    <>
-      <Head>
-        <title>Alert Code — Halstack Design System</title>
-      </Head>
-      <AlertCodePage />
-    </>
-  );
-};
+const Code = () => (
+  <>
+    <Head>
+      <title>Alert code — Halstack Design System</title>
+    </Head>
+    <AlertCodePage />
+  </>
+);
 
 Code.getLayout = (page: ReactElement) => <AlertPageLayout>{page}</AlertPageLayout>;
 

diff --git a/apps/website/pages/components/alert/index.tsx b/apps/website/pages/components/alert/index.tsx
@@ -3,16 +3,14 @@ import type { ReactElement } from "react";
 import AlertPageLayout from "screens/components/alert/AlertPageLayout";
 import AlertOverviewPage from "screens/components/alert/overview/AlertOverviewPage";
 
-const Index = () => {
-  return (
-    <>
-      <Head>
-        <title>Alert — Halstack Design System</title>
-      </Head>
-      <AlertOverviewPage />
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Alert — Halstack Design System</title>
+    </Head>
+    <AlertOverviewPage />
+  </>
+);
 
 Index.getLayout = (page: ReactElement) => <AlertPageLayout>{page}</AlertPageLayout>;
 

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

diff --git a/apps/website/pages/components/contextual-menu/code.tsx b/apps/website/pages/components/contextual-menu/code.tsx
@@ -6,7 +6,7 @@ import ContextualMenuCodePage from "screens/components/contextual-menu/code/Cont
 const Code = () => (
   <>
     <Head>
-      <title>Contextual Menu Code — Halstack Design System</title>
+      <title>Contextual menu code — Halstack Design System</title>
     </Head>
     <ContextualMenuCodePage />
   </>

diff --git a/apps/website/pages/components/contextual-menu/index.tsx b/apps/website/pages/components/contextual-menu/index.tsx
@@ -3,15 +3,15 @@ import type { ReactElement } from "react";
 import ContextualMenuOverviewPage from "screens/components/contextual-menu/overview/ContextualMenuOverviewPage";
 import ContextualMenuPageLayout from "screens/components/contextual-menu/ContextualMenuPageLayout";
 
-const Usage = () => (
+const Index = () => (
   <>
     <Head>
-      <title>Contextual Menu — Halstack Design System</title>
+      <title>Contextual menu — Halstack Design System</title>
     </Head>
     <ContextualMenuOverviewPage />
   </>
 );
 
-Usage.getLayout = (page: ReactElement) => <ContextualMenuPageLayout>{page}</ContextualMenuPageLayout>;
+Index.getLayout = (page: ReactElement) => <ContextualMenuPageLayout>{page}</ContextualMenuPageLayout>;
 
-export default Usage;
+export default Index;
diff --git a/apps/website/pages/components/divider/code.tsx b/apps/website/pages/components/divider/code.tsx
@@ -3,16 +3,14 @@ import type { ReactElement } from "react";
 import DividerPageLayout from "screens/components/divider/DividerPageLayout";
 import DividerCodePage from "screens/components/divider/code/DividerCodePage";
 
-const Code = () => {
-  return (
-    <>
-      <Head>
-        <title>Divider Code — Halstack Design System</title>
-      </Head>
-      <DividerCodePage />
-    </>
-  );
-};
+const Code = () => (
+  <>
+    <Head>
+      <title>Divider code — Halstack Design System</title>
+    </Head>
+    <DividerCodePage />
+  </>
+);
 
 Code.getLayout = (page: ReactElement) => <DividerPageLayout>{page}</DividerPageLayout>;
 

diff --git a/apps/website/pages/components/divider/index.tsx b/apps/website/pages/components/divider/index.tsx
@@ -3,16 +3,14 @@ import type { ReactElement } from "react";
 import DividerOverviewPage from "screens/components/divider/overview/DividerOverviewPage";
 import DividerPageLayout from "screens/components/divider/DividerPageLayout";
 
-const Index = () => {
-  return (
-    <>
-      <Head>
-        <title>Divider — Halstack Design System</title>
-      </Head>
-      <DividerOverviewPage/>
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Divider — Halstack Design System</title>
+    </Head>
+    <DividerOverviewPage />
+  </>
+);
 
 Index.getLayout = (page: ReactElement) => <DividerPageLayout>{page}</DividerPageLayout>;
 

diff --git a/apps/website/pages/overview/component-lifecycle.tsx b/apps/website/pages/overview/component-lifecycle.tsx
@@ -1,15 +1,13 @@
 import Head from "next/head";
 import ComponentLifecyclePage from "screens/overview/component-lifecycle/ComponentLifecyclePage";
 
-const ComponentLifecycle = () => {
-  return (
-    <>
-      <Head>
-        <title>Component lifecycle — Halstack Design System</title>
-      </Head>
-      <ComponentLifecyclePage></ComponentLifecyclePage>
-    </>
-  );
-};
+const ComponentLifecycle = () => (
+  <>
+    <Head>
+      <title>Component lifecycle — Halstack Design System</title>
+    </Head>
+    <ComponentLifecyclePage />
+  </>
+);
 
 export default ComponentLifecycle;
diff --git a/apps/website/pages/overview/installation.tsx b/apps/website/pages/overview/installation.tsx
@@ -1,15 +1,13 @@
 import Head from "next/head";
 import InstallationPage from "screens/overview/installation/InstallationPage";
 
-const Installation = () => {
-  return (
-    <>
-      <Head>
-        <title>Installation — Halstack Design System</title>
-      </Head>
-      <InstallationPage></InstallationPage>
-    </>
-  );
-};
+const Installation = () => (
+  <>
+    <Head>
+      <title>Installation — Halstack Design System</title>
+    </Head>
+    <InstallationPage />
+  </>
+);
 
 export default Installation;
diff --git a/apps/website/pages/overview/introduction.tsx b/apps/website/pages/overview/introduction.tsx
@@ -1,15 +1,13 @@
 import Head from "next/head";
 import IntroductionPage from "screens/overview/introduction/IntroductionPage";
 
-const Introduction = () => {
-  return (
-    <>
-      <Head>
-        <title>Introduction — Halstack Design System</title>
-      </Head>
-      <IntroductionPage></IntroductionPage>
-    </>
-  );
-};
+const Introduction = () => (
+  <>
+    <Head>
+      <title>Introduction — Halstack Design System</title>
+    </Head>
+    <IntroductionPage />
+  </>
+);
 
 export default Introduction;
diff --git a/apps/website/pages/overview/releases.tsx b/apps/website/pages/overview/releases.tsx
@@ -3,8 +3,8 @@ import Head from "next/head";
 import ReleasesPage from "screens/overview/releases/ReleasesPage";
 
 type Release = {
-  name: string;
   body: string;
+  name: string;
   published_at: string;
 };
 
@@ -16,15 +16,13 @@ export const getStaticProps: GetStaticProps<{
   return { props: { releases } };
 };
 
-const Releases = ({ releases }: InferGetStaticPropsType<typeof getStaticProps>) => {
-  return (
-    <>
-      <Head>
-        <title>Releases — Halstack Design System</title>
-      </Head>
-      <ReleasesPage releases={releases}></ReleasesPage>
-    </>
-  );
-};
+const Releases = ({ releases }: InferGetStaticPropsType<typeof getStaticProps>) => (
+  <>
+    <Head>
+      <title>Releases — Halstack Design System</title>
+    </Head>
+    <ReleasesPage releases={releases} />
+  </>
+);
 
 export default Releases;