Merge pull request #2304 from SpareBank1/develop_ffe-form-storybook

docs(ffe-form-react): storybook examples

packages/ffe-form-react/src/Checkbox.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Checkbox } from './Checkbox';
+import type { StoryObj, Meta } from '@storybook/react';
+
+const meta: Meta<typeof Checkbox> = {
+    title: 'components/form/Checkbox',
+    component: Checkbox,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Standard: Story = {
+    args: {
+        noMargins: false,
+        hiddenLabel: false,
+        inline: false,
+        onColoredBg: false,
+    },
+    render: args => (
+        <fieldset className="ffe-input-group">
+            <legend className="ffe-form-label ffe-form-label--block">
+                Hvilke aviser leser du?
+            </legend>
+            <Checkbox {...args} name="newspapers" value="vg">
+                VG
+            </Checkbox>
+        </fieldset>
+    ),
+};

packages/ffe-form-react/src/Checkbox.tsx

@@ -7,6 +7,7 @@ export interface CheckboxProps
     noMargins?: boolean;
     /** If you plan to render the checkbox without a visible label */
     hiddenLabel?: boolean;
+    /** Display inline */
     inline?: boolean;
     children:
         | React.ReactNode

packages/ffe-form-react/src/Input.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Input } from './Input';
+import { InputGroup } from './InputGroup';
+import type { StoryObj, Meta } from '@storybook/react';
+
+const meta: Meta<typeof Input> = {
+    title: 'components/form/Input',
+    component: Input,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Standard: Story = {
+    args: {
+        inline: false,
+        textRightAlign: false,
+    },
+    render: args => (
+        <InputGroup label="Navn">
+            <Input {...args} />
+        </InputGroup>
+    ),
+};

packages/ffe-form-react/src/InputGroup.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Input } from './Input';
+import { InputGroup } from './InputGroup';
+import type { StoryObj, Meta } from '@storybook/react';
+
+const meta: Meta<typeof InputGroup> = {
+    title: 'components/form/InputGroup',
+    component: InputGroup,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof InputGroup>;
+
+export const Standard: Story = {
+    args: {
+        label: 'Navn',
+    },
+    render: args => (
+        <InputGroup {...args}>
+            <Input />
+        </InputGroup>
+    ),
+};

packages/ffe-form-react/src/InputTextLike.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { Paragraph } from '@sb1/ffe-core-react';
+import { InputTextLike } from './InputTextLike';
+
+const meta: Meta<typeof InputTextLike> = {
+    title: 'components/form/InputTextLike',
+    component: InputTextLike,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof InputTextLike>;
+
+export const Standard: Story = {
+    args: {
+        ariaLabel: 'Skriv inn alder',
+        style: { width: 47 },
+    },
+    render: args => (
+        <Paragraph>
+            Jeg er <InputTextLike {...args} /> år gammel
+        </Paragraph>
+    ),
+};

packages/ffe-form-react/src/Label.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { Label } from './Label';
+
+const meta: Meta<typeof Label> = {
+    title: 'components/form/Label',
+    component: Label,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Standard: Story = {
+    args: {
+        children: 'Skriv inn alder',
+    },
+    render: args => <Label {...args} />,
+};

packages/ffe-form-react/src/PhoneNumber.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { PhoneNumber } from './PhoneNumber';
+
+const meta: Meta<typeof PhoneNumber> = {
+    title: 'components/form/PhoneNumber',
+    component: PhoneNumber,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof PhoneNumber>;
+
+export const Standard: Story = {
+    args: {
+        numberInputProps: {},
+        numberFieldMessage: '',
+        countryCodeFieldMessage: '',
+        countryCodeAndNumberFieldMessage: '',
+        extraMargin: false,
+        isMobileNumber: true,
+        locale: 'nb',
+    },
+    render: args => <PhoneNumber {...args} />,
+};

packages/ffe-form-react/src/RadioBlock.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { RadioBlock } from './RadioBlock';
+
+const meta: Meta<typeof RadioBlock> = {
+    title: 'components/form/RadioBlock',
+    component: RadioBlock,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof RadioBlock>;
+
+export const Standard: Story = {
+    args: {
+        checked: false,
+        label: 'Ektefelle, samboer eller registrert partner',
+        value: 'partner',
+        selectedValue: 'partner',
+        showChildren: false,
+        children:
+            'Da må ektefelle, samboer eller registrert partner skrive inn detaljene sine under.',
+    },
+    render: function Render(args) {
+        return <RadioBlock {...args} />;
+    },
+};

packages/ffe-form-react/src/RadioButton.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { RadioButton } from './RadioButton';
+
+const meta: Meta<typeof RadioButton> = {
+    title: 'components/form/RadioButton',
+    component: RadioButton,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof RadioButton>;
+
+export const Standard: Story = {
+    args: {
+        inline: false,
+        onColoredBg: false,
+        children: 'Bankkunde',
+        labelProps: {},
+        selectedValue: 'bankkunde',
+        value: 'bankkunde',
+        tooltip: 'tooltip',
+        tooltipProps: {},
+    },
+    render: function Render(args) {
+        return <RadioButton {...args} />;
+    },
+};

packages/ffe-form-react/src/RadioButtonInputGroup.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { RadioButtonInputGroup } from './RadioButtonInputGroup';
+import { RadioButton } from './RadioButton';
+
+const meta: Meta<typeof RadioButtonInputGroup> = {
+    title: 'components/form/RadioButtonInputGroup',
+    component: RadioButtonInputGroup,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof RadioButtonInputGroup>;
+
+export const Standard: Story = {
+    args: {
+        inline: false,
+        onColoredBg: false,
+        name: 'name',
+        label: 'Hva er din favorittlukt?',
+    },
+    render: function Render(args) {
+        return (
+            <RadioButtonInputGroup {...args}>
+                {inputProps => (
+                    <>
+                        <RadioButton {...inputProps} value="grass">
+                            Gress
+                        </RadioButton>
+                        <RadioButton {...inputProps} value="asphalt">
+                            Asfalt
+                        </RadioButton>
+                        <RadioButton {...inputProps} value="pollen">
+                            Pollen
+                        </RadioButton>
+                    </>
+                )}
+            </RadioButtonInputGroup>
+        );
+    },
+};

packages/ffe-form-react/src/RadioSwitch.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { RadioSwitch } from './RadioSwitch';
+
+const meta: Meta<typeof RadioSwitch> = {
+    title: 'components/form/RadioSwitch',
+    component: RadioSwitch,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof RadioSwitch>;
+
+export const Standard: Story = {
+    args: {
+        leftLabel: 'Ja',
+        leftValue: 'true',
+        rightLabel: 'Nei',
+        rightValue: 'false',
+        selectedValue: 'true',
+    },
+    render: function Render(args) {
+        return <RadioSwitch {...args} />;
+    },
+};

packages/ffe-form-react/src/RadioSwitch.tsx

@@ -13,12 +13,13 @@ export interface RadioSwitchProps
     leftLabel: string;
     /** The value of the choice to the left */
     leftValue: Value /** Ref-setting function, or ref created by useRef, passed to the input element */;
+    /** Ref to left radio */
     leftInnerRef?: React.Ref<HTMLInputElement>;
     /** The label of the choice to the right */
     rightLabel: string;
     /** The value of the choice to the right */
     rightValue: Value;
-    /** Ref-setting function, or ref created by useRef, passed to the input element */
+    /** Ref to right radio */
     rightInnerRef?: React.Ref<HTMLInputElement>;
     /** The selected value of the radio button set */
     selectedValue?: Value | null;

packages/ffe-form-react/src/TextArea.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { TextArea } from './TextArea';
+import { InputGroup } from './InputGroup';
+
+const meta: Meta<typeof TextArea> = {
+    title: 'components/form/TextArea',
+    component: TextArea,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof TextArea>;
+
+export const Standard: Story = {
+    args: {},
+    render: function Render(args) {
+        return (
+            <InputGroup label="Beskriv skaden">
+                <TextArea {...args} />
+            </InputGroup>
+        );
+    },
+};

packages/ffe-form-react/src/ToggleSwitch.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { ToggleSwitch } from './ToggleSwitch';
+
+const meta: Meta<typeof ToggleSwitch> = {
+    title: 'components/form/ToggleSwitch',
+    component: ToggleSwitch,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof ToggleSwitch>;
+
+export const Standard: Story = {
+    args: {
+        children: 'Jeg vil gjerne ha reklame',
+    },
+    render: function Render(args) {
+        return <ToggleSwitch {...args} />;
+    },
+};

packages/ffe-form-react/src/Tooltip.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+    title: 'components/form/Tooltip',
+    component: Tooltip,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Standard: Story = {
+    args: {
+        children: 'Dette er lurt å tenke på',
+    },
+    render: function Render(args) {
+        return <Tooltip {...args} />;
+    },
+};

packages/ffe-form-react/src/message/ErrorFieldMessage.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ErrorFieldMessage } from './ErrorFieldMessage';
+import type { StoryObj, Meta } from '@storybook/react';
+
+const meta: Meta<typeof ErrorFieldMessage> = {
+    title: 'components/form/ErrorFieldMessage',
+    component: ErrorFieldMessage,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof ErrorFieldMessage>;
+
+export const Standard: Story = {
+    args: {
+        children: 'Noe er feil her',
+    },
+    render: args => <ErrorFieldMessage {...args} />,
+};