@popsure/dirty-swan 0.31.2 → 0.33.0

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

@@ -0,0 +1,129 @@
+import classNames from "classnames";
+import { ReactNode } from "react";
+
+export interface CheckboxWithDescription {
+  title: string;
+  description?: string;
+  icon?: (selected: boolean) => ReactNode;
+}
+
+export interface CheckboxProps<ValueType extends string> {
+  options: Record<ValueType, string | CheckboxWithDescription>;
+  value?: ValueType[];
+  onChange: (value: ValueType[]) => void;
+  wide?: boolean;
+  inlineLayout?: boolean;
+  className?: string;
+  labelClassName?: string;
+  optionClassName?: string
+}
+
+export const Checkbox = <ValueType extends string>({
+  options,
+  value = [],
+  onChange,
+  wide = false,
+  inlineLayout = false,
+  className = '',
+  labelClassName = '',
+  optionClassName = '',
+}: CheckboxProps<ValueType> & {  }) => {
+  const hasNoneValue = Object.keys(options).includes('NONE');
+
+  const handleOnChange = (newValue: ValueType) => {
+    if (value?.includes(newValue)) {
+      const filteredCheckboxValues = value.filter(
+        (selectedValue) => selectedValue !== newValue
+      );
+
+      onChange(filteredCheckboxValues);
+      return;
+    }
+
+    if (hasNoneValue && newValue === 'NONE') {
+      onChange([newValue]);
+      return;
+    }
+
+    if (hasNoneValue && newValue !== 'NONE') {
+      const newValues = value
+        ? [...value.filter((v) => v !== 'NONE'), newValue]
+        : [newValue];
+      onChange(newValues);
+      return;
+    }
+
+    const newValues = value
+      ? [...value, newValue]
+      : [newValue];
+    onChange(newValues);
+  };
+
+
+  const entries = Object.entries(options) as [
+    ValueType,
+    string | CheckboxWithDescription
+  ][];
+
+  return (
+    <div
+      className={classNames(className, 'd-flex gap8', {
+        ws10: wide,
+        ws6: !wide,
+        'fd-row': inlineLayout,
+        'f-wrap': inlineLayout,
+        'fd-column': !inlineLayout,
+      })}
+    >
+      {entries.map(([currentValue, label]) => {
+        const checked = value?.includes(currentValue);
+        const customIcon = (label as CheckboxWithDescription)?.icon;
+
+        return (
+          <div className={optionClassName} key={currentValue}>
+            <input
+              className={classNames(
+                "p-checkbox", {
+                  'p-checkbox--no-icon': customIcon
+                }
+              )}
+              id={currentValue}
+              type="checkbox"
+              value={currentValue}
+              onChange={() => handleOnChange(currentValue)}
+              checked={checked}
+              data-testid={`checkbox-input-${currentValue}`}
+            />
+
+            <label
+              htmlFor={currentValue}
+              className={classNames(
+                labelClassName,
+                'p-label p-label--bordered pr16',
+                {
+                  'jc-center': customIcon,
+                  'fd-column': customIcon
+                }
+              )}
+              data-cy={`checkbox-${currentValue}`}
+              data-testid={`checkbox-${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/markdown/index.stories.tsx

@@ -0,0 +1,69 @@
+import { Markdown, MarkdownProps } from '.';
+import example from './example.md';
+
+const story = {
+  title: 'JSX/Markdown',
+  component: Markdown,
+  argTypes: {
+    children: {
+      description: 'MD content to be rendered in the component.',
+    },
+    className: {
+      defaultValue: '',
+      description: 'This property allows to add custom styles to the component.',
+    },
+    customMDComponents: {
+      defaultValue: {},
+      description: 'An object that allows creating custom MD components by passing the key to wrap it in, and the logic to render, as a function that returns an HTMLElement.',
+      table: {
+        type: {
+            summary: 'Record<componentKey, (props: HTMLElmentAttributes) => HTMLElement>'
+        }
+      }
+    },
+    paragraphClassName: {
+      defaultValue: '',
+      description: 'This property allows to add custom styles to the paragraph (`<p>`) component rendered inside Markdown component.',
+    },
+    openLinksInNewTab: {
+      defaultValue: false,
+      description: 'Wether link components rendered inside Markdown should open in a new tab (`target="_blank"`).',
+    }
+  },
+  args: {
+    children: '## Title \n This is **our content**.'
+  },
+  parameters: {
+    componentSubtitle: (
+      <>
+        Display markdown text based on <a href="https://github.com/remarkjs/react-markdown" target='_blank' rel="noreferrer">react-markdown</a> with custom styling.
+      </>
+    ),
+  },
+};
+
+export const MarkdownStory = ({ children, className }: MarkdownProps) => (
+  <Markdown className={className}>
+    {children}
+  </Markdown>
+);
+
+MarkdownStory.storyName = "Markdown";
+
+export const AvailableMDComponents = ({ className }: MarkdownProps) => (
+  <Markdown className={className}>
+    {example}
+  </Markdown>
+);
+
+export const AddingCustomComponents = ({ className }: MarkdownProps) => (
+  <Markdown customMDComponents={{
+    h6: (props: any) => (
+      <h6 className='tc-red-500'>{props.children}</h6>
+    )
+  }}>
+    ###### This is a custom H6 that will always be red
+  </Markdown>
+);
+
+export default story;

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

@@ -1,5 +1,5 @@
 import { h } from 'hastscript/html.js';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkDirective from 'remark-directive';
 import visit from 'unist-util-visit';
@@ -101,19 +101,21 @@ const Code = (props: any) => {
   );
 };
 
+export interface MarkdownProps {
+  children: string;
+  customMDComponents?: Record<string, FunctionComponent<any>>;
+  className?: string;
+  openLinksInNewTab?: boolean;
+  paragraphClassName?: string;
+}
+
 const Markdown = ({
   children,
   customMDComponents,
   className = '',
   openLinksInNewTab = false,
   paragraphClassName = '',
-}: {
-  children: string;
-  customMDComponents?: Record<string, FunctionComponent<any>>;
-  className?: string;
-  openLinksInNewTab?: boolean;
-  paragraphClassName?: string;
-}) => (
+}: MarkdownProps) => (
   <ReactMarkdown
     children={children}
     className={className}
@@ -136,4 +138,4 @@ const Markdown = ({
   />
 );
 
-export default Markdown;
+export { Markdown};

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

@@ -28,11 +28,7 @@ const story = {
     selectedIndex: 0,
   },
   parameters: {
-    docs: {
-      description: {
-        component: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
-      },
-    },
+    componentSubtitle: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
   },
 };
 

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

@@ -0,0 +1,35 @@
+import { SignaturePad, SignaturePadProps } from '.';
+
+const story = {
+  title: 'JSX/SignaturePad',
+  component: SignaturePad,
+  argTypes: {
+    onChange: {
+      action: true,
+      table: {
+        category: "Callbacks",
+      },
+    },
+  },
+  parameters: {
+    componentSubtitle: 'Signature pad are user interface elements which allow user sign any legal document.',
+  },
+};
+
+export const SignaturePadStory = ({
+  onChange,
+}: SignaturePadProps) => {
+  const handleOnChange = (newIndex: string) => {
+    onChange?.(newIndex);
+  };
+
+  return (
+    <SignaturePad
+      onChange={handleOnChange}
+    />
+  );
+};
+
+SignaturePadStory.storyName = "SignaturePad";
+
+export default story;

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

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 
-import SignaturePad from 'signature_pad';
+import Signature from 'signature_pad';
 
 import styles from './style.module.scss';
 
 import sign from './img/sign.svg';
 import reset from './img/reset.svg';
 
-interface Props {
+export interface SignaturePadProps {
   onChange: (base64signature: string) => void;
 }
 
@@ -15,12 +15,12 @@ interface State {
   hasContent: boolean;
 }
 
-class Signature extends Component<Props, State> {
+class SignaturePad extends Component<SignaturePadProps, State> {
   private canvasRef: React.RefObject<HTMLCanvasElement>;
   private canvas: any;
   private signaturePad: any;
 
-  constructor(props: Props) {
+  constructor(props: SignaturePadProps) {
     super(props);
     this.state = {
       hasContent: false,
@@ -33,7 +33,7 @@ class Signature extends Component<Props, State> {
 
   public componentDidMount() {
     this.canvas = this.canvasRef.current;
-    this.signaturePad = new SignaturePad(this.canvas, {
+    this.signaturePad = new Signature(this.canvas, {
       onEnd: this.notifyOnChange,
     });
     this.resizeCanvas();
@@ -93,4 +93,4 @@ class Signature extends Component<Props, State> {
   }
 }
 
-export default Signature;
+export { SignaturePad };

package/src/lib/index.tsx

@@ -1,6 +1,6 @@
 import DateSelector from './components/dateSelector';
-import SignaturePad from './components/signaturePad';
-import AutocompleteAddress from './components/autocompleteAddress';
+import { SignaturePad } from './components/signaturePad';
+import { AutocompleteAddress } from './components/autocompleteAddress';
 import Input from './components/input';
 import MultiDropzone, { 
   FileType,
@@ -8,9 +8,10 @@ import MultiDropzone, {
   UploadedFile,
   UploadStatus
 } from './components/multiDropzone';
-import DownloadButton from './components/downloadButton';
+import { DownloadButton } from './components/downloadButton';
 import IbanInput from './components/input/iban';
 import CurrencyInput from './components/input/currency';
+import { Checkbox } from './components/input/checkbox';
 import {
   BottomModal,
   RegularModal,
@@ -37,7 +38,8 @@ import {
   TableHeader,
 } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
-import Markdown from './components/markdown';
+import { Markdown } from './components/markdown';
+import { images } from './util/images';
 
 export {
   DateSelector,
@@ -68,6 +70,8 @@ export {
   TableInfoButton,
   SegmentedControl,
   Markdown,
+  Checkbox,
+  images,
 };
 
 export type {

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

@@ -145,6 +145,10 @@
   }
 }
 
+.p-checkbox--no-icon + label::before {
+  display: none!important;
+}
+
 .p-label {
   cursor: pointer;
 

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

@@ -0,0 +1,27 @@
+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.',
+      },
+    },
+  }
+};
+
+
+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>
+);
+
+export default story;

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

@@ -0,0 +1,12 @@
+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',
+} as const;
+
+export { images };

package/dist/cjs/lib/components/autocompleteAddress/demo.d.ts

@@ -1,4 +0,0 @@
-export declare const WithoutAddress: () => JSX.Element;
-export declare const WithAddress: () => JSX.Element;
-export declare const WithoutAddressLocalized: () => JSX.Element;
-export declare const WithAddressLocalized: () => JSX.Element;

package/dist/esm/App.d.ts

@@ -1,3 +0,0 @@
-import './lib/scss/index.scss';
-declare function App(): JSX.Element;
-export default App;

package/dist/esm/_commonjsHelpers-e7f67fd8.js

@@ -1,23 +0,0 @@
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function getAugmentedNamespace(n) {
-	if (n.__esModule) return n;
-	var a = Object.defineProperty({}, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
-export { getDefaultExportFromCjs as a, commonjsGlobal as c, getAugmentedNamespace as g };
-//# sourceMappingURL=_commonjsHelpers-e7f67fd8.js.map

package/dist/esm/_commonjsHelpers-e7f67fd8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_commonjsHelpers-e7f67fd8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/autocompleteAddress/demo.js

@@ -1,64 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import AutoCompleteAddress from './index.js';
-import '../../tslib.es6-5bc94358.js';
-import '../../index-e9e37a34.js';
-import '../../index-1463d5e9.js';
-import '../../_commonjsHelpers-e7f67fd8.js';
-import '../input/index.js';
-import '../../index-fb46adf9.js';
-import '../../style-inject.es-1f59c1d0.js';
-
-var WithoutAddress = function () {
-    var _a = useState(undefined), address = _a[0], setAddress = _a[1];
-    return (jsx(AutoCompleteAddress, { onAddressChange: function (address) {
-            setAddress(address);
-        }, address: address, apiKey: "AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8" }, void 0));
-};
-var WithAddress = function () {
-    var _a = useState({
-        street: 'Lohmuehlenstraße',
-        houseNumber: '65',
-        city: 'Berlin',
-        country: 'DE',
-        additionalInformation: 'c/o Factory',
-    }), address = _a[0], setAddress = _a[1];
-    return (jsx(AutoCompleteAddress, { onAddressChange: function (address) {
-            setAddress(address);
-        }, address: address, apiKey: "AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8" }, void 0));
-};
-var WithoutAddressLocalized = function () {
-    var _a = useState(), address = _a[0], setAddress = _a[1];
-    return (jsx(AutoCompleteAddress, { onAddressChange: function (address) {
-            setAddress(address);
-        }, address: address, apiKey: "AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8", placeholders: {
-            manualAddressEntry: 'Adresse suchen',
-            street: 'Straße',
-            houseNumber: 'Hausnummer',
-            additionalInformation: 'Adresszusatz (c/o, z. Hd., o.V.i.A, ...)',
-            postcode: 'PLZ',
-            city: 'Stadt',
-        }, manualAddressEntryTexts: {
-            preText: 'Oder ',
-            cta: 'Adresse direkt eingeben',
-        } }, void 0));
-};
-var WithAddressLocalized = function () {
-    var _a = useState({}), address = _a[0], setAddress = _a[1];
-    return (jsx(AutoCompleteAddress, { onAddressChange: function (address) {
-            setAddress(address);
-        }, address: address, apiKey: "AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8", placeholders: {
-            manualAddressEntry: 'Adresse suchen',
-            street: 'Straße',
-            houseNumber: 'Hausnummer',
-            additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',
-            postcode: 'PLZ',
-            city: 'Stadt',
-        }, manualAddressEntryTexts: {
-            preText: 'Oder ',
-            cta: 'Adresse direkt eingeben',
-        } }, void 0));
-};
-
-export { WithAddress, WithAddressLocalized, WithoutAddress, WithoutAddressLocalized };
-//# sourceMappingURL=demo.js.map

package/dist/esm/components/autocompleteAddress/demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"demo.js","sources":["../../../../../src/lib/components/autocompleteAddress/demo.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Address } from '@popsure/public-models';\n\nimport AutoCompleteAddress from '.';\n\nexport const WithoutAddress = () => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>(\n    undefined\n  );\n  return (\n    <AutoCompleteAddress\n      onAddressChange={(address) => {\n        setAddress(address);\n      }}\n      address={address}\n      apiKey=\"AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8\"\n    />\n  );\n};\n\nexport const WithAddress = () => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>({\n    street: 'Lohmuehlenstraße',\n    houseNumber: '65',\n    city: 'Berlin',\n    country: 'DE',\n    additionalInformation: 'c/o Factory',\n  });\n  return (\n    <AutoCompleteAddress\n      onAddressChange={(address) => {\n        setAddress(address);\n      }}\n      address={address}\n      apiKey=\"AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8\"\n    />\n  );\n};\n\nexport const WithoutAddressLocalized = () => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>();\n  return (\n    <AutoCompleteAddress\n      onAddressChange={(address) => {\n        setAddress(address);\n      }}\n      address={address}\n      apiKey=\"AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8\"\n      placeholders={{\n        manualAddressEntry: 'Adresse suchen',\n        street: 'Straße',\n        houseNumber: 'Hausnummer',\n        additionalInformation: 'Adresszusatz (c/o, z. Hd., o.V.i.A, ...)',\n        postcode: 'PLZ',\n        city: 'Stadt',\n      }}\n      manualAddressEntryTexts={{\n        preText: 'Oder ',\n        cta: 'Adresse direkt eingeben',\n      }}\n    />\n  );\n};\n\nexport const WithAddressLocalized = () => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>({});\n  return (\n    <AutoCompleteAddress\n      onAddressChange={(address) => {\n        setAddress(address);\n      }}\n      address={address}\n      apiKey=\"AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8\"\n      placeholders={{\n        manualAddressEntry: 'Adresse suchen',\n        street: 'Straße',\n        houseNumber: 'Hausnummer',\n        additionalInformation: 'Adresszusatz (c/o, z.Hd., o.V.i.A, ...)',\n        postcode: 'PLZ',\n        city: 'Stadt',\n      }}\n      manualAddressEntryTexts={{\n        preText: 'Oder ',\n        cta: 'Adresse direkt eingeben',\n      }}\n    />\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;IAKa,cAAc,GAAG;IACtB,IAAA,KAAwB,QAAQ,CACpC,SAAS,CACV,EAFM,OAAO,QAAA,EAAE,UAAU,QAEzB,CAAC;IACF,QACEA,IAAC,mBAAmB,IAClB,eAAe,EAAE,UAAC,OAAO;YACvB,UAAU,CAAC,OAAO,CAAC,CAAC;SACrB,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,yCAAyC,WAChD,EACF;AACJ,EAAE;IAEW,WAAW,GAAG;IACnB,IAAA,KAAwB,QAAQ,CAA+B;QACnE,MAAM,EAAE,kBAAkB;QAC1B,WAAW,EAAE,IAAI;QACjB,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,IAAI;QACb,qBAAqB,EAAE,aAAa;KACrC,CAAC,EANK,OAAO,QAAA,EAAE,UAAU,QAMxB,CAAC;IACH,QACEA,IAAC,mBAAmB,IAClB,eAAe,EAAE,UAAC,OAAO;YACvB,UAAU,CAAC,OAAO,CAAC,CAAC;SACrB,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,yCAAyC,WAChD,EACF;AACJ,EAAE;IAEW,uBAAuB,GAAG;IAC/B,IAAA,KAAwB,QAAQ,EAAgC,EAA/D,OAAO,QAAA,EAAE,UAAU,QAA4C,CAAC;IACvE,QACEA,IAAC,mBAAmB,IAClB,eAAe,EAAE,UAAC,OAAO;YACvB,UAAU,CAAC,OAAO,CAAC,CAAC;SACrB,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,yCAAyC,EAChD,YAAY,EAAE;YACZ,kBAAkB,EAAE,gBAAgB;YACpC,MAAM,EAAE,QAAQ;YAChB,WAAW,EAAE,YAAY;YACzB,qBAAqB,EAAE,0CAA0C;YACjE,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,OAAO;SACd,EACD,uBAAuB,EAAE;YACvB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,yBAAyB;SAC/B,WACD,EACF;AACJ,EAAE;IAEW,oBAAoB,GAAG;IAC5B,IAAA,KAAwB,QAAQ,CAA+B,EAAE,CAAC,EAAjE,OAAO,QAAA,EAAE,UAAU,QAA8C,CAAC;IACzE,QACEA,IAAC,mBAAmB,IAClB,eAAe,EAAE,UAAC,OAAO;YACvB,UAAU,CAAC,OAAO,CAAC,CAAC;SACrB,EACD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,yCAAyC,EAChD,YAAY,EAAE;YACZ,kBAAkB,EAAE,gBAAgB;YACpC,MAAM,EAAE,QAAQ;YAChB,WAAW,EAAE,YAAY;YACzB,qBAAqB,EAAE,yCAAyC;YAChE,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,OAAO;SACd,EACD,uBAAuB,EAAE;YACvB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,yBAAyB;SAC/B,WACD,EACF;AACJ;;;;"}