Skip to content

Support headings in link-list #1531

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

Merged
merged 2 commits into from
Nov 20, 2025
Merged

Support headings in link-list #1531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6946bdd
Support headings in link-list
oscarcarlstrom Nov 18, 2025
9976090
Remove test file
oscarcarlstrom Nov 18, 2025
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
70 changes: 70 additions & 0 deletions .changeset/brave-windows-tap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
---
"@obosbbl/grunnmuren-react": patch
---

## Breaking Beta change
The `<LinkList>` API has now been refactored to support headings inside link lists.

- `<LinkListItem>` no longer supports link props, the component must now receive a `<Link>` as a child to which link props are passed
- 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">`)


### Before
``` tsx
<LinkList>
<LinkListItem href="/medlem">Les mer</LinkListItem>
<LinkListItem download href="/medlemsvilkar.pdf">
Medlemsvilkår
</LinkListItem>
<LinkListItem
href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
rel="external"
>
Tryg forsikring
</LinkListItem>
</LinkList>
```

### Now
``` tsx
<LinkList>
<LinkListItem>
<Link href="/bolig">Bolig</Link>
</LinkListItem>
<LinkListItem>
<Link href="/bank" download href="/medlemsvilkar.pdf">
Medlemsvilkår
</Link>
</LinkListItem>
<LinkListItem>
<Link
href="/medlem"
href="https://www.tryg.no/forsikringer/fordeler-hos-tryg/bruk-medlemsfordelene-dine/obos/index.html?cmpid=obos_tryggjennomlivet"
rel="external"
>
Tryg forsikring
</Link>
</LinkListItem>
</LinkList>
```

## Use Headings (with links)

``` tsx
<LinkListContainer>
<Heading level={2}>
<Link href="/om">OBOS</Link>
</Heading>
<LinkList>
<LinkListItem>
<Link href="/bolig">Bolig</Link>
</LinkListItem>
<LinkListItem>
<Link href="/bank">Bank</Link>
</LinkListItem>
<LinkListItem>
<Link href="/medlem">Medlem</Link>
</LinkListItem>
</LinkList>
</LinkListContainer>
```
5 changes: 5 additions & 0 deletions .changeset/mean-coats-admire.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@obosbbl/grunnmuren-react": patch
---

Better screen reader support in the `<Link>` component: annonuce external links.
5 changes: 5 additions & 0 deletions .changeset/orange-breads-flow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@obosbbl/grunnmuren-tailwind": patch
---

Styles for headings and icons inside link lists.
Loading