Skip to content

[doc] Add theme generators skeleton #2407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PelayoFelgueroso wants to merge 11 commits into
base: theme-generator
Choose a base branch
from
Open

[doc] Add theme generators skeleton #2407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9fed2bd
Theme generator skeleton
PelayoFelgueroso Feb 23, 2026
0ec0d38
conditionate <MainContent> wrapper in app.tsx and fix padding to Bott…
PelayoFelgueroso Feb 23, 2026
764f93e
Merge branch 'master' of https://github.com/dxc-technology/halstack-r…
PelayoFelgueroso Feb 23, 2026
b3f7c2c
Change name to ThemeGeneratorConfigPage
PelayoFelgueroso Feb 24, 2026
38e4d73
Remove unnecesary files for this PR
PelayoFelgueroso Feb 26, 2026
7a9ff88
Merge branch 'theme-generator' of https://github.com/dxc-technology/h…
PelayoFelgueroso Feb 26, 2026
c002851
Merge branch 'theme-generator' into PelayoFelgueroso/theme-generator_…
PelayoFelgueroso Feb 26, 2026
10b313c
change name to ThemeGeneratorConfigPage
PelayoFelgueroso Feb 26, 2026
e97145f
Change Heading level
PelayoFelgueroso Feb 27, 2026
5978aa0
Update PageHeading to StepHeading and make it responsive
PelayoFelgueroso Feb 27, 2026
2fe5284
Fix based on comments
PelayoFelgueroso Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/website/pages/theme-generator/index.tsx → ...s/theme-generator/configuration/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import Head from "next/head";
import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorPage";
import ThemeGeneratorConfigPage from "screens/theme-generator/ThemeGeneratorConfigPage";

const Index = () => {
return (
<>
<Head>
<title>Theme generator — Halstack Design System</title>
</Head>
<ThemeGeneratorPage />
<ThemeGeneratorConfigPage />
</>
);
};
Expand Down
92 changes: 92 additions & 0 deletions apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { useState } from "react";
import { DxcContainer, DxcFlex, DxcWizard } from "@dxc-technology/halstack-react";
import StepHeading from "./components/StepHeading";
import BottomButtons from "./components/BottomButtons";
// import { FileData } from "../../../../packages/lib/src/file-input/types";

export type Step = 0 | 1 | 2;

const steps = [
{ label: "Configure theme", description: "Branding details" },
{ label: "Preview", description: "Components and templates" },
{ label: "Export theme", description: "Review and export" },
];

const stepHeadings = [
{
title: "Add your theme specifics",
subtitle: "Review your uploaded theme or define your brand colors and logos to preview them in real life. ",
},
{
title: "Preview how your theme applies",
subtitle: "Choose components or examples from Halstack catalogue to see how your theme behaves.",
},
{
title: "Review and export your theme",
subtitle: "Check your colors and branding assets before exporting your Halstack theme.",
},
];

const ThemeGeneratorConfigPage = () => {
const [currentStep, setCurrentStep] = useState<Step>(0);
// Uncomment when implementing the Branding details screen
/** const [colors, setColors] = useState({
primary: "#5f249f",
secondary: "#00b4d8",
tertiary: "#ffa500",
neutral: "#666666",
info: "#0095FF",
success: "#2FD05D",
error: "#FE0123",
warning: "#F38F20",
});
const [logos, setLogos] = useState({
mainLogo: [] as FileData[],
footerLogo: [] as FileData[],
footerReducedLogo: [] as FileData[],
favicon: [] as FileData[],
});
*/

const handleChangeStep = (step: Step) => {
setCurrentStep(step);
};

return (
<DxcContainer
height="100%"
boxSizing="border-box"
padding={{ top: "var(--spacing-padding-xl)" }}
background={{ color: "var(--color-bg-neutral-lighter)" }}
>
<DxcFlex direction="column" gap="var(--spacing-gap-xl)" fullHeight>
<DxcContainer width="80%" maxWidth="1112px" margin={{ left: "auto", right: "auto" }}>
<DxcWizard
steps={steps}
currentStep={currentStep}
onStepClick={(i) => {
handleChangeStep(i as Step);
}}
/>
</DxcContainer>

<DxcContainer
maxWidth="1332px"
width="90%"
height="100%"
boxSizing="border-box"
margin={{ left: "auto", right: "auto" }}
>
<DxcFlex direction="column" alignItems="center" gap="var(--spacing-gap-xl)">
<StepHeading title={stepHeadings[currentStep]!.title} subtitle={stepHeadings[currentStep]!.subtitle} />
{currentStep === 0 ? <></> : currentStep === 1 ? <></> : <></>}
</DxcFlex>
</DxcContainer>

<BottomButtons currentStep={currentStep} onChangeStep={handleChangeStep} />
</DxcFlex>
</DxcContainer>
);
};

export default ThemeGeneratorConfigPage;
54 changes: 54 additions & 0 deletions apps/website/screens/theme-generator/components/BottomButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { DxcButton, DxcContainer, DxcFlex } from "@dxc-technology/halstack-react";
import { Step } from "../ThemeGeneratorConfigPage";

const MIN_STEP: Step = 0;
const MAX_STEP: Step = 2;

interface BottomButtonsProps {
currentStep: Step;
onChangeStep: (step: Step) => void;
}

const BottomButtons = ({ currentStep, onChangeStep }: BottomButtonsProps) => {
const goToStep = (step: number) => {
if (step >= MIN_STEP && step <= MAX_STEP) {
onChangeStep(step as Step);
}
};

return (
<DxcContainer
width="100%"
padding="var(--spacing-padding-s) var(--spacing-padding-l)"
background={{ color: "var(--color-bg-neutral-lightest)" }}
boxSizing="border-box"
>
<DxcFlex justifyContent="flex-end" alignItems="center" gap="var(--spacing-gap-m)">
<DxcButton
label="Back"
icon="arrow_back"
mode="tertiary"
onClick={() => goToStep(currentStep - 1)}
disabled={currentStep === 0}
size={{ height: "medium", width: "fitContent" }}
/>
{currentStep === 2 ? (
<DxcButton
label="Export theme"
icon="download"
onClick={() => console.log("download theme")}
size={{ height: "medium", width: "fitContent" }}
/>
) : (
<DxcButton
label="Next"
onClick={() => goToStep(currentStep + 1)}
size={{ height: "medium", width: "fitContent" }}
/>
)}
</DxcFlex>
</DxcContainer>
);
};

export default BottomButtons;
19 changes: 19 additions & 0 deletions apps/website/screens/theme-generator/components/StepHeading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { DxcFlex, DxcHeading, DxcContainer, DxcTypography } from "@dxc-technology/halstack-react";

interface PageHeadingProps {
title: string;
subtitle: string;
}

const StepHeading = ({ title, subtitle }: PageHeadingProps) => (
<DxcContainer width="100%" maxWidth="711px">
<DxcFlex direction="column" alignItems="center" gap="var(--spacing-gap-xs)">
<DxcHeading level={3} text={title} />
<DxcTypography as="p" textAlign="center">
{subtitle}
</DxcTypography>
</DxcFlex>
</DxcContainer>
);

export default StepHeading;