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!: Update line heights and text levels #898

Merged
merged 8 commits into from
Dec 8, 2023
Merged

feat!: Update line heights and text levels #898

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
aab727a
Update line heights
VincentSmedinga Dec 6, 2023
7dc97e8
Merge text levels 4 and 5
VincentSmedinga Dec 6, 2023
98ab725
Allow level 5 and 6 sizes for Heading
VincentSmedinga Dec 6, 2023
01a2753
Remove icon class names for level 7
VincentSmedinga Dec 7, 2023
408ba11
Merge branch 'develop' into feature/DES-534-update-line-heights-and-t…
VincentSmedinga Dec 8, 2023
5093807
Realign icon in link vertically
VincentSmedinga Dec 8, 2023
1d86ad1
Enlarge form label
VincentSmedinga Dec 8, 2023
2469809
Realign icon in pagination vertically
VincentSmedinga Dec 8, 2023
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
20 changes: 20 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 @@ -59,6 +59,26 @@
}
}

.amsterdam-heading--5 {
font-size: var(--amsterdam-heading-spacious-level-5-font-size);
line-height: var(--amsterdam-heading-spacious-level-5-line-height);

.amsterdam-theme--compact & {
font-size: var(--amsterdam-heading-compact-level-5-font-size);
line-height: var(--amsterdam-heading-compact-level-5-line-height);
}
}

.amsterdam-heading--6 {
font-size: var(--amsterdam-heading-spacious-level-6-font-size);
line-height: var(--amsterdam-heading-spacious-level-6-line-height);

.amsterdam-theme--compact & {
font-size: var(--amsterdam-heading-compact-level-6-font-size);
line-height: var(--amsterdam-heading-compact-level-6-line-height);
}
}

.amsterdam-heading--inverse-color {
color: var(--amsterdam-heading-inverse-color);
}
18 changes: 0 additions & 18 deletions packages/css/src/components/icon/icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,6 @@
width: var(--amsterdam-icon-spacious-size-6-font-size);
}

.amsterdam-icon--size-7 {
height: calc(var(--amsterdam-icon-spacious-size-7-font-size) * var(--amsterdam-icon-spacious-size-7-line-height));
}

.amsterdam-icon--size-7 svg {
height: var(--amsterdam-icon-spacious-size-7-font-size);
width: var(--amsterdam-icon-spacious-size-7-font-size);
}

.amsterdam-theme--compact {
.amsterdam-icon--size-3 {
height: calc(var(--amsterdam-icon-compact-size-3-font-size) * var(--amsterdam-icon-compact-size-3-line-height));
Expand Down Expand Up @@ -93,13 +84,4 @@
height: var(--amsterdam-icon-compact-size-6-font-size);
width: var(--amsterdam-icon-compact-size-6-font-size);
}

.amsterdam-icon--size-7 {
height: calc(var(--amsterdam-icon-compact-size-7-font-size) * var(--amsterdam-icon-compact-size-7-line-height));
}

.amsterdam-icon--size-7 svg {
height: var(--amsterdam-icon-compact-size-7-font-size);
width: var(--amsterdam-icon-compact-size-7-font-size);
}
}
12 changes: 12 additions & 0 deletions packages/react/src/Heading/Heading.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ describe('Heading', () => {
<Heading size="level-2">Size level 2</Heading>
<Heading size="level-3">Size level 3</Heading>
<Heading size="level-4">Size level 4</Heading>
<Heading size="level-5">Size level 5</Heading>
<Heading size="level-6">Size level 6</Heading>
</>,
)

Expand All @@ -85,11 +87,21 @@ describe('Heading', () => {
name: 'Size level 4',
level: 1,
})
const sizeLevel5 = screen.getByRole('heading', {
name: 'Size level 5',
level: 1,
})
const sizeLevel6 = screen.getByRole('heading', {
name: 'Size level 6',
level: 1,
})

expect(sizeLevel1).toHaveClass('amsterdam-heading--1')
expect(sizeLevel2).toHaveClass('amsterdam-heading--2')
expect(sizeLevel3).toHaveClass('amsterdam-heading--3')
expect(sizeLevel4).toHaveClass('amsterdam-heading--4')
expect(sizeLevel5).toHaveClass('amsterdam-heading--5')
expect(sizeLevel6).toHaveClass('amsterdam-heading--6')
})

it('renders the right inverse color class', () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/Heading/Heading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import clsx from 'clsx'
import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'

export type HeadingLevel = 1 | 2 | 3 | 4
type Size = 'level-1' | 'level-2' | 'level-3' | 'level-4'
type HeadingSize = 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6'

export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
/**
Expand All @@ -19,7 +19,7 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
* De visuele grootte van de titel.
* Voeg dit toe om de titel groter of kleiner weer te geven zonder de semantische betekenis te veranderen.
*/
size?: Size
size?: HeadingSize
/**
* De kleur van de titel
* Gebruik deze property om de titel in tegenovergestelde kleur te tonen.
Expand Down
2 changes: 0 additions & 2 deletions packages/react/src/Icon/Icon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,11 @@ describe('Icon', () => {
const { container: level4 } = render(<Icon svg={AlertIcon} size="level-4" />)
const { container: level5 } = render(<Icon svg={AlertIcon} size="level-5" />)
const { container: level6 } = render(<Icon svg={AlertIcon} size="level-6" />)
const { container: level7 } = render(<Icon svg={AlertIcon} size="level-7" />)

expect(level3.firstChild).toHaveClass('amsterdam-icon--size-3')
expect(level4.firstChild).toHaveClass('amsterdam-icon--size-4')
expect(level5.firstChild).toHaveClass('amsterdam-icon--size-5')
expect(level6.firstChild).toHaveClass('amsterdam-icon--size-6')
expect(level7.firstChild).toHaveClass('amsterdam-icon--size-7')
})

it('renders an additional class name', () => {
Expand Down
3 changes: 1 addition & 2 deletions packages/react/src/Icon/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import clsx from 'clsx'
import { ForwardedRef, forwardRef, HTMLAttributes } from 'react'

export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
size?: 'level-3' | 'level-4' | 'level-5' | 'level-6' | 'level-7'
size?: 'level-3' | 'level-4' | 'level-5' | 'level-6'
svg: Function
}

Expand All @@ -23,7 +23,6 @@ export const Icon = forwardRef(
size === 'level-4' && 'amsterdam-icon--size-4',
size === 'level-5' && 'amsterdam-icon--size-5',
size === 'level-6' && 'amsterdam-icon--size-6',
size === 'level-7' && 'amsterdam-icon--size-7',
className,
)}
{...otherProps}
Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/PageMenu/PageMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const PageMenuLink = forwardRef(
<li className="amsterdam-page-menu__item">
<a {...restProps} ref={ref} className="amsterdam-page-menu__link">
{children}
{icon && <Icon svg={icon} size="level-7" />}
{icon && <Icon svg={icon} size="level-6" />}
</a>
</li>
)
Expand All @@ -70,7 +70,7 @@ const PageMenuButton = forwardRef(
<li className="amsterdam-page-menu__item">
<button {...restProps} type="button" ref={ref} className="amsterdam-page-menu__button">
{children}
{icon && <Icon svg={icon} size="level-7" />}
{icon && <Icon svg={icon} size="level-6" />}
</button>
</li>
)
Expand Down
28 changes: 10 additions & 18 deletions proprietary/tokens/src/brand/amsterdam/typography.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,29 @@
"text-level": {
"0": {
"font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" },
"line-height": { "value": "1.1" }
"line-height": { "value": "1.15" }
},
"1": {
"font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" },
"line-height": { "value": "1.2" }
},
"2": {
"font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" },
"line-height": { "value": "1.3" }
"line-height": { "value": "1.25" }
},
"3": {
"font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" },
"line-height": { "value": "1.4" }
"line-height": { "value": "1.3" }
},
"4": {
"font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
"line-height": { "value": "1.4" }
},
"5": {
"font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" },
"line-height": { "value": "1.5" }
},
"6": {
"5": {
"font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" },
"line-height": { "value": "1.6" }
},
"7": {
"6": {
"font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" },
"line-height": { "value": "1.6" }
}
Expand All @@ -46,33 +42,29 @@
"text-level": {
"0": {
"font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" },
"line-height": { "value": "1.1" }
"line-height": { "value": "1.15" }
},
"1": {
"font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" },
"line-height": { "value": "1.2" }
},
"2": {
"font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" },
"line-height": { "value": "1.3" }
"line-height": { "value": "1.25" }
},
"3": {
"font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" },
"line-height": { "value": "1.4" }
"line-height": { "value": "1.3" }
},
"4": {
"font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
"line-height": { "value": "1.4" }
},
"5": {
"font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" },
"line-height": { "value": "1.5" }
},
"6": {
"5": {
"font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" },
"line-height": { "value": "1.6" }
},
"7": {
"6": {
"font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" },
"line-height": { "value": "1.6" }
}
Expand Down
8 changes: 4 additions & 4 deletions proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@
}
},
"spacious": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
},
"compact": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions proprietary/tokens/src/components/amsterdam/button.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
"amsterdam": {
"button": {
"spacious": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
"font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
"font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
},
"secondary": {
"box-shadow": { "value": "inset 0 0 0 2px {amsterdam.color.primary-blue}" },
Expand Down
8 changes: 4 additions & 4 deletions proprietary/tokens/src/components/amsterdam/checkbox.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,12 @@
},
"outline-offset": { "value": "{amsterdam.focus.outline-offset}" },
"spacious": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
"font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
"font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions proprietary/tokens/src/components/amsterdam/form-label.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
"font-family": { "value": "{amsterdam.typography.font-family}" },
"font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
"spacious": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
alimpens marked this conversation as resolved.
Show resolved Hide resolved
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
},
"compact": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
}
}
}
Expand Down
16 changes: 16 additions & 0 deletions proprietary/tokens/src/components/amsterdam/heading.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@
"level-4": {
"line-height": { "value": "{amsterdam.typography.spacious.text-level.4.line-height}" },
"font-size": { "value": "{amsterdam.typography.spacious.text-level.4.font-size}" }
},
"level-5": {
"line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" },
"font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" }
},
"level-6": {
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" },
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" }
}
},
"compact": {
Expand All @@ -39,6 +47,14 @@
"level-4": {
"line-height": { "value": "{amsterdam.typography.compact.text-level.4.line-height}" },
"font-size": { "value": "{amsterdam.typography.compact.text-level.4.font-size}" }
},
"level-5": {
"line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" },
"font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" }
},
"level-6": {
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" },
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" }
}
}
}
Expand Down
8 changes: 0 additions & 8 deletions proprietary/tokens/src/components/amsterdam/icon.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@
"size-6": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
},
"size-7": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" }
}
},
"compact": {
Expand All @@ -39,10 +35,6 @@
"size-6": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
},
"size-7": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.7.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.7.line-height}" }
}
}
}
Expand Down
16 changes: 8 additions & 8 deletions proprietary/tokens/src/components/amsterdam/link.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@
"text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }
},
"spacious": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
"font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
"font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
}
},
"standalone": {
Expand All @@ -53,12 +53,12 @@
"text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" }
},
"spacious": {
"font-size": { "value": "{amsterdam.typography.spacious.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.6.line-height}" }
"font-size": { "value": "{amsterdam.typography.spacious.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.spacious.text-level.5.line-height}" }
},
"compact": {
"font-size": { "value": "{amsterdam.typography.compact.text-level.6.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.6.line-height}" }
"font-size": { "value": "{amsterdam.typography.compact.text-level.5.font-size}" },
"line-height": { "value": "{amsterdam.typography.compact.text-level.5.line-height}" }
}
},
"on-background-dark": {
Expand Down
Loading