feat(ffe-form-react): modernisering av skjemaelementer

SpareBank1 · Jan 10, 2025 · e6e7219 · e6e7219
1 parent c802a23
commit e6e7219
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/packages/ffe-form-react/package.json b/packages/ffe-form-react/package.json
@@ -33,6 +33,7 @@
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.9.0",
+        "@sb1/ffe-icons-react": "^11.0.14",
         "eslint": "^8.57.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"

diff --git a/packages/ffe-form-react/src/ToggleSwitch.stories.tsx b/packages/ffe-form-react/src/ToggleSwitch.stories.tsx
@@ -15,20 +15,41 @@ export const Standard: Story = {
         children: 'Jeg vil gjerne ha reklame',
     },
     render: function Render(args) {
-        return <ToggleSwitch {...args} />;
+        const [checked, setChecked] = React.useState(true);
+        return (
+            <ToggleSwitch
+                {...args}
+                checked={checked}
+                onChange={e => setChecked(e.target.checked)}
+            />
+        );
     },
 };
 
 export const HideOnOff: Story = {
     args: { ...Standard.args, hideOnOff: true },
     render: function Render(args) {
-        return <ToggleSwitch {...args} />;
+        const [checked, setChecked] = React.useState(true);
+        return (
+            <ToggleSwitch
+                {...args}
+                checked={checked}
+                onChange={e => setChecked(e.target.checked)}
+            />
+        );
     },
 };
 
 export const Description: Story = {
     args: { ...Standard.args, description: 'Send meg spam' },
     render: function Render(args) {
-        return <ToggleSwitch {...args} />;
+        const [checked, setChecked] = React.useState(true);
+        return (
+            <ToggleSwitch
+                {...args}
+                checked={checked}
+                onChange={e => setChecked(e.target.checked)}
+            />
+        );
     },
 };