Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Hyphenate headings and other large text components #1056

Merged
merged 15 commits into from
Feb 7, 2024
Merged

feat: Hyphenate headings and other large text components #1056

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
95423b2
Lenteveld CSS for headings
dlnr Jan 26, 2024
ff88525
Hyphenation mixin and deleted lines rule
dlnr Jan 26, 2024
670f9c6
Blockquote hyphenate
dlnr Jan 26, 2024
19e7588
Resolved feedback
dlnr Jan 29, 2024
84e8a29
Merge branch 'develop' of https://github.com/Amsterdam/design-system …
dlnr Jan 29, 2024
bfdec89
Remove unused alert title tokens
VincentSmedinga Jan 31, 2024
34cdeda
Hyphenate form labels
VincentSmedinga Jan 31, 2024
a281848
Fix token call in top task link stylesheet
VincentSmedinga Jan 31, 2024
38de555
Remove word-break from hyphenation mixin
VincentSmedinga Jan 31, 2024
9734faf
Set language to Dutch for Canvas and Stories
VincentSmedinga Jan 31, 2024
c4553b2
Set language to Dutch for Canvas and Stories
alimpens Jan 31, 2024
f1f312a
Hyphenate dialog titles and large link list links
VincentSmedinga Jan 31, 2024
0b16904
Merge branch 'develop' into feature/DES-515-long-words
VincentSmedinga Jan 31, 2024
4247ddd
Wrap stories in div with correct language
alimpens Feb 4, 2024
caa8414
Merge branch 'develop' into feature/DES-515-long-words
VincentSmedinga Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/css/src/common/hyphenation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@mixin hyphenation {
hyphenate-limit-chars: var(--amsterdam-hyphenation-hyphenate-limit-chars);
hyphens: var(--amsterdam-hyphenation-hyphens);
overflow-wrap: var(--amsterdam-hyphenation-overflow-wrap);
word-break: var(--amsterdam-hyphenation-word-break);
}
3 changes: 3 additions & 0 deletions packages/css/src/components/blockquote/blockquote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../common/hyphenation";

@mixin reset {
box-sizing: border-box;
margin-block: 0;
Expand Down Expand Up @@ -32,6 +34,7 @@
line-height: var(--amsterdam-blockquote-spacious-line-height);
}

@include hyphenation;
@include reset;
}

Expand Down
3 changes: 3 additions & 0 deletions packages/css/src/components/heading/heading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../common/hyphenation";

@mixin reset {
box-sizing: border-box;
margin-block: 0;
Expand All @@ -16,6 +18,7 @@
font-family: var(--amsterdam-heading-font-family);
font-weight: var(--amsterdam-heading-font-weight);

@include hyphenation;
@include reset;
}

Expand Down
3 changes: 3 additions & 0 deletions packages/css/src/components/page-heading/page-heading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../common/hyphenation";

@mixin reset {
box-sizing: border-box;
margin-block: 0;
Expand All @@ -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 & {
Expand Down
3 changes: 3 additions & 0 deletions packages/css/src/components/top-task-link/top-task-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* Copyright (c) 2023 Gemeente Amsterdam
*/

@import "../../common/hyphenation";

.amsterdam-top-task-link {
break-inside: avoid;
display: flex;
Expand Down Expand Up @@ -32,6 +34,7 @@
line-height: var(--amsterdam-top-task-link-label-compact-line-height);
}

@include hyphenation;
alimpens marked this conversation as resolved.
Show resolved Hide resolved
@include reset;
}

Expand Down
10 changes: 10 additions & 0 deletions proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"amsterdam": {
"hyphenation": {
"hyphenate-limit-chars": { "value": "12 8 4" },
"hyphens": { "value": "auto" },
"overflow-wrap": { "value": "break-word" },
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
"word-break": { "value": "auto-phrase" }
alimpens marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
Loading