@popsure/dirty-swan 0.33.4 → 0.34.0

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

@@ -0,0 +1,228 @@
+import { useState } from 'react';
+import { MultiDropzone, MultiDropzoneProps } from '.';
+import { UploadedFile } from './types';
+
+const story = {
+  title: 'JSX/MultiDropzone',
+  component: MultiDropzone,
+  argTypes: {
+    uploadedFiles: {
+      defaultValue: [{
+        id: '123456789',
+        name: 'dummyfile.png'
+      }],
+      description: 'List of files to be displayed on the component.',
+    },
+    uploading: {
+      defaultValue: false,
+      description: 'Property that allows to display component in an uploading state',
+    },
+    isCondensed: {
+      defaultValue: false,
+      description: 'Property that allows to display component in a smaller layout',
+    },
+    maxFiles: {
+      description: 'Property that allows to display the maximum number of files allowed',
+      table: {
+        category: 'File Validation',
+      },
+    },
+    maxSize: {
+      description: 'Property that allows to display the maximum size of files allowed',
+      table: {
+        category: 'File Validation',
+      },
+    },
+    accept: {
+      description: 'Property that allows to define which file types are accepted',
+      table: {
+        category: 'File Validation',
+      },
+    },
+    onRemoveFile: {
+      description: 'Called when a file remove button is clicked',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    onFileSelect: {
+      description: 'Called when a file is uploaded',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    textOverrides: {
+      description: 'Properties that allow to localise component',
+    },
+  },
+  parameters: {
+    componentSubtitle: 'MultiDropzone component allows upload of multiple documents / files.',
+  },
+};
+
+export const MultiDropzoneStory = ({
+  onFileSelect,
+  onRemoveFile,
+  uploading,
+  uploadedFiles = [],
+  isCondensed,
+  maxFiles,
+  maxSize,
+  textOverrides,
+}: MultiDropzoneProps) => {
+  const [localFiles, setLocalFiles] = useState<UploadedFile[]>(uploadedFiles);
+
+  const handleOnRemoveFile = (id: string) => {
+    onRemoveFile(id);
+    setLocalFiles((prevFiles) => prevFiles.filter((file) => file.id !== id));
+  };
+
+  const handleOnFileSelect = (files: File[]) => {
+    const newFiles = files.map((newFile) => ({
+      id: String(new Date().getTime()),
+      name: newFile.name,
+      progress: 100,
+    }));
+    setLocalFiles((prevFiles) => [...prevFiles, ...newFiles]);
+    onFileSelect(files);
+  };
+
+  return (
+    <MultiDropzone 
+      onFileSelect={handleOnFileSelect} 
+      onRemoveFile={handleOnRemoveFile} 
+      uploadedFiles={localFiles} 
+      uploading={uploading} 
+      isCondensed={isCondensed}
+      maxFiles={maxFiles}
+      maxSize={maxSize}
+      textOverrides={textOverrides}
+    />
+  );
+};
+
+MultiDropzoneStory.storyName = "MultiDropzone";
+
+export const UploadingState = () => (
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        progress: 72,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+      },
+      {
+        id: '124',
+        progress: 72,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+        showLoadingSpinner: true,
+        showProgressBar: false,
+      },
+      {
+        id: '125',
+        progress: 72,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+        showLoadingSpinner: true,
+      },
+      {
+        id: '456',
+        progress: 100,
+        name: 'test_file_name2.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name2.pdf',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={true}
+    onRemoveFile={() => {}}
+  />
+);
+
+
+export const CondensedView = () => (
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        progress: 100,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    isCondensed
+  />
+);
+
+export const ErrorState = () => (
+  <MultiDropzone
+    uploadedFiles={[
+      {
+        id: '123',
+        progress: 0,
+        name: 'test_file_name.pdf',
+        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
+        error: 'File is too big!',
+      },
+    ]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+  />
+);
+
+export const AcceptingOnlyImages = () => (
+  <MultiDropzone
+    accept="image"
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+  />
+);
+
+export const AcceptingOnlyDocuments = () => (
+  <MultiDropzone
+    accept="document"
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+  />
+);
+
+export const LimitingFileSizeTo2MB = () => (
+  <MultiDropzone
+    isCondensed
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    maxSize={2096000}
+  />
+);
+
+export const I18nSupport = () => (
+  <MultiDropzone
+    uploadedFiles={[]}
+    onFileSelect={() => {}}
+    uploading={false}
+    onRemoveFile={() => {}}
+    textOverrides={{
+      instructionsText: 'Datei auswählen oder per Drag & Drop platzieren',
+      supportsTextShort: 'Unterstützt werden',
+      currentlyUploadingText:
+        'Bitte warten während die Datei hochgeladen wird...'
+    }}
+  />
+);
+
+export default story;

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

@@ -1,7 +1,7 @@
 import { act, fireEvent, render } from '../../util/testUtils';
 import '@testing-library/jest-dom';
 
-import MultiDropzone, { MultiDropzoneProps } from '.';
+import { MultiDropzone, MultiDropzoneProps } from '.';
 
 const mockOnFileSelect = jest.fn();
 const mockOnRemoveFile = jest.fn();

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

@@ -25,24 +25,24 @@ import {
 import { formatBytes } from '../../util/formatBytes';
 
 interface MultiDropzoneProps {
-  accept?: AcceptType;
-  onFileSelect: (files: File[]) => void;
   uploadedFiles: UploadedFile[];
   uploading: boolean;
+  onFileSelect: (files: File[]) => void;
   onRemoveFile: (id: string) => void;
+  accept?: AcceptType;
   isCondensed?: boolean;
   maxFiles?: number;
   maxSize?: number;
   textOverrides?: TextOverrides;
 }
 
-const MultiDropZone = ({
-  accept,
+const MultiDropzone = ({
   uploadedFiles,
   onFileSelect,
-  uploading,
   onRemoveFile,
+  uploading,
   isCondensed = false,
+  accept,
   maxFiles = 0,
   maxSize,
   textOverrides,
@@ -157,4 +157,4 @@ const placeholder = `${textOverrides?.supportsTextShort || "Supports"} ${fileLis
 };
 
 export type { FileType, MultiDropzoneProps, UploadedFile, UploadStatus };
-export default MultiDropZone;
+export { MultiDropzone };

package/src/lib/index.tsx

@@ -1,8 +1,9 @@
-import DateSelector from './components/dateSelector';
+import { DateSelector } from './components/dateSelector';
 import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
-import Input from './components/input';
-import MultiDropzone, { 
+import { Input } from './components/input';
+import { 
+  MultiDropzone,
   FileType,
   MultiDropzoneProps,
   UploadedFile,

package/src/lib/scss/public/colors/default.scss

@@ -1,7 +1,7 @@
 // TODO: Reference colors
 $ds-primary-25: #fcfcff !default;
 $ds-primary-50: #f7f7ff !default;
-$ds-primary-100: #e6e5ff !default;
+$ds-primary-100: #ebebff !default;
 $ds-primary-300: #b1b0f5 !default;
 $ds-primary-500: #8e8cee !default;
 $ds-primary-700: #6160a2 !default;
@@ -9,7 +9,7 @@ $ds-primary-900: #2e2e4c !default;
 
 $ds-purple-25: #fcfcff;
 $ds-purple-50: #f7f7ff;
-$ds-purple-100: #e6e5ff;
+$ds-purple-100: #ebebff;
 $ds-purple-300: #b1b0f5;
 $ds-purple-500: #8e8cee;
 $ds-purple-700: #6160a2;

package/src/lib/scss/public/demo.tsx

@@ -24,7 +24,7 @@ const colors = [
   {
     name: 'Primary 100',
     code: 'primary-100',
-    hex: '#e6e5ff',
+    hex: '#ebebff',
   },
   {
     name: 'Primary 300',

package/src/lib/util/images/index.ts

@@ -8,12 +8,19 @@ const images = {
     dogLiability: `${basePath}/dogLiabilityIcon.png`,
     dogLiability2x: `${basePath}/dogLiabilityIcon2x.png`,
     dogLiability3x: `${basePath}/dogLiabilityIcon3x.png`,
+    lifeIcon: `${basePath}/lifeIcon.png`,
+    lifeIcon2x: `${basePath}/lifeIcon2x.png`,
+    lifeIcon3x: `${basePath}/lifeIcon3x.png`,
   },
   brokenAquarium: `${basePath}/brokenAquarium.svg`,
   brokenGlass: `${basePath}/brokenGlass.svg`,
   damagedLaptop: `${basePath}/damagedLaptop.svg`,
   moneyIncome: `${basePath}/moneyIncome.svg`,
   washingMachine: `${basePath}/washingMachine.svg`,
+  bill: `${basePath}/bill.svg`,
+  books: `${basePath}/books.svg`,
+  finalExpenses: `${basePath}/finalExpenses.svg`,
+  mortgage: `${basePath}/mortgage.svg`,
 } as const;
 
 export { images };

package/dist/esm/index-e81a1766.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-e81a1766.js","sources":["../../../src/lib/util/images/index.ts"],"sourcesContent":["const basePath = 'https://assets.cdn.feather-insurance.com/assets/images';\n\nconst images = {\n  aid: `${basePath}/aid.svg`,\n  bed: `${basePath}/bed.svg`,\n  bigDog: `${basePath}/bigDog.svg`,\n  verticalIcons: {\n    dogLiability: `${basePath}/dogLiabilityIcon.png`,\n    dogLiability2x: `${basePath}/dogLiabilityIcon2x.png`,\n    dogLiability3x: `${basePath}/dogLiabilityIcon3x.png`,\n  },\n  brokenAquarium: `${basePath}/brokenAquarium.svg`,\n  brokenGlass: `${basePath}/brokenGlass.svg`,\n  damagedLaptop: `${basePath}/damagedLaptop.svg`,\n  moneyIncome: `${basePath}/moneyIncome.svg`,\n  washingMachine: `${basePath}/washingMachine.svg`,\n} as const;\n\nexport { images };\n"],"names":[],"mappings":"AAAA,IAAM,QAAQ,GAAG,wDAAwD,CAAC;IAEpE,MAAM,GAAG;IACb,GAAG,EAAK,QAAQ,aAAU;IAC1B,GAAG,EAAK,QAAQ,aAAU;IAC1B,MAAM,EAAK,QAAQ,gBAAa;IAChC,aAAa,EAAE;QACb,YAAY,EAAK,QAAQ,0BAAuB;QAChD,cAAc,EAAK,QAAQ,4BAAyB;QACpD,cAAc,EAAK,QAAQ,4BAAyB;KACrD;IACD,cAAc,EAAK,QAAQ,wBAAqB;IAChD,WAAW,EAAK,QAAQ,qBAAkB;IAC1C,aAAa,EAAK,QAAQ,uBAAoB;IAC9C,WAAW,EAAK,QAAQ,qBAAkB;IAC1C,cAAc,EAAK,QAAQ,wBAAqB;;;;;"}

package/src/lib/components/cards/cardButton/index.stories.mdx

@@ -1,47 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import CardButton from '.';
-
-<Meta title="JSX/Cards/Card Button" />
-
-# Card Button
-
-| attribute   | unit                     | description                                    | default value | required                            |
-| ----------- | ------------------------ | ---------------------------------------------- | ------------- | ----------------------------------- |
-| title       | string                   | Title text that needs to be displayed          | n/a           | true                                |
-| description | string / ReactNode (JSX) | Description text that is displayed under title | n/a           | true                                |
-| disabled    | boolean                  | Disabled state of the button                   | false         | false                               |
-| className   | string                   | Class name for most top parent element         | n/a           | false                               |
-| onClick     | function                 | Function that runs on click of the button      | n/a           | true (false if href prop exists)    |
-| href        | string                   | Redirect URL on click of the button            | n/a           | true (false if onClick prop exists) |
-
-<Preview>
-  <>
-    <h4 className="p-h4">Normal state</h4>
-    <br />
-    <CardButton
-      title="Name"
-      description="Seungha Kong"
-      onClick={() => console.log('This is a button component')}
-    />
-    <br />
-    <br />
-    <h4 className="p-h4">Long description</h4>
-    <br />
-    <CardButton
-      title="Risky Sports"
-      description="Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,"
-      onClick={() => console.log('This is a button component')}
-    />
-    <br />
-    <br />
-    <h4 className="p-h4">Disabled state</h4>
-    <br />
-    <CardButton
-      title="Address"
-      description="Lohmühlenstraße 65 10557 Berlin"
-      onClick={() => console.log('This is a button component')}
-      disabled
-    />
-  </>
-</Preview>

package/src/lib/components/cards/cardWithLeftIcon/index.stories.mdx

@@ -1,103 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import CardWithLeftIcon from '.';
-import { featherLogo } from '../icons';
-
-<Meta title="JSX/Cards/Card with left icon" />
-
-# Card with left icon
-
-| attribute  | unit                                                                                 | description                                       | default value | required |
-| ---------- | ------------------------------------------------------------------------------------ | ------------------------------------------------- | ------------- | -------- |
-| title      | string                                                                               | The title text that needs to be displayed         | n/a           | true     |
-| cardSize  | [Card Size (xs,s,m,b)](?path=/story/jsx-cards-intro--page#card-size-xsmall-small-medium-big) | Size of the card                                 | medium        | false    |
-| leftIcon   | [Icon](?path=/story/jsx-cards-intro--page#icon)                                      | Icon displayed on the left hand side of the card  | n/a           | false    |
-| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)                                      | Icon displayed on the right hand side of the card | n/a           | false    |
-| state      | [Card State](?path=/story/jsx-cards-intro--page#card-state)                          | State that describe the interation with the card  | actionable    | false    |
-| dropshadow | boolean                                                                              | If the card should have a box-shadow or not       | true          | false    |
-| className  | string                                                                               | Class name for most top parent element         | 'n/a'           | false    |
-
-<Preview>
-  <>
-    <h4 className="p-h4">Extra small card</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="xsmall"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4">Small card</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="small"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">Medium card</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="medium"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">Big card</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="big"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">Muted</h4>
-    <CardWithLeftIcon
-      state="muted"
-      title="Lorem ipsum"
-      cardSize="big"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">No left icon and right icon</h4>
-    <CardWithLeftIcon title="Lorem ipsum" cardSize="big" className="wmx6 mt8">
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">No dropshadow</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="medium"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-      dropshadow={false}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-  </>
-</Preview>

package/src/lib/components/cards/cardWithTopIcon/index.stories.mdx

@@ -1,105 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import CardWithTopIcon from '.';
-import { featherLogo } from '../icons';
-
-<Meta title="JSX/Cards/Card with top icon" />
-
-# Card with top icon
-
-| attribute  | unit                                                                                      | description                                      | default value | required |
-| ---------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | -------- |
-| title      | string                                                                                    | The title text that needs to be displayed        | n/a           | true     |
-| cardSize   | [Card Size (s,m,b)](?path=/story/jsx-cards-intro--page#card-size-xsmall-small-medium-big) | Size of the card                                 | medium        | false    |
-| topIcon    | [Icon](?path=/story/jsx-cards-intro--page#icon)                                           | Icon displayed on the top of the card            | n/a           | true     |
-| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)                                           | Icon displayed on the right of the title         | n/a           | false    |
-| state      | [Card State](?path=/story/jsx-cards-intro--page#card-state)                               | State that describe the interation with the card | actionable    | false    |
-| dropshadow | boolean                                                                                   | If the card should have a box-shadow or not      | true          | false    |
-
-<Preview>
-  <>
-    <h4 className="p-h4">Small card</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      cardSize="small"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      topIcon={featherLogo}
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">Medium card</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      cardSize="medium"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      topIcon={featherLogo}
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">Big card</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      cardSize="big"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      topIcon={featherLogo}
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">Muted</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      topIcon={featherLogo}
-      state="muted"
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">No right icon</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      topIcon={featherLogo}
-      cardSize="small"
-      className="wmx6 mt8"
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">No dropshadow</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      topIcon={featherLogo}
-      cardSize="small"
-      className="wmx6 mt8"
-      dropshadow={false}
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-  </>
-</Preview>