feat: Hyphenate headings and other large text components (#1056)

Co-authored-by: Vincent Smedinga <[email protected]> Co-authored-by: Aram Limpens <[email protected]>
Amsterdam · Feb 7, 2024 · f875171 · f875171
1 parent b9b5078
commit f875171
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 16 deletions.
diff --git a/packages/css/src/common/hyphenation.scss b/packages/css/src/common/hyphenation.scss
@@ -0,0 +1,5 @@
+@mixin hyphenation {
+  hyphenate-limit-chars: var(--amsterdam-hyphenation-hyphenate-limit-chars);
+  hyphens: var(--amsterdam-hyphenation-hyphens);
+  overflow-wrap: var(--amsterdam-hyphenation-overflow-wrap);
+}
diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -32,6 +34,7 @@
     line-height: var(--amsterdam-blockquote-spacious-line-height);
   }
 
+  @include hyphenation;
   @include reset;
 }
 

diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss
@@ -4,6 +4,7 @@
  */
 
 @import "../../common/breakpoint";
+@import "../../common/hyphenation";
 
 .amsterdam-dialog {
   background-color: var(--amsterdam-dialog-background-color);
@@ -56,12 +57,13 @@
   font-weight: var(--amsterdam-dialog-title-font-weight);
   line-height: var(--amsterdam-dialog-title-spacious-line-height);
 
+  @include hyphenation;
+  @include reset;
+
   .amsterdam-theme--compact & {
     font-size: var(--amsterdam-dialog-title-compact-font-size);
     line-height: var(--amsterdam-dialog-title-compact-line-height);
   }
-
-  @include reset;
 }
 
 .amsterdam-dialog__footer {

diff --git a/packages/css/src/components/form-label/form-label.scss b/packages/css/src/components/form-label/form-label.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
@@ -14,6 +16,7 @@
   font-weight: var(--amsterdam-form-label-font-weight);
   line-height: var(--amsterdam-form-label-spacious-line-height);
 
+  @include hyphenation;
   @include reset;
 
   .amsterdam-theme--compact & {

diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,6 +18,7 @@
   font-family: var(--amsterdam-heading-font-family);
   font-weight: var(--amsterdam-heading-font-weight);
 
+  @include hyphenation;
   @include reset;
 }
 

diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2024 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset-list {
   box-sizing: border-box;
   list-style: none;
@@ -57,6 +59,8 @@
   font-size: var(--amsterdam-link-list-link-spacious-large-font-size);
   line-height: var(--amsterdam-link-list-link-spacious-large-line-height);
 
+  @include hyphenation;
+
   .amsterdam-theme--compact & {
     font-size: var(--amsterdam-link-list-link-compact-large-font-size);
     line-height: var(--amsterdam-link-list-link-compact-large-line-height);

diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -18,6 +20,7 @@
   font-weight: var(--amsterdam-page-heading-font-weight);
   line-height: var(--amsterdam-page-heading-spacious-line-height);
 
+  @include hyphenation;
   @include reset;
 
   .amsterdam-theme--compact & {

diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 .amsterdam-top-task-link {
   break-inside: avoid;
   display: flex;
@@ -22,7 +24,7 @@
   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-line-height);
+  line-height: var(--amsterdam-top-task-link-label-spacious-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);
@@ -32,6 +34,7 @@
     line-height: var(--amsterdam-top-task-link-label-compact-line-height);
   }
 
+  @include hyphenation;
   @include reset;
 }
 

diff --git a/proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json b/proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json
@@ -0,0 +1,9 @@
+{
+  "amsterdam": {
+    "hyphenation": {
+      "hyphenate-limit-chars": { "value": "12 8 4" },
+      "hyphens": { "value": "auto" },
+      "overflow-wrap": { "value": "break-word" }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/amsterdam/alert.tokens.json b/proprietary/tokens/src/components/amsterdam/alert.tokens.json
@@ -8,19 +8,6 @@
       "padding-block-end": { "value": "{amsterdam.spacing.inset.md}" },
       "padding-inline-start": { "value": "{amsterdam.spacing.inset.lg}" },
       "padding-inline-end": { "value": "{amsterdam.spacing.inset.lg}" },
-      "title": {
-        "color": { "value": "{amsterdam.color.primary-black}" },
-        "font-family": { "value": "{amsterdam.typography.font-family}" },
-        "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-        "spacious": {
-          "font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" }
-        },
-        "compact": {
-          "font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" },
-          "line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" }
-        }
-      },
       "error": {
         "border-color": { "value": "{amsterdam.color.primary-red}" }
       },

diff --git a/storybook/storybook-react/config/preview.tsx b/storybook/storybook-react/config/preview.tsx
@@ -4,6 +4,15 @@ import '@amsterdam/design-system-css/dist/index.css'
 import '../../storybook-overrides.css'
 import { viewports } from './viewports'
 
+// Set language to Dutch for Canvas and Stories
+export const decorators = [
+  (Story: any) => (
+    <div lang="nl">
+      <Story />
+    </div>
+  ),
+]
+
 export const parameters = {
   actions: {
     argTypesRegex: '^on[A-Z].*',