diff --git a/apps/website/pages/migration/16/component-updates.tsx b/apps/website/pages/migration/16/component-updates.tsx index 0292cb1a7..0d5d94fa3 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/screens/migration/TokensMigrationPage.tsx b/apps/website/screens/migration/TokensMigrationPage.tsx index a4c80f11c..6c8f834d2 100644 --- a/apps/website/screens/migration/TokensMigrationPage.tsx +++ b/apps/website/screens/migration/TokensMigrationPage.tsx @@ -66,6 +66,7 @@ const sections = [
  • Migrating color, spacing, and typography overrides to CSS tokens.
  • Replacing any custom component overrides that referenced theme object values.
  • Updating global styles to rely on CSS variables instead of hardcoded values.
    • +
  • Refactoring prop values to rely on alias tokens instead of hardcoded values.
    • ), @@ -153,7 +154,8 @@ return ( This can be applied to colors, fonts, spacings and borders. However, keep in mind that, for now, only core tokens can be overwritten and they affect all the components which are wrapped within the{" "} - HalstackProvider. + HalstackProvider. Note that the former theme prop has been renamed to{" "} + opinionatedTheme. ), diff --git a/apps/website/screens/migration/Components16MigrationPage.tsx b/apps/website/screens/migration/components/Components16MigrationPage.tsx similarity index 92% rename from apps/website/screens/migration/Components16MigrationPage.tsx rename to apps/website/screens/migration/components/Components16MigrationPage.tsx index cda5514bd..56eab849c 100644 --- a/apps/website/screens/migration/Components16MigrationPage.tsx +++ b/apps/website/screens/migration/components/Components16MigrationPage.tsx @@ -4,6 +4,24 @@ import DocFooter from "@/common/DocFooter"; import PageHeading from "@/common/PageHeading"; import Code, { ExtendedTableCode } from "@/common/Code"; import Link from "next/link"; +import Example from "@/common/example/Example"; +import previousExample from "./examples/previous"; +import newExample from "./examples/new"; + +const groupItemType = `{ + badge?: ReactElement; + icon?: string | SVG; + label: string; + items: (Item)[]; +}`; + +const itemType = `{ + badge?: ReactElement; + icon?: string | SVG; + label: string; + onSelect?: () => void; + selected?: boolean; +}`; const sections = [ { @@ -16,6 +34,27 @@ const sections = [ ), }, + { + title: "Usage of components", + content: ( + <> + + In our component props, instead of passing hardcoded values such as 2rem, we should always use an + alias token whenever possible. Only if no suitable alias token exists, a core token or a hardcoded value may + be used. + + Previous version: + + + + For more information about tokens refer to{" "} + + its documentation + + + + ), + }, { title: "Added components", content: ( @@ -155,22 +194,11 @@ const sections = [ The navItems prop accepts an array of Item and GroupItem objects. Each GroupItem has the following structure:

    - {`{ - badge?: ReactElement; - icon?: string | SVG; - label: string; - items: (Item)[]; -}`} + {groupItemType}

    Each Item has the following structure:

    - {`{ - badge?: ReactElement; - icon?: string | SVG; - label: string; - onSelect?: () => void; - selected?: boolean; -}`} + {itemType} @@ -366,7 +394,7 @@ const Components16MigrationPage = () => ( - + ); diff --git a/apps/website/screens/migration/components/examples/new.tsx b/apps/website/screens/migration/components/examples/new.tsx new file mode 100644 index 000000000..1b22888b6 --- /dev/null +++ b/apps/website/screens/migration/components/examples/new.tsx @@ -0,0 +1,33 @@ +import { DxcContainer, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + ); +}`; + +const scope = { + DxcFlex, + DxcInset, + DxcContainer, +}; + +export default { code, scope }; diff --git a/apps/website/screens/migration/components/examples/previous.tsx b/apps/website/screens/migration/components/examples/previous.tsx new file mode 100644 index 000000000..aaf7d28e7 --- /dev/null +++ b/apps/website/screens/migration/components/examples/previous.tsx @@ -0,0 +1,33 @@ +import { DxcContainer, DxcFlex, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + + + + + ); +}`; + +const scope = { + DxcFlex, + DxcInset, + DxcContainer, +}; + +export default { code, scope };