diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index c288622bf..5f63224d9 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -115,10 +115,13 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo - Documentation - + !currentPath.includes("/theme-generator/user-guide") && ( + + + User guide + + + ) } /> ) : ( diff --git a/apps/website/pages/theme-generator/user-guide.tsx b/apps/website/pages/theme-generator/user-guide.tsx new file mode 100644 index 000000000..8f5dc5737 --- /dev/null +++ b/apps/website/pages/theme-generator/user-guide.tsx @@ -0,0 +1,15 @@ +import Head from "next/head"; +import ThemeGeneratorUserGuidePage from "screens/theme-generator/ThemeGeneratorUserGuidePage"; + +const Index = () => { + return ( + <> + + Theme generator — Halstack Design System + + + + ); +}; + +export default Index; diff --git a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx index 056577a7a..a2d9df2e0 100644 --- a/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx +++ b/apps/website/screens/theme-generator/ThemeGeneratorPage.tsx @@ -144,8 +144,8 @@ const ThemeGeneratorPage = () => { Open Theme Generator - - View documentation + + View documentation diff --git a/apps/website/screens/theme-generator/ThemeGeneratorUserGuidePage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorUserGuidePage.tsx new file mode 100644 index 000000000..7cc3becf7 --- /dev/null +++ b/apps/website/screens/theme-generator/ThemeGeneratorUserGuidePage.tsx @@ -0,0 +1,143 @@ +import Figure from "@/common/Figure"; +import Image from "@/common/Image"; +import DxcQuickNavContainer from "@/common/QuickNavContainer"; +import { DxcContainer, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; +import step1 from "./images/Step_1.png"; +import step2 from "./images/Step_2.png"; +import step3 from "./images/Step_3.png"; + +const sections = [ + { + title: "Theme Generator User Guide", + content: ( + + Building a custom theme is a simple three-step process. You can navigate between these steps at any time using + the wizard at the top of the page or the navigation buttons at the bottom. + + ), + subSections: [ + { + title: "Step 1: Define your colors", + content: Start by setting the foundation of your brand., + subSections: [ + { + title: "Core colors and semantic colors", + content: ( + + You can select the desired values using the color picker or entering the specific{" "} + hex values for your core colors ( + Primary, Secondary, Tertiary, and Neutral) along with your semantic colors ( + Info, Success, Warning, and Error). These values will be used to generate the list of + tokens that can be seen applied in the next step. These will be the base colors used to + generate the rest of the tokens, so you can get a good idea of how your theme will look by just setting + these few values. You can always go back and tweak them if you want to see how a different shade of a + specific color looks in the preview step. + + ), + }, + { + title: "Branding details", + content: ( + <> + + Brand logos can be uploaded to see how they appear within our{" "} + application layout components and a favicon can also be uploaded. The{" "} + main logo will be assigned to the Header (or the Sidenav if the Header is not + available). The footer logo is divided into two (default and reduced footer) one for + each mode of the footer, and the final slot is reserved for the favicon. + + + Note: Since we do not host these images, they are{" "} + for visualization purposes only. They help to see the theme in context, but they will + be left as empty strings in the exported theme file to be replaced with the correct asset paths. + +
+ Theme generator step 1 +
+ + ), + }, + ], + }, + { + title: "Step 2: Preview your theme", + content: ( + <> + + Once colors are set, you can move to the next step to see your theme in action. By applying the newly + generated tokens to real components and layouts, you will get a clear sense of the look + and feel of the chosen colors and logos in a live environment. + + + Remember that at any point of the process if a color doesn't look quite right in a specific layout, you + can jump back to the previous step at any time to tweak your core or semantic color values. + + + ), + subSections: [ + { + title: "Component preview mode", + content: ( + <> + + In this mode, you can add individual components to the preview area to see how your + specific tokens—such as primary button colors or semantic alerts—behave in isolation. Use the + selection menu to pick the specific elements you want to inspect. + +
+ Theme generator step 2 components +
+ + ), + }, + { + title: "Layout preview mode", + content: ( + <> + + This mode allows you to see how your theme looks when applied to different{" "} + layout options. You can see how the components look in different contexts and get a + better sense of the overall feel of your theme. You can switch between the available layouts to see + how your theme looks in each of them. + + {/* TODO: add image of the layout preview mode. */} + + ), + }, + ], + }, + { + title: "Step 3: Review and export", + content: ( + <> + + In the third and last step, you can perform a final review of your configuration. + + + This step displays a full list of the generated tokens so you can take a final look and + review them. They can be copied directly to the clipboard or exported as + a file. If you need to make a change after you've exported, you can still go back and keep tweaking the + configurations. + +
+ Theme generator step 3 +
+ + ), + }, + ], + }, +]; +const ThemeGeneratorUserGuidePage = () => { + return ( + + + + + + + + ); +}; + +export default ThemeGeneratorUserGuidePage; diff --git a/apps/website/screens/theme-generator/images/Step_1.png b/apps/website/screens/theme-generator/images/Step_1.png new file mode 100644 index 000000000..7e00cd94f Binary files /dev/null and b/apps/website/screens/theme-generator/images/Step_1.png differ diff --git a/apps/website/screens/theme-generator/images/Step_2.png b/apps/website/screens/theme-generator/images/Step_2.png new file mode 100644 index 000000000..34a354190 Binary files /dev/null and b/apps/website/screens/theme-generator/images/Step_2.png differ diff --git a/apps/website/screens/theme-generator/images/Step_3.png b/apps/website/screens/theme-generator/images/Step_3.png new file mode 100644 index 000000000..3125e87c6 Binary files /dev/null and b/apps/website/screens/theme-generator/images/Step_3.png differ