@popsure/dirty-swan 0.61.2 → 0.62.0

package/src/lib/components/input/radio/index.stories.tsx

@@ -82,232 +82,240 @@ const story = {
   },
 };
 
-export const RadioStory = ({
-  onChange,
-  options,
-  wide,
-  classNames,
-  inlineLayout,
-  bordered,
-  disabled,
-  fieldLegend,
-  groupName,
-}: RadioProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string>();
+export const RadioStory = {
+  render: ({
+    onChange,
+    options,
+    wide,
+    classNames,
+    inlineLayout,
+    bordered,
+    disabled,
+    fieldLegend,
+    groupName,
+  }: RadioProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
+    const handleOnChange = (newValue: string) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
 
-  return (
-    <Radio
-      wide={wide}
-      options={options}
-      onChange={handleOnChange}
-      value={checkedValues}
-      classNames={classNames}
-      inlineLayout={inlineLayout}
-      bordered={bordered}
-      disabled={disabled}
-      fieldLegend={fieldLegend}
-      groupName={groupName}
-    />
-  );
+    return (
+      <Radio
+        wide={wide}
+        options={options}
+        onChange={handleOnChange}
+        value={checkedValues}
+        classNames={classNames}
+        inlineLayout={inlineLayout}
+        bordered={bordered}
+        disabled={disabled}
+        fieldLegend={fieldLegend}
+        groupName={groupName}
+      />
+    );
+  },
+
+  name: 'Radio',
 };
 
-export const RadioWithCustomWrapperStyles = ({
-  onChange,
-}: RadioProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string>();
+export const RadioWithCustomWrapperStyles = {
+  render: ({ onChange }: RadioProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
+    const handleOnChange = (newValue: string) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
 
-  return (
-    <Radio
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT1: 'Cat',
-        DOG1: 'Dog',
-      }}
-      classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}
-    />
-  );
+    return (
+      <Radio
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT1: 'Cat',
+          DOG1: 'Dog',
+        }}
+        classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}
+      />
+    );
+  },
 };
 
-export const RadioWithCustomOptionStyles = ({
-  onChange,
-}: RadioProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string>();
+export const RadioWithCustomOptionStyles = {
+  render: ({ onChange }: RadioProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
+    const handleOnChange = (newValue: string) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
 
-  return (
-    <Radio
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT2: 'Cat',
-        DOG2: 'Dog',
-      }}
-      classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}
-    />
-  );
+    return (
+      <Radio
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT2: 'Cat',
+          DOG2: 'Dog',
+        }}
+        classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}
+      />
+    );
+  },
 };
 
-export const RadioWithCustomLabelStyles = ({
-  onChange,
-}: RadioProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string>();
+export const RadioWithCustomLabelStyles = {
+  render: ({ onChange }: RadioProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
+    const handleOnChange = (newValue: string) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
 
-  return (
-    <Radio
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT3: 'Cat',
-        DOG3: 'Dog',
-      }}
-      classNames={{ label: 'bg-neutral-900 tc-white' }}
-    />
-  );
+    return (
+      <Radio
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT3: 'Cat',
+          DOG3: 'Dog',
+        }}
+        classNames={{ label: 'bg-neutral-900 tc-white' }}
+      />
+    );
+  },
 };
 
-export const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string>();
+export const RadioWithInlineLayout = {
+  render: ({ onChange }: RadioProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
+    const handleOnChange = (newValue: string) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
 
-  return (
-    <Radio
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT4: 'Cat',
-        DOG4: 'Dog',
-        FISHER: 'Fish',
-        RABBIT: 'Rabbit',
-        RAT: 'Rat',
-        ANOTHER: 'Other',
-      }}
-      classNames={{ option: 'w30' }}
-      inlineLayout
-      wide
-    />
-  );
+    return (
+      <Radio
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT4: 'Cat',
+          DOG4: 'Dog',
+          FISHER: 'Fish',
+          RABBIT: 'Rabbit',
+          RAT: 'Rat',
+          ANOTHER: 'Other',
+        }}
+        classNames={{ option: 'w30' }}
+        inlineLayout
+        wide
+      />
+    );
+  },
 };
 
-export const RadioWithCustomLabel = ({
-  onChange,
-  wide,
-  classNames,
-  inlineLayout,
-}: RadioProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string>();
+export const RadioWithCustomLabel = {
+  render: ({
+    onChange,
+    wide,
+    classNames,
+    inlineLayout,
+  }: RadioProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
+    const handleOnChange = (newValue: string) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
 
-  return (
-    <Radio
-      options={{
-        BIGDOG: {
-          icon: () => <img src={images.bigDog} alt="" />,
-          title: 'Dog',
-        },
-        FISH: {
-          icon: () => <img src={images.brokenAquarium} alt="" />,
-          title: 'Fish',
-        },
-        OTHER: {
-          icon: () => <img src={images.brokenGlass} alt="" />,
-          title: 'Other',
-        },
-      }}
-      onChange={handleOnChange}
-      value={checkedValues}
-      classNames={{ option: 'w30' }}
-      inlineLayout
-    />
-  );
+    return (
+      <Radio
+        options={{
+          BIGDOG: {
+            icon: () => <img src={images.bigDog} alt="" />,
+            title: 'Dog',
+          },
+          FISH: {
+            icon: () => <img src={images.brokenAquarium} alt="" />,
+            title: 'Fish',
+          },
+          OTHER: {
+            icon: () => <img src={images.brokenGlass} alt="" />,
+            title: 'Other',
+          },
+        }}
+        onChange={handleOnChange}
+        value={checkedValues}
+        classNames={{ option: 'w30' }}
+        inlineLayout
+      />
+    );
+  },
 };
 
-export const RadioWithCustomLabelInline = ({
-  onChange,
-  wide,
-  classNames,
-  inlineLayout,
-}: RadioProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string>();
+export const RadioWithCustomLabelInline = {
+  render: ({
+    onChange,
+    wide,
+    classNames,
+    inlineLayout,
+  }: RadioProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
+    const handleOnChange = (newValue: string) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
 
-  return (
-    <Radio
-      options={{
-        BIGDOG: {
-          icon: () => <img src={images.bigDog} alt="" />,
-          title: 'Dog',
-        },
-        FISH: {
-          icon: () => <img src={images.brokenAquarium} alt="" />,
-          title: 'Fish',
-        },
-        OTHER: {
-          icon: () => <img src={images.brokenGlass} alt="" />,
-          title: 'Other',
-        },
-      }}
-      onChange={handleOnChange}
-      inlineIcon
-      value={checkedValues}
-      classNames={{ option: 'w30' }}
-      inlineLayout
-    />
-  );
+    return (
+      <Radio
+        options={{
+          BIGDOG: {
+            icon: () => <img src={images.bigDog} alt="" />,
+            title: 'Dog',
+          },
+          FISH: {
+            icon: () => <img src={images.brokenAquarium} alt="" />,
+            title: 'Fish',
+          },
+          OTHER: {
+            icon: () => <img src={images.brokenGlass} alt="" />,
+            title: 'Other',
+          },
+        }}
+        onChange={handleOnChange}
+        inlineIcon
+        value={checkedValues}
+        classNames={{ option: 'w30' }}
+        inlineLayout
+      />
+    );
+  },
 };
 
-RadioStory.storyName = 'Radio';
-
-export const RadioIconOnly = ({ onChange }: RadioProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string>();
+export const RadioIconOnly = {
+  render: ({ onChange }: RadioProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  };
+    const handleOnChange = (newValue: string) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
 
-  return (
-    <Radio
-      options={{ NOTHING: '' }}
-      onChange={handleOnChange}
-      classNames={{ label: 'jc-start' }}
-      value={checkedValues}
-      bordered={false}
-    />
-  );
+    return (
+      <Radio
+        options={{ NOTHING: '' }}
+        onChange={handleOnChange}
+        classNames={{ label: 'jc-start' }}
+        value={checkedValues}
+        bordered={false}
+      />
+    );
+  },
 };
 
-RadioStory.storyName = 'Radio';
-
 export default story;

package/src/lib/components/input/radio/index.test.tsx

@@ -34,7 +34,7 @@ describe('Radio component', () => {
 
     await user.click(getByTestId('radio-DOG'));
 
-    expect(mockOnChange).toBeCalledWith('DOG');
+    expect(mockOnChange).toHaveBeenCalledWith('DOG');
   });
 
   it('Should render checked items when value is passed', async () => {

package/src/lib/components/input/stories/config.ts

@@ -1,5 +1,3 @@
-import { isDisabled } from "@testing-library/user-event/dist/types/utils";
-
 const sharedConfig = {
   argTypes: {
     value: {
@@ -15,30 +13,36 @@ const sharedConfig = {
       description: 'Label of the Input component',
     },
     hideLabel: {
-      description: 'Whether or not a label should be hidden. This is needed for accessibility purposes and a label should always be provided',
+      description:
+        'Whether or not a label should be hidden. This is needed for accessibility purposes and a label should always be provided',
     },
     labelInsideInput: {
-      description: 'Whether or not a label should be visually displayed inside the input borders.',
+      description:
+        'Whether or not a label should be visually displayed inside the input borders.',
     },
     prefix: {
-      description: 'A prefix that can be displayed on the left of the input. Specially useful for currencies.',
+      description:
+        'A prefix that can be displayed on the left of the input. Specially useful for currencies.',
     },
     id: {
-      description: 'Unique ID identifier of the input. Relevant for accessibility.',
+      description:
+        'Unique ID identifier of the input. Relevant for accessibility.',
     },
     error: {
-      description: 'Error message that will also make input show on error state.',
+      description:
+        'Error message that will also make input show on error state.',
       table: {
-        type: { 
-          summary: 'string | boolean'
+        type: {
+          summary: 'string | boolean',
         },
       },
     },
     onChange: {
-      description: 'Function that is called when value of current input changes',
+      description:
+        'Function that is called when value of current input changes',
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
   },
@@ -52,8 +56,8 @@ const sharedConfig = {
     prefix: '£',
     id: '1234567890',
     error: '',
-    disabled: false
-  }
-} 
+    disabled: false,
+  },
+};
 
-export default sharedConfig;
+export default sharedConfig;