diff --git a/.github/workflows/publish-next.yml b/.github/workflows/publish-next.yml index 09f4e7e751..c50172eebf 100644 --- a/.github/workflows/publish-next.yml +++ b/.github/workflows/publish-next.yml @@ -21,16 +21,6 @@ jobs: node-version: 22.x registry-url: https://registry.npmjs.org/ - - name: Configure AWS Credentials - uses: aws-actions/configure-aws-credentials@v1 - with: - aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} - aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} - aws-region: us-west-2 - role-to-assume: ${{ secrets.AWS_ROLE_SANDBOX }} - role-duration-seconds: 3600 - role-skip-session-tagging: true - - name: Install dependencies run: npm install @@ -52,8 +42,3 @@ jobs: npm publish --tag next --access public env: NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }} - - - name: Move NEXT website to S3 - run: | - aws s3 rm s3://design-system-react-cdk-site/halstack/next/ --recursive - aws s3 cp ./apps/website/out/ s3://design-system-react-cdk-site/halstack/next/ --recursive diff --git a/README.md b/README.md index 10d8826fa5..085c047e23 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ const App = () => ( ## Where to start -Learn everything you need to know about Halstack principles and components on the [official documentation site](https://developer.assure.dxc.com/halstack/). +Learn everything you need to know about Halstack guidelines and components on the [official documentation site](https://developer.assure.dxc.com/halstack/). ## Contributing diff --git a/apps/website/eslint.config.mjs b/apps/website/eslint.config.mjs index afe2c241fd..d83a5e66da 100644 --- a/apps/website/eslint.config.mjs +++ b/apps/website/eslint.config.mjs @@ -1,9 +1,25 @@ +import nextPlugin from "@next/eslint-plugin-next"; import nextConfig from "@dxc-technology/eslint-config/next.js"; -import { fileURLToPath } from "url"; -import { dirname } from "path"; +import js from "@eslint/js"; +import path from "node:path"; +import { fileURLToPath } from "node:url"; const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +const __dirname = path.dirname(__filename); -/** @type {import("eslint").Config[]} */ -export default [{ ignores: ["out/**", ".next/**", "eslint.config.mjs"] }, ...nextConfig({ tsconfigRootDir: __dirname })]; +export default [ + js.configs.recommended, + { + plugins: { "@next/next": nextPlugin }, + rules: { + ...nextPlugin.configs.recommended.rules, + }, + }, + ...nextConfig({ + tsconfigRootDir: __dirname, + tsconfigName: "tsconfig.lint.json", + }), + { + ignores: ["out/**", ".next/**"], + }, +]; diff --git a/apps/website/globals.d.ts b/apps/website/globals.d.ts index 18f423bf39..2553ffbc13 100644 --- a/apps/website/globals.d.ts +++ b/apps/website/globals.d.ts @@ -1 +1,10 @@ declare module "*.md"; +declare module "*.woff2" { + const content: string; + export default content; +} + +declare module "*.woff" { + const content: string; + export default content; +} diff --git a/apps/website/hooks/useCopyToClipboard.tsx b/apps/website/hooks/useCopyToClipboard.tsx new file mode 100644 index 0000000000..27d6fe3256 --- /dev/null +++ b/apps/website/hooks/useCopyToClipboard.tsx @@ -0,0 +1,20 @@ +import { useToast } from "@dxc-technology/halstack-react"; + +const useCopyToClipboard = () => { + const toast = useToast(); + + const handleCopy = (text: string) => { + navigator.clipboard + .writeText(text) + .then(() => { + toast.success({ message: "Code copied to the clipboard." }); + }) + .catch(() => { + toast.warning({ message: "Failed to copy the text to the clipboard." }); + }); + }; + + return handleCopy; +}; + +export default useCopyToClipboard; diff --git a/apps/website/next-env.d.ts b/apps/website/next-env.d.ts index 254b73c165..19709046af 100644 --- a/apps/website/next-env.d.ts +++ b/apps/website/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -/// +import "./.next/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/apps/website/package.json b/apps/website/package.json index d4b7466d15..17dd4324ac 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -2,12 +2,13 @@ "name": "website", "private": true, "scripts": { - "dev": "next dev", - "build": "next build", + "dev": "next dev --webpack", + "build": "next build --webpack", "start": "next start", "lint": "eslint . --max-warnings 0" }, "dependencies": { + "@adobe/leonardo-contrast-colors": "^1.0.0", "@cloudscape-design/components": "^3.0.706", "@dxc-technology/halstack-react": "*", "@emotion/cache": "^11.14.0", @@ -16,7 +17,7 @@ "@emotion/styled": "^11.14.1", "@radix-ui/react-popover": "^1.0.7", "cross-env": "^7.0.3", - "next": "^15.5.7", + "next": "^16.1.7", "raw-loader": "^4.0.2", "react": "^18", "react-color": "^2.19.3", @@ -29,12 +30,13 @@ }, "devDependencies": { "@dxc-technology/typescript-config": "*", + "@eslint/js": "^9.31.1", "@types/node": "^20", "@types/react": "^18", "@types/react-color": "^3.0.6", "@types/react-dom": "^18", "eslint": "^9.39.1", - "eslint-config-next": "16.0.5", + "eslint-config-next": "16.0.8", "typescript": "^5.6.3" } } diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 2603ad3498..942240c825 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -2,7 +2,7 @@ import { ReactElement, ReactNode, useMemo, useState } from "react"; import type { NextPage } from "next"; import type { AppProps } from "next/app"; import Head from "next/head"; -import { DxcApplicationLayout, DxcTextInput, DxcToastsQueue } from "@dxc-technology/halstack-react"; +import { DxcApplicationLayout, DxcInset, DxcLink, DxcToastsQueue } from "@dxc-technology/halstack-react"; import MainContent from "@/common/MainContent"; import { useRouter } from "next/router"; import { LinkDetails, LinksSectionDetails, LinksSections } from "@/common/pagesList"; @@ -30,8 +30,8 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo const getLayout = Component.getLayout || ((page) => page); const componentWithLayout = getLayout(); const [filter, setFilter] = useState(""); - const [isExpanded, setIsExpanded] = useState(true); const { asPath: currentPath } = useRouter(); + const isThemeGenerator = currentPath.includes("/theme-generator"); const matchPaths = (linkPath: string) => { const desiredPaths = [linkPath, `${linkPath}/code`]; @@ -44,6 +44,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo href: link.path, selected: matchPaths(link.path), badge: link.status && link.status !== "stable" ? : undefined, + icon: link.icon, renderItem: ({ children }: { children: ReactNode }) => ( {children} @@ -56,6 +57,7 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo if ("links" in link) { return { label: link.label, + icon: link.icon, items: normalizeNavTabs(link.links), } as GroupItem; } @@ -69,11 +71,11 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo for (const item of items) { if (isGroupItem(item)) { - const filteredChildren = filterNavTree(item.items, q); const matches = item.label.toLowerCase().includes(q); + const filteredChildren = matches ? item.items : filterNavTree(item.items, q); if (matches || filteredChildren.length > 0) { - result.push({ ...item, items: filteredChildren }); + result.push({ ...item, items: filteredChildren, defaultOpen: true }); } } else { if (item.label.toLowerCase().includes(q)) { @@ -86,12 +88,17 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo }; const navItems: Section[] = useMemo(() => { + const q = filter.trim().toLowerCase(); + return LinksSections.map((section) => { const baseItems = normalizeNavTabs(section.links); - const items = filter ? filterNavTree(baseItems, filter.trim().toLowerCase()) : baseItems; + const sectionMatches = section.label.toLowerCase().includes(q); + + const items = filter ? (sectionMatches ? baseItems : filterNavTree(baseItems, q)) : baseItems; + return { title: section.label, - items, + items: section.label === "Components" ? items.map((item) => ({ ...item, defaultOpen: true })) : items, }; }).filter((section) => section.items.length > 0); }, [currentPath, filter]); @@ -103,34 +110,40 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo } + header={ + isThemeGenerator ? ( + + + + User guide + + + + ) + } + /> + ) : ( + + ) + } sidenav={ - } - topContent={ - isExpanded && ( - { - setFilter(value); - }} - size="fillParent" - clearable - /> - ) - } - expanded={isExpanded} - onExpandedChange={() => { - setIsExpanded((currentlyExpanded) => !currentlyExpanded); - }} - /> + !isThemeGenerator && ( + } + searchBar={{ placeholder: "Search docs", onChange: (value) => setFilter(value) }} + /> + ) } + footer={isThemeGenerator ? : undefined} > - {componentWithLayout} + {!isThemeGenerator ? {componentWithLayout} : <>{componentWithLayout}} diff --git a/apps/website/pages/components/popover/code.tsx b/apps/website/pages/components/popover/code.tsx new file mode 100644 index 0000000000..97892649d5 --- /dev/null +++ b/apps/website/pages/components/popover/code.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import PopoverPageLayout from "screens/components/popover/PopoverPageLayout"; +import PopoverCodePage from "screens/components/popover/code/PopoverCodePage"; + +const Code = () => ( + <> + + Popover code — Halstack Design System + + + +); + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/popover/index.tsx b/apps/website/pages/components/popover/index.tsx new file mode 100644 index 0000000000..2e41d3584a --- /dev/null +++ b/apps/website/pages/components/popover/index.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import PopoverOverviewPage from "screens/components/popover/overview/PopoverOverviewPage"; +import PopoverPageLayout from "screens/components/popover/PopoverPageLayout"; + +const Index = () => ( + <> + + Popover — Halstack Design System + + + +); + +Index.getLayout = (page: ReactElement) => {page}; + +export default Index; diff --git a/apps/website/pages/principles/data-visualization.tsx b/apps/website/pages/guidelines/data-visualization.tsx similarity index 80% rename from apps/website/pages/principles/data-visualization.tsx rename to apps/website/pages/guidelines/data-visualization.tsx index 8958669537..cbb9c4367c 100644 --- a/apps/website/pages/principles/data-visualization.tsx +++ b/apps/website/pages/guidelines/data-visualization.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import DataVisualizationPage from "screens/principles/data-visualization/DataVisualizationPage"; +import DataVisualizationPage from "screens/guidelines/data-visualization/DataVisualizationPage"; const DataVisualization = () => ( <> diff --git a/apps/website/pages/principles/localization.tsx b/apps/website/pages/guidelines/localization.tsx similarity index 78% rename from apps/website/pages/principles/localization.tsx rename to apps/website/pages/guidelines/localization.tsx index 70bba38057..39653ad2af 100644 --- a/apps/website/pages/principles/localization.tsx +++ b/apps/website/pages/guidelines/localization.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import LocalizationPage from "screens/principles/localization/LocalizationPage"; +import LocalizationPage from "screens/guidelines/localization/LocalizationPage"; const Localization = () => ( <> diff --git a/apps/website/pages/guidelines/themes.tsx b/apps/website/pages/guidelines/themes.tsx new file mode 100644 index 0000000000..500f50bb14 --- /dev/null +++ b/apps/website/pages/guidelines/themes.tsx @@ -0,0 +1,13 @@ +import Head from "next/head"; +import ThemesPage from "screens/guidelines/themes/ThemesPage"; + +const Themes = () => ( + <> + + Themes — Halstack Design System + + + +); + +export default Themes; diff --git a/apps/website/pages/migration/16/component-updates.tsx b/apps/website/pages/migration/16/component-updates.tsx index 0292cb1a78..0d5d94fa36 100644 --- a/apps/website/pages/migration/16/component-updates.tsx +++ b/apps/website/pages/migration/16/component-updates.tsx @@ -1,5 +1,5 @@ import Head from "next/head"; -import Components16MigrationPage from "screens/migration/Components16MigrationPage"; +import Components16MigrationPage from "screens/migration/components/Components16MigrationPage"; const Components16Migration = () => ( <> diff --git a/apps/website/pages/theme-generator/configuration.tsx b/apps/website/pages/theme-generator/configuration.tsx new file mode 100644 index 0000000000..9d37a727ac --- /dev/null +++ b/apps/website/pages/theme-generator/configuration.tsx @@ -0,0 +1,15 @@ +import Head from "next/head"; +import ThemeGeneratorConfigPage from "screens/theme-generator/ThemeGeneratorConfigPage"; + +const Index = () => { + return ( + <> + + Theme generator — Halstack Design System + + + + ); +}; + +export default Index; diff --git a/apps/website/pages/theme-generator/index.tsx b/apps/website/pages/theme-generator/index.tsx new file mode 100644 index 0000000000..d5a0415ac1 --- /dev/null +++ b/apps/website/pages/theme-generator/index.tsx @@ -0,0 +1,15 @@ +import Head from "next/head"; +import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorPage"; + +const Index = () => { + return ( + <> + + Theme generator — Halstack Design System + + + + ); +}; + +export default Index; 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 0000000000..8f5dc57375 --- /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/public/dxc_footer_logo.svg b/apps/website/public/dxc_footer_logo.svg deleted file mode 100644 index 522bab5a75..0000000000 --- a/apps/website/public/dxc_footer_logo.svg +++ /dev/null @@ -1,32 +0,0 @@ - - DXC Logo - - - - - - - - - - - - - - \ No newline at end of file diff --git a/apps/website/public/dxc_header_logo.svg b/apps/website/public/dxc_header_logo.svg deleted file mode 100644 index b98a0044d5..0000000000 --- a/apps/website/public/dxc_header_logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - DXC Logo - - - - - - - \ No newline at end of file diff --git a/apps/website/public/theme-generator-landing-bg-flipped.png b/apps/website/public/theme-generator-landing-bg-flipped.png new file mode 100644 index 0000000000..16550d1260 Binary files /dev/null and b/apps/website/public/theme-generator-landing-bg-flipped.png differ diff --git a/apps/website/public/theme-generator-landing-bg.png b/apps/website/public/theme-generator-landing-bg.png new file mode 100644 index 0000000000..3fe470b74b Binary files /dev/null and b/apps/website/public/theme-generator-landing-bg.png differ diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json index 2d33c15f34..3610b20e10 100644 --- a/apps/website/screens/common/componentsList.json +++ b/apps/website/screens/common/componentsList.json @@ -1,143 +1,374 @@ [ - { "label": "Accordion", "path": "/components/accordion", "status": "stable" }, - { "label": "Alert", "path": "/components/alert", "status": "stable" }, { - "label": "Application layout", + "label": "Content", + "icon": "folder_open", "links": [ { - "label": "Application layout", - "path": "/components/application-layout", - "status": "stable" + "label": "Accordion", + "path": "/components/accordion", + "status": "stable", + "icon": "menu_open" }, - { "label": "Footer", "path": "/components/footer", "status": "stable" }, - { "label": "Header", "path": "/components/header", "status": "stable" }, - { "label": "Sidenav", "path": "/components/sidenav", "status": "stable" } + { + "label": "Avatar", + "path": "/components/avatar", + "status": "experimental", + "icon": "filled_account_circle" + }, + { + "label": "Card", + "path": "/components/card", + "status": "stable", + "icon": "credit_card" + }, + { + "label": "Dialog", + "path": "/components/dialog", + "status": "stable", + "icon": "open_in_new" + }, + { + "label": "Divider", + "path": "/components/divider", + "status": "stable", + "icon": "border_left" + }, + { + "label": "Image", + "path": "/components/image", + "status": "stable", + "icon": "image" + }, + { + "label": "Wizard", + "path": "/components/wizard", + "status": "stable", + "icon": "auto_fix_high" + } ] }, { - "label": "Avatar", - "path": "/components/avatar", - "status": "experimental" - }, - { - "label": "Badge", - "path": "/components/badge", - "status": "stable" - }, - { "label": "Bleed", "path": "/components/bleed", "status": "stable" }, - { - "label": "Breadcrumbs", - "path": "/components/breadcrumbs", - "status": "stable" - }, - { - "label": "Bulleted list", - "path": "/components/bulleted-list", - "status": "stable" - }, - { "label": "Button", "path": "/components/button", "status": "stable" }, - { "label": "Card", "path": "/components/card", "status": "stable" }, - { "label": "Checkbox", "path": "/components/checkbox", "status": "stable" }, - { "label": "Chip", "path": "/components/chip", "status": "stable" }, - { - "label": "Container", - "path": "/components/container", - "status": "stable" - }, - { - "label": "Contextual menu", - "path": "/components/contextual-menu", - "status": "stable" - }, - { - "label": "Data grid", - "path": "/components/data-grid", - "status": "new" - }, - { - "label": "Date input", - "path": "/components/date-input", - "status": "stable" - }, - { "label": "Dialog", "path": "/components/dialog", "status": "stable" }, - { - "label": "Divider", - "path": "/components/divider", - "status": "stable" - }, - { "label": "Dropdown", "path": "/components/dropdown", "status": "stable" }, - { - "label": "File input", - "path": "/components/file-input", - "status": "stable" - }, - { "label": "Flex", "path": "/components/flex", "status": "stable" }, - { "label": "Grid", "path": "/components/grid", "status": "stable" }, - { "label": "Heading", "path": "/components/heading", "status": "stable" }, - { "label": "Image", "path": "/components/image", "status": "stable" }, - { "label": "Inset", "path": "/components/inset", "status": "stable" }, - { "label": "Link", "path": "/components/link", "status": "stable" }, - { "label": "Nav tabs", "path": "/components/nav-tabs", "status": "stable" }, - { - "label": "Number input", - "path": "/components/number-input", - "status": "stable" - }, - { "label": "Paginator", "path": "/components/paginator", "status": "stable" }, - { "label": "Paragraph", "path": "/components/paragraph", "status": "stable" }, - { - "label": "Password input", - "path": "/components/password-input", - "status": "stable" - }, - { - "label": "Progress bar", - "path": "/components/progress-bar", - "status": "stable" - }, - { "label": "Quick nav", "path": "/components/quick-nav", "status": "stable" }, - { - "label": "Radio group", - "path": "/components/radio-group", - "status": "stable" + "label": "Data visualization", + "icon": "insert_chart", + "links": [ + { + "label": "Data grid", + "path": "/components/data-grid", + "status": "stable", + "icon": "table_rows" + }, + { + "label": "Paginator", + "path": "/components/paginator", + "status": "stable", + "icon": "last_page" + }, + { + "label": "Resultset table", + "path": "/components/resultset-table", + "status": "stable", + "icon": "table_chart" + }, + { + "label": "Table", + "path": "/components/table", + "status": "stable", + "icon": "table_chart" + } + ] }, { - "label": "Resultset table", - "path": "/components/resultset-table", - "status": "stable" + "label": "Feedback", + "icon": "feedback", + "links": [ + { + "label": "Alert", + "path": "/components/alert", + "status": "stable", + "icon": "filled_error" + }, + { + "label": "Progress bar", + "path": "/components/progress-bar", + "status": "stable", + "icon": "linear_scale" + }, + { + "label": "Spinner", + "path": "/components/spinner", + "status": "stable", + "icon": "autorenew" + }, + { + "label": "Toast", + "path": "/components/toast", + "status": "stable", + "icon": "toast" + }, + { + "label": "Tooltip", + "path": "/components/tooltip", + "status": "stable", + "icon": "question_answer" + } + ] }, - { "label": "Select", "path": "/components/select", "status": "stable" }, - { "label": "Slider", "path": "/components/slider", "status": "stable" }, - { "label": "Spinner", "path": "/components/spinner", "status": "stable" }, { - "label": "Status light", - "path": "/components/status-light", - "status": "stable" + "label": "Forms", + "icon": "assignment", + "links": [ + { + "label": "Button", + "path": "/components/button", + "status": "stable", + "icon": "smart_button" + }, + { + "label": "Checkbox", + "path": "/components/checkbox", + "status": "stable", + "icon": "filled_check_box" + }, + { + "label": "Date input", + "path": "/components/date-input", + "status": "stable", + "icon": "date_range" + }, + { + "label": "File input", + "path": "/components/file-input", + "status": "stable", + "icon": "filled_file_upload" + }, + { + "label": "Number input", + "path": "/components/number-input", + "status": "stable", + "icon": "pin" + }, + { + "label": "Password input", + "path": "/components/password-input", + "status": "stable", + "icon": "password" + }, + { + "label": "Radio group", + "path": "/components/radio-group", + "status": "stable", + "icon": "radio_button_checked" + }, + { + "label": "Select", + "path": "/components/select", + "status": "stable", + "icon": "expand_circle_down" + }, + { + "label": "Slider", + "path": "/components/slider", + "status": "stable", + "icon": "sliders" + }, + { + "label": "Switch", + "path": "/components/switch", + "status": "stable", + "icon": "toggle_on" + }, + { + "label": "Text input", + "path": "/components/text-input", + "status": "stable", + "icon": "input" + }, + { + "label": "Textarea", + "path": "/components/textarea", + "status": "stable", + "icon": "subject" + }, + { + "label": "Toggle group", + "path": "/components/toggle-group", + "status": "stable", + "icon": "toggle_off" + } + ] }, - { "label": "Switch", "path": "/components/switch", "status": "stable" }, - { "label": "Table", "path": "/components/table", "status": "stable" }, - { "label": "Tabs", "path": "/components/tabs", "status": "stable" }, { - "label": "Text input", - "path": "/components/text-input", - "status": "stable" + "label": "Layout", + "icon": "dashboard_customize", + "links": [ + { + "label": "Application level", + "icon": "view_quilt", + "links": [ + { + "label": "Application layout", + "path": "/components/application-layout", + "status": "stable", + "icon": "dashboard" + }, + { + "label": "Footer", + "path": "/components/footer", + "status": "stable", + "icon": "view_agenda" + }, + { + "label": "Header", + "path": "/components/header", + "status": "stable", + "icon": "view_day" + }, + { + "label": "Sidenav", + "path": "/components/sidenav", + "status": "stable", + "icon": "view_sidebar" + } + ] + }, + { + "label": "Bleed", + "path": "/components/bleed", + "status": "stable", + "icon": "vertical_align_center" + }, + { + "label": "Container", + "path": "/components/container", + "status": "stable", + "icon": "crop_square" + }, + { + "label": "Flex", + "path": "/components/flex", + "status": "stable", + "icon": "view_stream" + }, + { + "label": "Grid", + "path": "/components/grid", + "status": "stable", + "icon": "grid_on" + }, + { + "label": "Inset", + "path": "/components/inset", + "status": "stable", + "icon": "padding" + }, + { + "label": "Popover", + "path": "/components/popover", + "status": "experimental", + "icon": "chat_bubble" + } + ] }, - { "label": "Textarea", "path": "/components/textarea", "status": "stable" }, - { "label": "Toast", "path": "/components/toast", "status": "stable" }, { - "label": "Toggle group", - "path": "/components/toggle-group", - "status": "stable" + "label": "Navigation", + "icon": "navigation", + "links": [ + { + "label": "Breadcrumbs", + "path": "/components/breadcrumbs", + "status": "stable", + "icon": "arrow_back" + }, + { + "label": "Contextual menu", + "path": "/components/contextual-menu", + "status": "stable", + "icon": "notes" + }, + { + "label": "Dropdown", + "path": "/components/dropdown", + "status": "stable", + "icon": "south" + }, + { + "label": "Link", + "path": "/components/link", + "status": "stable", + "icon": "link" + }, + { + "label": "Nav tabs", + "path": "/components/nav-tabs", + "status": "stable", + "icon": "tab" + }, + { + "label": "Quick nav", + "path": "/components/quick-nav", + "status": "stable", + "icon": "menu" + }, + { + "label": "Tabs", + "path": "/components/tabs", + "status": "stable", + "icon": "tabs" + } + ] }, { - "label": "Tooltip", - "path": "/components/tooltip", - "status": "stable" + "label": "Status", + "icon": "flag", + "links": [ + { + "label": "Badge", + "path": "/components/badge", + "status": "stable", + "icon": "filled_label" + }, + { + "label": "Chip", + "path": "/components/chip", + "status": "stable", + "icon": "toggle_off" + }, + { + "label": "Status light", + "path": "/components/status-light", + "status": "stable", + "icon": "filled_circle" + } + ] }, { - "label": "Typography", - "path": "/components/typography", - "status": "stable" - }, - { "label": "Wizard", "path": "/components/wizard", "status": "stable" } + "label": "Text", + "icon": "text_snippet", + "links": [ + { + "label": "Bulleted list", + "path": "/components/bulleted-list", + "status": "stable", + "icon": "format_list_bulleted" + }, + { + "label": "Heading", + "path": "/components/heading", + "status": "stable", + "icon": "title" + }, + { + "label": "Paragraph", + "path": "/components/paragraph", + "status": "stable", + "icon": "notes" + }, + { + "label": "Typography", + "path": "/components/typography", + "status": "stable", + "icon": "text_fields" + } + ] + } ] diff --git a/apps/website/screens/common/example/Example.tsx b/apps/website/screens/common/example/Example.tsx index 23970f0030..afdc75dd42 100644 --- a/apps/website/screens/common/example/Example.tsx +++ b/apps/website/screens/common/example/Example.tsx @@ -2,7 +2,8 @@ import { useState } from "react"; import styled from "@emotion/styled"; import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"; import theme from "./liveEditorTheme"; -import { DxcButton, DxcFlex, useToast } from "@dxc-technology/halstack-react"; +import { DxcButton, DxcFlex } from "@dxc-technology/halstack-react"; +import useCopyToClipboard from "hooks/useCopyToClipboard"; const StyledPreview = styled.div` background-color: var(--color-bg-neutral-lightest); @@ -49,24 +50,13 @@ type ExamplePropTypes = { }; // const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: ExamplePropTypes) => { - const toast = useToast(); const [isCodeVisible, changeIsCodeVisible] = useState(defaultIsVisible); const [liveCode, setLiveCode] = useState(example.code); const handleCodeOnClick = () => { changeIsCodeVisible(!isCodeVisible); }; - - const handleCopy = () => { - navigator.clipboard - .writeText(liveCode) - .then(() => { - toast.success({ message: "Code copied to the clipboard." }); - }) - .catch(() => { - toast.warning({ message: "Failed to copy the text to the clipboard." }); - }); - }; + const handleCopy = useCopyToClipboard(); return ( @@ -79,7 +69,16 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E {actionsVisible && ( - {isCodeVisible && } + {isCodeVisible && ( + { + handleCopy(liveCode); + }} + /> + )} - DXC Logo - - - - - - + + Expand commentComment on line R9Resolved + + + + + + + + + + + ); diff --git a/apps/website/screens/common/pagesList.tsx b/apps/website/screens/common/pagesList.tsx index ce2f322053..59a58c4ae1 100644 --- a/apps/website/screens/common/pagesList.tsx +++ b/apps/website/screens/common/pagesList.tsx @@ -1,3 +1,4 @@ +import { SVG } from "../../../../packages/lib/src/common/utils"; import componentsList from "./componentsList.json"; export type ComponentStatus = "experimental" | "new" | "stable" | "legacy" | "deprecated"; @@ -6,11 +7,13 @@ export type LinkDetails = { label: string; path: string; status?: ComponentStatus; + icon?: string | SVG; }; export type LinksSectionDetails = { label: string; links: (LinkDetails | LinksSectionDetails)[]; + icon?: string | SVG; }; type NavigationLinks = { @@ -19,22 +22,24 @@ type NavigationLinks = { }; const overviewLinks: LinkDetails[] = [ - { label: "Introduction", path: "/overview/introduction" }, - { label: "Installation", path: "/overview/installation" }, - { label: "Component lifecycle", path: "/overview/component-lifecycle" }, - { label: "Releases", path: "/overview/releases" }, + { label: "Introduction", path: "/overview/introduction", icon: "info" }, + { label: "Installation", path: "/overview/installation", icon: "download" }, + { label: "Component lifecycle", path: "/overview/component-lifecycle", icon: "cycle" }, + { label: "Releases", path: "/overview/releases", icon: "deployed_code" }, ]; const utilitiesLinks: LinkDetails[] = [ { label: "Halstack provider", path: "/utilities/halstack-provider", + icon: "integration_instructions", }, ]; -const principlesLinks: LinkDetails[] = [ - { label: "Data visualization", path: "/principles/data-visualization" }, - { label: "Localization", path: "/principles/localization" }, +const guidelinesLinks: LinkDetails[] = [ + { label: "Data visualization", path: "/guidelines/data-visualization", icon: "insert_chart" }, + { label: "Localization", path: "/guidelines/localization", icon: "language" }, + { label: "Themes", path: "/guidelines/themes", icon: "colors" }, ]; const tokensLinks: LinkDetails[] = [ @@ -44,14 +49,14 @@ const tokensLinks: LinkDetails[] = [ ]; const foundationsLinks: (LinkDetails | LinksSectionDetails)[] = [ - { label: "Color", path: "/foundations/color" }, - { label: "Elevation", path: "/foundations/elevation" }, - { label: "Height", path: "/foundations/height" }, - { label: "Iconography", path: "/foundations/iconography" }, - { label: "Layout", path: "/foundations/layout" }, - { label: "Spacing", path: "/foundations/spacing" }, - { label: "Tokens", links: tokensLinks }, - { label: "Typography", path: "/foundations/typography" }, + { label: "Color", path: "/foundations/color", icon: "palette" }, + { label: "Elevation", path: "/foundations/elevation", icon: "layers" }, + { label: "Height", path: "/foundations/height", icon: "height" }, + { label: "Iconography", path: "/foundations/iconography", icon: "emoji_symbols" }, + { label: "Layout", path: "/foundations/layout", icon: "grid_on" }, + { label: "Spacing", path: "/foundations/spacing", icon: "space_bar" }, + { label: "Tokens", links: tokensLinks, icon: "token" }, + { label: "Typography", path: "/foundations/typography", icon: "font_download" }, ]; const v16Links: LinkDetails[] = [ @@ -60,13 +65,13 @@ const v16Links: LinkDetails[] = [ { label: "Migrating tokens", path: "/migration/16/migrating-tokens" }, ]; -const migrationLinks: LinksSectionDetails[] = [{ label: "v16", links: v16Links }]; +const migrationLinks: LinksSectionDetails[] = [{ label: "v16", links: v16Links, icon: "deployed_code_update" }]; const componentsLinks = componentsList as (LinkDetails | LinksSectionDetails)[]; export const LinksSections: LinksSectionDetails[] = [ { label: "Overview", links: overviewLinks }, - { label: "Principles", links: principlesLinks }, + { label: "Guidelines", links: guidelinesLinks }, { label: "Foundations", links: foundationsLinks }, { label: "Migration", links: migrationLinks }, { label: "Utilities", links: utilitiesLinks }, diff --git a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx index 01aeedb0a7..2187c25a99 100644 --- a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx +++ b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx @@ -45,7 +45,7 @@ const ApplicationLayoutPropsTable = () => ( Footer of the application layout shown at the bottom of the screen. It is optional and if it is not specified, - the default header will be shown. Please check the Footer documentation{" "} + the default footer will be shown. Please check the Footer documentation{" "} here @@ -60,7 +60,7 @@ const ApplicationLayoutPropsTable = () => ( Header of the application layout shown at the top of the screen. It is optional and if it is not specified, - the default header will be shown. Please check the Header documentation{" "} + the header will not be shown. Please check the Header documentation{" "} here @@ -122,7 +122,7 @@ const sections = [ title: "Application layout with components", content: (