dxc-technology · raquelarrojo · Dec 27, 2022 · Dec 2, 2022 · Dec 2, 2022 · Dec 2, 2022
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -9,13 +9,16 @@
   },
   "dependencies": {
     "@dxc-technology/halstack-react": "0.0.0-e1386cf",
+    "@radix-ui/react-popover": "0.1.6",
     "@types/styled-components": "^5.1.18",
     "axios": "^0.27.2",
     "cross-env": "^7.0.3",
     "next": "12.1.0",
     "raw-loader": "^4.0.2",
     "react": "17.0.2",
+    "react-color": "^2.19.3",
     "react-dom": "17.0.2",
+    "react-error-boundary": "^3.1.4",
     "react-live": "^2.4.1",
     "react-markdown": "^8.0.0",
     "slugify": "^1.6.5",
@@ -24,6 +27,7 @@
   "devDependencies": {
     "@types/node": "17.0.2",
     "@types/react": "17.0.37",
+    "@types/react-color": "^3.0.6",
     "eslint": "8.5.0",
     "eslint-config-next": "12.0.9",
     "typescript": "4.5.4"

diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx
@@ -12,29 +12,40 @@ import "../global-styles.css";
 import { responsiveSizes } from "../screens/common/variables.js";
 import SidenavLogo from "@/common/sidenav/SidenavLogo";
 import { useRouter } from "next/router";
-import { LinksSectionDetails, LinksSections } from "@/common/pagesList";
+import {
+  LinksSectionDetails,
+  LinksSections,
+  themeGeneratorLinks,
+} from "@/common/pagesList";
 import Link from "next/link";
 
 type NextPageWithLayout = NextPage & {
   getLayout?: (page: ReactElement) => ReactNode;
 };
-
 type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
+type ApplicationLayoutWrapperProps = {
+  condition: boolean;
+  wrapper: (children: React.ReactNode) => JSX.Element;
+  children: ReactNode;
+};
 
-function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-  const getLayout = Component.getLayout || ((page) => page);
+const ApplicationLayoutWrapper = ({
+  condition,
+  wrapper,
+  children,
+}: ApplicationLayoutWrapperProps): JSX.Element => (
+  <>{condition ? wrapper(children) : children}</>
+);
 
+const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
+  const getLayout = Component.getLayout || ((page) => page);
   const componentWithLayout = getLayout(<Component {...pageProps} />);
 
   const [filter, setFilter] = useState("");
   const { asPath: currentPath } = useRouter();
 
-  const onFilterInputChange = ({ value }: { value: string }) => {
-    setFilter(value);
-  };
-
   const filteredLinks = useMemo(() => {
     const filtered: LinksSectionDetails[] = [];
     LinksSections.map((section) => {
@@ -47,64 +58,76 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     });
     return filtered;
   }, [filter]);
+
+  const onFilterInputChange = ({ value }: { value: string }) => {
+    setFilter(value);
+  };
+
   return (
     <>
       <Head>
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
       </Head>
-      <HalstackProvider advancedTheme={{}}>
-        <DxcApplicationLayout
-          visibilityToggleLabel="Menu"
-          sidenav={
-            <DxcApplicationLayout.SideNav title={<SidenavLogo />}>
-              <DxcApplicationLayout.SideNav.Section>
-                <DxcTextInput
-                  placeholder="Search docs"
-                  value={filter}
-                  onChange={onFilterInputChange}
-                  size="fillParent"
-                  clearable
-                  margin={{
-                    top: "small",
-                    bottom: "small",
-                    right: "xsmall",
-                    left: "xsmall",
-                  }}
-                />
-              </DxcApplicationLayout.SideNav.Section>
-              {filteredLinks?.map(({ label, links }) => {
-                return (
-                  <DxcApplicationLayout.SideNav.Section key={label}>
-                    <DxcApplicationLayout.SideNav.Group title={label}>
-                      {links.map(({ label, path }) => (
-                        <Link key={`${label}-${path}`} href={path} passHref>
-                          <DxcApplicationLayout.SideNav.Link
-                            selected={
-                              currentPath.slice(0, -1) === path ||
-                              currentPath.slice(0, -1) ===
-                                path + "/specifications" ||
-                              currentPath.slice(0, -1) === path + "/usage"
-                            }
-                          >
-                            {label}
-                          </DxcApplicationLayout.SideNav.Link>
-                        </Link>
-                      ))}
-                    </DxcApplicationLayout.SideNav.Group>
+      <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={onFilterInputChange}
+                      size="fillParent"
+                      clearable
+                      margin={{
+                        top: "small",
+                        bottom: "small",
+                        right: "xsmall",
+                        left: "xsmall",
+                      }}
+                    />
                   </DxcApplicationLayout.SideNav.Section>
-                );
-              })}
-            </DxcApplicationLayout.SideNav>
-          }
+                  {filteredLinks?.map(({ label, links }) => {
+                    return (
+                      <DxcApplicationLayout.SideNav.Section key={label}>
+                        <DxcApplicationLayout.SideNav.Group title={label}>
+                          {links.map(({ label, path }) => (
+                            <Link key={`${label}-${path}`} href={path} passHref>
+                              <DxcApplicationLayout.SideNav.Link
+                                selected={
+                                  currentPath.slice(0, -1) === path ||
+                                  currentPath.slice(0, -1) ===
+                                    path + "/specifications" ||
+                                  currentPath.slice(0, -1) === path + "/usage"
+                                }
+                              >
+                                {label}
+                              </DxcApplicationLayout.SideNav.Link>
+                            </Link>
+                          ))}
+                        </DxcApplicationLayout.SideNav.Group>
+                      </DxcApplicationLayout.SideNav.Section>
+                    );
+                  })}
+                </DxcApplicationLayout.SideNav>
+              }
+            >
+              <DxcApplicationLayout.Main>
+                <MainContainer>{children}</MainContainer>
+              </DxcApplicationLayout.Main>
+            </DxcApplicationLayout>
+          )}
         >
-          <DxcApplicationLayout.Main>
-            <MainContainer>{componentWithLayout}</MainContainer>
-          </DxcApplicationLayout.Main>
-        </DxcApplicationLayout>
+          {componentWithLayout}
+        </ApplicationLayoutWrapper>
       </HalstackProvider>
     </>
   );
-}
+};
 
 const MainContainer = styled.div`
   margin: 80px auto;

diff --git a/website/pages/theme-generator/advanced-theme.tsx b/website/pages/theme-generator/advanced-theme.tsx
@@ -0,0 +1,15 @@
+import Head from "next/head";
+import ThemeGeneratorPage from "../../screens/theme-generator/ThemeGenerator";
+
+const ThemeGenerator = () => {
+  return (
+    <>
+      <Head>
+        <title>Advanced theme generator — Halstack Design System</title>
+      </Head>
+      <ThemeGeneratorPage />
+    </>
+  );
+};
+
+export default ThemeGenerator;
diff --git a/website/pages/theme-generator/opinionated-theme.tsx b/website/pages/theme-generator/opinionated-theme.tsx
@@ -0,0 +1,15 @@
+import Head from "next/head";
+import ThemeGeneratorPage from "../../screens/theme-generator/ThemeGenerator";
+
+const ThemeGenerator = () => {
+  return (
+    <>
+      <Head>
+        <title>Opinionated theme generator — Halstack Design System</title>
+      </Head>
+      <ThemeGeneratorPage />
+    </>
+  );
+};
+
+export default ThemeGenerator;
diff --git a/website/screens/common/pagesList.ts b/website/screens/common/pagesList.ts
@@ -13,6 +13,11 @@ type NavigationLinks = {
   nextLink: LinkDetails | null;
 };
 
+export const themeGeneratorLinks = [
+  "/theme-generator/opinionated-theme/",
+  "/theme-generator/advanced-theme/"
+]
+
 const overviewLinks: LinkDetails[] = [
   { label: "Introduction", path: "/overview/introduction" },
 ];

diff --git a/website/screens/common/sidenav/SidenavLogo.tsx b/website/screens/common/sidenav/SidenavLogo.tsx
@@ -5,7 +5,13 @@ import StatusTag from "@/common/StatusTag";
 import React from "react";
 import { useRouter } from "next/router";
 
-const SidenavLogo = () => {
+type SidenavLogoProps = {
+  version?: string;
+};
+
+const SidenavLogo = ({
+  version = "Design System",
+}: SidenavLogoProps): JSX.Element => {
   const { basePath } = useRouter();
   const siteVersion = basePath.split("/")[2];
 
@@ -21,7 +27,7 @@ const SidenavLogo = () => {
           />
           <Title>Halstack</Title>
         </Header>
-        <Subtitle>Design system</Subtitle>
+        <Subtitle>{version}</Subtitle>
       </LogoContainer>
       <StatusTag>
         {basePath

diff --git a/website/screens/principles/themes/ThemesPage.tsx b/website/screens/principles/themes/ThemesPage.tsx
@@ -6,6 +6,7 @@ import {
   DxcParagraph,
   DxcBulletedList,
 } from "@dxc-technology/halstack-react";
+import Link from "next/link";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import PageHeading from "@/common/PageHeading";
 import DocFooter from "@/common/DocFooter";
@@ -64,12 +65,9 @@ const sections = [
             about the ones we consider fundamental. The list of configurable
             properties is small, but it applies at the component level. You can
             generate the theme object using our{" "}
-            <DxcLink
-              href="https://developer.dxc.com/tools/react/next/#/themeBuilder"
-              newWindow
-            >
-              opinionated theme generator
-            </DxcLink>
+            <Link href="/theme-generator/opinionated-theme" passHref>
+              <DxcLink>opinionated theme generator</DxcLink>
+            </Link>
             .
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
@@ -81,12 +79,9 @@ const sections = [
             decisions are structural to the component. The list of configurable
             properties is large, and it applies at the component level. You can
             generate the theme object using our{" "}
-            <DxcLink
-              href="https://developer.dxc.com/tools/react/next/#/themeBuilder/advancedTheme"
-              newWindow
-            >
-              advanced theme generator
-            </DxcLink>
+            <Link href="/theme-generator/advanced-theme" passHref>
+              <DxcLink>advanced theme generator</DxcLink>
+            </Link>
             .
           </DxcBulletedList.Item>
         </DxcBulletedList>