@popsure/dirty-swan 0.31.2 → 0.33.0

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

@@ -0,0 +1,147 @@
+import { Address } from '@popsure/public-models';
+import { useState } from 'react';
+import { AutocompleteAddress, AutocompleteAddressProps } from '.';
+
+const story = {
+  title: 'JSX/AutocompleteAddress',
+  component: AutocompleteAddress,
+  argTypes: {
+    address: {
+      description: 'The address properties',
+      table: {
+        type: { 
+          summary: 'Partial<Address>'
+        },
+      },
+    },
+    apiKey: {
+      defaultValue: 'AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8',
+      description: 'Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview)',
+      table: {
+        type: { 
+          summary: 'Partial<Address>'
+        },
+      },
+    },
+    onAddressChange: {
+      description: 'Callback with the updated address, this function will get called everytime the address gets updated',
+      action: true,
+      table: {
+        category: "Callbacks",
+      },
+    },
+    manualAddressEntryTexts: {
+      description: 'The CTA that enables manual address entry and the text preceding it',
+      table: {
+        type: {
+            summary: '{ preText?: string; cta: string?; }'
+        }
+      }
+    },
+    placeholders: {
+      description: 'Placeholder text',
+      table: {
+        type: {
+            summary: '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }'
+        }
+      }
+    }
+  },
+  parameters: {
+    componentSubtitle: 'Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.',
+    docs: {
+      description: {
+          component: 'This component is for now only restricted to "address" types and will restrict every query to Germany.',
+      },
+    },
+    customTypes: {
+      Address: `interface Address {
+          street: string;
+          houseNumber: string;
+          postcode: string;
+          city: string;
+          additionalInformation?: string;
+          country: string;
+      }`
+    }
+  },
+};
+
+export const AutocompleteAddressStory = ({
+  address: defaultAddress,
+  apiKey,
+  manualAddressEntryTexts,
+  onAddressChange,
+  placeholders,
+}: AutocompleteAddressProps) => {
+  const [address, setAddress] = useState<Partial<Address> | undefined>(defaultAddress);
+  const handleOnAddressChange = (newAddress: Partial<Address>) => {
+    onAddressChange(newAddress);
+    setAddress(newAddress);
+  };
+
+  return (
+    <AutocompleteAddress
+      address={address}
+      apiKey={apiKey}
+      manualAddressEntryTexts={manualAddressEntryTexts}
+      onAddressChange={handleOnAddressChange}
+      placeholders={placeholders}
+    />
+  );
+};
+
+AutocompleteAddressStory.storyName = "AutocompleteAddress";
+
+export const WithAddress = ({
+  apiKey,
+  onAddressChange,
+  placeholders,
+}: AutocompleteAddressProps) => (
+    <AutocompleteAddress
+      address={{
+        street: 'Lohmuehlenstraße',
+        houseNumber: '65',
+        city: 'Berlin',
+        country: 'DE',
+        additionalInformation: 'c/o Factory',
+      }}
+      apiKey={apiKey}
+      onAddressChange={onAddressChange}
+    />
+);
+
+export const WithLocalisationEntryText = ({
+  apiKey,
+  onAddressChange,
+}: AutocompleteAddressProps) => (
+  <AutocompleteAddress
+    apiKey={apiKey}
+    manualAddressEntryTexts={{
+      preText: 'Oder ',
+      cta: 'Adresse direkt eingeben',
+    }}
+    onAddressChange={onAddressChange}
+  />
+);
+
+export const WithLocalisationPlaceholders = ({
+  apiKey,
+  onAddressChange,
+}: AutocompleteAddressProps) => (
+  <AutocompleteAddress
+    address={{}}
+    apiKey={apiKey}
+    placeholders={{
+      manualAddressEntry: 'Adresse suchen',
+      street: 'Straße',
+      houseNumber: 'Hausnummer',
+      additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',
+      postcode: 'PLZ',
+      city: 'Stadt',
+    }}
+    onAddressChange={onAddressChange}
+  />
+);
+
+export default story;

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

@@ -1,7 +1,7 @@
 import { Address } from '@popsure/public-models';
 import { fireEvent, render } from '../../util/testUtils';
 
-import AutoCompleteAddress from '.';
+import { AutocompleteAddress } from '.';
 
 const address = {
   street: 'Köpeniker Strasse',
@@ -16,7 +16,7 @@ const setup = (
   onAddressChange: (address: Partial<Address>) => void = () => {}
 ) => {
   return render(
-    <AutoCompleteAddress
+    <AutocompleteAddress
       address={address}
       apiKey={''}
       onAddressChange={onAddressChange}

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

@@ -49,13 +49,7 @@ const loadGoogleMapsApiDynamically = (callback: () => void, apiKey: string) => {
   };
 };
 
-const AutoCompleteAddress = ({
-  apiKey,
-  address: initialAddress,
-  onAddressChange,
-  placeholders,
-  manualAddressEntryTexts,
-}: {
+export interface AutocompleteAddressProps {
   apiKey: string;
   address?: Partial<Address>;
   onAddressChange: (address: Partial<Address>) => void;
@@ -71,7 +65,15 @@ const AutoCompleteAddress = ({
     preText?: string;
     cta?: string;
   };
-}) => {
+}
+
+const AutocompleteAddress = ({
+  apiKey,
+  address: initialAddress,
+  onAddressChange,
+  placeholders,
+  manualAddressEntryTexts,
+}: AutocompleteAddressProps) => {
   const [manualAddressEntry, setManualAddressEntry] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const autocomplete = useRef<google.maps.places.Autocomplete | null>(null);
@@ -349,4 +351,4 @@ const AutoCompleteAddress = ({
   );
 };
 
-export default AutoCompleteAddress;
+export { AutocompleteAddress };

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

@@ -0,0 +1,58 @@
+import { DownloadButton, DownloadButtonProps } from '.';
+
+const story = {
+  title: 'JSX/DownloadButton',
+  component: DownloadButton,
+  argTypes: {
+    downloadStatus: {
+      description: 'Status of the button',
+      defaultValue: 'INITIAL',
+    },
+    customFail: {
+      description: 'Customised error message. Only visible when button is on `FAILED` state.',
+      control: { type: 'text' },
+    },
+    onDownload: {
+      description: 'Called when download button has been clicked.',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    className: {
+      description: 'This property allows to add custom styles to the component.',
+    }
+  },
+  parameters: {
+    componentSubtitle: 'DownloadButton component displays progress and status of downloading files.',
+  },
+};
+
+export const DownloadButtonStory = ({
+  downloadStatus,
+  onDownload,
+  className,
+  customFail
+}: DownloadButtonProps) => (
+  <DownloadButton
+    className={className}
+    customFail={customFail}
+    downloadStatus={downloadStatus}
+    onDownload={onDownload}
+  />
+);
+
+DownloadButtonStory.storyName = "DownloadButton";
+
+export const CustomErrorMessage = ({
+    onDownload,
+}: DownloadButtonProps) => (
+  <DownloadButton
+    customFail="Custom error message"
+    downloadStatus="FAILED"
+    onDownload={onDownload}
+  />
+);
+
+
+export default story;

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

@@ -5,7 +5,7 @@ import checkIcon from './icons/check.svg';
 import downloadIcon from './icons/download.svg';
 import styles from './style.module.scss';
 
-interface Props {
+export interface DownloadButtonProps {
   downloadStatus: DownloadStatus;
   onDownload: () => void;
   className?: string;
@@ -43,7 +43,7 @@ const DownloadButton = ({
   onDownload,
   className = '',
   customFail,
-}: Props) => {
+}: DownloadButtonProps) => {
   const mapDownloadButton: { [K in DownloadStatus]: React.ReactNode } = {
     INITIAL: <InitialButton onDownload={onDownload} />,
     GENERATING: <GeneratingButton />,
@@ -64,4 +64,4 @@ const DownloadButton = ({
   );
 };
 
-export default DownloadButton;
+export { DownloadButton };

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

@@ -0,0 +1,214 @@
+
+import { useState } from 'react';
+import { Checkbox, CheckboxProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Inputs/Checkbox',
+  component: Checkbox,
+  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 checkbox options story for examples.',
+      defaultValue: false
+    },
+    className: {
+      description: 'Wrapper classNames for custom styling',
+      defaultValue: ''
+    },
+    optionClassName: {
+      description: 'Option classNames for custom styling',
+      defaultValue: ''
+    },
+    labelClassName: {
+      description: 'Label classNames for custom styling',
+      defaultValue: ''
+    },
+  }
+};
+
+export const CheckboxStory = ({ 
+  onChange,
+  options,
+  wide,
+  className,
+  optionClassName,
+  labelClassName,
+  inlineLayout,
+}: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[]) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      wide={wide}
+      options={options} 
+      onChange={handleOnChange}
+      value={checkedValues}
+      className={className}
+      labelClassName={labelClassName}
+      optionClassName={optionClassName}
+      inlineLayout={inlineLayout}
+    />
+  );
+}
+
+export const CheckboxWithCustomWrapperStyles = ({ onChange }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT1: 'Cat',
+        DOG1: 'Dog',
+      }} 
+      className="p32 bg-primary-300 br24 bs-lg"
+    />
+  );
+}
+
+export const CheckboxWithCustomOptionStyles = ({ onChange }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT2: 'Cat',
+        DOG2: 'Dog',
+      }} 
+      optionClassName="mb32 p24 bg-green-100 br12 bs-lg"
+    />
+  );
+}
+
+export const CheckboxWithCustomLabelStyles = ({ onChange }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT3: 'Cat',
+        DOG3: 'Dog',
+      }} 
+      labelClassName="bg-grey-900 tc-white"
+    />
+  );
+}
+
+export const CheckboxWithInlineLayout = ({ onChange }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      onChange={handleOnChange}
+      value={checkedValues}
+      options={{
+        CAT4: 'Cat',
+        DOG4: 'Dog',
+        FISHER: 'Fish',
+        RABBIT: 'Rabbit',
+        RAT: 'Rat',
+        ANOTHER: 'Other',
+      }} 
+      optionClassName="w30"
+      inlineLayout
+      wide
+    />
+  );
+}
+
+export const CheckboxWithCustomLabel = ({ onChange, wide, className, optionClassName, inlineLayout }: CheckboxProps<string>) => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleOnChange = (newValue: string[] = []) => {
+    setCheckedValues(newValue);
+    onChange(newValue);
+  }
+
+  return (
+    <Checkbox 
+      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}
+      optionClassName="w30"
+      inlineLayout
+    />
+  );
+}
+
+CheckboxStory.storyName = 'Checkbox';
+
+export default story;

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

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