@popsure/dirty-swan 0.61.2 → 0.62.0

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

@@ -1,4 +1,3 @@
-
 import { useState } from 'react';
 import { Toggle, ToggleProps } from '.';
 
@@ -7,7 +6,8 @@ const story = {
   component: Toggle,
   argTypes: {
     options: {
-      description: 'Object that contains the possible options for rendering in the input. To create an icon-only toggle, pass an empty string.',
+      description:
+        'Object that contains the possible options for rendering in the input. To create an icon-only toggle, pass an empty string.',
     },
     value: {
       description: 'Current checked values.',
@@ -16,14 +16,16 @@ const story = {
       description: 'Function called everytime a value changes.',
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
     bordered: {
-      description: 'Property that defines if checkbox should show the border around each label',
+      description:
+        'Property that defines if checkbox should show the border around each label',
     },
     inlineLayout: {
-      description: 'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',
+      description:
+        'Property that defines if options should show inline instead of block. Check inline checkbox options story for examples.',
     },
     disabled: {
       description: 'Shows toggle on a disabled state.',
@@ -33,19 +35,19 @@ const story = {
     },
   },
   args: {
-    options:{
-      CAT:{
+    options: {
+      CAT: {
         title: 'Cat',
-        description: 'At least 1'
+        description: 'At least 1',
       },
-      DOG:{
+      DOG: {
         title: 'Dog',
-        description: 'At least 2'
+        description: 'At least 2',
       },
-      NONE:{
+      NONE: {
         title: 'None',
-        description: 'No pets'
-      }
+        description: 'No pets',
+      },
     },
     value: [],
     bordered: true,
@@ -54,147 +56,158 @@ const story = {
     className: {
       container: '',
       label: '',
-      option: ''
-    }
-  
-  }
+      option: '',
+    },
+  },
+};
+
+export const ToggleStory = {
+  render: ({
+    onChange,
+    options,
+    bordered,
+    classNames,
+    inlineLayout,
+    disabled,
+  }: ToggleProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[]) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Toggle
+        options={options}
+        onChange={handleOnChange}
+        value={checkedValues}
+        bordered={bordered}
+        classNames={classNames}
+        inlineLayout={inlineLayout}
+        disabled={disabled}
+      />
+    );
+  },
+
+  name: 'Toggle',
+};
+
+export const ToggleWithCustomWrapperStyles = {
+  render: ({ onChange }: ToggleProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Toggle
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT1: 'Cat',
+          DOG1: 'Dog',
+        }}
+        classNames={{ container: 'p32 bg-purple-500 br24 bs-lg' }}
+      />
+    );
+  },
 };
 
-export const ToggleStory = ({ 
-  onChange,
-  options,
-  bordered,
-  classNames,
-  inlineLayout,
-  disabled,
-}: ToggleProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[]) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  }
-
-  return (
-    <Toggle 
-      options={options} 
-      onChange={handleOnChange}
-      value={checkedValues}
-      bordered={bordered}
-      classNames={classNames}
-      inlineLayout={inlineLayout}
-      disabled={disabled}
-    />
-  );
-}
-
-export const ToggleWithCustomWrapperStyles = ({ onChange }: ToggleProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  }
-
-  return (
-    <Toggle 
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT1: 'Cat',
-        DOG1: 'Dog',
-      }} 
-      classNames={{ container: "p32 bg-purple-500 br24 bs-lg" }}
-    />
-  );
-}
-
-export const ToggleWithCustomOptionStyles = ({ onChange }: ToggleProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  }
-
-  return (
-    <Toggle 
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT2: 'Cat',
-        DOG2: 'Dog',
-      }} 
-      classNames={{ option: "mb32 p24 bg-green-100 br12 bs-lg" }}
-    />
-  );
-}
-
-export const ToggleWithCustomLabelStyles = ({ onChange }: ToggleProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  }
-
-  return (
-    <Toggle 
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT3: 'Cat',
-        DOG3: 'Dog',
-      }} 
-      classNames={{ label: "bg-neutral-900 tc-white" }}
-    />
-  );
-}
-
-export const ToggleWithInlineLayout = ({ onChange }: ToggleProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  }
-
-  return (
-    <Toggle 
-      onChange={handleOnChange}
-      value={checkedValues}
-      options={{
-        CAT4: 'Cat',
-        DOG4: 'Dog',
-        FISHER: 'Fish',
-        RABBIT: 'Rabbit',
-        RAT: 'Rat',
-        ANOTHER: 'Other',
-      }} 
-      classNames={{ option: "w30" }}
-      inlineLayout
-    />
-  );
-}
-
-export const ToggleIconOnly = ({ onChange }: ToggleProps<string>) => {
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-
-  const handleOnChange = (newValue: string[] = []) => {
-    setCheckedValues(newValue);
-    onChange(newValue);
-  }
-
-  return (
-    <Toggle 
-      options={{ CAT: '' }} 
-      onChange={handleOnChange}
-      value={checkedValues}
-      bordered={false}
-    />
-  );
-}
-
-ToggleStory.storyName = 'Toggle';
+export const ToggleWithCustomOptionStyles = {
+  render: ({ onChange }: ToggleProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Toggle
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT2: 'Cat',
+          DOG2: 'Dog',
+        }}
+        classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}
+      />
+    );
+  },
+};
+
+export const ToggleWithCustomLabelStyles = {
+  render: ({ onChange }: ToggleProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Toggle
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT3: 'Cat',
+          DOG3: 'Dog',
+        }}
+        classNames={{ label: 'bg-neutral-900 tc-white' }}
+      />
+    );
+  },
+};
+
+export const ToggleWithInlineLayout = {
+  render: ({ onChange }: ToggleProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Toggle
+        onChange={handleOnChange}
+        value={checkedValues}
+        options={{
+          CAT4: 'Cat',
+          DOG4: 'Dog',
+          FISHER: 'Fish',
+          RABBIT: 'Rabbit',
+          RAT: 'Rat',
+          ANOTHER: 'Other',
+        }}
+        classNames={{ option: 'w30' }}
+        inlineLayout
+      />
+    );
+  },
+};
+
+export const ToggleIconOnly = {
+  render: ({ onChange }: ToggleProps<string>) => {
+    const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+    const handleOnChange = (newValue: string[] = []) => {
+      setCheckedValues(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Toggle
+        options={{ CAT: '' }}
+        onChange={handleOnChange}
+        value={checkedValues}
+        bordered={false}
+      />
+    );
+  },
+};
 
 export default story;

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

@@ -34,7 +34,7 @@ describe('toggle component', () => {
 
     await user.click(getByTestId('toggle-DOG'));
 
-    expect(mockOnChange).toBeCalledWith(["DOG"]);
+    expect(mockOnChange).toHaveBeenCalledWith(['DOG']);
   });
 
   it('Should render checked items when value is passed', async () => {
@@ -48,7 +48,7 @@ describe('toggle component', () => {
 
     await user.click(getByTestId('toggle-NONE'));
 
-    expect(mockOnChange).toBeCalledWith(["NONE"]);
+    expect(mockOnChange).toHaveBeenCalledWith(['NONE']);
   });
 
   it('Should call onchange empty when removing NONE option', async () => {
@@ -56,21 +56,21 @@ describe('toggle component', () => {
 
     await user.click(getByTestId('toggle-NONE'));
 
-    expect(mockOnChange).toBeCalledWith([]);
+    expect(mockOnChange).toHaveBeenCalledWith([]);
   });
 
   it('Should render custom description', () => {
-      const { getByText } = render(
-        <Toggle
-          options={{
-            CAT: {
-              title: 'Cat',
-              description: 'Cat description'
-            },
-          }}
-          onChange={mockOnChange}
-        />
-      );
+    const { getByText } = render(
+      <Toggle
+        options={{
+          CAT: {
+            title: 'Cat',
+            description: 'Cat description',
+          },
+        }}
+        onChange={mockOnChange}
+      />
+    );
 
     expect(getByText('Cat description')).toBeInTheDocument();
   });

package/src/lib/components/link/index.stories.tsx

@@ -16,14 +16,19 @@ const story = {
     href: 'https://feather-insurance.com',
   },
   parameters: {
-    componentSubtitle: 'Links are a styled helper component for anchor (<a />) tags.',
+    componentSubtitle:
+      'Links are a styled helper component for anchor (<a />) tags.',
   },
 };
 
-export const LinkStory = ({ children, href, ...rest }: LinkProps) => (
-  <Link href={href} {...rest}>{children}</Link>
-);
+export const LinkStory = {
+  render: ({ children, href, ...rest }: LinkProps) => (
+    <Link href={href} {...rest}>
+      {children}
+    </Link>
+  ),
 
-LinkStory.storyName = "Link";
+  name: 'Link',
+};
 
 export default story;

package/src/lib/components/logo/logo.stories.tsx

@@ -1,4 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { LogoColor } from './LogoColor';
 import { LogoWhite } from './LogoWhite';
 import { LogoBlack } from './LogoBlack';
@@ -16,60 +15,60 @@ export default {
 };
 
 export const StandardLogos = () => (
-  <div className='d-flex gap24 ai-center fd-wrap'>
-    <div className='bg-neutral-200 br8 p16 ta-center'>
+  <div className="d-flex gap24 ai-center fd-wrap">
+    <div className="bg-neutral-200 br8 p16 ta-center">
       <LogoColor width={100} />
-      <p className='p-p mt16'>LogoColor</p>
+      <p className="p-p mt16">LogoColor</p>
     </div>
-    <div className='bg-neutral-200 br8 p16 ta-center'>
+    <div className="bg-neutral-200 br8 p16 ta-center">
       <LogoBlack width={100} />
-      <p className='p-p mt16'>LogoBlack</p>
+      <p className="p-p mt16">LogoBlack</p>
     </div>
-    <div className='bg-neutral-900 br8 p16 ta-center'>
+    <div className="bg-neutral-900 br8 p16 ta-center">
       <LogoWhite width={100} />
-      <p className='p-p tc-white mt16'>LogoWhite</p>
+      <p className="p-p tc-white mt16">LogoWhite</p>
     </div>
-    <div className='bg-neutral-200 br8 p16 ta-center'>
+    <div className="bg-neutral-200 br8 p16 ta-center">
       <LogoOrangeBox width={100} />
-      <p className='p-p mt16'>LogoOrangeBox</p>
+      <p className="p-p mt16">LogoOrangeBox</p>
     </div>
   </div>
 );
 
 export const HorizontalLogos = () => (
-  <div className='d-flex gap24 ai-center fd-wrap'>
-    <div className='ta-center br8 p16 bg-neutral-200'>
+  <div className="d-flex gap24 ai-center fd-wrap">
+    <div className="ta-center br8 p16 bg-neutral-200">
       <LogoPositiveColor width={150} />
-      <p className='p-p mt16'>LogoPositiveColor</p>
+      <p className="p-p mt16">LogoPositiveColor</p>
     </div>
-    <div className='ta-center br8 p16 bg-neutral-200'>
+    <div className="ta-center br8 p16 bg-neutral-200">
       <LogoPositiveBlack width={150} />
-      <p className='p-p mt16'>LogoPositiveBlack</p>
+      <p className="p-p mt16">LogoPositiveBlack</p>
     </div>
-    <div className='ta-center br8 p16 bg-neutral-900'>
+    <div className="ta-center br8 p16 bg-neutral-900">
       <LogoInvertedColor width={150} />
-      <p className='p-p mt16 tc-white'>LogoInvertedColor</p>
+      <p className="p-p mt16 tc-white">LogoInvertedColor</p>
     </div>
-    <div className='ta-center br8 p16 bg-neutral-900'>
+    <div className="ta-center br8 p16 bg-neutral-900">
       <LogoInverted width={150} />
-      <p className='p-p mt16 tc-white'>LogoInverted</p>
+      <p className="p-p mt16 tc-white">LogoInverted</p>
     </div>
   </div>
 );
 
 export const Sizes = () => (
-  <div className='d-flex gap24 ai-center fd-wrap'>
-    <div className='ta-center'>
+  <div className="d-flex gap24 ai-center fd-wrap">
+    <div className="ta-center">
       <LogoColor width={64} />
-      <p className='p-p'>64px</p>
+      <p className="p-p">64px</p>
     </div>
-    <div className='ta-center'>
+    <div className="ta-center">
       <LogoColor width={128} />
-      <p className='p-p'>128px</p>
+      <p className="p-p">128px</p>
     </div>
-    <div className='ta-center'>
+    <div className="ta-center">
       <LogoColor width={256} />
-      <p className='p-p'>256px</p>
+      <p className="p-p">256px</p>
     </div>
   </div>
-);
+);