From a1c09ac5489d5a0765f80de06f0b2209aadc27f9 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Wed, 18 Feb 2026 12:21:16 +0100 Subject: [PATCH 1/3] Add Theme Generator page, update navigation links and folder structure --- apps/website/pages/_app.tsx | 49 +++++++--- .../pages/utilities/theme-generator.tsx | 98 +++++++++++++++++++ apps/website/screens/common/pagesList.tsx | 5 + .../theme-generator/ThemeGeneratorPage.tsx | 11 +++ 4 files changed, 147 insertions(+), 16 deletions(-) create mode 100644 apps/website/pages/utilities/theme-generator.tsx create mode 100644 apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index fdffe9c9a5..9f591fd21c 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -24,8 +24,18 @@ type AppPropsWithLayout = AppProps & { emotionCache?: EmotionCache; }; +type ApplicationLayoutWrapperProps = { + condition: boolean; + wrapper: (_children: ReactNode) => JSX.Element; + children: ReactNode; +}; + const clientSideEmotionCache = createCache({ key: "css", prepend: true }); +const ApplicationLayoutWrapper = ({ condition, wrapper, children }: ApplicationLayoutWrapperProps): JSX.Element => ( + <>{condition ? wrapper(children) : children} +); + export default function App({ Component, pageProps, emotionCache = clientSideEmotionCache }: AppPropsWithLayout) { const getLayout = Component.getLayout || ((page) => page); const componentWithLayout = getLayout(); @@ -107,23 +117,30 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo - } - sidenav={ - } - searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }} - /> - } + ( + } + sidenav={ + } + searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }} + /> + } + > + + + {children} + + + + )} > - - - {componentWithLayout} - - - + {componentWithLayout} + ); } diff --git a/apps/website/pages/utilities/theme-generator.tsx b/apps/website/pages/utilities/theme-generator.tsx new file mode 100644 index 0000000000..b3878c1d6e --- /dev/null +++ b/apps/website/pages/utilities/theme-generator.tsx @@ -0,0 +1,98 @@ +import Head from "next/head"; +import styled from "@emotion/styled"; +import { DxcApplicationLayout, DxcButton, DxcToastsQueue } from "@dxc-technology/halstack-react"; +import ThemeGeneratorPage from "screens/utilities/theme-generator/ThemeGeneratorPage"; +import Link from "next/link"; + +const headerLogo = { + src: ( + + + + + + + + + + + + + + ), + alt: "Dxc Technology", +}; + +const footerLogo = { + src: ( + + + + ), + alt: "Dxc Technology", +}; + +const MainContent = styled.div` + width: 1332px; + height: 100%; + display: grid; + grid-template-rows: auto 1fr auto; + align-items: center; + gap: var(--spacing-gap-xl); + padding: var(--spacing-padding-none) var(--spacing-padding-ml); + box-sizing: border-box; + padding-top: var(--spacing-padding-s); + margin: var(--spacing-gap-xl) auto; +`; + +const Index = () => { + return ( + <> + + Theme generator — Halstack Design System + + + + + } + /> + } + footer={} + > + + + + + + + + + + ); +}; + +export default Index; diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index 32f1f9f99d..4988317c38 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -34,6 +34,11 @@ const utilitiesLinks: LinkDetails[] = [ path: "/utilities/halstack-provider", icon: "integration_instructions", }, + { + label: "Theme generator", + path: "/utilities/theme-generator", + icon: "colorize", + }, ]; const principlesLinks: LinkDetails[] = [ diff --git a/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx new file mode 100644 index 0000000000..ee9360ab7b --- /dev/null +++ b/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx @@ -0,0 +1,11 @@ +import { DxcContainer } from "@dxc-technology/halstack-react"; + +const ThemeGeneratorPage = () => { + return ( + <> + + + ); +}; + +export default ThemeGeneratorPage; From def307f40e78eae19883c81028e83ac5fc3e277a Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Wed, 18 Feb 2026 12:28:33 +0100 Subject: [PATCH 2/3] remove unnecesary styles --- apps/website/pages/utilities/theme-generator.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/website/pages/utilities/theme-generator.tsx b/apps/website/pages/utilities/theme-generator.tsx index b3878c1d6e..bd28797dc9 100644 --- a/apps/website/pages/utilities/theme-generator.tsx +++ b/apps/website/pages/utilities/theme-generator.tsx @@ -52,10 +52,6 @@ const MainContent = styled.div` grid-template-rows: auto 1fr auto; align-items: center; gap: var(--spacing-gap-xl); - padding: var(--spacing-padding-none) var(--spacing-padding-ml); - box-sizing: border-box; - padding-top: var(--spacing-padding-s); - margin: var(--spacing-gap-xl) auto; `; const Index = () => { From 234069ccee965373975e4cfd8ed51aeb01972d14 Mon Sep 17 00:00:00 2001 From: PelayoFelgueroso Date: Wed, 18 Feb 2026 16:45:22 +0100 Subject: [PATCH 3/3] change url from /utilities/theme-generator to /theme-generator, remove it from the sidenav, remove ApplicationLayoutWrapper and instead render conditionally the Header, Sidenav and Footer props. Remove blank content from ThemeGeneratorPage and MainContent styled component. And change logo file --- apps/website/pages/_app.tsx | 73 +++++++------- apps/website/pages/theme-generator/index.tsx | 15 +++ .../pages/utilities/theme-generator.tsx | 94 ------------------- apps/website/public/dxc_footer_logo.svg | 32 ------- apps/website/public/dxc_header_logo.svg | 13 --- .../screens/common/images/dxc_logo.tsx | 39 ++++---- apps/website/screens/common/pagesList.tsx | 5 - .../theme-generator/ThemeGeneratorPage.tsx | 9 +- 8 files changed, 78 insertions(+), 202 deletions(-) create mode 100644 apps/website/pages/theme-generator/index.tsx delete mode 100644 apps/website/pages/utilities/theme-generator.tsx delete mode 100644 apps/website/public/dxc_footer_logo.svg delete mode 100644 apps/website/public/dxc_header_logo.svg diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 9f591fd21c..388290d1a0 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -2,7 +2,7 @@ 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, DxcToastsQueue } from "@dxc-technology/halstack-react"; +import { DxcApplicationLayout, DxcButton, DxcToastsQueue } from "@dxc-technology/halstack-react"; import MainContent from "@/common/MainContent"; import { useRouter } from "next/router"; import { LinkDetails, LinksSectionDetails, LinksSections } from "@/common/pagesList"; @@ -24,23 +24,14 @@ type AppPropsWithLayout = AppProps & { emotionCache?: EmotionCache; }; -type ApplicationLayoutWrapperProps = { - condition: boolean; - wrapper: (_children: ReactNode) => JSX.Element; - children: ReactNode; -}; - const clientSideEmotionCache = createCache({ key: "css", prepend: true }); -const ApplicationLayoutWrapper = ({ condition, wrapper, children }: ApplicationLayoutWrapperProps): JSX.Element => ( - <>{condition ? wrapper(children) : children} -); - export default function App({ Component, pageProps, emotionCache = clientSideEmotionCache }: AppPropsWithLayout) { const getLayout = Component.getLayout || ((page) => page); const componentWithLayout = getLayout(); const [filter, setFilter] = useState(""); const { asPath: currentPath } = useRouter(); + const isThemeGenerator = currentPath.includes("/theme-generator"); const matchPaths = (linkPath: string) => { const desiredPaths = [linkPath, `${linkPath}/code`]; @@ -117,30 +108,44 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo - ( - } - sidenav={ - } - searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }} - /> - } - > - - - {children} - - - - )} + + + + } + /> + ) : ( + + ) + } + sidenav={ + !isThemeGenerator && ( + } + searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }} + /> + ) + } + footer={isThemeGenerator && } > - {componentWithLayout} - + + + {componentWithLayout} + + + ); } diff --git a/apps/website/pages/theme-generator/index.tsx b/apps/website/pages/theme-generator/index.tsx new file mode 100644 index 0000000000..35283e0fcd --- /dev/null +++ b/apps/website/pages/theme-generator/index.tsx @@ -0,0 +1,15 @@ +import Head from "next/head"; +import ThemeGeneratorPage from "screens/utilities/theme-generator/ThemeGeneratorPage"; + +const Index = () => { + return ( + <> + + Theme generator — Halstack Design System + + + + ); +}; + +export default Index; diff --git a/apps/website/pages/utilities/theme-generator.tsx b/apps/website/pages/utilities/theme-generator.tsx deleted file mode 100644 index bd28797dc9..0000000000 --- a/apps/website/pages/utilities/theme-generator.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import Head from "next/head"; -import styled from "@emotion/styled"; -import { DxcApplicationLayout, DxcButton, DxcToastsQueue } from "@dxc-technology/halstack-react"; -import ThemeGeneratorPage from "screens/utilities/theme-generator/ThemeGeneratorPage"; -import Link from "next/link"; - -const headerLogo = { - src: ( - - - - - - - - - - - - - - ), - alt: "Dxc Technology", -}; - -const footerLogo = { - src: ( - - - - ), - alt: "Dxc Technology", -}; - -const MainContent = styled.div` - width: 1332px; - height: 100%; - display: grid; - grid-template-rows: auto 1fr auto; - align-items: center; - gap: var(--spacing-gap-xl); -`; - -const Index = () => { - return ( - <> - - Theme generator — Halstack Design System - - - - - } - /> - } - footer={} - > - - - - - - - - - - ); -}; - -export default Index; diff --git a/apps/website/public/dxc_footer_logo.svg b/apps/website/public/dxc_footer_logo.svg deleted file mode 100644 index 522bab5a75..0000000000 --- a/apps/website/public/dxc_footer_logo.svg +++ /dev/null @@ -1,32 +0,0 @@ - - DXC Logo - - - - - - - - - - - - - - \ No newline at end of file diff --git a/apps/website/public/dxc_header_logo.svg b/apps/website/public/dxc_header_logo.svg deleted file mode 100644 index b98a0044d5..0000000000 --- a/apps/website/public/dxc_header_logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - DXC Logo - - - - - - - \ No newline at end of file diff --git a/apps/website/screens/common/images/dxc_logo.tsx b/apps/website/screens/common/images/dxc_logo.tsx index b674855295..619d15e7cc 100644 --- a/apps/website/screens/common/images/dxc_logo.tsx +++ b/apps/website/screens/common/images/dxc_logo.tsx @@ -1,19 +1,26 @@ export const dxcLogo = ( - - DXC Logo - - - - - - + + Expand commentComment on line R9Resolved + + + + + + + + + + + ); diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index 4988317c38..32f1f9f99d 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -34,11 +34,6 @@ const utilitiesLinks: LinkDetails[] = [ path: "/utilities/halstack-provider", icon: "integration_instructions", }, - { - label: "Theme generator", - path: "/utilities/theme-generator", - icon: "colorize", - }, ]; const principlesLinks: LinkDetails[] = [ diff --git a/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx index ee9360ab7b..66606ec62e 100644 --- a/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx +++ b/apps/website/screens/utilities/theme-generator/ThemeGeneratorPage.tsx @@ -1,11 +1,4 @@ -import { DxcContainer } from "@dxc-technology/halstack-react"; - const ThemeGeneratorPage = () => { - return ( - <> - - - ); + return <>; }; - export default ThemeGeneratorPage;