fixup! Feat(web-react): Introduce SegmentedControl #DS-1657

Author: curdaj

packages/web-react/src/components/SegmentedControl/stories/SegmentedControl.stories.tsx

@@ -1,7 +1,8 @@
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { FillVariants } from '../../../constants';
+import { SegmentedControlProps } from '../../../types/segmentedControl';
 import { Icon } from '../../Icon';
 import ReadMe from '../README.md';
 import SegmentedControl from '../SegmentedControl';
@@ -20,9 +21,9 @@ const meta: Meta<typeof SegmentedControl> = {
       control: 'select',
       options: ['label only', 'label with icon', 'icon only'],
       description: `This is the place for the content of the SegmentedControl.
-        In the real code you can pass any children you want.
-        In this demo we have predefined options:
-        \`label only\`, \`label with icon\` and \`icon only\`.`,
+      In the real code you can pass any children you want.
+      In this demo we have predefined options:
+      \`label only\`, \`label with icon\` and \`icon only\`.`,
     },
     hasMultipleSelection: {
       control: { type: 'boolean' },
@@ -40,6 +41,23 @@ const meta: Meta<typeof SegmentedControl> = {
       control: 'select',
       options: [...Object.values(FillVariants)],
     },
+    onSelectionChange: {
+      action: 'onSelectionChange',
+      description: 'Callback triggered when selected value changes.',
+      table: {
+        category: 'Events',
+      },
+    },
+    selectedValue: {
+      table: {
+        disable: true,
+      },
+    },
+    setSelectedValue: {
+      table: {
+        disable: true,
+      },
+    },
   },
   args: {
     children: 'label only',
@@ -54,16 +72,33 @@ const meta: Meta<typeof SegmentedControl> = {
 export default meta;
 type Story = StoryObj<typeof SegmentedControl>;
 
+const SegmentedControlWithHooks = ({ name, children, ...args }: SegmentedControlProps) => {
+  const defaultSingleValue = 'value-1';
+  const defaultMultipleValue = ['value-1'];
+
+  const [selectedValue, setSelectedValue] = useState<string | string[]>(
+    args.hasMultipleSelection ? defaultMultipleValue : defaultSingleValue,
+  );
+
+  useEffect(() => {
+    setSelectedValue(args.hasMultipleSelection ? defaultMultipleValue : defaultSingleValue);
+  }, [args.hasMultipleSelection]);
+
+  return (
+    <SegmentedControl
+      {...args}
+      name={`${name}`}
+      UNSAFE_style={{ display: 'inline-grid' }}
+      selectedValue={selectedValue}
+      setSelectedValue={setSelectedValue}
+    >
+      {children}
+    </SegmentedControl>
+  );
+};
+
 export const Playground: Story = {
   name: 'SegmentedControl',
-  args: {
-    children: 'labelOnly',
-    hasMultipleSelection: false,
-    isFluid: false,
-    name: 'segmented-control-example',
-    label: 'Segmented Control Example',
-    variant: FillVariants.OUTLINE,
-  },
   render: (args) => {
     const getItemContent = (isDisabled = false) => {
       const label = isDisabled ? 'Label disabled' : 'Label';
@@ -85,7 +120,7 @@ export const Playground: Story = {
     };
 
     return (
-      <SegmentedControl {...args} UNSAFE_style={{ display: 'inline-grid' }}>
+      <SegmentedControlWithHooks {...args}>
         <SegmentedControlItem value="value-1" id="segmented-control-1">
           {getItemContent()}
         </SegmentedControlItem>
@@ -98,7 +133,7 @@ export const Playground: Story = {
         <SegmentedControlItem value="value-4" id="segmented-control-4">
           {getItemContent()}
         </SegmentedControlItem>
-      </SegmentedControl>
+      </SegmentedControlWithHooks>
     );
   },
 };