Feature/typography

.changeset/shy-crews-admire.md

@@ -0,0 +1,12 @@
+---
+"@obosbbl/grunnmuren-tailwind": major
+---
+
+Updated typography design.
+
+* BREAKING: Deprecate `.h1`, `.h2`, `.h3` and `.h4` classes
+* Add heading classes with "t-shirt sizes": `.heading-xl`, `.heading-l`, `.heading-m`, `.heading-s` and `.heading-xs`
+* Add classes: `.paragraph`, `.lead`, `.blockquote` and `.description` 
+New design on `<h1>`-`<h4>` for both utility classes and prose.
+* Update lineheight and fontsize for all typograhpy
+* Update `.prose` class with new typography.

.github/workflows/main.yml

@@ -27,9 +27,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d # v3.0.0
-        with:
-          version: 9
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v4
         with:

.github/workflows/release.yml

@@ -27,9 +27,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v3
-        with:
-          version: 9
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

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

@@ -1,18 +1,127 @@
 import type { Meta } from '@storybook/react';
 
-const meta: Meta = {
-  title: 'Typography',
+export const Default = () => {
+  return (
+    <div className="grid gap-8">
+      <h1 className="heading-xl">Grunnmuren</h1>
+      <p className="lead">Grunnmuren er designsystemet til OBOS.</p>
+      <h2 className="heading-l">Typografi i Grunnmuren</h2>
+      <p className="paragraph">
+        Typografien i Grunnmuren defineres av tailwind-klasser. Denne teksten
+        har for eksempel klassen <code>paragraph</code>.
+      </p>
+      <h3 className="heading-m">Sitater</h3>
+      <p className="paragraph">
+        Lengre sitater kan framheves med klassen <code>blockquote</code>:
+      </p>
+      <blockquote className="blockquote">
+        Typografi er grunnmuren i all visuell kommunikasjon; den bærer
+        budskapets vekt og gir strukturen vi bygger vår forståelse på.
+      </blockquote>
+      <h3 className="heading-m">Bildetekster</h3>
+      <p className="paragraph">
+        Klassen <code>description</code> kan f.eks. brukes for bildetekster:
+      </p>
+      <figure>
+        <img
+          className="mb-4 max-w-96 bg-blue-dark p-4"
+          src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/q_auto/v1619689575/OBOS%20Merkevare/OBOS/Liggende/obos_liggende_hus_hvit.svg"
+          alt="OBOS logo"
+        />
+        <figcaption className="description">
+          OBOS sin logo har hvit tekst, og bildet må derfor ha en mørk bakgrunn.
+          Slik at man kan se hva det står.
+        </figcaption>
+      </figure>
+    </div>
+  );
 };
 
-export default meta;
+export const Headings = () => {
+  return (
+    <>
+      <h1 className="heading-xl">Overskrift nivå 1 (XL)</h1>
+      <h2 className="heading-l">Overskrift nivå 2 (L)</h2>
+      <h3 className="heading-m">Overskrift nivå 3 (M)</h3>
+      <h4 className="heading-s">Overskrift nivå 4 (S)</h4>
+      <h5 className="heading-xs">Overskrift nivå 5 (XS)</h5>
+    </>
+  );
+};
+
+export const Lead = () => (
+  <p className="lead">
+    Dokumentavgift er en avgift som du må betale til staten når du kjøper en
+    fast eiendom.
+  </p>
+);
 
-export const Icons = () => {
+export const Body = () => {
   return (
-    <div className="flex flex-col gap-4">
-      <h1 className="h1">This is a H1 heading</h1>
-      <h2 className="h2">This is a H2 heading</h2>
-      <h3 className="h3">This is a H3 heading</h3>
-      <h4 className="h4">This is a H4 heading</h4>
-    </div>
+    <>
+      <p className="paragraph">
+        Mange opplever at prisvekst og rentehevinger har fått store konsekvenser
+        for økonomien. Førstegangskjøpere og de som tjener mindre, sliter med å
+        komme seg inn på boligmarkedet.
+      </p>
+      <p className="paragraph">
+        – Det er et tøft boligmarked, og med de prisene det er på bolig i Oslo,
+        virket det nesten umulig å komme inn på markedet. Jeg var på noen
+        visninger, men det ble enten for lite eller for gammelt og slitt,
+        forteller boligkjøper Brita (30).
+      </p>
+    </>
   );
 };
+
+export const Blockquote = () => (
+  <blockquote className="blockquote">
+    Typografi er grunnmuren i all visuell kommunikasjon; den bærer budskapets
+    vekt og gir strukturen vi bygger vår forståelse på.
+  </blockquote>
+);
+
+export const Description = () => (
+  <figcaption className="description">
+    Lav møblering gjør at rommet oppleves større. Zen Milano-sengen er fra
+    Bohus, mens Soft Serve-lampen er fra Moniker.
+  </figcaption>
+);
+
+export const Prose = () => (
+  <div className="prose container-prose my-12 md:my-20" id="main">
+    <h1 className="text-center">Woops!</h1>
+
+    <p className="lead text-center">Nå er det noe som er galt her.</p>
+
+    <p className="text-center">
+      Sidene på fluks.obosblockwatne.no er dessverre ikke tilgjengelige akkurat
+      nå. De digitale bygningsarbeiderne våre jobber på spreng for å fikse
+      feilen, og vanligvis er sidene oppe og går igjen i løpet av kort tid.
+      Nedenfor finner du kontaktinformasjon.
+    </p>
+
+    <h2>Kontakt Fluks — OBOS Block Watne</h2>
+
+    <blockquote>
+      Det er et tøft boligmarked, og med de prisene det er på bolig i Oslo,
+      virket det nesten umulig å komme inn på markedet. Jeg var på noen
+      visninger, men det ble enten for lite eller for gammelt og slitt
+    </blockquote>
+
+    <p>
+      Telefon: <a href="tel:23246000">+47 23 24 60 00</a>
+    </p>
+    <p>
+      E-post: <a href="mailto:obw.flukspost@obos.no">obw.flukspost@obos.no</a>
+    </p>
+
+    <p className="description">Ved stor pågang vil det være noe ventetid.</p>
+  </div>
+);
+
+const meta: Meta = {
+  title: 'Typography',
+};
+
+export default meta;

packages/react/src/checkbox/Checkbox.tsx

@@ -9,7 +9,6 @@ import {
 import { Check as CheckIcon } from '@obosbbl/grunnmuren-icons-react';
 
 import { ErrorMessage } from '../label/ErrorMessage';
-import { descriptionClasses } from '../label/Description';
 
 const defaultClasses = cx([
   '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>) {
           <div
             id={descriptionId}
             slot="description"
-            className={cx('block', descriptionClasses)}
+            className="description block"
           >
             {description}
           </div>

packages/react/src/label/Description.tsx

@@ -3,17 +3,15 @@ import { Text, type TextProps } from 'react-aria-components';
 
 type DescriptionProps = TextProps;
 
-const descriptionClasses = 'text-sm font-light leading-6';
-
 function Description(props: DescriptionProps) {
   const { className, ...restProps } = props;
 
   return (
     <Text
       {...restProps}
-      className={cx(className, descriptionClasses)}
+      className={cx(className, 'description')}
       slot="description"
     />
   );
 }
-export { Description, type DescriptionProps, descriptionClasses };
+export { Description, type DescriptionProps };