@popsure/dirty-swan 0.33.2 → 0.33.4

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

@@ -2,6 +2,11 @@ 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 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";

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-e81a1766.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.2",
+  "version": "0.33.4",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

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

@@ -69,8 +69,8 @@ export const Checkbox = <ValueType extends string>({
   return (
     <div
       className={classNames(className, styles.container, 'd-flex gap8', {
-        ws10: wide,
-        ws6: !wide,
+        [styles.wide]: wide,
+        [styles.narrow]: !wide,
         'fd-row': inlineLayout,
         'f-wrap': inlineLayout,
         'fd-column': !inlineLayout,

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

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

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'

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

@@ -0,0 +1,254 @@
+
+import { useState } from 'react';
+import { BottomModal, BottomOrRegularModal, Props, RegularModal } from '.';
+import { Markdown } from '../markdown';
+
+const story = {
+  title: 'JSX/Modals',
+  component: BottomOrRegularModal,
+  argTypes: {
+    title: {
+      defaultValue: "Modal title",
+      description: "The title that needs to be displayed on the modal",
+    },
+    isOpen: {
+      defaultValue: false,
+      description: "When set to `true`, the modal is displayed. When set to `false` the modal gets removed",
+    },
+    dismissible: {
+      defaultValue: true,
+      description: "The content that gets displayed on the modal",
+    },
+    className: {
+      defaultValue: '',
+      description: 'Any additional className',
+    },
+    children: {
+      defaultValue: 'Modal content to be displayed',
+      description: 'The content that gets displayed on the modal',
+      type: 'text',
+      table: {
+        type: {
+            summary: 'ReactNode'
+        }
+      }
+    },
+    onClose: {
+      description: 'Callback when the user close the modal',
+      action: true,
+      table: {
+        category: "Callbacks",
+      },
+    },
+  },
+  parameters: {
+    componentSubtitle: 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',
+    docs: {
+      description: {
+        component: 'Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.',
+      }
+    },
+  },
+};
+
+export const BottomOrRegularModalStory = ({
+  children,
+  className,
+  dismissible,
+  isOpen,
+  onClose,
+  title,
+}: Props) => {
+  const [display, setDisplay] = useState(isOpen);
+  const handleOnClose = () => {
+    onClose();
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      <button
+        className="p-btn--primary wmn2"
+        onClick={() => setDisplay(true)}
+      >
+        Click to open modal
+      </button>
+
+      <BottomOrRegularModal
+        dismissible={dismissible}
+        className={className}
+        title={title}
+        isOpen={display}
+        onClose={handleOnClose}
+      >
+        <div style={{ padding: '0 24px 24px 24px' }}>
+          <div>
+            {children}
+          </div>
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </BottomOrRegularModal>
+    </>
+  );
+}
+
+BottomOrRegularModalStory.storyName = 'BottomOrRegularModal';
+
+export const RegularModalStory = ({
+  children,
+  isOpen,
+  onClose,
+  title,
+}: Props) => {
+  const [display, setDisplay] = useState(isOpen);
+  const handleOnClose = () => {
+    onClose();
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left "X" icon.  
+      <Markdown>
+        If you want to use it for Mobile only, you should check [Bottom modal](#bottommodal) instead.
+        Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).
+      </Markdown>
+
+      <button
+        className="p-btn--primary wmn2 mt24"
+        onClick={() => setDisplay(true)}
+      >
+        Click to open modal
+      </button>
+
+      <RegularModal
+        title={title}
+        isOpen={display}
+        onClose={handleOnClose}
+      >
+        <div style={{ padding: '0 24px 24px 24px' }}>
+          <div>
+            {children}
+          </div>
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </RegularModal>
+    </>
+  );
+}
+
+RegularModalStory.storyName = 'RegularModal';
+
+export const BottomModalStory = ({
+  children,
+  isOpen,
+  onClose,
+  title,
+}: Props) => {
+  const [display, setDisplay] = useState(isOpen);
+  const handleOnClose = () => {
+    onClose();
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      Bottom modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left "X" icon.
+      <Markdown>
+        If you want to use it for Desktop only, you should check [Regular modal](#regularmodal) instead.
+        Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](#bottomorregularmodal).
+      </Markdown>
+
+      <button
+        className="p-btn--primary wmn2 mt24"
+        onClick={() => setDisplay(true)}
+      >
+        Click to open modal
+      </button>
+
+      <BottomModal
+        title={title}
+        isOpen={display}
+        onClose={handleOnClose}
+      >
+        <div style={{ padding: '0 24px 24px 24px' }}>
+          <div>
+            {children}
+          </div>
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </BottomModal>
+    </>
+  );
+}
+
+BottomModalStory.storyName = 'BottomModal';
+
+export const NonDismissibleModal = ({
+  children,
+  isOpen,
+  onClose,
+  title,
+}: Props) => {
+  const [display, setDisplay] = useState(isOpen);
+  const handleOnClose = () => {
+    onClose();
+    setDisplay(false);
+  };
+
+  return (
+    <>
+      <Markdown>
+        Setting the dismissible prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside.
+        This prop can be useful if we want the user to explicitly interact with the modal options.
+      </Markdown>
+
+      <Markdown>
+        **Warning:** a modal with the dismissible prop can only be closed by changing the isOpen prop to false.
+       </Markdown>
+
+      <button
+        className="p-btn--primary wmn2 mt24"
+        onClick={() => setDisplay(true)}
+      >
+        Click to open modal
+      </button>
+
+      <BottomOrRegularModal
+        dismissible={false}
+        title={title}
+        isOpen={display}
+        onClose={handleOnClose}
+      >
+        <div style={{ padding: '0 24px 24px 24px' }}>
+          <div>
+            {children}
+          </div>
+          <button
+            className="p-btn--primary mt24 wmn3"
+            onClick={() => setDisplay(false)}
+          >
+            Continue
+          </button>
+        </div>
+      </BottomOrRegularModal>
+    </>
+  );
+}
+
+export default story;

package/src/lib/components/modal/index.ts

@@ -1,6 +1,6 @@
-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;

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

@@ -8,7 +8,7 @@ import styles from './style.module.scss';
 import imageClose from './img/close.svg';
 import classNames from 'classnames';
 
-export default ({
+export const RegularModal = ({
   title,
   isOpen,
   children,

package/src/lib/util/images/index.stories.tsx

@@ -1,26 +1,34 @@
-import { images } from "../../util/images";
+import { images } from '../../util/images';
 
 const story = {
   title: 'Utils/Images',
   parameters: {
     docs: {
       description: {
-        component: 'Use the `images` object export to access our list of available images.',
+        component:
+          'Use the `images` object export to access our list of available images.',
       },
     },
-  }
+  },
 };
 
-
 export const Images = () => (
-  <div className='d-flex gap8 f-wrap'>
-    {Object.entries(images).map(([key, value]) => (
-      <div key={key} className="ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100">
-        <span className='p-p--small mb8'>{key}</span>
-        
-        <img alt={key} src={value} />
-      </div>
-    ))}
+  <div className="d-flex gap8 f-wrap">
+    {Object.entries(images).map(([key, value]) => {
+      if (typeof value !== 'string') {
+        return null;
+      }
+      return (
+        <div
+          key={key}
+          className="ws3 d-flex fd-column ai-center br4 p24 pt16 pb16 bg-grey-100"
+        >
+          <span className="p-p--small mb8">{key}</span>
+
+          <img alt={key} src={value} />
+        </div>
+      );
+    })}
   </div>
 );
 

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

@@ -1,12 +1,19 @@
+const basePath = 'https://assets.cdn.feather-insurance.com/assets/images';
+
 const images = {
-  aid: 'https://assets.cdn.feather-insurance.com/assets/images/aid.svg',
-  bed: 'https://assets.cdn.feather-insurance.com/assets/images/bed.svg',
-  bigDog: 'https://assets.cdn.feather-insurance.com/assets/images/bigDog.svg',
-  brokenAquarium: 'https://assets.cdn.feather-insurance.com/assets/images/brokenAquarium.svg',
-  brokenGlass: 'https://assets.cdn.feather-insurance.com/assets/images/brokenGlass.svg',
-  damagedLaptop: 'https://assets.cdn.feather-insurance.com/assets/images/damagedLaptop.svg',
-  moneyIncome: 'https://assets.cdn.feather-insurance.com/assets/images/moneyIncome.svg',
-  washingMachine: 'https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg',
+  aid: `${basePath}/aid.svg`,
+  bed: `${basePath}/bed.svg`,
+  bigDog: `${basePath}/bigDog.svg`,
+  verticalIcons: {
+    dogLiability: `${basePath}/dogLiabilityIcon.png`,
+    dogLiability2x: `${basePath}/dogLiabilityIcon2x.png`,
+    dogLiability3x: `${basePath}/dogLiabilityIcon3x.png`,
+  },
+  brokenAquarium: `${basePath}/brokenAquarium.svg`,
+  brokenGlass: `${basePath}/brokenGlass.svg`,
+  damagedLaptop: `${basePath}/damagedLaptop.svg`,
+  moneyIncome: `${basePath}/moneyIncome.svg`,
+  washingMachine: `${basePath}/washingMachine.svg`,
 } as const;
 
-export { images };
+export { images };

package/dist/esm/index-db2e797f.js

@@ -1,13 +0,0 @@
-var images = {
-    aid: 'https://assets.cdn.feather-insurance.com/assets/images/aid.svg',
-    bed: 'https://assets.cdn.feather-insurance.com/assets/images/bed.svg',
-    bigDog: 'https://assets.cdn.feather-insurance.com/assets/images/bigDog.svg',
-    brokenAquarium: 'https://assets.cdn.feather-insurance.com/assets/images/brokenAquarium.svg',
-    brokenGlass: 'https://assets.cdn.feather-insurance.com/assets/images/brokenGlass.svg',
-    damagedLaptop: 'https://assets.cdn.feather-insurance.com/assets/images/damagedLaptop.svg',
-    moneyIncome: 'https://assets.cdn.feather-insurance.com/assets/images/moneyIncome.svg',
-    washingMachine: 'https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg',
-};
-
-export { images as i };
-//# sourceMappingURL=index-db2e797f.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index-db2e797f.js","sources":["../../../src/lib/util/images/index.ts"],"sourcesContent":["const images = {\n  aid: 'https://assets.cdn.feather-insurance.com/assets/images/aid.svg',\n  bed: 'https://assets.cdn.feather-insurance.com/assets/images/bed.svg',\n  bigDog: 'https://assets.cdn.feather-insurance.com/assets/images/bigDog.svg',\n  brokenAquarium: 'https://assets.cdn.feather-insurance.com/assets/images/brokenAquarium.svg',\n  brokenGlass: 'https://assets.cdn.feather-insurance.com/assets/images/brokenGlass.svg',\n  damagedLaptop: 'https://assets.cdn.feather-insurance.com/assets/images/damagedLaptop.svg',\n  moneyIncome: 'https://assets.cdn.feather-insurance.com/assets/images/moneyIncome.svg',\n  washingMachine: 'https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg',\n} as const;\n\nexport { images };"],"names":[],"mappings":"IAAM,MAAM,GAAG;IACb,GAAG,EAAE,gEAAgE;IACrE,GAAG,EAAE,gEAAgE;IACrE,MAAM,EAAE,mEAAmE;IAC3E,cAAc,EAAE,2EAA2E;IAC3F,WAAW,EAAE,wEAAwE;IACrF,aAAa,EAAE,0EAA0E;IACzF,WAAW,EAAE,wEAAwE;IACrF,cAAc,EAAE,2EAA2E;;;;;"}