@popsure/dirty-swan 0.31.2 → 0.32.0

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/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/index.tsx

@@ -1,6 +1,6 @@
 import DateSelector from './components/dateSelector';
 import SignaturePad from './components/signaturePad';
-import AutocompleteAddress from './components/autocompleteAddress';
+import { AutocompleteAddress } from './components/autocompleteAddress';
 import Input from './components/input';
 import MultiDropzone, { 
   FileType,
@@ -38,6 +38,7 @@ import {
 } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
 import Markdown from './components/markdown';
+import { images } from './util/images';
 
 export {
   DateSelector,
@@ -68,6 +69,7 @@ export {
   TableInfoButton,
   SegmentedControl,
   Markdown,
+  images,
 };
 
 export type {

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/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;;;;"}

package/dist/esm/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/src/lib/components/autocompleteAddress/demo.tsx

@@ -1,88 +0,0 @@
-import React, { useState } from 'react';
-import { Address } from '@popsure/public-models';
-
-import AutoCompleteAddress from '.';
-
-export const WithoutAddress = () => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>(
-    undefined
-  );
-  return (
-    <AutoCompleteAddress
-      onAddressChange={(address) => {
-        setAddress(address);
-      }}
-      address={address}
-      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
-    />
-  );
-};
-
-export const WithAddress = () => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>({
-    street: 'Lohmuehlenstraße',
-    houseNumber: '65',
-    city: 'Berlin',
-    country: 'DE',
-    additionalInformation: 'c/o Factory',
-  });
-  return (
-    <AutoCompleteAddress
-      onAddressChange={(address) => {
-        setAddress(address);
-      }}
-      address={address}
-      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
-    />
-  );
-};
-
-export const WithoutAddressLocalized = () => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>();
-  return (
-    <AutoCompleteAddress
-      onAddressChange={(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',
-      }}
-    />
-  );
-};
-
-export const WithAddressLocalized = () => {
-  const [address, setAddress] = useState<Partial<Address> | undefined>({});
-  return (
-    <AutoCompleteAddress
-      onAddressChange={(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',
-      }}
-    />
-  );
-};

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

@@ -1,53 +0,0 @@
-import { useState } from 'react';
-
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import AutocompleteAddress from '.';
-import {
-  WithoutAddress,
-  WithoutAddressLocalized,
-  WithAddress,
-  WithAddressLocalized,
-} from './demo';
-
-<Meta title="JSX/Autocomplete Address" component={AutocompleteAddress} />
-
-# Autocomplete Address
-
-| attribute               | unit                                                                                                                                        | description                                                                                                                    | default value | required |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- |
-| address                 | `Partial<Address>`                                                                                                                          | The address                                                                                                                    | undefined     | false    |
-| onAddressChange         | `function (newAddress: Partial<Address>)`                                                                                                   | Callback with the updated address, this function will get called everytime the address gets updated.                           | n/a           | true     |
-| apiKey                  | string                                                                                                                                      | Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview) | n/a           | true     |
-| placeholders            | `{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }` | Placeholder text                                                                                                               | undefined     | false    |
-| manualAddressEntryTexts | `{ preText?: string; cta: string?; }`                                                                                                       | The CTA that enables manual address entry and the text preceding it                                                            | undefined     | false    |
-
-Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.
-
-## Important notes
-
-This component is for now only restricted to "address" types and will restrict every query to Germany.
-
-## Default example
-
-### Input without an address filled
-
-<WithoutAddress />
-
-### Input with an address filled
-
-<WithAddress />
-
-### Localized inputs
-
-<WithoutAddressLocalized />
-<WithAddressLocalized />
-
-```typescript import React, {useState} from 'react'; import {Address} from '@popsure/public-models';
-import AutoCompleteAddress from '.';
-
-export default () => {
-  const [address, setAddress] = useState<Address>(undefined);
-  return <AutoCompleteAddress onAddressChange={setAddress} address={address} />;
-};
-```