Skip to content

Commit 56a7024

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #2418 from dxc-technology/jialecl/themeGenerator-userGuide
[doc]User guide added to theme generator
2 parents 5e91ada + 7c9262a commit 56a7024

7 files changed

Lines changed: 167 additions & 6 deletions

File tree

‎apps/website/pages/_app.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,13 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
115115
<DxcApplicationLayout.Header
116116
appTitle="Theme Generator"
117117
sideContent={
118-
// Will navigate to a documentation page that will probably be open in a different tab.
119-
<Link href="" legacyBehavior passHref>
120-
<DxcLink icon="description">Documentation</DxcLink>
121-
</Link>
118+
!currentPath.includes("/theme-generator/user-guide") && (
119+
<Link href="/theme-generator/user-guide" legacyBehavior passHref>
120+
<DxcLink newWindow icon="description">
121+
User guide
122+
</DxcLink>
123+
</Link>
124+
)
122125
}
123126
/>
124127
) : (

‎apps/website/pages/theme-generator/user-guide.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Head from "next/head";
2+
import ThemeGeneratorUserGuidePage from "screens/theme-generator/ThemeGeneratorUserGuidePage";
3+
4+
const Index = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Theme generator — Halstack Design System</title>
9+
</Head>
10+
<ThemeGeneratorUserGuidePage />
11+
</>
12+
);
13+
};
14+
15+
export default Index;

‎apps/website/screens/theme-generator/ThemeGeneratorPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,8 @@ const ThemeGeneratorPage = () => {
144144
Open Theme Generator
145145
</DxcLink>
146146
</Link>
147-
<Link href="" passHref legacyBehavior>
148-
<DxcLink>View documentation</DxcLink>
147+
<Link href="/theme-generator/user-guide" passHref legacyBehavior>
148+
<DxcLink newWindow>View documentation</DxcLink>
149149
</Link>
150150
</DxcFlex>
151151
</DxcFlex>

‎apps/website/screens/theme-generator/ThemeGeneratorUserGuidePage.tsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import Figure from "@/common/Figure";
2+
import Image from "@/common/Image";
3+
import DxcQuickNavContainer from "@/common/QuickNavContainer";
4+
import { DxcContainer, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
5+
import step1 from "./images/Step_1.png";
6+
import step2 from "./images/Step_2.png";
7+
import step3 from "./images/Step_3.png";
8+
9+
const sections = [
10+
{
11+
title: "Theme Generator User Guide",
12+
content: (
13+
<DxcParagraph>
14+
Building a custom theme is a simple three-step process. You can navigate between these steps at any time using
15+
the wizard at the top of the page or the navigation buttons at the bottom.
16+
</DxcParagraph>
17+
),
18+
subSections: [
19+
{
20+
title: "Step 1: Define your colors",
21+
content: <DxcParagraph>Start by setting the foundation of your brand.</DxcParagraph>,
22+
subSections: [
23+
{
24+
title: "Core colors and semantic colors",
25+
content: (
26+
<DxcParagraph>
27+
You can select the desired values using the <strong>color picker</strong> or entering the specific{" "}
28+
<strong>hex values</strong> for your core colors (
29+
<strong>Primary, Secondary, Tertiary, and Neutral</strong>) along with your semantic colors (
30+
<strong>Info, Success, Warning, and Error</strong>). These values will be used to generate the list of
31+
tokens that can be seen applied in the next step. These will be the <strong>base colors</strong> used to
32+
generate the rest of the tokens, so you can get a good idea of how your theme will look by just setting
33+
these few values. You can always go back and tweak them if you want to see how a different shade of a
34+
specific color looks in the preview step.
35+
</DxcParagraph>
36+
),
37+
},
38+
{
39+
title: "Branding details",
40+
content: (
41+
<>
42+
<DxcParagraph>
43+
Brand logos can be uploaded to see how they appear within our{" "}
44+
<strong>application layout components</strong> and a favicon can also be uploaded. The{" "}
45+
<strong>main logo</strong> will be assigned to the Header (or the Sidenav if the Header is not
46+
available). The <strong>footer logo</strong> is divided into two (default and reduced footer) one for
47+
each mode of the footer, and the final slot is reserved for the favicon.
48+
</DxcParagraph>
49+
<DxcParagraph>
50+
<strong>Note:</strong> Since we do not host these images, they are{" "}
51+
<strong>for visualization purposes only</strong>. They help to see the theme in context, but they will
52+
be left as empty strings in the exported theme file to be replaced with the correct asset paths.
53+
</DxcParagraph>
54+
<Figure caption="Select your colors and branding details in the first step of the theme generator.">
55+
<Image src={step1} alt="Theme generator step 1" />
56+
</Figure>
57+
</>
58+
),
59+
},
60+
],
61+
},
62+
{
63+
title: "Step 2: Preview your theme",
64+
content: (
65+
<>
66+
<DxcParagraph>
67+
Once colors are set, you can move to the next step to see your theme in action. By applying the newly
68+
generated tokens to real <strong>components and layouts</strong>, you will get a clear sense of the look
69+
and feel of the chosen colors and logos in a live environment.
70+
</DxcParagraph>
71+
<DxcParagraph>
72+
Remember that at any point of the process if a color doesn't look quite right in a specific layout, you
73+
can jump back to the previous step at any time to tweak your core or semantic color values.
74+
</DxcParagraph>
75+
</>
76+
),
77+
subSections: [
78+
{
79+
title: "Component preview mode",
80+
content: (
81+
<>
82+
<DxcParagraph>
83+
In this mode, you can add <strong>individual components</strong> to the preview area to see how your
84+
specific tokens—such as primary button colors or semantic alerts—behave in isolation. Use the
85+
selection menu to pick the specific elements you want to inspect.
86+
</DxcParagraph>
87+
<Figure caption="Preview your theme by applying the generated tokens to actual components.">
88+
<Image src={step2} alt="Theme generator step 2 components" />
89+
</Figure>
90+
</>
91+
),
92+
},
93+
{
94+
title: "Layout preview mode",
95+
content: (
96+
<>
97+
<DxcParagraph>
98+
This mode allows you to see how your theme looks when applied to different{" "}
99+
<strong>layout options</strong>. You can see how the components look in different contexts and get a
100+
better sense of the overall feel of your theme. You can switch between the available layouts to see
101+
how your theme looks in each of them.
102+
</DxcParagraph>
103+
{/* TODO: add image of the layout preview mode. */}
104+
</>
105+
),
106+
},
107+
],
108+
},
109+
{
110+
title: "Step 3: Review and export",
111+
content: (
112+
<>
113+
<DxcParagraph>
114+
In the third and last step, you can perform a <strong>final review</strong> of your configuration.
115+
</DxcParagraph>
116+
<DxcParagraph>
117+
This step displays a full <strong>list of the generated tokens</strong> so you can take a final look and
118+
review them. They can be <strong>copied</strong> directly to the clipboard or <strong>exported</strong> as
119+
a file. If you need to make a change after you've exported, you can still go back and keep tweaking the
120+
configurations.
121+
</DxcParagraph>
122+
<Figure caption="Review and export your theme in the third step of the theme generator">
123+
<Image src={step3} alt="Theme generator step 3" />
124+
</Figure>
125+
</>
126+
),
127+
},
128+
],
129+
},
130+
];
131+
const ThemeGeneratorUserGuidePage = () => {
132+
return (
133+
<DxcFlex justifyContent="center" alignItems="center">
134+
<DxcContainer maxWidth="80%" margin={{ top: "80px", bottom: "80px" }}>
135+
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
136+
<DxcQuickNavContainer sections={sections} startHeadingLevel={1} />
137+
</DxcFlex>
138+
</DxcContainer>
139+
</DxcFlex>
140+
);
141+
};
142+
143+
export default ThemeGeneratorUserGuidePage;

‎apps/website/screens/theme-generator/images/Step_1.png‎

75.9 KB
Loading

‎apps/website/screens/theme-generator/images/Step_2.png‎

100 KB
Loading

‎apps/website/screens/theme-generator/images/Step_3.png‎

158 KB
Loading

0 commit comments

Comments
 (0)