From 45b5d5aeaa1931f92e5695034328b88f2d248173 Mon Sep 17 00:00:00 2001
From: Peter Hellstrand <peter.hellstrand@sparebank1.no>
Date: Wed, 18 Sep 2024 15:40:49 +0200
Subject: [PATCH] docs(ffe-form-react): storybook examples

---
 .../ffe-form-react/src/Checkbox.stories.tsx   | 31 ++++++++++++++
 packages/ffe-form-react/src/Checkbox.tsx      |  1 +
 packages/ffe-form-react/src/Input.stories.tsx | 25 +++++++++++
 .../ffe-form-react/src/InputGroup.stories.tsx | 24 +++++++++++
 .../src/InputTextLike.stories.tsx             | 25 +++++++++++
 packages/ffe-form-react/src/Label.stories.tsx | 19 +++++++++
 .../src/PhoneNumber.stories.tsx               | 25 +++++++++++
 .../ffe-form-react/src/RadioBlock.stories.tsx | 27 ++++++++++++
 .../src/RadioButton.stories.tsx               | 28 +++++++++++++
 .../src/RadioButtonInputGroup.stories.tsx     | 41 +++++++++++++++++++
 .../src/RadioSwitch.stories.tsx               | 25 +++++++++++
 packages/ffe-form-react/src/RadioSwitch.tsx   |  3 +-
 .../ffe-form-react/src/TextArea.stories.tsx   | 24 +++++++++++
 .../src/ToggleSwitch.stories.tsx              | 21 ++++++++++
 .../ffe-form-react/src/Tooltip.stories.tsx    | 21 ++++++++++
 .../src/message/ErrorFieldMessage.stories.tsx | 19 +++++++++
 .../src/message/InfoFieldMessage.stories.tsx  | 19 +++++++++
 .../message/SuccessFieldMessage.stories.tsx   | 19 +++++++++
 packages/ffe-form-react/src/message/index.tsx | 12 +++---
 19 files changed, 402 insertions(+), 7 deletions(-)
 create mode 100644 packages/ffe-form-react/src/Checkbox.stories.tsx
 create mode 100644 packages/ffe-form-react/src/Input.stories.tsx
 create mode 100644 packages/ffe-form-react/src/InputGroup.stories.tsx
 create mode 100644 packages/ffe-form-react/src/InputTextLike.stories.tsx
 create mode 100644 packages/ffe-form-react/src/Label.stories.tsx
 create mode 100644 packages/ffe-form-react/src/PhoneNumber.stories.tsx
 create mode 100644 packages/ffe-form-react/src/RadioBlock.stories.tsx
 create mode 100644 packages/ffe-form-react/src/RadioButton.stories.tsx
 create mode 100644 packages/ffe-form-react/src/RadioButtonInputGroup.stories.tsx
 create mode 100644 packages/ffe-form-react/src/RadioSwitch.stories.tsx
 create mode 100644 packages/ffe-form-react/src/TextArea.stories.tsx
 create mode 100644 packages/ffe-form-react/src/ToggleSwitch.stories.tsx
 create mode 100644 packages/ffe-form-react/src/Tooltip.stories.tsx
 create mode 100644 packages/ffe-form-react/src/message/ErrorFieldMessage.stories.tsx
 create mode 100644 packages/ffe-form-react/src/message/InfoFieldMessage.stories.tsx
 create mode 100644 packages/ffe-form-react/src/message/SuccessFieldMessage.stories.tsx

diff --git a/packages/ffe-form-react/src/Checkbox.stories.tsx b/packages/ffe-form-react/src/Checkbox.stories.tsx
new file mode 100644
index 0000000000..50af0ebb1a
--- /dev/null
+++ b/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>
+    ),
+};
diff --git a/packages/ffe-form-react/src/Checkbox.tsx b/packages/ffe-form-react/src/Checkbox.tsx
index ea759af9b3..4897f5c7c9 100644
--- a/packages/ffe-form-react/src/Checkbox.tsx
+++ b/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
diff --git a/packages/ffe-form-react/src/Input.stories.tsx b/packages/ffe-form-react/src/Input.stories.tsx
new file mode 100644
index 0000000000..61df6b7bce
--- /dev/null
+++ b/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>
+    ),
+};
diff --git a/packages/ffe-form-react/src/InputGroup.stories.tsx b/packages/ffe-form-react/src/InputGroup.stories.tsx
new file mode 100644
index 0000000000..12669e2b21
--- /dev/null
+++ b/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>
+    ),
+};
diff --git a/packages/ffe-form-react/src/InputTextLike.stories.tsx b/packages/ffe-form-react/src/InputTextLike.stories.tsx
new file mode 100644
index 0000000000..7d55f6f5a8
--- /dev/null
+++ b/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>
+    ),
+};
diff --git a/packages/ffe-form-react/src/Label.stories.tsx b/packages/ffe-form-react/src/Label.stories.tsx
new file mode 100644
index 0000000000..30bed893eb
--- /dev/null
+++ b/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} />,
+};
diff --git a/packages/ffe-form-react/src/PhoneNumber.stories.tsx b/packages/ffe-form-react/src/PhoneNumber.stories.tsx
new file mode 100644
index 0000000000..a8347592bf
--- /dev/null
+++ b/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} />,
+};
diff --git a/packages/ffe-form-react/src/RadioBlock.stories.tsx b/packages/ffe-form-react/src/RadioBlock.stories.tsx
new file mode 100644
index 0000000000..70a27f6798
--- /dev/null
+++ b/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} />;
+    },
+};
diff --git a/packages/ffe-form-react/src/RadioButton.stories.tsx b/packages/ffe-form-react/src/RadioButton.stories.tsx
new file mode 100644
index 0000000000..c463e25ca7
--- /dev/null
+++ b/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} />;
+    },
+};
diff --git a/packages/ffe-form-react/src/RadioButtonInputGroup.stories.tsx b/packages/ffe-form-react/src/RadioButtonInputGroup.stories.tsx
new file mode 100644
index 0000000000..6e1d558590
--- /dev/null
+++ b/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>
+        );
+    },
+};
diff --git a/packages/ffe-form-react/src/RadioSwitch.stories.tsx b/packages/ffe-form-react/src/RadioSwitch.stories.tsx
new file mode 100644
index 0000000000..88b73ad7f3
--- /dev/null
+++ b/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} />;
+    },
+};
diff --git a/packages/ffe-form-react/src/RadioSwitch.tsx b/packages/ffe-form-react/src/RadioSwitch.tsx
index 0c090b301c..7aac8d2e18 100644
--- a/packages/ffe-form-react/src/RadioSwitch.tsx
+++ b/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;
diff --git a/packages/ffe-form-react/src/TextArea.stories.tsx b/packages/ffe-form-react/src/TextArea.stories.tsx
new file mode 100644
index 0000000000..5fe6e6d277
--- /dev/null
+++ b/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>
+        );
+    },
+};
diff --git a/packages/ffe-form-react/src/ToggleSwitch.stories.tsx b/packages/ffe-form-react/src/ToggleSwitch.stories.tsx
new file mode 100644
index 0000000000..171ddc6c61
--- /dev/null
+++ b/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} />;
+    },
+};
diff --git a/packages/ffe-form-react/src/Tooltip.stories.tsx b/packages/ffe-form-react/src/Tooltip.stories.tsx
new file mode 100644
index 0000000000..a4c9889f17
--- /dev/null
+++ b/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} />;
+    },
+};
diff --git a/packages/ffe-form-react/src/message/ErrorFieldMessage.stories.tsx b/packages/ffe-form-react/src/message/ErrorFieldMessage.stories.tsx
new file mode 100644
index 0000000000..41fa8a0565
--- /dev/null
+++ b/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} />,
+};
diff --git a/packages/ffe-form-react/src/message/InfoFieldMessage.stories.tsx b/packages/ffe-form-react/src/message/InfoFieldMessage.stories.tsx
new file mode 100644
index 0000000000..562a94e518
--- /dev/null
+++ b/packages/ffe-form-react/src/message/InfoFieldMessage.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { InfoFieldMessage } from './InfoFieldMessage';
+import type { StoryObj, Meta } from '@storybook/react';
+
+const meta: Meta<typeof InfoFieldMessage> = {
+    title: 'components/form/InfoFieldMessage',
+    component: InfoFieldMessage,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof InfoFieldMessage>;
+
+export const Standard: Story = {
+    args: {
+        children: 'Noe info her',
+    },
+    render: args => <InfoFieldMessage {...args} />,
+};
diff --git a/packages/ffe-form-react/src/message/SuccessFieldMessage.stories.tsx b/packages/ffe-form-react/src/message/SuccessFieldMessage.stories.tsx
new file mode 100644
index 0000000000..ddb978105c
--- /dev/null
+++ b/packages/ffe-form-react/src/message/SuccessFieldMessage.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { SuccessFieldMessage } from './SuccessFieldMessage';
+import type { StoryObj, Meta } from '@storybook/react';
+
+const meta: Meta<typeof SuccessFieldMessage> = {
+    title: 'components/form/SuccessFieldMessage',
+    component: SuccessFieldMessage,
+    tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof SuccessFieldMessage>;
+
+export const Standard: Story = {
+    args: {
+        children: 'Noe gikk bra her',
+    },
+    render: args => <SuccessFieldMessage {...args} />,
+};
diff --git a/packages/ffe-form-react/src/message/index.tsx b/packages/ffe-form-react/src/message/index.tsx
index bff6077fa4..e288c428d0 100644
--- a/packages/ffe-form-react/src/message/index.tsx
+++ b/packages/ffe-form-react/src/message/index.tsx
@@ -1,6 +1,6 @@
-export { ErrorFieldMessage, ErrorFieldMessageProps } from './ErrorFieldMessage';
-export { InfoFieldMessage, InfoFieldMessageProps } from './InfoFieldMessage';
-export {
-    SuccessFieldMessage,
-    SuccessFieldMessageProps,
-} from './SuccessFieldMessage';
+export { ErrorFieldMessage } from './ErrorFieldMessage';
+export type { ErrorFieldMessageProps } from './ErrorFieldMessage';
+export { InfoFieldMessage } from './InfoFieldMessage';
+export type { InfoFieldMessageProps } from './InfoFieldMessage';
+export { SuccessFieldMessage } from './SuccessFieldMessage';
+export type { SuccessFieldMessageProps } from './SuccessFieldMessage';