Skip to content

Commit 3b15e83

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1406 from dxc-technology/gomezivann-themeGenerator
Theme generator added to the new site
2 parents d38d93a + e0f2bf9 commit 3b15e83

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+6774
-7212
lines changed

‎website/package-lock.json‎

Lines changed: 157 additions & 7042 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,16 @@
99
},
1010
"dependencies": {
1111
"@dxc-technology/halstack-react": "0.0.0-e1386cf",
12+
"@radix-ui/react-popover": "0.1.6",
1213
"@types/styled-components": "^5.1.18",
1314
"axios": "^0.27.2",
1415
"cross-env": "^7.0.3",
1516
"next": "12.1.0",
1617
"raw-loader": "^4.0.2",
1718
"react": "17.0.2",
19+
"react-color": "^2.19.3",
1820
"react-dom": "17.0.2",
21+
"react-error-boundary": "^3.1.4",
1922
"react-live": "^2.4.1",
2023
"react-markdown": "^8.0.0",
2124
"slugify": "^1.6.5",
@@ -24,6 +27,7 @@
2427
"devDependencies": {
2528
"@types/node": "17.0.2",
2629
"@types/react": "17.0.37",
30+
"@types/react-color": "^3.0.6",
2731
"eslint": "8.5.0",
2832
"eslint-config-next": "12.0.9",
2933
"typescript": "4.5.4"

‎website/pages/_app.tsx‎

Lines changed: 79 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,40 @@ import "../global-styles.css";
1212
import { responsiveSizes } from "../screens/common/variables.js";
1313
import SidenavLogo from "@/common/sidenav/SidenavLogo";
1414
import { useRouter } from "next/router";
15-
import { LinksSectionDetails, LinksSections } from "@/common/pagesList";
15+
import {
16+
LinksSectionDetails,
17+
LinksSections,
18+
themeGeneratorLinks,
19+
} from "@/common/pagesList";
1620
import Link from "next/link";
1721

1822
type NextPageWithLayout = NextPage & {
1923
getLayout?: (page: ReactElement) => ReactNode;
2024
};
21-
2225
type AppPropsWithLayout = AppProps & {
2326
Component: NextPageWithLayout;
2427
};
28+
type ApplicationLayoutWrapperProps = {
29+
condition: boolean;
30+
wrapper: (children: React.ReactNode) => JSX.Element;
31+
children: ReactNode;
32+
};
2533

26-
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
27-
const getLayout = Component.getLayout || ((page) => page);
34+
const ApplicationLayoutWrapper = ({
35+
condition,
36+
wrapper,
37+
children,
38+
}: ApplicationLayoutWrapperProps): JSX.Element => (
39+
<>{condition ? wrapper(children) : children}</>
40+
);
2841

42+
const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
43+
const getLayout = Component.getLayout || ((page) => page);
2944
const componentWithLayout = getLayout(<Component {...pageProps} />);
3045

3146
const [filter, setFilter] = useState("");
3247
const { asPath: currentPath } = useRouter();
3348

34-
const onFilterInputChange = ({ value }: { value: string }) => {
35-
setFilter(value);
36-
};
37-
3849
const filteredLinks = useMemo(() => {
3950
const filtered: LinksSectionDetails[] = [];
4051
LinksSections.map((section) => {
@@ -47,64 +58,76 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
4758
});
4859
return filtered;
4960
}, [filter]);
61+
62+
const onFilterInputChange = ({ value }: { value: string }) => {
63+
setFilter(value);
64+
};
65+
5066
return (
5167
<>
5268
<Head>
5369
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
5470
</Head>
55-
<HalstackProvider advancedTheme={{}}>
56-
<DxcApplicationLayout
57-
visibilityToggleLabel="Menu"
58-
sidenav={
59-
<DxcApplicationLayout.SideNav title={<SidenavLogo />}>
60-
<DxcApplicationLayout.SideNav.Section>
61-
<DxcTextInput
62-
placeholder="Search docs"
63-
value={filter}
64-
onChange={onFilterInputChange}
65-
size="fillParent"
66-
clearable
67-
margin={{
68-
top: "small",
69-
bottom: "small",
70-
right: "xsmall",
71-
left: "xsmall",
72-
}}
73-
/>
74-
</DxcApplicationLayout.SideNav.Section>
75-
{filteredLinks?.map(({ label, links }) => {
76-
return (
77-
<DxcApplicationLayout.SideNav.Section key={label}>
78-
<DxcApplicationLayout.SideNav.Group title={label}>
79-
{links.map(({ label, path }) => (
80-
<Link key={`${label}-${path}`} href={path} passHref>
81-
<DxcApplicationLayout.SideNav.Link
82-
selected={
83-
currentPath.slice(0, -1) === path ||
84-
currentPath.slice(0, -1) ===
85-
path + "/specifications" ||
86-
currentPath.slice(0, -1) === path + "/usage"
87-
}
88-
>
89-
{label}
90-
</DxcApplicationLayout.SideNav.Link>
91-
</Link>
92-
))}
93-
</DxcApplicationLayout.SideNav.Group>
71+
<HalstackProvider>
72+
<ApplicationLayoutWrapper
73+
condition={!themeGeneratorLinks.includes(currentPath)}
74+
wrapper={(children) => (
75+
<DxcApplicationLayout
76+
visibilityToggleLabel="Menu"
77+
sidenav={
78+
<DxcApplicationLayout.SideNav title={<SidenavLogo />}>
79+
<DxcApplicationLayout.SideNav.Section>
80+
<DxcTextInput
81+
placeholder="Search docs"
82+
value={filter}
83+
onChange={onFilterInputChange}
84+
size="fillParent"
85+
clearable
86+
margin={{
87+
top: "small",
88+
bottom: "small",
89+
right: "xsmall",
90+
left: "xsmall",
91+
}}
92+
/>
9493
</DxcApplicationLayout.SideNav.Section>
95-
);
96-
})}
97-
</DxcApplicationLayout.SideNav>
98-
}
94+
{filteredLinks?.map(({ label, links }) => {
95+
return (
96+
<DxcApplicationLayout.SideNav.Section key={label}>
97+
<DxcApplicationLayout.SideNav.Group title={label}>
98+
{links.map(({ label, path }) => (
99+
<Link key={`${label}-${path}`} href={path} passHref>
100+
<DxcApplicationLayout.SideNav.Link
101+
selected={
102+
currentPath.slice(0, -1) === path ||
103+
currentPath.slice(0, -1) ===
104+
path + "/specifications" ||
105+
currentPath.slice(0, -1) === path + "/usage"
106+
}
107+
>
108+
{label}
109+
</DxcApplicationLayout.SideNav.Link>
110+
</Link>
111+
))}
112+
</DxcApplicationLayout.SideNav.Group>
113+
</DxcApplicationLayout.SideNav.Section>
114+
);
115+
})}
116+
</DxcApplicationLayout.SideNav>
117+
}
118+
>
119+
<DxcApplicationLayout.Main>
120+
<MainContainer>{children}</MainContainer>
121+
</DxcApplicationLayout.Main>
122+
</DxcApplicationLayout>
123+
)}
99124
>
100-
<DxcApplicationLayout.Main>
101-
<MainContainer>{componentWithLayout}</MainContainer>
102-
</DxcApplicationLayout.Main>
103-
</DxcApplicationLayout>
125+
{componentWithLayout}
126+
</ApplicationLayoutWrapper>
104127
</HalstackProvider>
105128
</>
106129
);
107-
}
130+
};
108131

109132
const MainContainer = styled.div`
110133
margin: 80px auto;

‎website/pages/theme-generator/advanced-theme.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 ThemeGeneratorPage from "../../screens/theme-generator/ThemeGenerator";
3+
4+
const ThemeGenerator = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Advanced theme generator — Halstack Design System</title>
9+
</Head>
10+
<ThemeGeneratorPage />
11+
</>
12+
);
13+
};
14+
15+
export default ThemeGenerator;

‎website/pages/theme-generator/opinionated-theme.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 ThemeGeneratorPage from "../../screens/theme-generator/ThemeGenerator";
3+
4+
const ThemeGenerator = () => {
5+
return (
6+
<>
7+
<Head>
8+
<title>Opinionated theme generator — Halstack Design System</title>
9+
</Head>
10+
<ThemeGeneratorPage />
11+
</>
12+
);
13+
};
14+
15+
export default ThemeGenerator;

‎website/screens/common/pagesList.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ type NavigationLinks = {
1313
nextLink: LinkDetails | null;
1414
};
1515

16+
export const themeGeneratorLinks = [
17+
"/theme-generator/opinionated-theme/",
18+
"/theme-generator/advanced-theme/"
19+
]
20+
1621
const overviewLinks: LinkDetails[] = [
1722
{ label: "Introduction", path: "/overview/introduction" },
1823
];

‎website/screens/common/sidenav/SidenavLogo.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ import StatusTag from "@/common/StatusTag";
55
import React from "react";
66
import { useRouter } from "next/router";
77

8-
const SidenavLogo = () => {
8+
type SidenavLogoProps = {
9+
version?: string;
10+
};
11+
12+
const SidenavLogo = ({
13+
version = "Design System",
14+
}: SidenavLogoProps): JSX.Element => {
915
const { basePath } = useRouter();
1016
const siteVersion = basePath.split("/")[2];
1117

@@ -21,7 +27,7 @@ const SidenavLogo = () => {
2127
/>
2228
<Title>Halstack</Title>
2329
</Header>
24-
<Subtitle>Design system</Subtitle>
30+
<Subtitle>{version}</Subtitle>
2531
</LogoContainer>
2632
<StatusTag>
2733
{basePath

‎website/screens/principles/themes/ThemesPage.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
DxcParagraph,
77
DxcBulletedList,
88
} from "@dxc-technology/halstack-react";
9+
import Link from "next/link";
910
import QuickNavContainer from "@/common/QuickNavContainer";
1011
import PageHeading from "@/common/PageHeading";
1112
import DocFooter from "@/common/DocFooter";
@@ -64,12 +65,9 @@ const sections = [
6465
about the ones we consider fundamental. The list of configurable
6566
properties is small, but it applies at the component level. You can
6667
generate the theme object using our{" "}
67-
<DxcLink
68-
href="https://developer.dxc.com/tools/react/next/#/themeBuilder"
69-
newWindow
70-
>
71-
opinionated theme generator
72-
</DxcLink>
68+
<Link href="/theme-generator/opinionated-theme" passHref>
69+
<DxcLink>opinionated theme generator</DxcLink>
70+
</Link>
7371
.
7472
</DxcBulletedList.Item>
7573
<DxcBulletedList.Item>
@@ -81,12 +79,9 @@ const sections = [
8179
decisions are structural to the component. The list of configurable
8280
properties is large, and it applies at the component level. You can
8381
generate the theme object using our{" "}
84-
<DxcLink
85-
href="https://developer.dxc.com/tools/react/next/#/themeBuilder/advancedTheme"
86-
newWindow
87-
>
88-
advanced theme generator
89-
</DxcLink>
82+
<Link href="/theme-generator/advanced-theme" passHref>
83+
<DxcLink>advanced theme generator</DxcLink>
84+
</Link>
9085
.
9186
</DxcBulletedList.Item>
9287
</DxcBulletedList>

0 commit comments

Comments
 (0)