@popsure/dirty-swan 0.33.3 → 0.33.5

package/dist/esm/lib/components/dateSelector/index.stories.d.ts

@@ -0,0 +1,65 @@
+import { DateSelectorProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ value, onChange, yearBoundaries, displayCalendar, placeholders, dayjsLocale, firstDayOfWeek, }: DateSelectorProps) => JSX.Element;
+    decorators: ((Story: any) => JSX.Element)[];
+    argTypes: {
+        yearBoundaries: {
+            description: string;
+            defaultValue: {
+                min: number;
+                max: number;
+            };
+        };
+        displayCalendar: {
+            description: string;
+            defaultValue: boolean;
+        };
+        onChange: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        dayjsLocale: {
+            description: string;
+        };
+        placeholders: {
+            description: string;
+        };
+        firstDayOfWeek: {
+            description: string;
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+        design: {
+            url: string;
+            type: string;
+        };
+        docs: {
+            source: {
+                excludeDecorators: boolean;
+            };
+        };
+    };
+};
+export declare const DateSelectorStory: {
+    ({ displayCalendar, onChange, yearBoundaries, value }: DateSelectorProps): JSX.Element;
+    storyName: string;
+};
+export declare const DateSelectorLocalisation: ({ onChange, value, yearBoundaries }: DateSelectorProps) => JSX.Element;
+export default story;

package/dist/esm/lib/components/modal/bottomModal/index.d.ts

@@ -1,3 +1,2 @@
 import { Props } from '..';
-declare const _default: ({ title, isOpen, children, onClose, className, dismissible, }: Props) => JSX.Element;
-export default _default;
+export declare const BottomModal: ({ title, isOpen, children, onClose, className, dismissible, }: Props) => JSX.Element;

package/dist/esm/lib/components/modal/bottomOrRegularModal/index.d.ts

@@ -1,3 +1,2 @@
 import { Props } from '..';
-declare const _default: ({ isOpen, ...props }: Props) => JSX.Element;
-export default _default;
+export declare const BottomOrRegularModal: ({ isOpen, ...props }: Props) => JSX.Element;

package/dist/esm/lib/components/modal/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import BottomModal from './bottomModal';
-import RegularModal from './regularModal';
-import BottomOrRegularModal from './bottomOrRegularModal';
+import { BottomModal } from './bottomModal';
+import { RegularModal } from './regularModal';
+import { BottomOrRegularModal } from './bottomOrRegularModal';
 export interface Props {
     title?: string;
     isOpen: boolean;

package/dist/esm/lib/components/modal/index.stories.d.ts

@@ -0,0 +1,62 @@
+import { Props } from '.';
+declare const story: {
+    title: string;
+    component: ({ isOpen, ...props }: Props) => JSX.Element;
+    argTypes: {
+        title: {
+            defaultValue: string;
+            description: string;
+        };
+        isOpen: {
+            defaultValue: boolean;
+            description: string;
+        };
+        dismissible: {
+            defaultValue: boolean;
+            description: string;
+        };
+        className: {
+            defaultValue: string;
+            description: string;
+        };
+        children: {
+            defaultValue: string;
+            description: string;
+            type: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        onClose: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export declare const BottomOrRegularModalStory: {
+    ({ children, className, dismissible, isOpen, onClose, title, }: Props): JSX.Element;
+    storyName: string;
+};
+export declare const RegularModalStory: {
+    ({ children, isOpen, onClose, title, }: Props): JSX.Element;
+    storyName: string;
+};
+export declare const BottomModalStory: {
+    ({ children, isOpen, onClose, title, }: Props): JSX.Element;
+    storyName: string;
+};
+export declare const NonDismissibleModal: ({ children, isOpen, onClose, title, }: Props) => JSX.Element;
+export default story;

package/dist/esm/lib/components/modal/regularModal/index.d.ts

@@ -1,3 +1,2 @@
 import { Props } from '..';
-declare const _default: ({ title, isOpen, children, onClose, className, dismissible, }: Props) => JSX.Element;
-export default _default;
+export declare const RegularModal: ({ title, isOpen, children, onClose, className, dismissible, }: Props) => JSX.Element;

package/dist/esm/lib/components/multiDropzone/index.d.ts

@@ -1,15 +1,15 @@
 import { AcceptType, FileType, TextOverrides, UploadedFile, UploadStatus } from './types';
 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;
 }
-declare const MultiDropZone: ({ accept, uploadedFiles, onFileSelect, uploading, onRemoveFile, isCondensed, maxFiles, maxSize, textOverrides, }: MultiDropzoneProps) => JSX.Element;
+declare const MultiDropzone: ({ uploadedFiles, onFileSelect, onRemoveFile, uploading, isCondensed, accept, maxFiles, maxSize, textOverrides, }: MultiDropzoneProps) => JSX.Element;
 export type { FileType, MultiDropzoneProps, UploadedFile, UploadStatus };
-export default MultiDropZone;
+export { MultiDropzone };

package/dist/esm/lib/components/multiDropzone/index.stories.d.ts

@@ -0,0 +1,72 @@
+import { MultiDropzoneProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ uploadedFiles, onFileSelect, onRemoveFile, uploading, isCondensed, accept, maxFiles, maxSize, textOverrides, }: MultiDropzoneProps) => JSX.Element;
+    argTypes: {
+        uploadedFiles: {
+            defaultValue: {
+                id: string;
+                name: string;
+            }[];
+            description: string;
+        };
+        uploading: {
+            defaultValue: boolean;
+            description: string;
+        };
+        isCondensed: {
+            defaultValue: boolean;
+            description: string;
+        };
+        maxFiles: {
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        maxSize: {
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        accept: {
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onRemoveFile: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        onFileSelect: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        textOverrides: {
+            description: string;
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+    };
+};
+export declare const MultiDropzoneStory: {
+    ({ onFileSelect, onRemoveFile, uploading, uploadedFiles, isCondensed, maxFiles, maxSize, textOverrides, }: MultiDropzoneProps): JSX.Element;
+    storyName: string;
+};
+export declare const UploadingState: () => JSX.Element;
+export declare const CondensedView: () => JSX.Element;
+export declare const ErrorState: () => JSX.Element;
+export declare const AcceptingOnlyImages: () => JSX.Element;
+export declare const AcceptingOnlyDocuments: () => JSX.Element;
+export declare const LimitingFileSizeTo2MB: () => JSX.Element;
+export declare const I18nSupport: () => JSX.Element;
+export default story;

package/dist/esm/lib/index.d.ts

@@ -1,8 +1,8 @@
-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, { FileType, MultiDropzoneProps, UploadedFile, UploadStatus } from './components/multiDropzone';
+import { MultiDropzone, FileType, MultiDropzoneProps, UploadedFile, UploadStatus } from './components/multiDropzone';
 import { DownloadButton } from './components/downloadButton';
 import IbanInput from './components/input/iban';
 import CurrencyInput from './components/input/currency';

package/dist/esm/lib/util/images/index.d.ts

@@ -2,10 +2,22 @@ declare const images: {
     readonly aid: "https://assets.cdn.feather-insurance.com/assets/images/aid.svg";
     readonly bed: "https://assets.cdn.feather-insurance.com/assets/images/bed.svg";
     readonly bigDog: "https://assets.cdn.feather-insurance.com/assets/images/bigDog.svg";
+    readonly verticalIcons: {
+        readonly dogLiability: "https://assets.cdn.feather-insurance.com/assets/images/dogLiabilityIcon.png";
+        readonly dogLiability2x: "https://assets.cdn.feather-insurance.com/assets/images/dogLiabilityIcon2x.png";
+        readonly dogLiability3x: "https://assets.cdn.feather-insurance.com/assets/images/dogLiabilityIcon3x.png";
+        readonly lifeIcon: "https://assets.cdn.feather-insurance.com/assets/images/lifeIcon.png";
+        readonly lifeIcon2x: "https://assets.cdn.feather-insurance.com/assets/images/lifeIcon2x.png";
+        readonly lifeIcon3x: "https://assets.cdn.feather-insurance.com/assets/images/lifeIcon3x.png";
+    };
     readonly brokenAquarium: "https://assets.cdn.feather-insurance.com/assets/images/brokenAquarium.svg";
     readonly brokenGlass: "https://assets.cdn.feather-insurance.com/assets/images/brokenGlass.svg";
     readonly damagedLaptop: "https://assets.cdn.feather-insurance.com/assets/images/damagedLaptop.svg";
     readonly moneyIncome: "https://assets.cdn.feather-insurance.com/assets/images/moneyIncome.svg";
     readonly washingMachine: "https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg";
+    readonly bill: "https://assets.cdn.feather-insurance.com/assets/images/bill.svg";
+    readonly books: "https://assets.cdn.feather-insurance.com/assets/images/books.svg";
+    readonly finalExpenses: "https://assets.cdn.feather-insurance.com/assets/images/finalExpenses.svg";
+    readonly mortgage: "https://assets.cdn.feather-insurance.com/assets/images/mortgage.svg";
 };
 export { images };

package/dist/esm/util/images/index.stories.js

@@ -1,6 +1,6 @@
 import { _ as __assign } from '../../tslib.es6-5bc94358.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { i as images } from '../../index-db2e797f.js';
+import { i as images } from '../../index-31224f74.js';
 
 var story = {
     title: 'Utils/Images',
@@ -10,11 +10,14 @@ var story = {
                 component: 'Use the `images` object export to access our list of available images.',
             },
         },
-    }
+    },
 };
-var Images = function () { return (jsx("div", __assign({ className: 'd-flex gap8 f-wrap' }, { children: Object.entries(images).map(function (_a) {
+var Images = function () { return (jsx("div", __assign({ className: "d-flex gap8 f-wrap" }, { children: Object.entries(images).map(function (_a) {
         var key = _a[0], value = _a[1];
-        return (jsxs("div", __assign({ className: "ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100" }, { children: [jsx("span", __assign({ className: 'p-p--small mb8' }, { children: key }), void 0),
+        if (typeof value !== 'string') {
+            return null;
+        }
+        return (jsxs("div", __assign({ className: "ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100" }, { children: [jsx("span", __assign({ className: "p-p--small mb8" }, { children: key }), void 0),
                 jsx("img", { alt: key, src: value }, void 0)] }), key));
     }) }), void 0)); };
 

package/dist/esm/util/images/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { images } from \"../../util/images\";\n\nconst story = {\n  title: 'Utils/Images',\n  parameters: {\n    docs: {\n      description: {\n        component: 'Use the `images` object export to access our list of available images.',\n      },\n    },\n  }\n};\n\n\nexport const Images = () => (\n  <div className='d-flex gap8 f-wrap'>\n    {Object.entries(images).map(([key, value]) => (\n      <div key={key} className=\"ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100\">\n        <span className='p-p--small mb8'>{key}</span>\n        \n        <img alt={key} src={value} />\n      </div>\n    ))}\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,wEAAwE;aACpF;SACF;KACF;EACD;IAGW,MAAM,GAAG,cAAM,QAC1BA,sBAAK,SAAS,EAAC,oBAAoB,gBAChC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,UAAC,EAAY;YAAX,GAAG,QAAA,EAAE,KAAK,QAAA;QAAM,QAC5CC,uBAAe,SAAS,EAAC,8DAA8D,iBACrFD,uBAAM,SAAS,EAAC,gBAAgB,gBAAE,GAAG,YAAQ;gBAE7CA,aAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,WAAI,MAHrB,GAAG,CAIP;KACP,CAAC,YACE;;;;;"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { images } from '../../util/images';\n\nconst story = {\n  title: 'Utils/Images',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `images` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nexport const Images = () => (\n  <div className=\"d-flex gap8 f-wrap\">\n    {Object.entries(images).map(([key, value]) => {\n      if (typeof value !== 'string') {\n        return null;\n      }\n      return (\n        <div\n          key={key}\n          className=\"ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100\"\n        >\n          <span className=\"p-p--small mb8\">{key}</span>\n\n          <img alt={key} src={value} />\n        </div>\n      );\n    })}\n  </div>\n);\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;IAEM,KAAK,GAAG;IACZ,KAAK,EAAE,cAAc;IACrB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,wEAAwE;aAC3E;SACF;KACF;EACD;IAEW,MAAM,GAAG,cAAM,QAC1BA,sBAAK,SAAS,EAAC,oBAAoB,gBAChC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,UAAC,EAAY;YAAX,GAAG,QAAA,EAAE,KAAK,QAAA;QACtC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,IAAI,CAAC;SACb;QACD,QACEC,uBAEE,SAAS,EAAC,8DAA8D,iBAExED,uBAAM,SAAS,EAAC,gBAAgB,gBAAE,GAAG,YAAQ;gBAE7CA,aAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,WAAI,MALxB,GAAG,CAMJ,EACN;KACH,CAAC,YACE;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.33.3",
+  "version": "0.33.5",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import './lib/scss/index.scss';
 
-import DateSelector from './lib/components/dateSelector';
+import { DateSelector } from './lib/components/dateSelector';
 import { SignaturePad } from './lib/components/signaturePad';
 import { CardWithLeftIcon } from './lib/components/cards';
 

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

@@ -0,0 +1,104 @@
+import { DateSelector, DateSelectorProps } from '.';
+import de from 'dayjs/locale/de';
+
+const story = {
+  title: 'JSX/DateSelector',
+  component: DateSelector,
+  decorators: [
+    (Story: any) => (
+      <div style={{ minHeight: '320px', paddingTop: '80px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    yearBoundaries: {
+      description: 'Object containing the min and max year boundaries to show.',
+      defaultValue: {
+        min: 1920, 
+        max: 2001
+      }
+    },
+    displayCalendar: {
+      description: 'Whether the calendar icon/button trigger should show',
+      defaultValue: false
+    },
+    onChange: {
+      description: 'Called when the value is changed. Must be a valid date to be triggered',
+      action: true,
+      table: {
+        category: 'Callbacks',
+        type: { 
+          summary: '(date: YYYY-MM-DD) => void'
+        },
+      },
+    },
+    value: {
+      defaultValue: '2000-12-12',
+      description: 'Value of the input',
+      table: {
+        type: { 
+          summary: 'YYYY-MM-DD'
+        },
+      },
+    },
+    dayjsLocale: {
+      description: `Property used to localize the calendar of the DateSelector. If no dayjsLocale is supplied, the default locale 'en' will be used. Additional locales can be imported from dayjs like import de from 'dayjs/locale/de'; and then passed on to the component.`
+    },
+    placeholders: {
+      description: 'Properties used to localize the calendar of the DateSelector. `placeholders` object can be used to change the text of the different dropdowns.'
+    },
+    firstDayOfWeek: {
+      description: `Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)`
+    }
+  },
+  parameters: {
+    componentSubtitle: 'Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.',
+    design: {
+      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D293%253A169',
+      type: 'figma'
+    },
+    docs: {
+      source: {
+        excludeDecorators: true,
+      },
+    },
+  },
+};
+
+export const DateSelectorStory = ({
+  displayCalendar,
+  onChange,
+  yearBoundaries,
+  value
+}: DateSelectorProps) => (
+  <DateSelector
+    onChange={onChange}
+    displayCalendar={displayCalendar}
+    yearBoundaries={yearBoundaries}
+    value={value}
+  />
+);
+
+DateSelectorStory.storyName = "DateSelector";
+
+export const DateSelectorLocalisation = ({ onChange, value, yearBoundaries }: DateSelectorProps) => (
+  <>
+    {/** import de from 'dayjs/locale/de'; */}
+    <DateSelector
+      value={value}
+      yearBoundaries={yearBoundaries}
+      onChange={onChange}
+      displayCalendar={true}
+      placeholders={{
+        day: 'Tag',
+        month: 'Monat',
+        year: 'Jahr',
+      }}
+      dayjsLocale={de}
+      firstDayOfWeek={2}
+    />
+  </>
+);
+
+export default story;

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

@@ -1,6 +1,6 @@
-import { render, fireEvent } from '../../util/testUtils';
+import { render } from '../../util/testUtils';
 
-import DateSelector from '.';
+import { DateSelector } from '.';
 
 const setup = (date: string, onChange: (date: string) => void = () => {}) => {
   return render(

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

@@ -51,27 +51,29 @@ export const daysInMonthOfYear = ({
   return dayjs(`${year}-${month}`).daysInMonth();
 };
 
-const DateSelector = ({
-  value,
-  onChange,
-  yearBoundaries,
-  displayCalendar,
-  placeholders,
-  dayjsLocale,
-  firstDayOfWeek = 0,
-}: {
+export interface DateSelectorProps {
   value?: string;
   onChange: (date: string) => void;
   yearBoundaries: { min: number; max: number };
   displayCalendar?: boolean;
+  dayjsLocale?: ILocale;
   placeholders?: {
     day?: string;
     month?: string;
     year?: string;
   };
-  dayjsLocale?: ILocale;
   firstDayOfWeek?: number;
-}) => {
+}
+
+export const DateSelector = ({
+  value,
+  onChange,
+  yearBoundaries,
+  displayCalendar,
+  placeholders,
+  dayjsLocale,
+  firstDayOfWeek = 0,
+}: DateSelectorProps) => {
   const calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
   const daysInSelectedDate = calendarDateValue
     ? daysInMonthOfYear({
@@ -277,6 +279,4 @@ const DateSelector = ({
       )}
     </div>
   );
-};
-
-export default DateSelector;
+};

package/src/lib/components/modal/bottomModal/index.tsx

@@ -7,7 +7,7 @@ import imageClose from './img/close.svg';
 import useOnClose from '../hooks/useOnClose';
 import classNames from 'classnames';
 
-export default ({
+export const BottomModal = ({
   title,
   isOpen,
   children,

package/src/lib/components/modal/bottomOrRegularModal/index.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { Props, RegularModal } from '..';
-import BottomModal from '../bottomModal';
+import { BottomModal } from '../bottomModal';
 
 import styles from './style.module.scss';
 
-export default ({ isOpen, ...props }: Props) => {
+export const BottomOrRegularModal = ({ isOpen, ...props }: Props) => {
   const mobileRef = useRef<HTMLDivElement>(null);
   const [visibleSize, setVisibleSize] = useState<'desktop' | 'mobile'>(
     'desktop'