Skip to content

Commit 6482fad

Browse files
oscarcarlstromoscarcarlstrom
authored
New typography design (#832)
1 parent 434f7bf commit 6482fad

File tree

7 files changed

+357
-51
lines changed

7 files changed

+357
-51
lines changed

‎.changeset/shy-crews-admire.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@obosbbl/grunnmuren-tailwind": major
3+
---
4+
5+
Updated typography design.
6+
7+
* BREAKING: Deprecate `.h1`, `.h2`, `.h3` and `.h4` classes
8+
* Add heading classes with "t-shirt sizes": `.heading-xl`, `.heading-l`, `.heading-m`, `.heading-s` and `.heading-xs`
9+
* Add classes: `.paragraph`, `.lead`, `.blockquote` and `.description`
10+
New design on `<h1>`-`<h4>` for both utility classes and prose.
11+
* Update lineheight and fontsize for all typograhpy
12+
* Update `.prose` class with new typography.

‎.github/workflows/main.yml

+1-3
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@ jobs:
2727

2828
steps:
2929
- uses: actions/checkout@v4
30-
- uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d # v3.0.0
31-
with:
32-
version: 9
30+
- uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
3331
- name: Use Node.js ${{ matrix.node-version }}
3432
uses: actions/setup-node@v4
3533
with:

‎.github/workflows/release.yml

+1-3
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@ jobs:
2727
with:
2828
fetch-depth: 0
2929

30-
- uses: pnpm/action-setup@v3
31-
with:
32-
version: 9
30+
- uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
3331

3432
- name: Setup Node.js
3533
uses: actions/setup-node@v4

‎packages/react/src/__stories__/Typography.stories.tsx

+119-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,127 @@
11
import type { Meta } from '@storybook/react';
22

3-
const meta: Meta = {
4-
title: 'Typography',
3+
export const Default = () => {
4+
return (
5+
<div className="grid gap-8">
6+
<h1 className="heading-xl">Grunnmuren</h1>
7+
<p className="lead">Grunnmuren er designsystemet til OBOS.</p>
8+
<h2 className="heading-l">Typografi i Grunnmuren</h2>
9+
<p className="paragraph">
10+
Typografien i Grunnmuren defineres av tailwind-klasser. Denne teksten
11+
har for eksempel klassen <code>paragraph</code>.
12+
</p>
13+
<h3 className="heading-m">Sitater</h3>
14+
<p className="paragraph">
15+
Lengre sitater kan framheves med klassen <code>blockquote</code>:
16+
</p>
17+
<blockquote className="blockquote">
18+
Typografi er grunnmuren i all visuell kommunikasjon; den bærer
19+
budskapets vekt og gir strukturen vi bygger vår forståelse på.
20+
</blockquote>
21+
<h3 className="heading-m">Bildetekster</h3>
22+
<p className="paragraph">
23+
Klassen <code>description</code> kan f.eks. brukes for bildetekster:
24+
</p>
25+
<figure>
26+
<img
27+
className="mb-4 max-w-96 bg-blue-dark p-4"
28+
src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/q_auto/v1619689575/OBOS%20Merkevare/OBOS/Liggende/obos_liggende_hus_hvit.svg"
29+
alt="OBOS logo"
30+
/>
31+
<figcaption className="description">
32+
OBOS sin logo har hvit tekst, og bildet må derfor ha en mørk bakgrunn.
33+
Slik at man kan se hva det står.
34+
</figcaption>
35+
</figure>
36+
</div>
37+
);
538
};
639

7-
export default meta;
40+
export const Headings = () => {
41+
return (
42+
<>
43+
<h1 className="heading-xl">Overskrift nivå 1 (XL)</h1>
44+
<h2 className="heading-l">Overskrift nivå 2 (L)</h2>
45+
<h3 className="heading-m">Overskrift nivå 3 (M)</h3>
46+
<h4 className="heading-s">Overskrift nivå 4 (S)</h4>
47+
<h5 className="heading-xs">Overskrift nivå 5 (XS)</h5>
48+
</>
49+
);
50+
};
51+
52+
export const Lead = () => (
53+
<p className="lead">
54+
Dokumentavgift er en avgift som du må betale til staten når du kjøper en
55+
fast eiendom.
56+
</p>
57+
);
858

9-
export const Icons = () => {
59+
export const Body = () => {
1060
return (
11-
<div className="flex flex-col gap-4">
12-
<h1 className="h1">This is a H1 heading</h1>
13-
<h2 className="h2">This is a H2 heading</h2>
14-
<h3 className="h3">This is a H3 heading</h3>
15-
<h4 className="h4">This is a H4 heading</h4>
16-
</div>
61+
<>
62+
<p className="paragraph">
63+
Mange opplever at prisvekst og rentehevinger har fått store konsekvenser
64+
for økonomien. Førstegangskjøpere og de som tjener mindre, sliter med å
65+
komme seg inn på boligmarkedet.
66+
</p>
67+
<p className="paragraph">
68+
– Det er et tøft boligmarked, og med de prisene det er på bolig i Oslo,
69+
virket det nesten umulig å komme inn på markedet. Jeg var på noen
70+
visninger, men det ble enten for lite eller for gammelt og slitt,
71+
forteller boligkjøper Brita (30).
72+
</p>
73+
</>
1774
);
1875
};
76+
77+
export const Blockquote = () => (
78+
<blockquote className="blockquote">
79+
Typografi er grunnmuren i all visuell kommunikasjon; den bærer budskapets
80+
vekt og gir strukturen vi bygger vår forståelse på.
81+
</blockquote>
82+
);
83+
84+
export const Description = () => (
85+
<figcaption className="description">
86+
Lav møblering gjør at rommet oppleves større. Zen Milano-sengen er fra
87+
Bohus, mens Soft Serve-lampen er fra Moniker.
88+
</figcaption>
89+
);
90+
91+
export const Prose = () => (
92+
<div className="prose container-prose my-12 md:my-20" id="main">
93+
<h1 className="text-center">Woops!</h1>
94+
95+
<p className="lead text-center">Nå er det noe som er galt her.</p>
96+
97+
<p className="text-center">
98+
Sidene på fluks.obosblockwatne.no er dessverre ikke tilgjengelige akkurat
99+
nå. De digitale bygningsarbeiderne våre jobber på spreng for å fikse
100+
feilen, og vanligvis er sidene oppe og går igjen i løpet av kort tid.
101+
Nedenfor finner du kontaktinformasjon.
102+
</p>
103+
104+
<h2>Kontakt Fluks — OBOS Block Watne</h2>
105+
106+
<blockquote>
107+
Det er et tøft boligmarked, og med de prisene det er på bolig i Oslo,
108+
virket det nesten umulig å komme inn på markedet. Jeg var på noen
109+
visninger, men det ble enten for lite eller for gammelt og slitt
110+
</blockquote>
111+
112+
<p>
113+
Telefon: <a href="tel:23246000">+47 23 24 60 00</a>
114+
</p>
115+
<p>
116+
E-post: <a href="mailto:obw.flukspost@obos.no">obw.flukspost@obos.no</a>
117+
</p>
118+
119+
<p className="description">Ved stor pågang vil det være noe ventetid.</p>
120+
</div>
121+
);
122+
123+
const meta: Meta = {
124+
title: 'Typography',
125+
};
126+
127+
export default meta;

‎packages/react/src/checkbox/Checkbox.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
import { Check as CheckIcon } from '@obosbbl/grunnmuren-icons-react';
1010

1111
import { ErrorMessage } from '../label/ErrorMessage';
12-
import { descriptionClasses } from '../label/Description';
1312

1413
const defaultClasses = cx([
1514
'group relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7',
@@ -100,7 +99,7 @@ function Checkbox(props: CheckboxProps, ref: Ref<HTMLLabelElement>) {
10099
<div
101100
id={descriptionId}
102101
slot="description"
103-
className={cx('block', descriptionClasses)}
102+
className="description block"
104103
>
105104
{description}
106105
</div>

‎packages/react/src/label/Description.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,15 @@ import { Text, type TextProps } from 'react-aria-components';
33

44
type DescriptionProps = TextProps;
55

6-
const descriptionClasses = 'text-sm font-light leading-6';
7-
86
function Description(props: DescriptionProps) {
97
const { className, ...restProps } = props;
108

119
return (
1210
<Text
1311
{...restProps}
14-
className={cx(className, descriptionClasses)}
12+
className={cx(className, 'description')}
1513
slot="description"
1614
/>
1715
);
1816
}
19-
export { Description, type DescriptionProps, descriptionClasses };
17+
export { Description, type DescriptionProps };

0 commit comments

Comments
 (0)