From ff88525d422601aae832125c18eb03fd7e4cd757 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 26 Jan 2024 15:44:41 +0100
Subject: [PATCH] Hyphenation mixin and deleted lines rule

---
 packages/css/src/common/hyphenation.scss              |  6 ++++++
 packages/css/src/components/heading/heading.scss      |  8 +++-----
 .../css/src/components/page-heading/page-heading.scss |  3 +++
 .../src/components/top-task-link/top-task-link.scss   |  3 +++
 .../src/common/amsterdam/hyphenation.tokens.json      | 11 +++++++++++
 5 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 packages/css/src/common/hyphenation.scss
 create mode 100644 proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json

diff --git a/packages/css/src/common/hyphenation.scss b/packages/css/src/common/hyphenation.scss
new file mode 100644
index 0000000000..4dcd6907dc
--- /dev/null
+++ b/packages/css/src/common/hyphenation.scss
@@ -0,0 +1,6 @@
+@mixin hyphenation {
+  hyphenate-limit-chars: 12 8 4;
+  hyphens: auto;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
index a565c64e2c..0118f0ef8c 100644
--- 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;
@@ -15,12 +17,8 @@
   color: var(--amsterdam-heading-color);
   font-family: var(--amsterdam-heading-font-family);
   font-weight: var(--amsterdam-heading-font-weight);
-  hyphenate-limit-chars: 12 8 4;
-  hyphenate-limit-lines: 2;
-  hyphens: auto;
-  overflow-wrap: break-word;
-  word-break: break-word;
 
+  @include hyphenation;
   @include reset;
 }
 
diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss
index cdd11e568b..7297367571 100644
--- 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
index aea15fb1ac..0f95700e4b 100644
--- 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;
@@ -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
new file mode 100644
index 0000000000..589ab086a9
--- /dev/null
+++ b/proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json
@@ -0,0 +1,11 @@
+{
+  "amsterdam": {
+    "hyphenation": {
+      "hyphenate-limit-chars": { "value": "12 8 4" },
+      "hyphenate-limit-lines": { "value": "2" },
+      "hyphens": { "value": "auto" },
+      "overflow-wrap": { "value": "break-word" },
+      "word-break": { "value": "break-word" }
+    }
+  }
+}