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

[draft] chore(ffe-buttons-react): Forbedring av dokumentasjon på knappene is storybook. #2502

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

[draft] chore(ffe-buttons-react): Forbedring av dokumentasjon på knappene is storybook. #2502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
47 changes: 34 additions & 13 deletions packages/ffe-buttons-react/src/ActionButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,58 @@ import React from 'react';
import { ActionButton } from './ActionButton';
import type { StoryObj, Meta } from '@storybook/react';

const Custom: React.FC<React.ComponentProps<'a'>> = props => (
<a {...props}>
{`Custom `}
{props.children}
</a>
);

const meta: Meta<typeof ActionButton<any>> = {
title: 'Komponenter/Buttons/ActionButton',
component: ActionButton,
parameters: {
docs: {
description: {
component:
'ActionButton er en knapp som brukes for å trigge en handling.',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jeg prøvde meg litt frem her. Egentlig så skal storybook støtte at denne ligger i docstringen til komponenten, men ser ikke ut til at det fungerer når vi bruker mdx filer.

Jeg klarer ikke å se hvor denne docstringen dukker opp i den bygde storybooken?

Det er jo en beskrivelse og i .mdx fila for actionbutton?

},
},
},
argTypes: {
as: {
options: ['a', 'button', 'custom'],
description: 'HTML-elementet som skal brukes',
options: ['button'],
mapping: {
'': 'a',
a: 'a',
'': 'button',
button: 'button',
custom: Custom,
},
},
isLoading: {
description: 'Viser en spinner når knappen laster',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disse beskrivelsene kan vel og legges på propnivå og storybook fanger det opp? så er det nærmere komponenten

control: 'boolean',
},
ariaLoadingMessage: {
description:
'Tekst som leses opp av skjermleser når knappen laster',
},
},
};
export default meta;

type Story = StoryObj<typeof ActionButton<any>>;

const buttonArgs = {
ariaLoadingMessage: 'Vennligst vent...',
isLoading: false,
};

export const Standard: Story = {
args: {
...buttonArgs,
as: 'button',
ariaLoadingMessage: 'Vennligst vent...',
isLoading: false,
},
render: args => <ActionButton {...args}>Actionknapp</ActionButton>,
};

export const Loading: Story = {
args: {
...buttonArgs,
as: 'button',
isLoading: true,
},
render: args => <ActionButton {...args}>Laster inn...</ActionButton>,
};
37 changes: 25 additions & 12 deletions packages/ffe-buttons-react/src/BackButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@ import React from 'react';
import { BackButton } from './BackButton';
import type { StoryObj, Meta } from '@storybook/react';

const Custom: React.FC<React.ComponentProps<'a'>> = props => (
<a {...props}>
{`Custom `}
{props.children}
</a>
);

const meta: Meta<typeof BackButton<any>> = {
title: 'Komponenter/Buttons/BackButton',
component: BackButton,
parameters: {
docs: {
description: {
component:
'BackButton brukes for å navigere tilbake til forrige side eller visning. Den har et innebygd tilbake-ikon.',
},
},
},
argTypes: {
as: {
options: ['a', 'button', 'custom'],
description: 'HTML-elementet som skal brukes',
options: ['button'],
mapping: {
'': 'a',
a: 'a',
'': 'button',
button: 'button',
custom: Custom,
},
},
},
Expand All @@ -28,9 +28,22 @@ export default meta;

type Story = StoryObj<typeof BackButton<any>>;

const buttonArgs = {
as: 'button',
};

export const Standard: Story = {
args: {
as: 'a',
...buttonArgs,
},
render: args => <BackButton {...args}>Tilbake</BackButton>,
};

export const WithCustomText: Story = {
args: {
...buttonArgs,
},
render: args => (
<BackButton {...args}>Gå tilbake til oversikten</BackButton>
),
};
55 changes: 54 additions & 1 deletion packages/ffe-buttons-react/src/ButtonGroup.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,37 @@ import type { StoryObj, Meta } from '@storybook/react';
const meta: Meta<typeof ButtonGroup> = {
title: 'Komponenter/Buttons/ButtonGroup',
component: ButtonGroup,
parameters: {
docs: {
description: {
component:
'ButtonGroup brukes for å gruppere relaterte knapper sammen. Den sørger for riktig spacing mellom knappene og korrekt visuell presentasjon.',
},
},
},
argTypes: {
thin: {
description: 'Reduserer avstanden mellom knappene',
control: 'boolean',
},
ariaLabel: {
description: 'Beskrivende tekst for skjermlesere',
control: 'text',
},
},
};
export default meta;

type Story = StoryObj<typeof ButtonGroup>;

const groupArgs = {
ariaLabel: 'Knappegruppe',
thin: false,
};

export const Standard: Story = {
args: {
ariaLabel: 'Knappegruppe',
...groupArgs,
},
render: args => (
<ButtonGroup {...args}>
Expand All @@ -25,3 +48,33 @@ export const Standard: Story = {
</ButtonGroup>
),
};

export const ThinSpacing: Story = {
args: {
...groupArgs,
thin: true,
},
render: args => (
<ButtonGroup {...args}>
<SecondaryButton>Nei</SecondaryButton>
<PrimaryButton>Ja</PrimaryButton>
</ButtonGroup>
),
};

export const WithLoadingState: Story = {
args: {
...groupArgs,
},
render: args => (
<ButtonGroup {...args}>
<SecondaryButton>Tilbake</SecondaryButton>
<PrimaryButton
isLoading={true}
ariaLoadingMessage="Sender inn skjema"
>
Send inn
</PrimaryButton>
</ButtonGroup>
),
};
152 changes: 142 additions & 10 deletions packages/ffe-buttons-react/src/ExpandButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,164 @@
import React, { useState } from 'react';
import type { StoryObj, Meta } from '@storybook/react';
import { ExpandButton } from './ExpandButton';
import { Paragraph } from '@sb1/ffe-core-react';

const meta: Meta<typeof ExpandButton> = {
title: 'Komponenter/Buttons/ExpandButton',
component: ExpandButton,
argTypes: {},
parameters: {
docs: {
description: {
component:
'ExpandButton er en knapp som brukes for å vise eller skjule innhold. Den har et innebygd ekspander-ikon som roterer når innholdet vises eller skjules.',
},
},
},
argTypes: {
as: {
description: 'HTML-elementet som skal brukes',
options: ['button'],
mapping: {
'': 'button',
button: 'button',
},
},
isExpanded: {
description: 'Angir om innholdet er ekspandert',
control: 'boolean',
},
onClick: {
description: 'Callback-funksjon som kalles når knappen klikkes',
},
},
};
export default meta;

type Story = StoryObj<typeof ExpandButton>;

const buttonArgs = {
isExpanded: false,
as: 'button',
};

export const Standard: Story = {
args: {
isExpanded: false,
as: 'button',
...buttonArgs,
},
render: function Render(args) {
const [isExpanded, setExpanded] = useState(args.isExpanded);

return (
<div>
<ExpandButton
{...args}
isExpanded={isExpanded}
onClick={() => setExpanded(!isExpanded)}
>
{isExpanded ? 'Vis mindre' : 'Vis mer'}
</ExpandButton>
{isExpanded && (
<Paragraph>
Dette er innholdet som vises når knappen er ekspandert.
Du kan legge til så mye innhold du vil her.
</Paragraph>
)}
</div>
);
},
};

export const MedVilkår: Story = {
args: {
...buttonArgs,
},
render: function Render(args) {
const [isExpanded, setExpanded] = useState(args.isExpanded);

return (
<div>
<Paragraph>
Ved å fortsette godtar du våre vilkår for behandling av
personopplysninger.
</Paragraph>
<ExpandButton
{...args}
isExpanded={isExpanded}
onClick={() => setExpanded(!isExpanded)}
>
{isExpanded ? 'Skjul vilkår' : 'Les vilkårene'}
</ExpandButton>
{isExpanded && (
<div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
<Paragraph>
<strong>
Vilkår for behandling av personopplysninger:
</strong>
</Paragraph>
<Paragraph>
1. Vi behandler dine personopplysninger for å kunne
gi deg best mulig tjenester og kundeopplevelse.
</Paragraph>
<Paragraph>
2. Dine opplysninger blir lagret sikkert og deles
kun med tredjeparter når det er nødvendig for å
levere tjenesten.
</Paragraph>
<Paragraph>
3. Du har rett til innsyn i dine personopplysninger
og kan når som helst be om å få dem slettet.
</Paragraph>
</div>
)}
</div>
);
},
};

export const MedDetaljer: Story = {
args: {
...buttonArgs,
},
render: function Render(args) {
const [isExpanded, setExpanded] = useState(args.isExpanded);

return (
<ExpandButton
{...args}
isExpanded={isExpanded}
onClick={() => setExpanded(!isExpanded)}
>
Vis mer
</ExpandButton>
<div>
<div
style={{
padding: '1rem',
backgroundColor: '#f8f8f8',
borderRadius: '4px',
marginBottom: isExpanded ? '0' : '1rem',
}}
>
<Paragraph style={{ margin: 0 }}>
<strong>Totalt å betale: 1.250 kr</strong>
</Paragraph>
</div>
{isExpanded && (
<div
style={{
padding: '1rem',
backgroundColor: '#f8f8f8',
borderBottomLeftRadius: '4px',
borderBottomRightRadius: '4px',
marginTop: '-4px',
}}
>
<Paragraph>Månedspris: 1.000 kr</Paragraph>
<Paragraph>Gebyr: 150 kr</Paragraph>
<Paragraph>Fakturagebyr: 100 kr</Paragraph>
</div>
)}
<ExpandButton
{...args}
isExpanded={isExpanded}
onClick={() => setExpanded(!isExpanded)}
>
{isExpanded ? 'Skjul prisdetaljer' : 'Vis prisdetaljer'}
</ExpandButton>
</div>
);
},
};
Loading
Loading