Skip to content

Commit 5c673f9

Browse files
Merge pull request #2430 from dxc-technology/theme-generator
[doc] Theme generator
2 parents e03e88f + 9cccd7c commit 5c673f9

102 files changed

Lines changed: 4524 additions & 734 deletions

File tree

Some content is hidden

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

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const App = () => (
3131

3232
## Where to start
3333

34-
Learn everything you need to know about Halstack principles and components on the [official documentation site](https://developer.assure.dxc.com/halstack/).
34+
Learn everything you need to know about Halstack guidelines and components on the [official documentation site](https://developer.assure.dxc.com/halstack/).
3535

3636
## Contributing
3737

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useToast } from "@dxc-technology/halstack-react";
2+
3+
const useCopyToClipboard = () => {
4+
const toast = useToast();
5+
6+
const handleCopy = (text: string) => {
7+
navigator.clipboard
8+
.writeText(text)
9+
.then(() => {
10+
toast.success({ message: "Code copied to the clipboard." });
11+
})
12+
.catch(() => {
13+
toast.warning({ message: "Failed to copy the text to the clipboard." });
14+
});
15+
};
16+
17+
return handleCopy;
18+
};
19+
20+
export default useCopyToClipboard;

apps/website/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"lint": "eslint . --max-warnings 0"
99
},
1010
"dependencies": {
11+
"@adobe/leonardo-contrast-colors": "^1.0.0",
1112
"@cloudscape-design/components": "^3.0.706",
1213
"@dxc-technology/halstack-react": "*",
1314
"@emotion/cache": "^11.14.0",

apps/website/pages/_app.tsx

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, useMemo, useState } from "react";
22
import type { NextPage } from "next";
33
import type { AppProps } from "next/app";
44
import Head from "next/head";
5-
import { DxcApplicationLayout, DxcToastsQueue } from "@dxc-technology/halstack-react";
5+
import { DxcApplicationLayout, DxcInset, DxcLink, DxcToastsQueue } from "@dxc-technology/halstack-react";
66
import MainContent from "@/common/MainContent";
77
import { useRouter } from "next/router";
88
import { LinkDetails, LinksSectionDetails, LinksSections } from "@/common/pagesList";
@@ -31,6 +31,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
3131
const componentWithLayout = getLayout(<Component {...pageProps} />);
3232
const [filter, setFilter] = useState("");
3333
const { asPath: currentPath } = useRouter();
34+
const isThemeGenerator = currentPath.includes("/theme-generator");
3435

3536
const matchPaths = (linkPath: string) => {
3637
const desiredPaths = [linkPath, `${linkPath}/code`];
@@ -109,18 +110,40 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo
109110
</Head>
110111
<DxcApplicationLayout
111112
logo={{ src: dxcLogo, alt: "DXC Technology" }}
112-
header={<DxcApplicationLayout.Header />}
113+
header={
114+
isThemeGenerator ? (
115+
<DxcApplicationLayout.Header
116+
appTitle="Theme Generator"
117+
sideContent={
118+
!currentPath.includes("/theme-generator/user-guide") && (
119+
<DxcInset horizontal="var(--spacing-padding-xs)">
120+
<Link href="/theme-generator/user-guide" legacyBehavior passHref>
121+
<DxcLink newWindow icon="description">
122+
User guide
123+
</DxcLink>
124+
</Link>
125+
</DxcInset>
126+
)
127+
}
128+
/>
129+
) : (
130+
<DxcApplicationLayout.Header />
131+
)
132+
}
113133
sidenav={
114-
<DxcApplicationLayout.Sidenav
115-
navItems={navItems}
116-
appTitle={<SidenavLogo />}
117-
searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }}
118-
/>
134+
!isThemeGenerator && (
135+
<DxcApplicationLayout.Sidenav
136+
navItems={navItems}
137+
appTitle={<SidenavLogo />}
138+
searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }}
139+
/>
140+
)
119141
}
142+
footer={isThemeGenerator ? <DxcApplicationLayout.Footer mode="reduced" /> : undefined}
120143
>
121144
<DxcApplicationLayout.Main>
122145
<DxcToastsQueue duration={7000}>
123-
<MainContent>{componentWithLayout}</MainContent>
146+
{!isThemeGenerator ? <MainContent>{componentWithLayout}</MainContent> : <>{componentWithLayout}</>}
124147
</DxcToastsQueue>
125148
</DxcApplicationLayout.Main>
126149
</DxcApplicationLayout>

apps/website/pages/principles/data-visualization.tsx renamed to apps/website/pages/guidelines/data-visualization.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Head from "next/head";
2-
import DataVisualizationPage from "screens/principles/data-visualization/DataVisualizationPage";
2+
import DataVisualizationPage from "screens/guidelines/data-visualization/DataVisualizationPage";
33

44
const DataVisualization = () => (
55
<>

apps/website/pages/principles/localization.tsx renamed to apps/website/pages/guidelines/localization.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Head from "next/head";
2-
import LocalizationPage from "screens/principles/localization/LocalizationPage";
2+
import LocalizationPage from "screens/guidelines/localization/LocalizationPage";
33

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

0 commit comments

Comments
 (0)