Skip to content

Commit

Permalink
docs: button stories english (#2233)
Browse files Browse the repository at this point in the history 
resolves #2229
  • Loading branch information
@eirikbacker
eirikbacker authored Aug 12, 2024
1 parent 5d1fe24 commit 7a1e2c8
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 69 deletions.
16 changes: 8 additions & 8 deletions packages/react/src/components/Button/Button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Knappene kommer i to hovedfarger `accent` og `neutral`. Hvis du har overstyrt fa

En gruppe med knapper bør bruke samme fargevariant. Unntaket er når vi skal tydeliggjøre en handling brukeren ikke kan angre, for eksempel Forkast. Vi skal ikke kombinere andre fargevarianter.

<Canvas of={ButtonStories.KombinereFarger} />
<Canvas of={ButtonStories.CombinedColors} />

<br />

Expand All @@ -81,19 +81,19 @@ En gruppe med knapper bør bruke samme fargevariant. Unntaket er når vi skal ty
Bruk `asChild` dersom du trenger å bruke knappen som en lenke. Vurder først om det er bedre å bruke [`Link`](/docs/komponenter-link--docs)-komponenten.
Du kan lese mer om komposisjon [her](https://www.designsystemet.no/grunnleggende/for-utviklere/komposisjon).

<Canvas of={ButtonStories.KnappSomLenke} />
<Canvas of={ButtonStories.AsLink} />

### Knapp med kun ikon

Knapper med kun ikon bruker vi bare for godt kjente ikoner som Lukk og Slett. Når knappen bare har ikon, må vi ha med en tilgjengelig tekst som forklarer hva knappen gjør. Dette kan legges i `title`, `aria-label` eller i en `Tooltip` som i eksempelet under.

<Canvas of={ButtonStories.BareIkon} />
<Canvas of={ButtonStories.IconOnly} />

### Knapp med tekst og ikon

Når vi bruker ikon sammen med tekst, skal ikonet ha `aria-hidden` slik at teksten ikke blir lest opp av skjermleser to ganger.

<Canvas of={ButtonStories.TekstOgIkon} />
<Canvas of={ButtonStories.TextAndIcon} />

Vi plasserer ikonet til venstre eller høyre for teksten, avhengig av hva knappen kommuniserer og hvor den står i grensesnittet.

Expand All @@ -114,7 +114,7 @@ Når du bruker ikon må du sette størrelsen på ikonet selv. Vi anbefaler å br
| md | 1.5rem |
| lg | 2rem |

<Canvas of={ButtonStories.Ikoner} />
<Canvas of={ButtonStories.IconOnly} />

For knapper med kun ikon anbefaler vi å bruke større ikon:

Expand All @@ -124,21 +124,21 @@ For knapper med kun ikon anbefaler vi å bruke større ikon:
| md | 2rem |
| lg | 2.5rem |

<Canvas of={ButtonStories.Kunikoner} />
<Canvas of={ButtonStories.IconOnly} />

<br />

### Full bredde

Noen ganger ser det best ut når knappen fyller hele bredden. For eksempel i bunnen av en liste.

<Canvas of={ButtonStories.FullBredde} />
<Canvas of={ButtonStories.FullWidth} />

### Last inn

Når vi skal vise brukeren at knappen laster noe, kan vi kombinere knappen med en `spinner`.

<Canvas of={ButtonStories.Lasting} />
<Canvas of={ButtonStories.Loading} />

I eksempelet over har vi brukt `aria-disabled` til å deaktivere knappene. Dette er den anbefalte måten for å vise at en knapp er deaktivert. Da kan den fortsatt få fokus når noen navigerer med tastaturet. Slik vil blant annet skjermlesere og andre hjelpemidler bli informert om at knappen finnes, men ikke er aktiv.

Expand Down
122 changes: 61 additions & 61 deletions packages/react/src/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ Danger.decorators = [
),
];

export const KombinereFarger: StoryFn<typeof Button> = () => (
export const CombinedColors: StoryFn<typeof Button> = () => (
<>
<Button variant='primary' color='neutral'>
Publiser
Expand All @@ -151,9 +151,9 @@ export const KombinereFarger: StoryFn<typeof Button> = () => (
</>
);

KombinereFarger.decorators = [stack];
CombinedColors.decorators = [stack];

export const KnappSomLenke: StoryFn<typeof Button> = () => (
export const AsLink: StoryFn<typeof Button> = () => (
<Button asChild>
<a target='_blank' rel='noreferrer' href='https://www.designsystemet.no'>
Gå til Designsystemet
Expand All @@ -162,55 +162,7 @@ export const KnappSomLenke: StoryFn<typeof Button> = () => (
</Button>
);

export const BareIkon: StoryFn<typeof Button> = () => (
<>
<Tooltip content='Legg til ny'>
<Button
icon={true}
color='neutral'
variant='tertiary'
aria-label='Tertiary med ikon'
>
<PlusCircleIcon fontSize='1.5rem' />
</Button>
</Tooltip>
<Tooltip content='Varslinger'>
<Button
icon={true}
color='neutral'
variant='tertiary'
aria-label='Tertiary med ikon'
>
<BellIcon fontSize='1.5rem' />
</Button>
</Tooltip>
<Tooltip content='Instillinger'>
<Button
icon={true}
color='neutral'
variant='tertiary'
aria-label='Tertiary med ikon'
>
<CogIcon fontSize='1.5rem' />
</Button>
</Tooltip>
</>
);

BareIkon.decorators = [
(Story) => (
<Stack
style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, auto)',
}}
>
<Story />
</Stack>
),
];

export const TekstOgIkon: StoryFn<typeof Button> = () => (
export const TextAndIcon: StoryFn<typeof Button> = () => (
<>
<Button variant='primary' color='neutral'>
Start utfylling
Expand All @@ -223,9 +175,9 @@ export const TekstOgIkon: StoryFn<typeof Button> = () => (
</>
);

TekstOgIkon.decorators = [stack];
TextAndIcon.decorators = [stack];

export const Lasting: StoryFn<typeof Button> = () => (
export const Loading: StoryFn<typeof Button> = () => (
<>
<Button variant='primary' aria-disabled>
<Spinner color='accent' title='loading' size='sm' />
Expand All @@ -242,10 +194,10 @@ export const Lasting: StoryFn<typeof Button> = () => (
</>
);

Lasting.decorators = [stack];
Loading.decorators = [stack];

export const FullBredde: Story = {
name: 'Full bredde',
export const FullWidth: Story = {
name: 'Full Width',
args: {
children: (
<>
Expand All @@ -262,7 +214,7 @@ export const FullBredde: Story = {
},
};

export const Ikoner: StoryFn<typeof Button> = () => (
export const Icons: StoryFn<typeof Button> = () => (
<>
<Button variant='primary' size='sm'>
<CogIcon fontSize='1rem' />
Expand All @@ -279,9 +231,57 @@ export const Ikoner: StoryFn<typeof Button> = () => (
</>
);

Ikoner.decorators = [stack];
Icons.decorators = [stack];

export const IconOnly: StoryFn<typeof Button> = () => (
<>
<Tooltip content='Legg til ny'>
<Button
icon={true}
color='neutral'
variant='tertiary'
aria-label='Tertiary med ikon'
>
<PlusCircleIcon fontSize='1.5rem' />
</Button>
</Tooltip>
<Tooltip content='Varslinger'>
<Button
icon={true}
color='neutral'
variant='tertiary'
aria-label='Tertiary med ikon'
>
<BellIcon fontSize='1.5rem' />
</Button>
</Tooltip>
<Tooltip content='Instillinger'>
<Button
icon={true}
color='neutral'
variant='tertiary'
aria-label='Tertiary med ikon'
>
<CogIcon fontSize='1.5rem' />
</Button>
</Tooltip>
</>
);

IconOnly.decorators = [
(Story) => (
<Stack
style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, auto)',
}}
>
<Story />
</Stack>
),
];

export const Kunikoner: StoryFn<typeof Button> = () => (
export const IconsOnlyPrimary: StoryFn<typeof Button> = () => (
<>
<Button icon={true} variant='primary' size='sm'>
<CogIcon fontSize='1.5rem' />
Expand All @@ -295,4 +295,4 @@ export const Kunikoner: StoryFn<typeof Button> = () => (
</>
);

Kunikoner.decorators = [stack];
IconsOnlyPrimary.decorators = [stack];

0 comments on commit 7a1e2c8

Please sign in to comment.