Skip to content

Commit 0f8cd6d

Browse files
Support headings in link-list (#1531)
Refactor the `<LinkList>` API to allow headings within link lists. - `<LinkListItem>` no longer supports link props, the component must now receive a `<Link>` as a child to which link props are passed. This makes for a more consistant and more granualar API. - Extracts all styling from the React implementation of `<LinkList>` to the tailwind package. - Removes the `isExternal` prop from the`<LinkListItem>`. External links are now identified byt the `rel` prop on the `<Link>` child (e.g `<Link rel="external">`). This is more consistent with how we control the `DownloadIcon ` (`download` attribute), and it fits nicely with the `<Link>` API. - The `<Link>` component has also been extended with an internal `_innerWrapper` prop, similar to what we have in `Heading` component. This allows the `<LinkList>` to provide the correct icond for each link. <img width="1058" height="898" alt="Screenshot 2025-11-18 at 13 11 33" src="https://github.com/user-attachments/assets/ebbc0c64-56b4-489e-8e60-712ecc2bafeb" /> <img width="1072" height="1255" alt="Screenshot 2025-11-18 at 13 12 01" src="https://github.com/user-attachments/assets/3326fd11-fabf-4ffd-a34f-cc781371804c" />
1 parent e182020 commit 0f8cd6d

File tree

8 files changed

+510
-165
lines changed

8 files changed

+510
-165
lines changed

.changeset/brave-windows-tap.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
"@obosbbl/grunnmuren-react": patch
3+
---
4+
5+
## Breaking Beta change
6+
The `<LinkList>` API has now been refactored to support headings inside link lists.
7+
8+
- `<LinkListItem>` no longer supports link props, the component must now receive a `<Link>` as a child to which link props are passed
9+
- The `isExternal` prop has been removed `<LinkListItem>`. External links are now identified byt the `rel` prop on the `<Link>` child (e.g `<Link rel="external">`)
10+
11+
12+
### Before
13+
``` tsx
14+
<LinkList>
15+
<LinkListItem href="/medlem">Les mer</LinkListItem>
16+
<LinkListItem download href="/medlemsvilkar.pdf">
17+
Medlemsvilkår
18+
</LinkListItem>
19+
<LinkListItem
20+
href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
21+
rel="external"
22+
>
23+
Tryg forsikring
24+
</LinkListItem>
25+
</LinkList>
26+
```
27+
28+
### Now
29+
``` tsx
30+
<LinkList>
31+
<LinkListItem>
32+
<Link href="/bolig">Bolig</Link>
33+
</LinkListItem>
34+
<LinkListItem>
35+
<Link href="/bank" download href="/medlemsvilkar.pdf">
36+
Medlemsvilkår
37+
</Link>
38+
</LinkListItem>
39+
<LinkListItem>
40+
<Link
41+
href="/medlem"
42+
href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
43+
rel="external"
44+
>
45+
Tryg forsikring
46+
</Link>
47+
</LinkListItem>
48+
</LinkList>
49+
```
50+
51+
## Use Headings (with links)
52+
53+
``` tsx
54+
<LinkListContainer>
55+
<Heading level={2}>
56+
<Link href="/om">OBOS</Link>
57+
</Heading>
58+
<LinkList>
59+
<LinkListItem>
60+
<Link href="/bolig">Bolig</Link>
61+
</LinkListItem>
62+
<LinkListItem>
63+
<Link href="/bank">Bank</Link>
64+
</LinkListItem>
65+
<LinkListItem>
66+
<Link href="/medlem">Medlem</Link>
67+
</LinkListItem>
68+
</LinkList>
69+
</LinkListContainer>
70+
```

.changeset/mean-coats-admire.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@obosbbl/grunnmuren-react": patch
3+
---
4+
5+
Better screen reader support in the `<Link>` component: annonuce external links.

.changeset/orange-breads-flow.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@obosbbl/grunnmuren-tailwind": patch
3+
---
4+
5+
Styles for headings and icons inside link lists.

0 commit comments

Comments
 (0)