feat: Add common link tokens and use them in all link-like components (…

…#814)

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 <package-name>`. 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. <!-- TODO: is there a workaround for this? -->
+- Run `npm link <package-name>`. 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. <!-- TODO: is there a workaround for this? -->
 - Sometimes the local link is severed. Run `npm link @amsterdam/...` again if this happens.
 
 ## Licensing

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": {

packages/css/src/breadcrumb/breadcrumb.scss → packages/css/src/components/breadcrumb/breadcrumb.scss

@@ -33,35 +33,34 @@
   @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;
   }
 
   &: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);
   }
 }

packages/css/src/button/button.scss → 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%;

packages/css/src/card/card.scss → 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);
   }
 }

packages/css/src/dialog/dialog.scss → 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);

packages/css/src/grid/grid-cell.scss → 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;

packages/css/src/grid/grid.scss → 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);

packages/css/src/link/link.scss → 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);
-  }
-}

packages/css/src/page-menu/README.md → 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.

packages/css/src/page-menu/page-menu.scss → 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,

packages/css/src/pagination/pagination.scss → 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 {

packages/css/src/top-task-link/top-task-link.scss → 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 {

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)

packages/react/src/Breadcrumb/Breadcrumb.tsx

@@ -31,8 +31,8 @@ export interface BreadcrumbItemProps extends PropsWithChildren<HTMLAttributes<HT
 const BreadcrumbItem = forwardRef(
   ({ children, href, ...restProps }: BreadcrumbItemProps, ref: ForwardedRef<HTMLLIElement>) => {
     return (
-      <li {...restProps} className="amsterdam-breadcrumb-item" ref={ref}>
-        <a className="amsterdam-breadcrumb-item__link" href={href}>
+      <li {...restProps} className="amsterdam-breadcrumb__item" ref={ref}>
+        <a className="amsterdam-breadcrumb__link" href={href}>
           {children}
         </a>
       </li>

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";
 
 <Meta of={{curlyBefore}}{{pascalCase name}}Stories} />
 

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}}";`,
       },

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" }
+        }
+      }
+    }
+  }
+}

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": {

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}" }