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

fix(Breadcrumbs): css and api alignment #2428

Merged
merged 11 commits into from
Sep 18, 2024
Merged

fix(Breadcrumbs): css and api alignment #2428

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a01fa1a
fix(Breadcrumbs): css and api alignment
eirikbacker Sep 17, 2024
2d244eb
Create swift-forks-drop.md
eirikbacker Sep 17, 2024
2a407d4
Merge branch 'next' into fix/breadcrumbs-css-and-api
eirikbacker Sep 17, 2024
b625f5e
Merge branch 'next' into fix/breadcrumbs-css-and-api
eirikbacker Sep 17, 2024
be93ffb
Merge branch 'next' into fix/breadcrumbs-css-and-api
eirikbacker Sep 17, 2024
dafbf8a
fix(Breadcrumbs): add size
eirikbacker Sep 17, 2024
cc6e4dc
fix(Breadcrumbs): remove redundant display contents
eirikbacker Sep 17, 2024
c135931
Merge branch 'next' into fix/breadcrumbs-css-and-api
eirikbacker Sep 17, 2024
afeb09e
Merge branch 'next' into fix/breadcrumbs-css-and-api
eirikbacker Sep 17, 2024
1bfe83b
Merge branch 'next' into fix/breadcrumbs-css-and-api
eirikbacker Sep 17, 2024
bc7682e
Update .changeset/swift-forks-drop.md
eirikbacker Sep 18, 2024
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
6 changes: 6 additions & 0 deletions .changeset/swift-forks-drop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@digdir/designsystemet-css": patch
"@digdir/designsystemet-react": patch
---

Breadcrumbs: Rename Breadcrumbs.Root to Breadcrumbs and remove Breadcrumbs.Nav
105 changes: 49 additions & 56 deletions packages/css/breadcrumbs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,65 @@
.ds-breadcrumbs {
--dsc-breadcrumbs-spacing: var(--ds-spacing-2);
--dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
--dsc-breadcrumbs-link-color: inherit;
}

.ds-breadcrumbs--sm {
--dsc-breadcrumbs-spacing: var(--ds-spacing-1);
--dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
}

.ds-breadcrumbs--md {
--dsc-breadcrumbs-spacing: var(--ds-spacing-2);
--dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
}
display: contents;

.ds-breadcrumbs--lg {
--dsc-breadcrumbs-spacing: var(--ds-spacing-3);
--dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
}
&[data-size='sm'] {
--dsc-breadcrumbs-spacing: var(--ds-spacing-1);
--dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
}

.ds-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
padding: 0;
gap: var(--dsc-breadcrumbs-spacing) 0;
}
&[data-size='lg'] {
--dsc-breadcrumbs-spacing: var(--ds-spacing-3);
--dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
}

.ds-breadcrumbs__item:where(:not(:last-child))::after,
.ds-breadcrumbs > .ds-breadcrumbs__link::before {
background: currentcolor;
content: '';
display: inline-block;
height: var(--dsc-breadcrumbs-chevron-size);
margin-inline: var(--dsc-breadcrumbs-spacing);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")
50% / contain no-repeat;
vertical-align: middle;
width: var(--dsc-breadcrumbs-chevron-size);
}
& > :is(ol, ul) {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
padding: 0;
gap: var(--dsc-breadcrumbs-spacing) 0;
}

/* When link is direct child of Breadcrumbs, make it back button */
.ds-breadcrumbs > .ds-breadcrumbs__link::before {
margin: 0;
rotate: 180deg;
}
& a:not(:focus-visible) {
color: inherit;
}

.ds-breadcrumbs__link {
--dsc-link-color: var(--dsc-breadcrumbs-link-color);
--dsc-link-color-visited: var(--dsc-breadcrumbs-link-color);
}
& a[aria-current='page'] {
text-decoration: none;
}

.ds-breadcrumbs__link[aria-current='page'] {
text-decoration: none;
}
/* Draw chevron between items and before back link */
& li:where(:not(:last-child))::after,
& > :not(ol, ul)::before {
background: currentcolor;
content: '';
display: inline-block;
height: var(--dsc-breadcrumbs-chevron-size);
margin-inline: var(--dsc-breadcrumbs-spacing);
mask: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
vertical-align: middle;
width: var(--dsc-breadcrumbs-chevron-size);
}

.ds-breadcrumbs > .ds-breadcrumbs__link:where(:not(:only-child)) {
display: none;
}
/* When link is direct child of Breadcrumbs, make it back button */
& > :not(ol, ul)::before {
margin: 0;
rotate: 180deg;
}

@media (max-width: 650px) {
.ds-breadcrumbs > .ds-breadcrumbs__nav:where(:not(:only-child)) {
display: none;
@media (max-width: 650px) {
& > :is(ol, ul):not(:only-child) {
display: none; /* Hide list when mobile and having back link */
}
}

.ds-breadcrumbs > .ds-breadcrumbs__link {
display: block;
width: fit-content;
@media (min-width: 651px) {
& > :not(ol, ul) {
display: none; /* Hide back link when desktop and having list */
}
}
}
28 changes: 13 additions & 15 deletions packages/react/src/components/Breadcrumbs/Breadcrumbs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,38 +17,36 @@ hvor de er i en struktur, for eksempel på en nettside. Da kan de lettere bytte
Den siste lenken i brødsmulestien blir automatisk markert med `aria-current="page"`.

```tsx
<Breadcrumbs.Root>
<Breadcrumbs aria-label="Du er her:">
<Breadcrumbs.Link aria-label="Tilbake til nivå 3">Nivå 3</Breadcrumbs.Link>
<Breadcrumbs.Nav aria-label="Du er her:">
<Breadcrumbs.List>
<Breadcrumbs.Item>
<Breadcrumbs.Link href="https://designsystemet.no/">Nivå 1</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href="https://designsystemet.no/niva-2/">Nivå 2</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Nav>
</Breadcrumbs.Root>
<Breadcrumbs.List>
<Breadcrumbs.Item>
<Breadcrumbs.Link href="https://designsystemet.no/">Nivå 1</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href="https://designsystemet.no/niva-2/">Nivå 2</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs>
```

## Varianter av `Breadcrumb`

### Kun tilbake-knapp

Hvis du legger en `Breadcrumbs.Link` som direkte barn av `Breadcrumbs.Root`, vil denne lenken vises som en tilbake-knapp. Det er viktig at du er konsistent i din løsning og bruker enten tilbake-knapp eller sti.
Hvis du legger en `Breadcrumbs.Link` som direkte barn av `Breadcrumbs`, vil denne lenken vises som en tilbake-knapp. Det er viktig at du er konsistent i din løsning og bruker enten tilbake-knapp eller sti.

<Canvas of={BreadcrumbsStories.BackOnly} />

### Kun sti

Hvis du legger en `Breadcrumbs.List` som direkte barn av `Breadcrumbs.Root`, vil denne vises som en sti.
Hvis du legger en `Breadcrumbs.List` som direkte barn av `Breadcrumbs`, vil denne vises som en sti.

<Canvas of={BreadcrumbsStories.ListOnly} />

### Både sti på desktop og tilbake-knapp på mobil

Hvis du legger både en `Breadcrumbs.Link` som direkte barn av `Breadcrumbs.Root` og en `Breadcrumbs.List`, vil tilbake-knapp vises på mobil, og sti vises på desktop.
Hvis du legger både en `Breadcrumbs.Link` som direkte barn av `Breadcrumbs` og en `Breadcrumbs.List`, vil tilbake-knapp vises på mobil, og sti vises på desktop.

<Canvas of={BreadcrumbsStories.Preview} />

Expand Down
168 changes: 80 additions & 88 deletions packages/react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@ import { Breadcrumbs } from '.';

export default {
title: 'Komponenter/Breadcrumbs',
component: Breadcrumbs.Root,
component: Breadcrumbs,
args: {
size: 'md',
},
} as Meta;

export const Preview: StoryFn<typeof Breadcrumbs.Root> = (args) => (
<Breadcrumbs.Root {...args}>
<Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 3'>
Nivå 3
</Breadcrumbs.Link>
<Breadcrumbs.Nav aria-label='Du er her:'>
export const Preview: StoryFn<typeof Breadcrumbs> = (args) => (
<>
<Breadcrumbs aria-label='Du er her:' {...args}>
<Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 3'>
Nivå 3
</Breadcrumbs.Link>
<Breadcrumbs.List>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
Expand All @@ -30,107 +30,99 @@ export const Preview: StoryFn<typeof Breadcrumbs.Root> = (args) => (
<Breadcrumbs.Link href='#'>Nivå 4</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Nav>
</Breadcrumbs.Root>
</Breadcrumbs>
</>
);

export const ListOnly: StoryFn<typeof Breadcrumbs.Root> = (args) => (
<Breadcrumbs.Root size='md'>
<Breadcrumbs.Nav aria-label='Du er her:'>
<Breadcrumbs.List>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 4</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Nav>
</Breadcrumbs.Root>
export const ListOnly: StoryFn<typeof Breadcrumbs> = (args) => (
<Breadcrumbs aria-label='Du er her:' size='md'>
<Breadcrumbs.List>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 4</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs>
);

export const BackOnly: StoryFn<typeof Breadcrumbs.Root> = (args) => (
<Breadcrumbs.Root size='md'>
export const BackOnly: StoryFn<typeof Breadcrumbs> = (args) => (
<Breadcrumbs>
<Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 3'>
Nivå 3
</Breadcrumbs.Link>
</Breadcrumbs.Root>
</Breadcrumbs>
);

export const LongItems: StoryFn<typeof Breadcrumbs.Root> = (args) => (
<Breadcrumbs.Root {...args}>
export const LongItems: StoryFn<typeof Breadcrumbs> = (args) => (
<Breadcrumbs {...args}>
<Breadcrumbs.Link
href='#'
aria-label='Tilbake til helsesertifikat for sjømat'
>
Slik søker du om helsesertifikat for sjømat
</Breadcrumbs.Link>
<Breadcrumbs.Nav>
<Breadcrumbs.List aria-label='Du er her:'>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Hjem</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Eksport til land utenfor EU/EØS
</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Eksport av mat og drikke</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Eksport av fisk og sjømat
</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Veiledning om helsesertifikat for sjømat
</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Slik søker du om helsesertifikat for sjømat
</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Slik søker du om helsesertifikat i ny eksportløsning
</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Nav>
</Breadcrumbs.Root>
<Breadcrumbs.List aria-label='Du er her:'>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Hjem</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Eksport til land utenfor EU/EØS
</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Eksport av mat og drikke</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Eksport av fisk og sjømat</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Veiledning om helsesertifikat for sjømat
</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Slik søker du om helsesertifikat for sjømat
</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>
Slik søker du om helsesertifikat i ny eksportløsning
</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs>
);

export const MobileViewport: StoryFn<typeof Breadcrumbs.Root> = (args) => (
<Breadcrumbs.Root {...args}>
export const MobileViewport: StoryFn<typeof Breadcrumbs> = (args) => (
<Breadcrumbs aria-label='Du er her:' {...args}>
<Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 3'>
Nivå 3
</Breadcrumbs.Link>
<Breadcrumbs.Nav aria-label='Du er her:'>
<Breadcrumbs.List>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 4</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs.Nav>
</Breadcrumbs.Root>
<Breadcrumbs.List>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 3</Breadcrumbs.Link>
</Breadcrumbs.Item>
<Breadcrumbs.Item>
<Breadcrumbs.Link href='#'>Nivå 4</Breadcrumbs.Link>
</Breadcrumbs.Item>
</Breadcrumbs.List>
</Breadcrumbs>
);

MobileViewport.parameters = {
Expand Down
Loading
Loading