From f8751716018d4ed269a086e1764741ad29714fa0 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 7 Feb 2024 11:30:07 +0100 Subject: [PATCH] feat: Hyphenate headings and other large text components (#1056) Co-authored-by: Vincent Smedinga Co-authored-by: Aram Limpens --- packages/css/src/common/hyphenation.scss | 5 +++++ .../css/src/components/blockquote/blockquote.scss | 3 +++ packages/css/src/components/dialog/dialog.scss | 6 ++++-- .../css/src/components/form-label/form-label.scss | 3 +++ packages/css/src/components/heading/heading.scss | 3 +++ .../css/src/components/link-list/link-list.scss | 4 ++++ .../src/components/page-heading/page-heading.scss | 3 +++ .../src/components/top-task-link/top-task-link.scss | 5 ++++- .../src/common/amsterdam/hyphenation.tokens.json | 9 +++++++++ .../src/components/amsterdam/alert.tokens.json | 13 ------------- storybook/storybook-react/config/preview.tsx | 9 +++++++++ 11 files changed, 47 insertions(+), 16 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..39b1e8e04c --- /dev/null +++ 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 index 66454349d4..d2f4f27e7f 100644 --- 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 index 0bd07ed798..7bc27b00b2 100644 --- 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 index 42d25c826e..e133db8ab6 100644 --- 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 index 37b3bac8e4..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; @@ -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 index 5b4de63200..5b44f0072d 100644 --- 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 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..2394e04ce9 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; @@ -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 new file mode 100644 index 0000000000..9007b3bafb --- /dev/null +++ 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 index db1dd174e3..2bea7441b3 100644 --- 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 index e142042e0e..b2a9360236 100644 --- 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) => ( +
+ +
+ ), +] + export const parameters = { actions: { argTypesRegex: '^on[A-Z].*',