From 9b5bd55d0b118f246b828e023b75be1e84f98af4 Mon Sep 17 00:00:00 2001 From: Aram <37216945+alimpens@users.noreply.github.com> Date: Thu, 30 Nov 2023 10:43:30 +0100 Subject: [PATCH] feat: Add common link tokens and use them in all link-like components (#814) --- CONTRIBUTING.md | 2 +- packages/css/package.json | 4 +- .../css/{utils => src/common}/breakpoint.scss | 0 .../common}/calculate-fluid-style.scss | 0 .../src/{ => components}/accordion/README.md | 0 .../{ => components}/accordion/accordion.scss | 0 .../css/src/{ => components}/alert/README.md | 0 .../css/src/{ => components}/alert/alert.scss | 0 .../{ => components}/aspect-ratio/README.md | 0 .../aspect-ratio/aspect-ratio.scss | 0 .../src/{ => components}/blockquote/README.md | 0 .../blockquote/blockquote.scss | 0 .../src/{ => components}/breadcrumb/README.md | 0 .../breadcrumb/breadcrumb.scss | 23 ++++---- .../css/src/{ => components}/button/README.md | 0 .../src/{ => components}/button/button-css.md | 0 .../src/{ => components}/button/button.scss | 2 +- .../css/src/{ => components}/card/README.md | 0 .../css/src/{ => components}/card/card.scss | 8 +-- .../src/{ => components}/checkbox/README.md | 0 .../{ => components}/checkbox/checkbox-css.md | 0 .../{ => components}/checkbox/checkbox.scss | 0 .../css/src/{ => components}/dialog/README.md | 0 .../src/{ => components}/dialog/dialog.scss | 2 +- .../css/src/{ => components}/footer/README.md | 0 .../src/{ => components}/footer/footer-css.md | 0 .../src/{ => components}/form-label/README.md | 0 .../form-label/form-label.scss | 0 .../{ => components}/grid/README.grid-cell.md | 0 .../src/{ => components}/grid/README.grid.md | 0 .../src/{ => components}/grid/grid-cell.scss | 2 +- .../css/src/{ => components}/grid/grid.scss | 2 +- .../src/{ => components}/heading/README.md | 0 .../{ => components}/heading/heading-css.md | 0 .../src/{ => components}/heading/heading.scss | 0 .../src/{ => components}/highlight/README.md | 0 .../{ => components}/highlight/highlight.scss | 0 .../css/src/{ => components}/icon/README.md | 0 .../css/src/{ => components}/icon/icon.scss | 0 .../css/src/{ => components}/image/README.md | 0 .../css/src/{ => components}/image/image.scss | 0 packages/css/src/{ => components}/index.scss | 0 .../css/src/{ => components}/link/README.md | 0 .../css/src/{ => components}/link/link.scss | 24 +++------ .../css/src/{ => components}/logo/README.md | 0 .../css/src/{ => components}/logo/logo.scss | 0 .../{ => components}/ordered-list/README.md | 0 .../ordered-list/ordered-list.scss | 0 .../{ => components}/page-heading/README.md | 0 .../page-heading/page-heading.scss | 0 .../src/{ => components}/page-menu/README.md | 2 + .../{ => components}/page-menu/page-menu.scss | 8 +-- .../src/{ => components}/pagination/README.md | 0 .../pagination/pagination.scss | 7 +-- .../src/{ => components}/paragraph/README.md | 0 .../paragraph/paragraph-css.md | 0 .../{ => components}/paragraph/paragraph.scss | 0 .../css/src/{ => components}/screen/README.md | 0 .../src/{ => components}/screen/screen.scss | 0 .../css/src/{ => components}/switch/README.md | 0 .../src/{ => components}/switch/switch.scss | 0 .../{ => components}/top-task-link/README.md | 0 .../top-task-link/top-task-link.scss | 9 ++-- .../{ => components}/unordered-list/README.md | 0 .../unordered-list/unordered-list.scss | 0 .../visually-hidden/README.md | 0 .../visually-hidden/visually-hidden.scss | 0 .../react/src/Breadcrumb/Breadcrumb.test.tsx | 2 +- packages/react/src/Breadcrumb/Breadcrumb.tsx | 4 +- plop-templates/storybook.docs.mdx.hbs | 2 +- plopfile.mjs | 6 +-- .../amsterdam/link-appearance.tokens.json | 31 +++++++++++ .../amsterdam/breadcrumb.tokens.json | 36 ++++--------- .../src/components/amsterdam/card.tokens.json | 8 ++- .../src/components/amsterdam/link.tokens.json | 52 +++++++++++-------- .../amsterdam/page-menu.tokens.json | 11 ++-- .../amsterdam/pagination.tokens.json | 24 ++++----- .../amsterdam/top-task-link.tokens.json | 36 +++++-------- .../src/Accordion/Accordion.docs.mdx | 2 +- .../storybook-react/src/Alert/Alert.docs.mdx | 2 +- .../src/AspectRatio/AspectRatio.docs.mdx | 2 +- .../src/Blockquote/Blockquote.docs.mdx | 2 +- .../src/Breadcrumb/Breadcrumb.docs.mdx | 2 +- .../src/Button/Button.docs.mdx | 2 +- .../storybook-react/src/Card/Card.docs.mdx | 2 +- .../src/Checkbox/Checkbox.docs.mdx | 2 +- .../src/Dialog/Dialog.docs.mdx | 2 +- .../src/Footer/Footer.docs.mdx | 2 +- .../src/FormLabel/FormLabel.docs.mdx | 2 +- .../storybook-react/src/Grid/Grid.docs.mdx | 2 +- .../src/GridCell/GridCell.docs.mdx | 2 +- .../src/Heading/Heading.docs.mdx | 2 +- .../src/Highlight/Highlight.docs.mdx | 2 +- .../storybook-react/src/Icon/Icon.docs.mdx | 2 +- .../storybook-react/src/Image/Image.docs.mdx | 2 +- .../storybook-react/src/Link/Link.docs.mdx | 2 +- .../storybook-react/src/Link/Link.stories.tsx | 22 +++----- .../storybook-react/src/Logo/Logo.docs.mdx | 2 +- .../src/OrderedList/OrderedList.docs.mdx | 2 +- .../src/PageHeading/PageHeading.docs.mdx | 2 +- .../src/PageMenu/PageMenu.docs.mdx | 2 +- .../src/Pagination/Pagination.docs.mdx | 2 +- .../src/Paragraph/Paragraph.docs.mdx | 2 +- .../src/Screen/Screen.docs.mdx | 2 +- .../src/Switch/Switch.docs.mdx | 2 +- .../src/TopTaskLink/TopTaskLink.docs.mdx | 2 +- .../src/TopTaskLink/TopTaskLink.stories.tsx | 2 - .../src/UnorderedList/UnorderedList.docs.mdx | 2 +- .../VisuallyHidden/VisuallyHidden.docs.mdx | 2 +- .../VisuallyHidden/VisuallyHidden.stories.tsx | 2 - 110 files changed, 195 insertions(+), 196 deletions(-) rename packages/css/{utils => src/common}/breakpoint.scss (100%) rename packages/css/{utils => src/common}/calculate-fluid-style.scss (100%) rename packages/css/src/{ => components}/accordion/README.md (100%) rename packages/css/src/{ => components}/accordion/accordion.scss (100%) rename packages/css/src/{ => components}/alert/README.md (100%) rename packages/css/src/{ => components}/alert/alert.scss (100%) rename packages/css/src/{ => components}/aspect-ratio/README.md (100%) rename packages/css/src/{ => components}/aspect-ratio/aspect-ratio.scss (100%) rename packages/css/src/{ => components}/blockquote/README.md (100%) rename packages/css/src/{ => components}/blockquote/blockquote.scss (100%) rename packages/css/src/{ => components}/breadcrumb/README.md (100%) rename packages/css/src/{ => components}/breadcrumb/breadcrumb.scss (65%) rename packages/css/src/{ => components}/button/README.md (100%) rename packages/css/src/{ => components}/button/button-css.md (100%) rename packages/css/src/{ => components}/button/button.scss (94%) rename packages/css/src/{ => components}/card/README.md (100%) rename packages/css/src/{ => components}/card/card.scss (78%) rename packages/css/src/{ => components}/checkbox/README.md (100%) rename packages/css/src/{ => components}/checkbox/checkbox-css.md (100%) rename packages/css/src/{ => components}/checkbox/checkbox.scss (100%) rename packages/css/src/{ => components}/dialog/README.md (100%) rename packages/css/src/{ => components}/dialog/dialog.scss (98%) rename packages/css/src/{ => components}/footer/README.md (100%) rename packages/css/src/{ => components}/footer/footer-css.md (100%) rename packages/css/src/{ => components}/form-label/README.md (100%) rename packages/css/src/{ => components}/form-label/form-label.scss (100%) rename packages/css/src/{ => components}/grid/README.grid-cell.md (100%) rename packages/css/src/{ => components}/grid/README.grid.md (100%) rename packages/css/src/{ => components}/grid/grid-cell.scss (96%) rename packages/css/src/{ => components}/grid/grid.scss (98%) rename packages/css/src/{ => components}/heading/README.md (100%) rename packages/css/src/{ => components}/heading/heading-css.md (100%) rename packages/css/src/{ => components}/heading/heading.scss (100%) rename packages/css/src/{ => components}/highlight/README.md (100%) rename packages/css/src/{ => components}/highlight/highlight.scss (100%) rename packages/css/src/{ => components}/icon/README.md (100%) rename packages/css/src/{ => components}/icon/icon.scss (100%) rename packages/css/src/{ => components}/image/README.md (100%) rename packages/css/src/{ => components}/image/image.scss (100%) rename packages/css/src/{ => components}/index.scss (100%) rename packages/css/src/{ => components}/link/README.md (100%) rename packages/css/src/{ => components}/link/link.scss (76%) rename packages/css/src/{ => components}/logo/README.md (100%) rename packages/css/src/{ => components}/logo/logo.scss (100%) rename packages/css/src/{ => components}/ordered-list/README.md (100%) rename packages/css/src/{ => components}/ordered-list/ordered-list.scss (100%) rename packages/css/src/{ => components}/page-heading/README.md (100%) rename packages/css/src/{ => components}/page-heading/page-heading.scss (100%) rename packages/css/src/{ => components}/page-menu/README.md (84%) rename packages/css/src/{ => components}/page-menu/page-menu.scss (81%) rename packages/css/src/{ => components}/pagination/README.md (100%) rename packages/css/src/{ => components}/pagination/pagination.scss (82%) rename packages/css/src/{ => components}/paragraph/README.md (100%) rename packages/css/src/{ => components}/paragraph/paragraph-css.md (100%) rename packages/css/src/{ => components}/paragraph/paragraph.scss (100%) rename packages/css/src/{ => components}/screen/README.md (100%) rename packages/css/src/{ => components}/screen/screen.scss (100%) rename packages/css/src/{ => components}/switch/README.md (100%) rename packages/css/src/{ => components}/switch/switch.scss (100%) rename packages/css/src/{ => components}/top-task-link/README.md (100%) rename packages/css/src/{ => components}/top-task-link/top-task-link.scss (79%) rename packages/css/src/{ => components}/unordered-list/README.md (100%) rename packages/css/src/{ => components}/unordered-list/unordered-list.scss (100%) rename packages/css/src/{ => components}/visually-hidden/README.md (100%) rename packages/css/src/{ => components}/visually-hidden/visually-hidden.scss (100%) create mode 100644 proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dc8ea8bd4b..b8930c1924 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -68,7 +68,7 @@ If you need to link your local version of this library (to test your unpublished - Go to the root directory of the packages you want to link to (i.e. where its package.json is) - Run `npm link`. Do this for all packages you want to link. - Go to the root of the project in which you want to consume the packages -- Run `npm link `. If you want to link multiple packages, seperate the package names with a space. For example: `npm link @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-react @amsterdam/design-system-react-icons`. Be careful: you have to link all packages in the same namespace together. Doing it one at a time will only link the last one. +- Run `npm link `. If you want to link multiple packages, separate the package names with a space. For example: `npm link @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-react @amsterdam/design-system-react-icons`. Be careful: you have to link all packages in the same namespace together. Doing it one at a time will only link the last one. - Sometimes the local link is severed. Run `npm link @amsterdam/...` again if this happens. ## Licensing diff --git a/packages/css/package.json b/packages/css/package.json index 2b134e070b..83b71671cb 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -14,8 +14,8 @@ "directory": "packages/css" }, "scripts": { - "build": "sass src/:dist/ --style=compressed", - "build:watch": "sass src/:dist/ --watch", + "build": "sass src/components:dist/ --style=compressed", + "build:watch": "sass src/components:dist/ --watch", "clean": "rimraf dist/" }, "devDependencies": { diff --git a/packages/css/utils/breakpoint.scss b/packages/css/src/common/breakpoint.scss similarity index 100% rename from packages/css/utils/breakpoint.scss rename to packages/css/src/common/breakpoint.scss diff --git a/packages/css/utils/calculate-fluid-style.scss b/packages/css/src/common/calculate-fluid-style.scss similarity index 100% rename from packages/css/utils/calculate-fluid-style.scss rename to packages/css/src/common/calculate-fluid-style.scss diff --git a/packages/css/src/accordion/README.md b/packages/css/src/components/accordion/README.md similarity index 100% rename from packages/css/src/accordion/README.md rename to packages/css/src/components/accordion/README.md diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss similarity index 100% rename from packages/css/src/accordion/accordion.scss rename to packages/css/src/components/accordion/accordion.scss diff --git a/packages/css/src/alert/README.md b/packages/css/src/components/alert/README.md similarity index 100% rename from packages/css/src/alert/README.md rename to packages/css/src/components/alert/README.md diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/components/alert/alert.scss similarity index 100% rename from packages/css/src/alert/alert.scss rename to packages/css/src/components/alert/alert.scss diff --git a/packages/css/src/aspect-ratio/README.md b/packages/css/src/components/aspect-ratio/README.md similarity index 100% rename from packages/css/src/aspect-ratio/README.md rename to packages/css/src/components/aspect-ratio/README.md diff --git a/packages/css/src/aspect-ratio/aspect-ratio.scss b/packages/css/src/components/aspect-ratio/aspect-ratio.scss similarity index 100% rename from packages/css/src/aspect-ratio/aspect-ratio.scss rename to packages/css/src/components/aspect-ratio/aspect-ratio.scss diff --git a/packages/css/src/blockquote/README.md b/packages/css/src/components/blockquote/README.md similarity index 100% rename from packages/css/src/blockquote/README.md rename to packages/css/src/components/blockquote/README.md diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss similarity index 100% rename from packages/css/src/blockquote/blockquote.scss rename to packages/css/src/components/blockquote/blockquote.scss diff --git a/packages/css/src/breadcrumb/README.md b/packages/css/src/components/breadcrumb/README.md similarity index 100% rename from packages/css/src/breadcrumb/README.md rename to packages/css/src/components/breadcrumb/README.md diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss similarity index 65% rename from packages/css/src/breadcrumb/breadcrumb.scss rename to packages/css/src/components/breadcrumb/breadcrumb.scss index 980bf6e65c..5264180fe3 100644 --- a/packages/css/src/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -33,26 +33,27 @@ @include reset; } -.amsterdam-breadcrumb-item { +.amsterdam-breadcrumb__item { align-items: center; display: flex; } -.amsterdam-breadcrumb-item:not(:last-child)::after { - background-color: var(--amsterdam-breadcrumb-color); +.amsterdam-breadcrumb__item:not(:last-child)::after { + background-color: var(--amsterdam-breadcrumb-separator-background-color); clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z"); content: ""; display: inline-block; - height: 16px; + height: 1rem; margin-inline-start: 1rem; - width: 16px; + width: 1rem; } -.amsterdam-breadcrumb-item__link { - color: var(--amsterdam-breadcrumb-color); - cursor: pointer; +.amsterdam-breadcrumb__link { + color: var(--amsterdam-breadcrumb-item-link-color); outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset); - text-decoration: none; + text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line); + text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness); + text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset); &::first-letter { text-transform: capitalize; @@ -60,8 +61,6 @@ &:hover { color: var(--amsterdam-breadcrumb-item-link-hover-color); - text-decoration: underline; - text-decoration-thickness: 2px; - text-underline-offset: 3px; + text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line); } } diff --git a/packages/css/src/button/README.md b/packages/css/src/components/button/README.md similarity index 100% rename from packages/css/src/button/README.md rename to packages/css/src/components/button/README.md diff --git a/packages/css/src/button/button-css.md b/packages/css/src/components/button/button-css.md similarity index 100% rename from packages/css/src/button/button-css.md rename to packages/css/src/components/button/button-css.md diff --git a/packages/css/src/button/button.scss b/packages/css/src/components/button/button.scss similarity index 94% rename from packages/css/src/button/button.scss rename to packages/css/src/components/button/button.scss index 424f61a73f..205df7d0d0 100644 --- a/packages/css/src/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../node_modules/@utrecht/components/button/css"; +@import "../../../node_modules/@utrecht/components/button/css"; @mixin reset { -webkit-text-size-adjust: 100%; diff --git a/packages/css/src/card/README.md b/packages/css/src/components/card/README.md similarity index 100% rename from packages/css/src/card/README.md rename to packages/css/src/components/card/README.md diff --git a/packages/css/src/card/card.scss b/packages/css/src/components/card/card.scss similarity index 78% rename from packages/css/src/card/card.scss rename to packages/css/src/components/card/card.scss index 4968b8793c..3181dcb213 100644 --- a/packages/css/src/card/card.scss +++ b/packages/css/src/components/card/card.scss @@ -45,12 +45,12 @@ .amsterdam-card__link { color: var(--amsterdam-card-link-color); - text-decoration: none; - text-decoration-thickness: 2px; - text-underline-offset: 3px; + text-decoration-line: var(--amsterdam-card-link-text-decoration-line); + text-decoration-thickness: var(--amsterdam-card-link-text-decoration-thickness); + text-underline-offset: var(--amsterdam-card-link-text-underline-offset); &:hover { color: var(--amsterdam-card-link-hover-color); - text-decoration: underline; + text-decoration-line: var(--amsterdam-card-link-hover-text-decoration-line); } } diff --git a/packages/css/src/checkbox/README.md b/packages/css/src/components/checkbox/README.md similarity index 100% rename from packages/css/src/checkbox/README.md rename to packages/css/src/components/checkbox/README.md diff --git a/packages/css/src/checkbox/checkbox-css.md b/packages/css/src/components/checkbox/checkbox-css.md similarity index 100% rename from packages/css/src/checkbox/checkbox-css.md rename to packages/css/src/components/checkbox/checkbox-css.md diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss similarity index 100% rename from packages/css/src/checkbox/checkbox.scss rename to packages/css/src/components/checkbox/checkbox.scss diff --git a/packages/css/src/dialog/README.md b/packages/css/src/components/dialog/README.md similarity index 100% rename from packages/css/src/dialog/README.md rename to packages/css/src/components/dialog/README.md diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss similarity index 98% rename from packages/css/src/dialog/dialog.scss rename to packages/css/src/components/dialog/dialog.scss index b23984acff..f9ce973361 100644 --- a/packages/css/src/dialog/dialog.scss +++ b/packages/css/src/components/dialog/dialog.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-dialog { background-color: var(--amsterdam-dialog-background-color); diff --git a/packages/css/src/footer/README.md b/packages/css/src/components/footer/README.md similarity index 100% rename from packages/css/src/footer/README.md rename to packages/css/src/components/footer/README.md diff --git a/packages/css/src/footer/footer-css.md b/packages/css/src/components/footer/footer-css.md similarity index 100% rename from packages/css/src/footer/footer-css.md rename to packages/css/src/components/footer/footer-css.md diff --git a/packages/css/src/form-label/README.md b/packages/css/src/components/form-label/README.md similarity index 100% rename from packages/css/src/form-label/README.md rename to packages/css/src/components/form-label/README.md diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/components/form-label/form-label.scss similarity index 100% rename from packages/css/src/form-label/form-label.scss rename to packages/css/src/components/form-label/form-label.scss diff --git a/packages/css/src/grid/README.grid-cell.md b/packages/css/src/components/grid/README.grid-cell.md similarity index 100% rename from packages/css/src/grid/README.grid-cell.md rename to packages/css/src/components/grid/README.grid-cell.md diff --git a/packages/css/src/grid/README.grid.md b/packages/css/src/components/grid/README.grid.md similarity index 100% rename from packages/css/src/grid/README.grid.md rename to packages/css/src/components/grid/README.grid.md diff --git a/packages/css/src/grid/grid-cell.scss b/packages/css/src/components/grid/grid-cell.scss similarity index 96% rename from packages/css/src/grid/grid-cell.scss rename to packages/css/src/components/grid/grid-cell.scss index b60ffe67bb..9f14189af2 100644 --- a/packages/css/src/grid/grid-cell.scss +++ b/packages/css/src/components/grid/grid-cell.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-grid-cell--full-width { grid-column: 1 / -1; diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/components/grid/grid.scss similarity index 98% rename from packages/css/src/grid/grid.scss rename to packages/css/src/components/grid/grid.scss index c9c2728caa..5f34894444 100644 --- a/packages/css/src/grid/grid.scss +++ b/packages/css/src/components/grid/grid.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-grid { --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap); diff --git a/packages/css/src/heading/README.md b/packages/css/src/components/heading/README.md similarity index 100% rename from packages/css/src/heading/README.md rename to packages/css/src/components/heading/README.md diff --git a/packages/css/src/heading/heading-css.md b/packages/css/src/components/heading/heading-css.md similarity index 100% rename from packages/css/src/heading/heading-css.md rename to packages/css/src/components/heading/heading-css.md diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/components/heading/heading.scss similarity index 100% rename from packages/css/src/heading/heading.scss rename to packages/css/src/components/heading/heading.scss diff --git a/packages/css/src/highlight/README.md b/packages/css/src/components/highlight/README.md similarity index 100% rename from packages/css/src/highlight/README.md rename to packages/css/src/components/highlight/README.md diff --git a/packages/css/src/highlight/highlight.scss b/packages/css/src/components/highlight/highlight.scss similarity index 100% rename from packages/css/src/highlight/highlight.scss rename to packages/css/src/components/highlight/highlight.scss diff --git a/packages/css/src/icon/README.md b/packages/css/src/components/icon/README.md similarity index 100% rename from packages/css/src/icon/README.md rename to packages/css/src/components/icon/README.md diff --git a/packages/css/src/icon/icon.scss b/packages/css/src/components/icon/icon.scss similarity index 100% rename from packages/css/src/icon/icon.scss rename to packages/css/src/components/icon/icon.scss diff --git a/packages/css/src/image/README.md b/packages/css/src/components/image/README.md similarity index 100% rename from packages/css/src/image/README.md rename to packages/css/src/components/image/README.md diff --git a/packages/css/src/image/image.scss b/packages/css/src/components/image/image.scss similarity index 100% rename from packages/css/src/image/image.scss rename to packages/css/src/components/image/image.scss diff --git a/packages/css/src/index.scss b/packages/css/src/components/index.scss similarity index 100% rename from packages/css/src/index.scss rename to packages/css/src/components/index.scss diff --git a/packages/css/src/link/README.md b/packages/css/src/components/link/README.md similarity index 100% rename from packages/css/src/link/README.md rename to packages/css/src/components/link/README.md diff --git a/packages/css/src/link/link.scss b/packages/css/src/components/link/link.scss similarity index 76% rename from packages/css/src/link/link.scss rename to packages/css/src/components/link/link.scss index 4c67d77af0..f2b1104957 100644 --- a/packages/css/src/link/link.scss +++ b/packages/css/src/components/link/link.scss @@ -24,6 +24,7 @@ display: inline-block; font-size: var(--amsterdam-link-standalone-spacious-font-size); line-height: var(--amsterdam-link-standalone-spacious-line-height); + text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line); text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness); text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset); @@ -42,11 +43,12 @@ font-family: var(--amsterdam-link-inline-font-family); font-size: var(--amsterdam-link-inline-font-size); line-height: var(--amsterdam-link-inline-line-height); - text-decoration: var(--amsterdam-link-inline-text-decoration); + text-decoration-line: var(--amsterdam-link-inline-text-decoration-line); text-decoration-thickness: var(--amsterdam-link-inline-text-decoration-thickness); + text-underline-offset: var(--amsterdam-link-inline-text-underline-offset); &:hover { - text-decoration: var(--amsterdam-link-inline-hover-text-decoration); + text-decoration-thickness: var(--amsterdam-link-inline-hover-text-decoration-thickness); text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset); } @@ -61,12 +63,12 @@ font-size: var(--amsterdam-link-in-list-spacious-font-size); gap: var(--amsterdam-link-in-list-gap); line-height: var(--amsterdam-link-in-list-spacious-line-height); - text-decoration: var(--amsterdam-link-in-list-text-decoration); + text-decoration-line: var(--amsterdam-link-in-list-text-decoration-line); + text-decoration-thickness: var(--amsterdam-link-in-list-text-decoration-thickness); + text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset); &:hover { - text-decoration: var(--amsterdam-link-in-list-hover-text-decoration); - text-decoration-thickness: var(--amsterdam-link-in-list-hover-text-decoration-thickness); - text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset); + text-decoration-line: var(--amsterdam-link-in-list-hover-text-decoration-line); } .amsterdam-theme--compact & { @@ -106,13 +108,3 @@ color: var(--amsterdam-link-on-background-light-visited-color); } } - -.amsterdam-link--inline.amsterdam-link--on-background-dark, -.amsterdam-link--inline.amsterdam-link--on-background-light { - text-decoration: var(--amsterdam-link-inline-hover-text-decoration); - text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset); - - &:hover { - text-decoration: var(--amsterdam-link-inline-text-decoration); - } -} diff --git a/packages/css/src/logo/README.md b/packages/css/src/components/logo/README.md similarity index 100% rename from packages/css/src/logo/README.md rename to packages/css/src/components/logo/README.md diff --git a/packages/css/src/logo/logo.scss b/packages/css/src/components/logo/logo.scss similarity index 100% rename from packages/css/src/logo/logo.scss rename to packages/css/src/components/logo/logo.scss diff --git a/packages/css/src/ordered-list/README.md b/packages/css/src/components/ordered-list/README.md similarity index 100% rename from packages/css/src/ordered-list/README.md rename to packages/css/src/components/ordered-list/README.md diff --git a/packages/css/src/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss similarity index 100% rename from packages/css/src/ordered-list/ordered-list.scss rename to packages/css/src/components/ordered-list/ordered-list.scss diff --git a/packages/css/src/page-heading/README.md b/packages/css/src/components/page-heading/README.md similarity index 100% rename from packages/css/src/page-heading/README.md rename to packages/css/src/components/page-heading/README.md diff --git a/packages/css/src/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss similarity index 100% rename from packages/css/src/page-heading/page-heading.scss rename to packages/css/src/components/page-heading/page-heading.scss diff --git a/packages/css/src/page-menu/README.md b/packages/css/src/components/page-menu/README.md similarity index 84% rename from packages/css/src/page-menu/README.md rename to packages/css/src/components/page-menu/README.md index 7f5674db39..4478954e1c 100644 --- a/packages/css/src/page-menu/README.md +++ b/packages/css/src/components/page-menu/README.md @@ -13,3 +13,5 @@ Het Page Menu wordt alleen gebruikt in het Header en Footer component en is uits ## Relevante WCAG eisen - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html) + +PageMenu is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor. diff --git a/packages/css/src/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss similarity index 81% rename from packages/css/src/page-menu/page-menu.scss rename to packages/css/src/components/page-menu/page-menu.scss index a2b5aba06f..778b2adbc9 100644 --- a/packages/css/src/page-menu/page-menu.scss +++ b/packages/css/src/components/page-menu/page-menu.scss @@ -46,9 +46,11 @@ font-weight: var(--amsterdam-page-menu-item-font-weight); gap: var(--amsterdam-page-menu-item-gap); line-height: var(--amsterdam-page-menu-item-spacious-line-height); - outline-offset: var(--amsterdam-focus-outline-offset); + outline-offset: var(--amsterdam-page-menu-item-outline-offset); text-align: center; - text-decoration: var(--amsterdam-page-menu-item-text-decoration); + text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line); + text-decoration-thickness: var(--amsterdam-page-menu-item-text-decoration-thickness); + text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset); touch-action: manipulation; .amsterdam-theme--compact & { @@ -73,7 +75,7 @@ .amsterdam-page-menu__link:hover, .amsterdam-page-menu__button:hover { color: var(--amsterdam-page-menu-item-hover-color); - text-decoration: var(--amsterdam-page-menu-item-hover-text-decoration); + text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line); } .amsterdam-page-menu__link svg, diff --git a/packages/css/src/pagination/README.md b/packages/css/src/components/pagination/README.md similarity index 100% rename from packages/css/src/pagination/README.md rename to packages/css/src/components/pagination/README.md diff --git a/packages/css/src/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss similarity index 82% rename from packages/css/src/pagination/pagination.scss rename to packages/css/src/components/pagination/pagination.scss index b20b2019c8..7aa0329fb3 100644 --- a/packages/css/src/pagination/pagination.scss +++ b/packages/css/src/components/pagination/pagination.scss @@ -44,13 +44,14 @@ gap: 0.5rem; outline-offset: var(--amsterdam-pagination-button-outline-offset); padding-inline: 0.75rem; - text-decoration-thickness: 2px; - text-underline-offset: 3px; + text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line); + text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness); + text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset); touch-action: manipulation; &:hover { color: var(--amsterdam-pagination-button-hover-color); - text-decoration: underline; + text-decoration-line: var(--amsterdam-pagination-button-hover-text-decoration-line); } &:disabled { diff --git a/packages/css/src/paragraph/README.md b/packages/css/src/components/paragraph/README.md similarity index 100% rename from packages/css/src/paragraph/README.md rename to packages/css/src/components/paragraph/README.md diff --git a/packages/css/src/paragraph/paragraph-css.md b/packages/css/src/components/paragraph/paragraph-css.md similarity index 100% rename from packages/css/src/paragraph/paragraph-css.md rename to packages/css/src/components/paragraph/paragraph-css.md diff --git a/packages/css/src/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss similarity index 100% rename from packages/css/src/paragraph/paragraph.scss rename to packages/css/src/components/paragraph/paragraph.scss diff --git a/packages/css/src/screen/README.md b/packages/css/src/components/screen/README.md similarity index 100% rename from packages/css/src/screen/README.md rename to packages/css/src/components/screen/README.md diff --git a/packages/css/src/screen/screen.scss b/packages/css/src/components/screen/screen.scss similarity index 100% rename from packages/css/src/screen/screen.scss rename to packages/css/src/components/screen/screen.scss diff --git a/packages/css/src/switch/README.md b/packages/css/src/components/switch/README.md similarity index 100% rename from packages/css/src/switch/README.md rename to packages/css/src/components/switch/README.md diff --git a/packages/css/src/switch/switch.scss b/packages/css/src/components/switch/switch.scss similarity index 100% rename from packages/css/src/switch/switch.scss rename to packages/css/src/components/switch/switch.scss diff --git a/packages/css/src/top-task-link/README.md b/packages/css/src/components/top-task-link/README.md similarity index 100% rename from packages/css/src/top-task-link/README.md rename to packages/css/src/components/top-task-link/README.md diff --git a/packages/css/src/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss similarity index 79% rename from packages/css/src/top-task-link/top-task-link.scss rename to packages/css/src/components/top-task-link/top-task-link.scss index 269e4a9a27..aea15fb1ac 100644 --- a/packages/css/src/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -22,7 +22,10 @@ font-family: var(--amsterdam-top-task-link-label-font-family); font-size: var(--amsterdam-top-task-link-label-spacious-font-size); font-weight: var(--amsterdam-top-task-link-label-font-weight); - line-height: var(--amsterdam-top-task-link-label-spacious-line-height); + line-height: var(--amsterdam-top-task-link-label-line-height); + text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line); + text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness); + text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset); .amsterdam-theme--compact & { font-size: var(--amsterdam-top-task-link-label-compact-font-size); @@ -34,9 +37,7 @@ .amsterdam-top-task-link:hover .amsterdam-top-task-link__label { color: var(--amsterdam-top-task-link-label-hover-color); - text-decoration: underline; - text-decoration-thickness: 3px; - text-underline-offset: 0.5rem; + text-decoration-line: var(--amsterdam-top-task-link-label-hover-text-decoration-line); } .amsterdam-top-task-link__description { diff --git a/packages/css/src/unordered-list/README.md b/packages/css/src/components/unordered-list/README.md similarity index 100% rename from packages/css/src/unordered-list/README.md rename to packages/css/src/components/unordered-list/README.md diff --git a/packages/css/src/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss similarity index 100% rename from packages/css/src/unordered-list/unordered-list.scss rename to packages/css/src/components/unordered-list/unordered-list.scss diff --git a/packages/css/src/visually-hidden/README.md b/packages/css/src/components/visually-hidden/README.md similarity index 100% rename from packages/css/src/visually-hidden/README.md rename to packages/css/src/components/visually-hidden/README.md diff --git a/packages/css/src/visually-hidden/visually-hidden.scss b/packages/css/src/components/visually-hidden/visually-hidden.scss similarity index 100% rename from packages/css/src/visually-hidden/visually-hidden.scss rename to packages/css/src/components/visually-hidden/visually-hidden.scss diff --git a/packages/react/src/Breadcrumb/Breadcrumb.test.tsx b/packages/react/src/Breadcrumb/Breadcrumb.test.tsx index f3ace33ec4..d5420454df 100644 --- a/packages/react/src/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/react/src/Breadcrumb/Breadcrumb.test.tsx @@ -22,7 +22,7 @@ describe('Breadcrumb', () => { ) const breadcrumb = screen.getByRole('navigation') - const breadcrumbs = container.querySelectorAll('.amsterdam-breadcrumb-item') + const breadcrumbs = container.querySelectorAll('.amsterdam-breadcrumb__item') expect(breadcrumb).toBeInTheDocument() expect(breadcrumbs.length).toBe(3) diff --git a/packages/react/src/Breadcrumb/Breadcrumb.tsx b/packages/react/src/Breadcrumb/Breadcrumb.tsx index 164bb1af1a..07cb4eeac9 100644 --- a/packages/react/src/Breadcrumb/Breadcrumb.tsx +++ b/packages/react/src/Breadcrumb/Breadcrumb.tsx @@ -31,8 +31,8 @@ export interface BreadcrumbItemProps extends PropsWithChildren) => { return ( -
  • - +
  • + {children}
    • diff --git a/plop-templates/storybook.docs.mdx.hbs b/plop-templates/storybook.docs.mdx.hbs index 0d5d4e1460..aea68c1a86 100644 --- a/plop-templates/storybook.docs.mdx.hbs +++ b/plop-templates/storybook.docs.mdx.hbs @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as {{pascalCase name}}Stories from "./{{pascalCase name}}.stories.tsx"; -import README from "../../../../packages/css/src/{{kebabCase name}}/README.md?raw"; +import README from "../../../../packages/css/src/components/{{kebabCase name}}/README.md?raw"; diff --git a/plopfile.mjs b/plopfile.mjs index 8cc735b28e..5eaf2b3111 100644 --- a/plopfile.mjs +++ b/plopfile.mjs @@ -17,17 +17,17 @@ export default function (plop) { }, { type: 'add', - path: 'packages/css/src/{{kebabCase name}}/{{kebabCase name}}.scss', + path: 'packages/css/src/components/{{kebabCase name}}/{{kebabCase name}}.scss', templateFile: 'plop-templates/style.scss.hbs', }, { type: 'add', - path: 'packages/css/src/{{kebabCase name}}/README.md', + path: 'packages/css/src/components/{{kebabCase name}}/README.md', templateFile: 'plop-templates/style.docs.md.hbs', }, { type: 'append', - path: 'packages/css/src/index.scss', + path: 'packages/css/src/components/index.scss', pattern: `/* Append here */`, template: `@import "./{{kebabCase name}}/{{kebabCase name}}";`, }, diff --git a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json new file mode 100644 index 0000000000..bfa9049bf7 --- /dev/null +++ b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json @@ -0,0 +1,31 @@ +{ + "amsterdam": { + "link-appearance": { + "color": { "value": "{amsterdam.color.primary-blue}" }, + "text-decoration-thickness": { "value": "0.125rem" }, + "text-underline-offset": { "value": "0.375rem" }, + "hover": { + "color": { "value": "{amsterdam.color.dark-blue}" } + }, + "on-background-dark": { + "color": { "value": "{amsterdam.color.primary-white}" } + }, + "on-background-light": { + "color": { "value": "{amsterdam.color.primary-black}" } + }, + "regular": { + "text-decoration-line": { "value": "underline" }, + "hover": { + "text-decoration-thickness": { "value": "0.1875rem" }, + "text-underline-offset": { "value": "0.3125rem" } + } + }, + "subtle": { + "text-decoration-line": { "value": "none" }, + "hover": { + "text-decoration-line": { "value": "underline" } + } + } + } + } +} diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index b548a32472..87714582e7 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -1,34 +1,20 @@ { "amsterdam": { "breadcrumb": { - "color": { - "value": "{amsterdam.color.primary-blue}" - }, - "font-family": { - "value": "{amsterdam.typography.font-family}" - }, - "font-weight": { - "value": "{amsterdam.typography.font-weight.normal}" + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "separator": { + "background-color": { "value": "{amsterdam.color.primary-blue}" } }, "item-link": { - "outline-offset": { - "value": "{amsterdam.focus.outline-offset}" - }, + "color": { "value": "{amsterdam.link-appearance.color}" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { - "color": { - "value": "{amsterdam.color.dark-blue}" - }, - "box-shadow": { - "value": "inset 0 -2px 0 0 {amsterdam.color.dark-blue}" - } - }, - "focus": { - "color": { - "value": "{amsterdam.color.dark-blue}" - }, - "text-decoration": { - "value": "underline" - } + "color": { "value": "{amsterdam.color.dark-blue}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } } }, "spacious": { diff --git a/proprietary/tokens/src/components/amsterdam/card.tokens.json b/proprietary/tokens/src/components/amsterdam/card.tokens.json index bcd33529c2..bbc37d2fd8 100644 --- a/proprietary/tokens/src/components/amsterdam/card.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/card.tokens.json @@ -2,9 +2,13 @@ "amsterdam": { "card": { "link": { - "color": { "value": "{amsterdam.color.primary-blue}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { - "color": { "value": "{amsterdam.color.dark-blue}" } + "color": { "value": "{amsterdam.link-appearance.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } } }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json index 4eaac30d6a..7439b4c81a 100644 --- a/proprietary/tokens/src/components/amsterdam/link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json @@ -1,22 +1,21 @@ { "amsterdam": { "link": { - "color": { "value": "{amsterdam.color.primary-blue}" }, - "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "hover": { - "color": { "value": "{amsterdam.color.dark-blue}" } + "color": { "value": "{amsterdam.link-appearance.hover.color}" } }, "inline": { - "hover": { - "text-decoration": { "value": "underline" }, - "text-underline-offset": { "value": "3px" } - }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "font-family": { "value": "inherit" }, @@ -26,20 +25,24 @@ "line-height": { "value": "inherit" }, - "text-decoration": { "value": "none" }, - "text-decoration-thickness": { "value": "2px" }, + "hover": { + "text-decoration-thickness": { + "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}" + }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" } + }, "visited": { "color": { "value": "{amsterdam.color.purple}" } } }, "in-list": { "gap": { "value": "0.5em" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { - "text-decoration": { "value": "underline" }, - "text-decoration-thickness": { "value": "2px" }, - "text-underline-offset": { "value": "7px" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } }, - "text-decoration": { "value": "none" }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" }, "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" } @@ -50,11 +53,14 @@ } }, "standalone": { - "text-underline-offset": { "value": "8px" }, - "text-decoration-thickness": { "value": "2px" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { - "text-decoration-thickness": { "value": "3px" }, - "text-underline-offset": { "value": "7px" } + "text-decoration-thickness": { + "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}" + }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" } }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, @@ -66,21 +72,21 @@ } }, "on-background-dark": { - "color": { "value": "{amsterdam.color.primary-white}" }, + "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }, "hover": { - "color": { "value": "{amsterdam.color.primary-white}" } + "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" } }, "visited": { - "color": { "value": "{amsterdam.color.primary-white}" } + "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" } } }, "on-background-light": { - "color": { "value": "{amsterdam.color.primary-black}" }, + "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }, "hover": { - "color": { "value": "{amsterdam.color.primary-black}" } + "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" } }, "visited": { - "color": { "value": "{amsterdam.color.primary-black}" } + "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json index 73b1f14bfd..0626af2b90 100644 --- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json @@ -4,11 +4,14 @@ "column-gap": { "value": "2.5rem" }, "row-gap": { "value": "0.5rem" }, "item": { - "color": { "value": "{amsterdam.color.primary-black}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "gap": { "value": "0.5rem" }, - "text-decoration": { "value": "none" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" }, "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" } @@ -18,8 +21,8 @@ "line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" } }, "hover": { - "color": { "value": "{amsterdam.color.primary-black}" }, - "text-decoration": { "value": "underline" } + "color": { "value": "{amsterdam.link-appearance.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json index 8727cfb69f..b3b6cef8d1 100644 --- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json @@ -1,13 +1,9 @@ { "amsterdam": { "pagination": { - "color": { "value": "{amsterdam.color.primary-blue}" }, - "font-family": { - "value": "{amsterdam.typography.font-family}" - }, - "font-weight": { - "value": "{amsterdam.typography.font-weight.normal}" - }, + "color": { "value": "{amsterdam.link-appearance.color}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }, "line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" } @@ -17,15 +13,17 @@ "line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" } }, "button": { + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "current": { - "font-weight": { - "value": "{amsterdam.typography.font-weight.bold}" - } + "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" } }, "hover": { - "color": { "value": "{amsterdam.color.dark-blue}" } - }, - "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } + "color": { "value": "{amsterdam.link-appearance.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } + } } } } diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json index d77177849b..f772433a64 100644 --- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json @@ -2,15 +2,9 @@ "amsterdam": { "top-task-link": { "description": { - "color": { - "value": "{amsterdam.color.primary-black}" - }, - "font-family": { - "value": "{amsterdam.typography.font-family}" - }, - "font-weight": { - "value": "{amsterdam.typography.font-weight.normal}" - }, + "color": { "value": "{amsterdam.color.primary-black}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" }, "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" } @@ -21,19 +15,15 @@ } }, "label": { - "color": { - "value": "{amsterdam.color.primary-blue}" - }, - "font-family": { - "value": "{amsterdam.typography.font-family}" - }, - "font-weight": { - "value": "{amsterdam.typography.font-weight.bold}" - }, + "color": { "value": "{amsterdam.link-appearance.color}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { - "color": { - "value": "{amsterdam.color.dark-blue}" - } + "color": { "value": "{amsterdam.color.dark-blue}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }, @@ -44,9 +34,7 @@ "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" } } }, - "outline-offset": { - "value": "{amsterdam.focus.outline-offset}" - } + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } } } } diff --git a/storybook/storybook-react/src/Accordion/Accordion.docs.mdx b/storybook/storybook-react/src/Accordion/Accordion.docs.mdx index b43de02ec8..7d2cf58bd1 100644 --- a/storybook/storybook-react/src/Accordion/Accordion.docs.mdx +++ b/storybook/storybook-react/src/Accordion/Accordion.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as AccordionStories from "./Accordion.stories.tsx"; -import README from "../../../../packages/css/src/accordion/README.md?raw"; +import README from "../../../../packages/css/src/components/accordion/README.md?raw"; diff --git a/storybook/storybook-react/src/Alert/Alert.docs.mdx b/storybook/storybook-react/src/Alert/Alert.docs.mdx index 507c714911..37730ed441 100644 --- a/storybook/storybook-react/src/Alert/Alert.docs.mdx +++ b/storybook/storybook-react/src/Alert/Alert.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as AlertStories from "./Alert.stories.tsx"; -import README from "../../../../packages/css/src/alert/README.md?raw"; +import README from "../../../../packages/css/src/components/alert/README.md?raw"; diff --git a/storybook/storybook-react/src/AspectRatio/AspectRatio.docs.mdx b/storybook/storybook-react/src/AspectRatio/AspectRatio.docs.mdx index 5547f45b97..1aea862b0e 100644 --- a/storybook/storybook-react/src/AspectRatio/AspectRatio.docs.mdx +++ b/storybook/storybook-react/src/AspectRatio/AspectRatio.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as AspectRatioStories from "./AspectRatio.stories.tsx"; -import README from "../../../../packages/css/src/aspect-ratio/README.md?raw"; +import README from "../../../../packages/css/src/components/aspect-ratio/README.md?raw"; diff --git a/storybook/storybook-react/src/Blockquote/Blockquote.docs.mdx b/storybook/storybook-react/src/Blockquote/Blockquote.docs.mdx index bae44877d1..a1fb56f12c 100644 --- a/storybook/storybook-react/src/Blockquote/Blockquote.docs.mdx +++ b/storybook/storybook-react/src/Blockquote/Blockquote.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as BlockquoteStories from "./Blockquote.stories.tsx"; -import README from "../../../../packages/css/src/blockquote/README.md?raw"; +import README from "../../../../packages/css/src/components/blockquote/README.md?raw"; diff --git a/storybook/storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx b/storybook/storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx index 643ff294e2..aff2caebee 100644 --- a/storybook/storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx +++ b/storybook/storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx @@ -1,6 +1,6 @@ import { Markdown, Meta, Primary } from "@storybook/blocks"; import * as BreadcrumbStories from "./Breadcrumb.stories.tsx"; -import README from "../../../../packages/css/src/breadcrumb/README.md?raw"; +import README from "../../../../packages/css/src/components/breadcrumb/README.md?raw"; diff --git a/storybook/storybook-react/src/Button/Button.docs.mdx b/storybook/storybook-react/src/Button/Button.docs.mdx index 1b2a6bb74a..64a9d60f7c 100644 --- a/storybook/storybook-react/src/Button/Button.docs.mdx +++ b/storybook/storybook-react/src/Button/Button.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ButtonStories from "./Button.stories.tsx"; -import README from "../../../../packages/css/src/button/README.md?raw"; +import README from "../../../../packages/css/src/components/button/README.md?raw"; diff --git a/storybook/storybook-react/src/Card/Card.docs.mdx b/storybook/storybook-react/src/Card/Card.docs.mdx index 82409d6d03..c185f25a62 100644 --- a/storybook/storybook-react/src/Card/Card.docs.mdx +++ b/storybook/storybook-react/src/Card/Card.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as CardStories from "./Card.stories.tsx"; -import README from "../../../../packages/css/src/card/README.md?raw"; +import README from "../../../../packages/css/src/components/card/README.md?raw"; diff --git a/storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx b/storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx index ff7c074327..30ccbffe68 100644 --- a/storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx +++ b/storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as CheckboxStories from "./Checkbox.stories.tsx"; -import README from "../../../../packages/css/src/checkbox/README.md?raw"; +import README from "../../../../packages/css/src/components/checkbox/README.md?raw"; diff --git a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx index e66babdd53..4054f0fcd0 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx +++ b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as DialogStories from "./Dialog.stories.tsx"; -import README from "../../../../packages/css/src/dialog/README.md?raw"; +import README from "../../../../packages/css/src/components/dialog/README.md?raw"; diff --git a/storybook/storybook-react/src/Footer/Footer.docs.mdx b/storybook/storybook-react/src/Footer/Footer.docs.mdx index 0645874d1d..43f41cd32b 100644 --- a/storybook/storybook-react/src/Footer/Footer.docs.mdx +++ b/storybook/storybook-react/src/Footer/Footer.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as FooterStories from "./Footer.stories.tsx"; -import README from "../../../../packages/css/src/footer/README.md?raw"; +import README from "../../../../packages/css/src/components/footer/README.md?raw"; diff --git a/storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx b/storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx index 7d15969b0c..c87d6f911d 100644 --- a/storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx +++ b/storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as FormLabelStories from "./FormLabel.stories.tsx"; -import README from "../../../../packages/css/src/form-label/README.md?raw"; +import README from "../../../../packages/css/src/components/form-label/README.md?raw"; diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx index d456363419..79b0d33918 100644 --- a/storybook/storybook-react/src/Grid/Grid.docs.mdx +++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; import * as GridStories from "./Grid.stories.tsx"; -import README from "../../../../packages/css/src/grid/README.grid.md?raw"; +import README from "../../../../packages/css/src/components/grid/README.grid.md?raw"; diff --git a/storybook/storybook-react/src/GridCell/GridCell.docs.mdx b/storybook/storybook-react/src/GridCell/GridCell.docs.mdx index 6804ed62f6..1f4eab4b59 100644 --- a/storybook/storybook-react/src/GridCell/GridCell.docs.mdx +++ b/storybook/storybook-react/src/GridCell/GridCell.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as GridCellStories from "./GridCell.stories.tsx"; -import README from "../../../../packages/css/src/grid/README.grid-cell.md?raw"; +import README from "../../../../packages/css/src/components/grid/README.grid-cell.md?raw"; diff --git a/storybook/storybook-react/src/Heading/Heading.docs.mdx b/storybook/storybook-react/src/Heading/Heading.docs.mdx index 340a8c4660..ee9ebe2279 100644 --- a/storybook/storybook-react/src/Heading/Heading.docs.mdx +++ b/storybook/storybook-react/src/Heading/Heading.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as HeadingStories from "./Heading.stories.tsx"; -import README from "../../../../packages/css/src/heading/README.md?raw"; +import README from "../../../../packages/css/src/components/heading/README.md?raw"; diff --git a/storybook/storybook-react/src/Highlight/Highlight.docs.mdx b/storybook/storybook-react/src/Highlight/Highlight.docs.mdx index cfdea721a2..f16e9c86a9 100644 --- a/storybook/storybook-react/src/Highlight/Highlight.docs.mdx +++ b/storybook/storybook-react/src/Highlight/Highlight.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as HighlightStories from "./Highlight.stories.tsx"; -import README from "../../../../packages/css/src/highlight/README.md?raw"; +import README from "../../../../packages/css/src/components/highlight/README.md?raw"; diff --git a/storybook/storybook-react/src/Icon/Icon.docs.mdx b/storybook/storybook-react/src/Icon/Icon.docs.mdx index e30722582e..087836ab99 100644 --- a/storybook/storybook-react/src/Icon/Icon.docs.mdx +++ b/storybook/storybook-react/src/Icon/Icon.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as IconStories from "./Icon.stories.tsx"; -import README from "../../../../packages/css/src/icon/README.md?raw"; +import README from "../../../../packages/css/src/components/icon/README.md?raw"; diff --git a/storybook/storybook-react/src/Image/Image.docs.mdx b/storybook/storybook-react/src/Image/Image.docs.mdx index 359093682a..78ec3e86ea 100644 --- a/storybook/storybook-react/src/Image/Image.docs.mdx +++ b/storybook/storybook-react/src/Image/Image.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ImageStories from "./Image.stories.tsx"; -import README from "../../../../packages/css/src/image/README.md?raw"; +import README from "../../../../packages/css/src/components/image/README.md?raw"; diff --git a/storybook/storybook-react/src/Link/Link.docs.mdx b/storybook/storybook-react/src/Link/Link.docs.mdx index 9a255e9ad9..016a909259 100644 --- a/storybook/storybook-react/src/Link/Link.docs.mdx +++ b/storybook/storybook-react/src/Link/Link.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as LinkStories from "./Link.stories.tsx"; -import README from "../../../../packages/css/src/link/README.md?raw"; +import README from "../../../../packages/css/src/components/link/README.md?raw"; diff --git a/storybook/storybook-react/src/Link/Link.stories.tsx b/storybook/storybook-react/src/Link/Link.stories.tsx index 1231f6e4f0..c058718a02 100644 --- a/storybook/storybook-react/src/Link/Link.stories.tsx +++ b/storybook/storybook-react/src/Link/Link.stories.tsx @@ -22,11 +22,10 @@ const meta = { }, }, onBackground: { - control: { type: 'select', labels: { default: 'default', light: 'light', dark: 'dark' } }, - options: ['default', 'light', 'dark'], + control: { type: 'select', labels: { undefined: 'default', light: 'light', dark: 'dark' } }, + options: [undefined, 'light', 'dark'], table: { category: 'API', - defaultValue: { summary: 'default' }, }, }, variant: { @@ -68,23 +67,20 @@ const meta = { args: { children: 'Linktekst', href: '#', + onBackground: undefined, // Workaround to avoid 'onBackground' being set to an empty function }, } satisfies Meta export default meta -export const Standalone: Story = { - args: { - onBackground: undefined, // Workaround to avoid 'onBackground' being set to an empty function - }, -} +export const Default: Story = {} + +export const Standalone: Story = {} export const Inline: Story = { args: { children: 'typograaf', - href: '#', variant: 'inline', - onBackground: undefined, }, decorators: [ (Story) => ( @@ -97,19 +93,13 @@ export const Inline: Story = { export const InList: Story = { args: { - children: 'Linktekst', - href: '#', variant: 'inList', - onBackground: undefined, }, } export const InListWithIcon: Story = { args: { - children: 'Linktekst', - href: '#', variant: 'inList', - onBackground: undefined, icon: Icons.EmailIcon, }, } diff --git a/storybook/storybook-react/src/Logo/Logo.docs.mdx b/storybook/storybook-react/src/Logo/Logo.docs.mdx index ddd0285322..07614ef939 100644 --- a/storybook/storybook-react/src/Logo/Logo.docs.mdx +++ b/storybook/storybook-react/src/Logo/Logo.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as LogoStories from "./Logo.stories.tsx"; -import README from "../../../../packages/css/src/logo/README.md?raw"; +import README from "../../../../packages/css/src/components/logo/README.md?raw"; diff --git a/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx b/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx index d1ef6e593f..3485b2088b 100644 --- a/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx +++ b/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta } from "@storybook/blocks"; import * as OrderedListStories from "./OrderedList.stories.tsx"; -import README from "../../../../packages/css/src/ordered-list/README.md?raw"; +import README from "../../../../packages/css/src/components/ordered-list/README.md?raw"; diff --git a/storybook/storybook-react/src/PageHeading/PageHeading.docs.mdx b/storybook/storybook-react/src/PageHeading/PageHeading.docs.mdx index 5ab92c89ad..0fa07bfd13 100644 --- a/storybook/storybook-react/src/PageHeading/PageHeading.docs.mdx +++ b/storybook/storybook-react/src/PageHeading/PageHeading.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as PageHeadingStories from "./PageHeading.stories.tsx"; -import README from "../../../../packages/css/src/page-heading/README.md?raw"; +import README from "../../../../packages/css/src/components/page-heading/README.md?raw"; diff --git a/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx b/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx index 894abfa331..b51d93c86b 100644 --- a/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx +++ b/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; import * as PageMenuStories from "./PageMenu.stories.tsx"; -import README from "../../../../packages/css/src/page-menu/README.md?raw"; +import README from "../../../../packages/css/src/components/page-menu/README.md?raw"; diff --git a/storybook/storybook-react/src/Pagination/Pagination.docs.mdx b/storybook/storybook-react/src/Pagination/Pagination.docs.mdx index 7baea8c290..5d6b37723f 100644 --- a/storybook/storybook-react/src/Pagination/Pagination.docs.mdx +++ b/storybook/storybook-react/src/Pagination/Pagination.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as PaginationStories from "./Pagination.stories.tsx"; -import README from "../../../../packages/css/src/pagination/README.md?raw"; +import README from "../../../../packages/css/src/components/pagination/README.md?raw"; diff --git a/storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx b/storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx index 7098140e7d..3ee7b454a1 100644 --- a/storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx +++ b/storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ParagraphStories from "./Paragraph.stories.tsx"; -import README from "../../../../packages/css/src/paragraph/README.md?raw"; +import README from "../../../../packages/css/src/components/paragraph/README.md?raw"; diff --git a/storybook/storybook-react/src/Screen/Screen.docs.mdx b/storybook/storybook-react/src/Screen/Screen.docs.mdx index fe576d7e0c..eb70263af7 100644 --- a/storybook/storybook-react/src/Screen/Screen.docs.mdx +++ b/storybook/storybook-react/src/Screen/Screen.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ScreenStories from "./Screen.stories.tsx"; -import README from "../../../../packages/css/src/screen/README.md?raw"; +import README from "../../../../packages/css/src/components/screen/README.md?raw"; diff --git a/storybook/storybook-react/src/Switch/Switch.docs.mdx b/storybook/storybook-react/src/Switch/Switch.docs.mdx index f6c73e7e6c..0f33f5acca 100644 --- a/storybook/storybook-react/src/Switch/Switch.docs.mdx +++ b/storybook/storybook-react/src/Switch/Switch.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as SwitchStories from "./Switch.stories.tsx"; -import README from "../../../../packages/css/src/switch/README.md?raw"; +import README from "../../../../packages/css/src/components/switch/README.md?raw"; diff --git a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx index e8ba62d4a0..177082eea7 100644 --- a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx +++ b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as TopTaskLinkStories from "./TopTaskLink.stories.tsx"; -import README from "../../../../packages/css/src/top-task-link/README.md?raw"; +import README from "../../../../packages/css/src/components/top-task-link/README.md?raw"; diff --git a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx index 4ee414efb5..b7be8d8514 100644 --- a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx +++ b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx @@ -6,8 +6,6 @@ import { Grid, TopTaskLink } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' -import '@amsterdam/design-system-css/src/top-task-link/top-task-link.scss' - const meta = { title: 'Navigation/Top Task Link', component: TopTaskLink, diff --git a/storybook/storybook-react/src/UnorderedList/UnorderedList.docs.mdx b/storybook/storybook-react/src/UnorderedList/UnorderedList.docs.mdx index cae760cd50..441b035303 100644 --- a/storybook/storybook-react/src/UnorderedList/UnorderedList.docs.mdx +++ b/storybook/storybook-react/src/UnorderedList/UnorderedList.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta } from "@storybook/blocks"; import * as UnorderedListStories from "./UnorderedList.stories.tsx"; -import README from "../../../../packages/css/src/unordered-list/README.md?raw"; +import README from "../../../../packages/css/src/components/unordered-list/README.md?raw"; diff --git a/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.docs.mdx b/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.docs.mdx index 7525aba567..4c8821f1c5 100644 --- a/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.docs.mdx +++ b/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as VisuallyHiddenStories from "./VisuallyHidden.stories.tsx"; -import README from "../../../../packages/css/src/visually-hidden/README.md?raw"; +import README from "../../../../packages/css/src/components/visually-hidden/README.md?raw"; diff --git a/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.stories.tsx b/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.stories.tsx index dcdde95bf3..6b89586a27 100644 --- a/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.stories.tsx +++ b/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.stories.tsx @@ -6,8 +6,6 @@ import { VisuallyHidden } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' -import '@amsterdam/design-system-css/src/visually-hidden/visually-hidden.scss' - const meta = { title: 'Containers/Visually Hidden', component: VisuallyHidden,