@popsure/dirty-swan 0.37.2 → 0.38.1

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

@@ -0,0 +1,233 @@
+
+import { useState } from 'react';
+import { Radio, RadioProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Inputs/Radio',
+  component: Radio,
+  argTypes: {
+    options: {
+      description: 'Object that contains the possible options for rendering in the input.',
+      defaultValue: {
+        CAT:{
+          title: 'Cat',
+          description: 'At least 1'
+        },
+        DOG:{
+          title: 'Dog',
+          description: 'At least 2'
+        },
+        NONE:{
+          title: 'None',
+          description: 'No pets'
+        }
+      }
+    },
+    value: {
+      description: 'Current checked values.',
+    },
+    onChange: {
+      description: 'Function called everytime a value changes.',
+      action: true,
+      table: {
+        category: "Callbacks",
+      },
+    },
+    wide: {
+      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
+    },
+    classNames: {
+      description: 'ClassNames for custom styling',
+      defaultValue: {
+        container: '',
+        label: '',
+        option: ''
+      }
+    },
+    bordered: {
+      description: 'Property that defines if option should show with border',
+      defaultValue: true
+    },
+  }
+};
+
+export const RadioStory = ({ 
+  onChange,
+  options,
+  wide,
+  classNames,
+  inlineLayout,
+  bordered,
+}: RadioProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string>();
+
+  const handleOnChange = (newValue: string) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Radio 
+      wide={wide}
+      options={options} 
+      onChange={handleOnChange}
+      value={checkedValues}
+      classNames={classNames}
+      inlineLayout={inlineLayout}
+      bordered={bordered}
+    />
+  );
+}
+
+export const RadioWithCustomWrapperStyles = ({ onChange }: RadioProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string>();
+
+  const handleOnChange = (newValue: string) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Radio 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT1: 'Cat',
+        DOG1: 'Dog',
+      }} 
+      classNames={{ container: "p32 bg-primary-300 br24 bs-lg" }}
+    />
+  );
+}
+
+export const RadioWithCustomOptionStyles = ({ onChange }: RadioProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string>();
+
+  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" }}
+    />
+  );
+}
+
+export const RadioWithCustomLabelStyles = ({ onChange }: RadioProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string>();
+
+  const handleOnChange = (newValue: string  ) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Radio 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT3: 'Cat',
+        DOG3: 'Dog',
+      }} 
+      classNames={{ label: "bg-grey-900 tc-white" }}
+    />
+  );
+}
+
+export const RadioWithInlineLayout = ({ onChange }: RadioProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string>();
+
+  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
+    />
+  );
+}
+
+export const RadioWithCustomLabel = ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string>();
+
+  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
+    />
+  );
+}
+
+RadioStory.storyName = 'Radio';
+
+export const RadioIconOnly = ({ onChange, wide, classNames, inlineLayout }: RadioProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string>();
+
+  const handleOnChange = (newValue: string) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  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

@@ -0,0 +1,94 @@
+import { render } from '../../../util/testUtils';
+
+import { Radio, RadioProps } from '.';
+
+const mockOnChange = jest.fn();
+
+const setup = (onChange: RadioProps<string>['onChange'], value?: string) => {
+  const utils = render(
+    <Radio
+      options={{
+        CAT: 'Cat',
+        DOG: 'Dog',
+        NONE: 'None',
+      }}
+      onChange={onChange}
+      value={value}
+    />
+  );
+
+  return utils;
+};
+
+describe('Radio component', () => {
+  it('Should render options', () => {
+    const { getByText } = setup(mockOnChange);
+
+    expect(getByText('Cat')).toBeInTheDocument();
+    expect(getByText('Dog')).toBeInTheDocument();
+    expect(getByText('None')).toBeInTheDocument();
+  });
+
+  it('Should call onchange on selecting an option', async () => {
+    const { getByTestId, user } = setup(mockOnChange);
+
+    await user.click(getByTestId('radio-DOG'));
+
+    expect(mockOnChange).toBeCalledWith("DOG");
+  });
+
+  it('Should render checked items when value is passed', async () => {
+    const { getByTestId } = setup(mockOnChange, 'CAT');
+
+    expect(getByTestId('radio-input-CAT')).toBeChecked();
+  });
+
+  it('Should render custom description', () => {
+      const { getByText } = render(
+        <Radio
+          options={{
+            CAT: {
+              title: 'Cat',
+              description: 'Cat description'
+            },
+          }}
+          onChange={mockOnChange}
+        />
+      );
+
+    expect(getByText('Cat description')).toBeInTheDocument();
+  });
+
+  it('Should render custom icon', () => {
+      const { getByText } = render(
+        <Radio
+          options={{
+            CAT: {
+              title: 'Cat',
+              icon: () => 'ICON'
+            },
+          }}
+          onChange={mockOnChange}
+        />
+      );
+
+    expect(getByText('ICON')).toBeInTheDocument();
+  });
+
+  it('Should render custom icon with selected', () => {
+      const { getByText } = render(
+        <Radio
+          options={{
+            CAT: {
+              title: 'Cat',
+              icon: (selected) => selected ? 'SELECTED-ICON' : 'ICON'
+            },
+          }}
+          onChange={mockOnChange}
+          value={'CAT'}
+        />
+      );
+
+    expect(getByText('SELECTED-ICON')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,105 @@
+import classNames from "classnames";
+import { ReactNode } from "react";
+
+import styles from './styles.module.scss';
+export interface RadioWithDescription {
+  title: string;
+  description?: string;
+  icon?: (selected: boolean) => ReactNode;
+  hideBox?: boolean;
+}
+
+export interface RadioProps<ValueType extends string> {
+  options: Record<ValueType, string | RadioWithDescription>;
+  value?: ValueType;
+  onChange: (value: ValueType) => void;
+  wide?: boolean;
+  inlineLayout?: boolean;
+  classNames?: {
+    container?: string;
+    label?: string;
+    option?: string;
+  };
+  bordered?: boolean;
+}
+
+export const Radio = <ValueType extends string>({
+  options,
+  value,
+  onChange,
+  wide = false,
+  inlineLayout = false,
+  classNames: classNamesObj,
+  bordered = true
+}: RadioProps<ValueType>) => {
+  const entries = Object.entries(options) as [
+    ValueType,
+    string | RadioWithDescription
+  ][];
+
+
+  return (
+    <div
+      className={classNames(classNamesObj?.container, styles.container, 'd-flex gap8', {
+        [styles.wide]: wide,
+        [styles.narrow]: !wide,
+        'fd-row': inlineLayout,
+        'f-wrap': inlineLayout,
+        'fd-column': !inlineLayout,
+      })}
+    >
+      {entries.map(([currentValue, label]) => {
+        const checked = value === currentValue;
+        const customIcon = (label as RadioWithDescription)?.icon;
+        const hideIcon = (label as RadioWithDescription)?.hideBox;
+
+        return (
+          <div className={classNamesObj?.option} key={currentValue}>
+            <input
+              className={classNames(
+                "p-radio", {
+                  'p-radio--no-icon': customIcon || hideIcon,
+                  'p-radio--centered': !label,
+                }
+              )}
+              id={currentValue}
+              type="radio"
+              value={currentValue}
+              onChange={() => onChange(currentValue)}
+              checked={checked}
+              data-testid={`radio-input-${currentValue}`}
+            />
+
+            <label
+              htmlFor={currentValue}
+              className={classNames(
+                classNamesObj?.label,
+                'p-label',
+                {
+                  'jc-center': customIcon,
+                  'fd-column': customIcon,
+                  'p-label--bordered': bordered
+                }
+              )}
+              data-cy={`radio-${currentValue}`}
+              data-testid={`radio-${currentValue}`}
+            >
+              {customIcon && (
+                <div className="mt8">{customIcon?.(checked)}</div>
+              )}
+
+              {typeof label === 'string' ? label : (
+                <div>
+                  <p className="p-p">{label.title}</p>
+                  <span className="d-block p-p p-p--small tc-grey-600">
+                    {label.description}
+                  </span>
+                </div>
+              )}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/lib/components/input/radio/styles.module.scss

@@ -0,0 +1,11 @@
+.container {
+  max-width: 100%;
+}
+
+.narrow {
+  max-width: 424px;
+}
+
+.wide {
+  max-width: 736px;
+}

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

@@ -0,0 +1,19 @@
+import { Spinner, SpinnerProps } from '.';
+
+const story = {
+  title: 'JSX/Spinner',
+  component: Spinner,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      defaultValue: 's',
+      description: 'Property that allows to customize the size of the spinner.',
+    },
+  },
+};
+
+export const SpinnerStory = ({ size }: SpinnerProps) => <Spinner size={size} />;
+
+SpinnerStory.storyName = 'Spinner';
+
+export default story;

package/src/lib/components/spinner/index.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '../../util/testUtils';
+
+import { Spinner } from '.';
+
+describe('Spinner component', () => {
+  it('Should render spinner', async () => {
+    render(<Spinner></Spinner>);
+
+    expect(screen.getByTestId('ds-spinner')).toBeInTheDocument();
+  });
+});

package/src/lib/components/spinner/index.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+
+export interface SpinnerProps {
+  size?: 's' | 'm' | 'l';
+}
+
+const Spinner = ({ size = 's' }: SpinnerProps) => (
+  <div
+    className={classNames('ds-spinner', `ds-spinner__${size}`)}
+    data-testid="ds-spinner"
+  ></div>
+);
+
+export { Spinner };

package/src/lib/index.tsx

@@ -2,12 +2,12 @@ import { DateSelector } from './components/dateSelector';
 import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
 import { Input } from './components/input';
-import { 
+import {
   MultiDropzone,
   FileType,
   MultiDropzoneProps,
   UploadedFile,
-  UploadStatus
+  UploadStatus,
 } from './components/multiDropzone';
 import { DownloadButton } from './components/downloadButton';
 import { InformationBox } from './components/informationBox';
@@ -15,6 +15,7 @@ import IbanInput from './components/input/iban';
 import CurrencyInput from './components/input/currency';
 import { Badge } from './components/badge';
 import { Checkbox } from './components/input/checkbox';
+import { Radio } from './components/input/radio';
 import {
   BottomModal,
   RegularModal,
@@ -44,6 +45,7 @@ import { SegmentedControl } from './components/segmentedControl';
 import { Markdown } from './components/markdown';
 import { Link } from './components/link';
 import { images } from './util/images';
+import { Spinner } from './components/spinner';
 
 export * from './components/icon';
 
@@ -77,10 +79,12 @@ export {
   SegmentedControl,
   Markdown,
   Checkbox,
+  Radio,
   Link,
   InformationBox,
   Badge,
   images,
+  Spinner,
 };
 
 export type {
@@ -88,7 +92,7 @@ export type {
   MultiDropzoneProps,
   TableHeader,
   UploadedFile,
-  UploadStatus
+  UploadStatus,
 };
 
 export type { DownloadStatus } from './models/download';

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

@@ -89,8 +89,15 @@
       transition: 0.3s background-color;
     }
   }
+
+  &.p-radio--centered + label::before {
+    margin-right: 0;
+  }
 }
 
+.p-radio--no-icon + label::before {
+  display: none!important;
+}
 .p-radio:checked {
   & + label::before {
     border-color: $ds-primary-500;
@@ -146,7 +153,7 @@
 }
 
 .p-checkbox--no-icon + label::before {
-  display: none!important;
+  display: none !important;
 }
 
 .p-label {
@@ -162,7 +169,7 @@
   &--bordered {
     align-items: center;
 
-    padding: 8px 16px;
+    padding: 12px 16px;
 
     border-radius: 8px;
     border: 1px solid $ds-grey-400;