@popsure/dirty-swan 0.41.14 → 0.41.15

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

@@ -1,4 +1,3 @@
-
 import { useState } from 'react';
 import { Radio, RadioProps } from '.';
 import { images } from '../../../util/images';
@@ -8,21 +7,22 @@ const story = {
   component: Radio,
   argTypes: {
     options: {
-      description: 'Object that contains the possible options for rendering in the input.',
+      description:
+        'Object that contains the possible options for rendering in the input.',
       defaultValue: {
-        CAT:{
+        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: {
       description: 'Current checked values.',
@@ -31,122 +31,137 @@ const story = {
       description: 'Function called everytime a value changes.',
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
     },
     wide: {
-      description: 'Property that defines if options should fill 100% of available horizontal space',
-      defaultValue: false
+      description:
+        'Property that defines if options should fill 100% of available horizontal space',
+      defaultValue: false,
     },
     inlineLayout: {
-      description: 'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',
-      defaultValue: false
+      description:
+        'Property that defines if options should show inline instead of block. Check inline radio options story for examples.',
+      defaultValue: false,
     },
     classNames: {
       description: 'ClassNames for custom styling',
       defaultValue: {
         container: '',
         label: '',
-        option: ''
-      }
+        option: '',
+      },
     },
     bordered: {
       description: 'Property that defines if option should show with border',
-      defaultValue: true
+      defaultValue: true,
     },
-  }
+    disabled: {
+      description:
+        'Property that defines if the input and corresponding label are disabled and not clickable',
+      defaultValue: false,
+    },
+  },
 };
 
-export const RadioStory = ({ 
+export const RadioStory = ({
   onChange,
   options,
   wide,
   classNames,
   inlineLayout,
   bordered,
+  disabled,
 }: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
 
   const handleOnChange = (newValue: string) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Radio 
+    <Radio
       wide={wide}
-      options={options} 
+      options={options}
       onChange={handleOnChange}
       value={checkedValues}
       classNames={classNames}
       inlineLayout={inlineLayout}
       bordered={bordered}
+      disabled={disabled}
     />
   );
-}
+};
 
-export const RadioWithCustomWrapperStyles = ({ onChange }: RadioProps<string>) => {
+export const RadioWithCustomWrapperStyles = ({
+  onChange,
+}: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
 
   const handleOnChange = (newValue: string) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Radio 
+    <Radio
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT1: 'Cat',
         DOG1: 'Dog',
-      }} 
-      classNames={{ container: "p32 bg-primary-300 br24 bs-lg" }}
+      }}
+      classNames={{ container: 'p32 bg-primary-300 br24 bs-lg' }}
     />
   );
-}
+};
 
-export const RadioWithCustomOptionStyles = ({ onChange }: RadioProps<string>) => {
+export const RadioWithCustomOptionStyles = ({
+  onChange,
+}: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
 
   const handleOnChange = (newValue: string) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Radio 
+    <Radio
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT2: 'Cat',
         DOG2: 'Dog',
-      }} 
-      classNames={{ option: "mb32 p24 bg-green-100 br12 bs-lg" }}
+      }}
+      classNames={{ option: 'mb32 p24 bg-green-100 br12 bs-lg' }}
     />
   );
-}
+};
 
-export const RadioWithCustomLabelStyles = ({ onChange }: RadioProps<string>) => {
+export const RadioWithCustomLabelStyles = ({
+  onChange,
+}: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
 
-  const handleOnChange = (newValue: string  ) => {
+  const handleOnChange = (newValue: string) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Radio 
+    <Radio
       onChange={handleOnChange}
       value={checkedValues}
       options={{
         CAT3: 'Cat',
         DOG3: 'Dog',
-      }} 
-      classNames={{ label: "bg-grey-900 tc-white" }}
+      }}
+      classNames={{ label: 'bg-grey-900 tc-white' }}
     />
   );
-}
+};
 
 export const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
@@ -154,10 +169,10 @@ export const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {
   const handleOnChange = (newValue: string) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Radio 
+    <Radio
       onChange={handleOnChange}
       value={checkedValues}
       options={{
@@ -167,78 +182,88 @@ export const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {
         RABBIT: 'Rabbit',
         RAT: 'Rat',
         ANOTHER: 'Other',
-      }} 
-      classNames={{ option: "w30" }}
+      }}
+      classNames={{ option: 'w30' }}
       inlineLayout
       wide
     />
   );
-}
+};
 
-export const RadioWithCustomLabel = ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => {
+export const RadioWithCustomLabel = ({
+  onChange,
+  wide,
+  classNames,
+  inlineLayout,
+}: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
 
   const handleOnChange = (newValue: string) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Radio 
+    <Radio
       options={{
         BIGDOG: {
-          icon: () => <img src={images.bigDog} alt='' />,
+          icon: () => <img src={images.bigDog} alt="" />,
           title: 'Dog',
         },
-        FISH:{
-          icon: () => <img src={images.brokenAquarium} alt='' />,
+        FISH: {
+          icon: () => <img src={images.brokenAquarium} alt="" />,
           title: 'Fish',
         },
-        OTHER:{
-          icon: () => <img src={images.brokenGlass} alt='' />,
+        OTHER: {
+          icon: () => <img src={images.brokenGlass} alt="" />,
           title: 'Other',
-        }
-      }} 
+        },
+      }}
       onChange={handleOnChange}
       value={checkedValues}
-      classNames={{ option: "w30" }}
+      classNames={{ option: 'w30' }}
       inlineLayout
     />
   );
-}
+};
 
-export const RadioWithCustomLabelInline = ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => {
+export const RadioWithCustomLabelInline = ({
+  onChange,
+  wide,
+  classNames,
+  inlineLayout,
+}: RadioProps<string>) => {
   const [checkedValues, setCheckedValues] = useState<string>();
 
   const handleOnChange = (newValue: string) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Radio 
+    <Radio
       options={{
         BIGDOG: {
-          icon: () => <img src={images.bigDog} alt='' />,
+          icon: () => <img src={images.bigDog} alt="" />,
           title: 'Dog',
         },
-        FISH:{
-          icon: () => <img src={images.brokenAquarium} alt='' />,
+        FISH: {
+          icon: () => <img src={images.brokenAquarium} alt="" />,
           title: 'Fish',
         },
-        OTHER:{
-          icon: () => <img src={images.brokenGlass} alt='' />,
+        OTHER: {
+          icon: () => <img src={images.brokenGlass} alt="" />,
           title: 'Other',
-        }
-      }} 
+        },
+      }}
       onChange={handleOnChange}
       inlineIcon
       value={checkedValues}
-      classNames={{ option: "w30" }}
+      classNames={{ option: 'w30' }}
       inlineLayout
     />
   );
-}
+};
 
 RadioStory.storyName = 'Radio';
 
@@ -248,18 +273,18 @@ export const RadioIconOnly = ({ onChange }: RadioProps<string>) => {
   const handleOnChange = (newValue: string) => {
     setCheckedValues(newValue);
     onChange(newValue);
-  }
+  };
 
   return (
-    <Radio 
-      options={{ NOTHING: '' }} 
+    <Radio
+      options={{ NOTHING: '' }}
       onChange={handleOnChange}
       classNames={{ label: 'jc-start' }}
       value={checkedValues}
       bordered={false}
     />
   );
-}
+};
 
 RadioStory.storyName = 'Radio';
 

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

@@ -107,4 +107,23 @@ describe('Radio component', () => {
 
     expect(getByText('Cat')).toBeInTheDocument();
   });
+
+  it('Should disable the input', async () => {
+    const { getByTestId } = render(
+      <Radio
+        options={{
+          CAT: {
+            title: 'Cat',
+            description: 'Cat description',
+          },
+        }}
+        onChange={mockOnChange}
+        disabled
+      />
+    );
+
+    const radioInput = getByTestId('radio-input-CAT');
+
+    expect(radioInput).toBeDisabled();
+  });
 });

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

@@ -22,6 +22,7 @@ export interface RadioProps<ValueType extends string> {
     option?: string;
   };
   bordered?: boolean;
+  disabled?: boolean;
 }
 
 export const Radio = <ValueType extends string>({
@@ -33,6 +34,7 @@ export const Radio = <ValueType extends string>({
   inlineIcon = false,
   classNames: classNamesObj,
   bordered = true,
+  disabled = false,
 }: RadioProps<ValueType>) => {
   const entries = Object.entries(options) as [
     ValueType,
@@ -78,6 +80,7 @@ export const Radio = <ValueType extends string>({
               onChange={() => onChange(currentValue)}
               checked={checked}
               data-testid={`radio-input-${currentValue}`}
+              disabled={disabled}
             />
 
             <label
@@ -91,10 +94,10 @@ export const Radio = <ValueType extends string>({
               data-testid={`radio-${currentValue}`}
             >
               {customIcon && (
-                <div 
+                <div
                   className={classNames(
-                    "d-inline-flex ai-center jc-center", 
-                    inlineIcon ? "mr8" : "mt8"
+                    'd-inline-flex ai-center jc-center',
+                    inlineIcon ? 'mr8' : 'mt8'
                   )}
                 >
                   {customIcon?.(checked)}

package/src/lib/scss/private/components/_input.scss

@@ -96,7 +96,7 @@
 }
 
 .p-radio--no-icon + label::before {
-  display: none!important;
+  display: none !important;
 }
 .p-radio:checked {
   & + label::before {
@@ -105,6 +105,17 @@
   }
 }
 
+.p-radio:disabled {
+  + .p-label {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  + .p-label--bordered:hover {
+    border-color: $ds-grey-400;
+  }
+}
+
 .p-checkbox {
   & + label {
     &::before {