@popsure/dirty-swan 0.57.2 → 0.57.4

package/dist/esm/components/autocompleteAddress/index.stories.js

@@ -66,13 +66,13 @@ var story = {
     },
 };
 var AutocompleteAddressStory = function (_a) {
-    var defaultAddress = _a.address, apiKey = _a.apiKey, manualAddressEntryTexts = _a.manualAddressEntryTexts, onAddressChange = _a.onAddressChange, placeholders = _a.placeholders;
+    var defaultAddress = _a.address, apiKey = _a.apiKey, manualAddressEntryTexts = _a.manualAddressEntryTexts, onAddressChange = _a.onAddressChange, placeholders = _a.placeholders, countryCode = _a.countryCode;
     var _b = useState(defaultAddress), address = _b[0], setAddress = _b[1];
     var handleOnAddressChange = function (newAddress) {
         onAddressChange === null || onAddressChange === void 0 ? void 0 : onAddressChange(newAddress);
         setAddress(newAddress);
     };
-    return (jsx(AutocompleteAddress, { address: address, apiKey: apiKey, manualAddressEntryTexts: manualAddressEntryTexts, onAddressChange: handleOnAddressChange, placeholders: placeholders }));
+    return (jsx(AutocompleteAddress, { address: address, apiKey: apiKey, manualAddressEntryTexts: manualAddressEntryTexts, onAddressChange: handleOnAddressChange, placeholders: placeholders, countryCode: countryCode }));
 };
 AutocompleteAddressStory.storyName = 'AutocompleteAddress';
 var WithAddress = function (_a) {

package/dist/esm/components/autocompleteAddress/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/autocompleteAddress/index.stories.tsx"],"sourcesContent":["import { Address } from '@popsure/public-models';\nimport { useState } from 'react';\nimport { AutocompleteAddress, AutocompleteAddressProps } from '.';\n\nconst story = {\n  title: 'JSX/AutocompleteAddress',\n  component: AutocompleteAddress,\n  argTypes: {\n    address: {\n      description: 'The address properties',\n      table: {\n        type: {\n          summary: 'Partial<Address>',\n        },\n      },\n    },\n    apiKey: {\n      description:\n        'Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview)',\n      table: {\n        type: {\n          summary: 'Partial<Address>',\n        },\n      },\n    },\n    onAddressChange: {\n      description:\n        'Callback with the updated address, this function will get called everytime the address gets updated',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    manualAddressEntryTexts: {\n      description:\n        'The CTA that enables manual address entry and the text preceding it',\n      table: {\n        type: {\n          summary: '{ preText?: string; cta: string?; }',\n        },\n      },\n    },\n    placeholders: {\n      description: 'Placeholder text',\n      table: {\n        type: {\n          summary:\n            '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }',\n        },\n      },\n    },\n  },\n  args: {\n    apiKey: 'AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8',\n  },\n  parameters: {\n    componentSubtitle:\n      'Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.',\n    docs: {\n      description: {\n        component:\n          'This component is for now only restricted to \"address\" types and will restrict every query to Germany.',\n      },\n    }\n  },\n};\n\nexport const AutocompleteAddressStory = ({\n  address: defaultAddress,\n  apiKey,\n  manualAddressEntryTexts,\n  onAddressChange,\n  placeholders,\n}: AutocompleteAddressProps) => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>(\n    defaultAddress\n  );\n  const handleOnAddressChange = (newAddress: Partial<Address>) => {\n    onAddressChange?.(newAddress);\n    setAddress(newAddress);\n  };\n\n  return (\n    <AutocompleteAddress\n      address={address}\n      apiKey={apiKey}\n      manualAddressEntryTexts={manualAddressEntryTexts}\n      onAddressChange={handleOnAddressChange}\n      placeholders={placeholders}\n    />\n  );\n};\n\nAutocompleteAddressStory.storyName = 'AutocompleteAddress';\n\nexport const WithAddress = ({\n  apiKey,\n  onAddressChange,\n  placeholders,\n}: AutocompleteAddressProps) => (\n  <AutocompleteAddress\n    address={{\n      street: 'Lohmuehlenstraße',\n      houseNumber: '65',\n      city: 'Berlin',\n      country: 'DE',\n      additionalInformation: 'c/o Factory',\n    }}\n    apiKey={apiKey}\n    onAddressChange={onAddressChange}\n  />\n);\n\nexport const WithLocalisationEntryText = ({\n  apiKey,\n  onAddressChange,\n}: AutocompleteAddressProps) => (\n  <AutocompleteAddress\n    apiKey={apiKey}\n    manualAddressEntryTexts={{\n      preText: 'Oder ',\n      cta: 'Adresse direkt eingeben',\n    }}\n    onAddressChange={onAddressChange}\n  />\n);\n\nexport const WithLocalisationPlaceholders = ({\n  apiKey,\n  onAddressChange,\n}: AutocompleteAddressProps) => (\n  <AutocompleteAddress\n    address={{}}\n    apiKey={apiKey}\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    onAddressChange={onAddressChange}\n  />\n);\n\nexport const AddressType = () => {\n  return (\n    <pre>\n      {`interface Address {\n          street: string;\n          houseNumber: string;\n          postcode: string;\n          city: string;\n          additionalInformation?: string;\n          country: string;\n      }`}\n    </pre>\n  )\n}\n\nexport default story;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/autocompleteAddress/index.stories.tsx"],"sourcesContent":["import { Address } from '@popsure/public-models';\nimport { useState } from 'react';\nimport { AutocompleteAddress, AutocompleteAddressProps } from '.';\n\nconst story = {\n  title: 'JSX/AutocompleteAddress',\n  component: AutocompleteAddress,\n  argTypes: {\n    address: {\n      description: 'The address properties',\n      table: {\n        type: {\n          summary: 'Partial<Address>',\n        },\n      },\n    },\n    apiKey: {\n      description:\n        'Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview)',\n      table: {\n        type: {\n          summary: 'Partial<Address>',\n        },\n      },\n    },\n    onAddressChange: {\n      description:\n        'Callback with the updated address, this function will get called everytime the address gets updated',\n      action: true,\n      table: {\n        category: 'Callbacks',\n      },\n    },\n    manualAddressEntryTexts: {\n      description:\n        'The CTA that enables manual address entry and the text preceding it',\n      table: {\n        type: {\n          summary: '{ preText?: string; cta: string?; }',\n        },\n      },\n    },\n    placeholders: {\n      description: 'Placeholder text',\n      table: {\n        type: {\n          summary:\n            '{ manualAddressEntry?: string; street: string?; houseNumber?: string; additionalInformation?: string; postcode?: string; city?: string; }',\n        },\n      },\n    },\n  },\n  args: {\n    apiKey: 'AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8',\n  },\n  parameters: {\n    componentSubtitle:\n      'Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.',\n    docs: {\n      description: {\n        component:\n          'This component is for now only restricted to \"address\" types and will restrict every query to Germany.',\n      },\n    }\n  },\n};\n\nexport const AutocompleteAddressStory = ({\n  address: defaultAddress,\n  apiKey,\n  manualAddressEntryTexts,\n  onAddressChange,\n  placeholders,\n  countryCode\n}: AutocompleteAddressProps) => {\n  const [address, setAddress] = useState<Partial<Address> | undefined>(\n    defaultAddress\n  );\n  const handleOnAddressChange = (newAddress: Partial<Address>) => {\n    onAddressChange?.(newAddress);\n    setAddress(newAddress);\n  };\n\n  return (\n    <AutocompleteAddress\n      address={address}\n      apiKey={apiKey}\n      manualAddressEntryTexts={manualAddressEntryTexts}\n      onAddressChange={handleOnAddressChange}\n      placeholders={placeholders}\n      countryCode={countryCode}\n    />\n  );\n};\n\nAutocompleteAddressStory.storyName = 'AutocompleteAddress';\n\nexport const WithAddress = ({\n  apiKey,\n  onAddressChange,\n  placeholders,\n}: AutocompleteAddressProps) => (\n  <AutocompleteAddress\n    address={{\n      street: 'Lohmuehlenstraße',\n      houseNumber: '65',\n      city: 'Berlin',\n      country: 'DE',\n      additionalInformation: 'c/o Factory',\n    }}\n    apiKey={apiKey}\n    onAddressChange={onAddressChange}\n  />\n);\n\nexport const WithLocalisationEntryText = ({\n  apiKey,\n  onAddressChange,\n}: AutocompleteAddressProps) => (\n  <AutocompleteAddress\n    apiKey={apiKey}\n    manualAddressEntryTexts={{\n      preText: 'Oder ',\n      cta: 'Adresse direkt eingeben',\n    }}\n    onAddressChange={onAddressChange}\n  />\n);\n\nexport const WithLocalisationPlaceholders = ({\n  apiKey,\n  onAddressChange,\n}: AutocompleteAddressProps) => (\n  <AutocompleteAddress\n    address={{}}\n    apiKey={apiKey}\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    onAddressChange={onAddressChange}\n  />\n);\n\nexport const AddressType = () => {\n  return (\n    <pre>\n      {`interface Address {\n          street: string;\n          houseNumber: string;\n          postcode: string;\n          city: string;\n          additionalInformation?: string;\n          country: string;\n      }`}\n    </pre>\n  )\n}\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;IAIM,KAAK,GAAG;IACZ,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,WAAW,EAAE,wBAAwB;YACrC,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,kBAAkB;iBAC5B;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EACT,gIAAgI;YAClI,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,kBAAkB;iBAC5B;aACF;SACF;QACD,eAAe,EAAE;YACf,WAAW,EACT,qGAAqG;YACvG,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;QACD,uBAAuB,EAAE;YACvB,WAAW,EACT,qEAAqE;YACvE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,qCAAqC;iBAC/C;aACF;SACF;QACD,YAAY,EAAE;YACZ,WAAW,EAAE,kBAAkB;YAC/B,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EACL,2IAA2I;iBAC9I;aACF;SACF;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,yCAAyC;KAClD;IACD,UAAU,EAAE;QACV,iBAAiB,EACf,+IAA+I;QACjJ,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,wGAAwG;aAC3G;SACF;KACF;EACD;IAEW,wBAAwB,GAAG,UAAC,EAOd;QANhB,cAAc,aAAA,EACvB,MAAM,YAAA,EACN,uBAAuB,6BAAA,EACvB,eAAe,qBAAA,EACf,YAAY,kBAAA,EACZ,WAAW,iBAAA;IAEL,IAAA,KAAwB,QAAQ,CACpC,cAAc,CACf,EAFM,OAAO,QAAA,EAAE,UAAU,QAEzB,CAAC;IACF,IAAM,qBAAqB,GAAG,UAAC,UAA4B;QACzD,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,UAAU,CAAC,CAAC;QAC9B,UAAU,CAAC,UAAU,CAAC,CAAC;KACxB,CAAC;IAEF,QACEA,IAAC,mBAAmB,IAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,uBAAuB,EAAE,uBAAuB,EAChD,eAAe,EAAE,qBAAqB,EACtC,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,GACxB,EACF;AACJ,EAAE;AAEF,wBAAwB,CAAC,SAAS,GAAG,qBAAqB,CAAC;IAE9C,WAAW,GAAG,UAAC,EAID;QAHzB,MAAM,YAAA,EACN,eAAe,qBAAA;IAEe,QAC9BA,IAAC,mBAAmB,IAClB,OAAO,EAAE;YACP,MAAM,EAAE,kBAAkB;YAC1B,WAAW,EAAE,IAAI;YACjB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,IAAI;YACb,qBAAqB,EAAE,aAAa;SACrC,EACD,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe,GAChC;AAX4B,EAY9B;IAEW,yBAAyB,GAAG,UAAC,EAGf;QAFzB,MAAM,YAAA,EACN,eAAe,qBAAA;IACe,QAC9BA,IAAC,mBAAmB,IAClB,MAAM,EAAE,MAAM,EACd,uBAAuB,EAAE;YACvB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,yBAAyB;SAC/B,EACD,eAAe,EAAE,eAAe,GAChC;AAR4B,EAS9B;IAEW,4BAA4B,GAAG,UAAC,EAGlB;QAFzB,MAAM,YAAA,EACN,eAAe,qBAAA;IACe,QAC9BA,IAAC,mBAAmB,IAClB,OAAO,EAAE,EAAE,EACX,MAAM,EAAE,MAAM,EACd,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,eAAe,EAAE,eAAe,GAChC;AAb4B,EAc9B;IAEW,WAAW,GAAG;IACzB,QACEA,uBACG,sNAOC,GACE,EACP;AACH;;;;;"}

package/dist/esm/components/table/Table.js

@@ -7,7 +7,7 @@ import ChevronDownIcon from '../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../icon/icons/ChevronUp.js';
 import { Card } from '../cards/card/index.js';
 import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
-import { u as useMediaQuery, i as isBaseCell, T as TableSection } from '../../TableSection-a6e85f15.js';
+import { u as useMediaQuery, i as isBaseCell, T as TableSection } from '../../TableSection-a26ba0c5.js';
 import { TableContents } from './components/TableContents/TableContents.js';
 import { c as classNames } from '../../index-6ea95111.js';
 import { u as useTableNavigation } from '../../useTableNavigation-f929fbc9.js';

package/dist/esm/components/table/Table.stories.js

@@ -35,7 +35,7 @@ import '../../index-dd80248b.js';
 import '../modal/regularModal/index.js';
 import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
-import '../../TableSection-a6e85f15.js';
+import '../../TableSection-a26ba0c5.js';
 import './components/TableContents/TableContents.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';
@@ -132,8 +132,15 @@ var initialData = [
                 { text: '80%-100%' },
             ],
             [
-                { text: 'Operations', modalContent: 'Operations info' },
-                { checkmarkValue: true, modalContent: 'Operations info column 2' },
+                { text: 'Operations',
+                    modalContent: 'Operations info',
+                    modalTitle: 'Custom operations modal title'
+                },
+                {
+                    checkmarkValue: true,
+                    modalContent: 'Operations info column 2',
+                    modalTitle: 'Custom operations modal title column 2'
+                },
                 { checkmarkValue: false },
                 { checkmarkValue: true },
             ],

package/dist/esm/components/table/Table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\nimport { TableData } from './types';\nimport { useState } from 'react';\nimport { Input } from '../input';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { text: 'Our plans' },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/orange/white',\n          title: 'Standard',\n          price: '€234',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/green/white',\n          title: 'Plus',\n          price: '€344',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: <PlaneIcon size={24} noMargin />,\n          title: 'Premium',\n          price: '€556',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { text: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Standard',\n          price: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Plus',\n          price: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Premium',\n          price: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          text: 'Your contribution',\n        },\n        {\n          cellId: '#1',\n          text: '€210',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#2',\n          text: '€275',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#3',\n          text: '€310',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n      ],\n      [\n        {\n          text: 'Regular vet visits & medication',\n          description: 'Pflegepflichtversicherungrightno',\n          modalContent: 'Some stories about vets',\n        },\n        { text: 'No', description: 'Annual Only' },\n        { text: '50%' },\n        { text: '80%-100%' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'Operations info' },\n        { checkmarkValue: true, modalContent: 'Operations info column 2' },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'Rating info' },\n        { rating: { type: 'zap', value: 1 } },\n        {\n          rating: { type: 'zap', value: 3 },\n          modalContent: 'Rating info column 3',\n        },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={20} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          text: 'This is a table cell with a lot of text',\n          modalContent: 'Maybe',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n      [\n        {\n          type: 'CARD',\n          colSpan: 3,\n          title: 'Dental add-on',\n          href: 'https://example.com',\n          icon: 'https://placehold.co/24x24/green/yellow',\n          description:\n            'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',\n        },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: 'https://placehold.co/24x24/red/yellow',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', checkmarkValue: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          checkmarkValue: true,\n          modalContent: 'Maybe',\n          description: 'This is a table cell with a long subtitle',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    tableData: {\n      subContent:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      subContent:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      subContent: 'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      subContent: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      subContent:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      subContent:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      subContent:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    hideColumns: {\n      subContent: 'This property allows to hide defined columns by index.',\n    },\n    modalContentRenderer: {\n      subContent: 'This property allows to render custom modal content.',\n    },\n    onSelectionChanged: {\n      subContent:\n        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',\n      table: {\n        category: 'Events',\n      },\n    },\n    onModalOpen: {\n      subContent:\n        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n  args: {\n    tableData: initialData,\n    collapsibleSections: false,\n    hideDetails: false,\n    stickyHeaderTopOffset: 0,\n    title: 'Title of the table',\n    className: '',\n    textOverrides: {\n      showDetails: 'Show details',\n      hideDetails: 'Hide details',\n    },\n    hideColumns: [],\n  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideColumns,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => {\n  const [price, setPrice] = useState(999);\n  return (\n    <div>\n      <div className=\"d-flex fd-column p24 mb80 gap16 wmx5\">\n        <label htmlFor=\"\">Change price to see replacement in action: </label>\n        <Input\n          id=\"#stuff\"\n          type=\"text\"\n          onChange={(e) => setPrice(Number(e.target.value))}\n          value={price}\n        />\n      </div>\n\n      <Table\n        cellReplacements={{\n          '#1': {\n            type: 'CTA',\n            title: 'Replaced!',\n            price: `€${price}`,\n            buttonCaption: 'I got replaced',\n            href: 'http://example.com',\n          },\n          '#2': {\n            type: 'BUTTON',\n            buttonCaption: 'I got replaced too',\n          },\n          '#3': {\n            description: 'per year',\n          },\n        }}\n        collapsibleSections={collapsibleSections}\n        tableData={tableData}\n        hideColumns={hideColumns}\n        hideDetails={hideDetails}\n        stickyHeaderTopOffset={stickyHeaderTopOffset}\n        textOverrides={textOverrides}\n        title={title}\n      />\n    </div>\n  );\n};\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"Table.stories.js","sources":["../../../../../src/lib/components/table/Table.stories.tsx"],"sourcesContent":["import { Table, TableProps } from './Table';\nimport { DentalPlusIcon, PlaneIcon } from '../icon';\nimport { TableData } from './types';\nimport { useState } from 'react';\nimport { Input } from '../input';\n\nconst initialData: TableData = [\n  {\n    rows: [\n      [\n        { text: 'Our plans' },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/orange/white',\n          title: 'Standard',\n          price: '€234',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: 'https://placehold.co/24x24/green/white',\n          title: 'Plus',\n          price: '€344',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n        {\n          type: 'CTA',\n          icon: <PlaneIcon size={24} noMargin />,\n          title: 'Premium',\n          price: '€556',\n          buttonCaption: 'Get covered',\n          href: 'http://example.com',\n        },\n      ],\n      [\n        { text: 'Select a plan' },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Standard',\n          price: '€234',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Plus',\n          price: '€344',\n          onClick: () => {},\n        },\n        {\n          type: 'BUTTON',\n          buttonCaption: 'Premium',\n          price: '€556',\n          onClick: () => {},\n        },\n      ],\n      [\n        {\n          text: 'Your contribution',\n        },\n        {\n          cellId: '#1',\n          text: '€210',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#2',\n          text: '€275',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n        {\n          cellId: '#3',\n          text: '€310',\n          description: 'per month',\n          fontVariant: 'PRICE',\n          modalContent: 'Price info',\n        },\n      ],\n      [\n        {\n          text: 'Regular vet visits & medication',\n          description: 'Pflegepflichtversicherungrightno',\n          modalContent: 'Some stories about vets',\n        },\n        { text: 'No', description: 'Annual Only' },\n        { text: '50%' },\n        { text: '80%-100%' },\n      ],\n      [\n        { text: 'Operations',\n          modalContent: 'Operations info',\n          modalTitle: 'Custom operations modal title'\n         },\n        { \n          checkmarkValue: true,\n          modalContent: 'Operations info column 2',\n          modalTitle: 'Custom operations modal title column 2'\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'Rating info' },\n        { rating: { type: 'zap', value: 1 } },\n        {\n          rating: { type: 'zap', value: 3 },\n          modalContent: 'Rating info column 3',\n        },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n  {\n    section: {\n      icon: <DentalPlusIcon size={20} noMargin />,\n      title: 'Dental',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No' },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          text: 'This is a table cell with a lot of text',\n          modalContent: 'Maybe',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n      [\n        {\n          type: 'CARD',\n          colSpan: 3,\n          title: 'Dental add-on',\n          href: 'https://example.com',\n          icon: 'https://placehold.co/24x24/green/yellow',\n          description:\n            'Get your dental cleanings and additional treatments covered for just 10.90€ a month.',\n        },\n      ],\n    ],\n  },\n  {\n    section: {\n      title: 'Travel',\n      icon: 'https://placehold.co/24x24/red/yellow',\n    },\n    rows: [\n      [\n        { text: 'Regular vet visits & medication' },\n        { text: 'No', checkmarkValue: false },\n        { text: 'Yes' },\n        { text: 'Yes' },\n      ],\n      [\n        { text: 'Operations', modalContent: 'info' },\n        {\n          checkmarkValue: true,\n          modalContent: 'Maybe',\n          description: 'This is a table cell with a long subtitle',\n        },\n        { checkmarkValue: false },\n        { checkmarkValue: true },\n      ],\n      [\n        { text: 'Rating', modalContent: 'info' },\n        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },\n        { rating: { type: 'zap', value: 3 } },\n        { rating: { type: 'star', value: 3 } },\n      ],\n    ],\n  },\n];\n\nconst story = {\n  title: 'JSX/Table',\n  component: Table,\n  argTypes: {\n    tableData: {\n      subContent:\n        'This property allows to set the data of the Table component.',\n    },\n    title: {\n      subContent:\n        'This property allows to add a title to the Table component for accessibility purposes.',\n    },\n    collapsibleSections: {\n      subContent: 'This property allows to collapse the sections of the table.',\n    },\n    hideDetails: {\n      subContent: 'This property allows to hide the details of the table.',\n    },\n    stickyHeaderTopOffset: {\n      subContent:\n        'This property allows to set the offset of the sticky header.',\n    },\n    className: {\n      subContent:\n        'This property allows to set a custom class to the Table component.',\n    },\n    textOverrides: {\n      subContent:\n        'This property allows to set custom text for the show and hide details buttons.',\n    },\n    hideColumns: {\n      subContent: 'This property allows to hide defined columns by index.',\n    },\n    modalContentRenderer: {\n      subContent: 'This property allows to render custom modal content.',\n    },\n    onSelectionChanged: {\n      subContent:\n        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',\n      table: {\n        category: 'Events',\n      },\n    },\n    onModalOpen: {\n      subContent:\n        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',\n      table: {\n        category: 'Events',\n      },\n    },\n  },\n  args: {\n    tableData: initialData,\n    collapsibleSections: false,\n    hideDetails: false,\n    stickyHeaderTopOffset: 0,\n    title: 'Title of the table',\n    className: '',\n    textOverrides: {\n      showDetails: 'Show details',\n      hideDetails: 'Hide details',\n    },\n    hideColumns: [],\n  },\n};\n\nexport const TableStory = ({\n  collapsibleSections,\n  tableData,\n  hideColumns,\n  hideDetails,\n  stickyHeaderTopOffset,\n  textOverrides,\n  title,\n}: TableProps) => {\n  const [price, setPrice] = useState(999);\n  return (\n    <div>\n      <div className=\"d-flex fd-column p24 mb80 gap16 wmx5\">\n        <label htmlFor=\"\">Change price to see replacement in action: </label>\n        <Input\n          id=\"#stuff\"\n          type=\"text\"\n          onChange={(e) => setPrice(Number(e.target.value))}\n          value={price}\n        />\n      </div>\n\n      <Table\n        cellReplacements={{\n          '#1': {\n            type: 'CTA',\n            title: 'Replaced!',\n            price: `€${price}`,\n            buttonCaption: 'I got replaced',\n            href: 'http://example.com',\n          },\n          '#2': {\n            type: 'BUTTON',\n            buttonCaption: 'I got replaced too',\n          },\n          '#3': {\n            description: 'per year',\n          },\n        }}\n        collapsibleSections={collapsibleSections}\n        tableData={tableData}\n        hideColumns={hideColumns}\n        hideDetails={hideDetails}\n        stickyHeaderTopOffset={stickyHeaderTopOffset}\n        textOverrides={textOverrides}\n        title={title}\n      />\n    </div>\n  );\n};\n\nexport const TableDataType = () => {\n  return (\n    <pre>\n      {`\ntype TableData = {\n  section?: \n    title?: string;\n    icon?: ReactNode;\n  };\n  rows: {\n    align?: 'center' | 'left' | 'right';\n    checkmarkValue?: boolean;\n    text?: ReactNode;\n    modalContent?: ReactNode;\n    subContent?: ReactNode;\n    rating?: {\n      value: number;\n      type: 'zap' | 'star';\n    }\n    openModal?: (modalContent: ReactNode) => void;\n  }[][];\n}[];\n      `}\n    </pre>\n  );\n};\n\nTableStory.storyName = 'Table';\n\nexport default story;\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAM,WAAW,GAAc;IAC7B;QACE,IAAI,EAAE;YACJ;gBACE,EAAE,IAAI,EAAE,WAAW,EAAE;gBACrB;oBACE,IAAI,EAAE,KAAK;oBACX,IAAI,EAAE,yCAAyC;oBAC/C,KAAK,EAAE,UAAU;oBACjB,KAAK,EAAE,MAAM;oBACb,aAAa,EAAE,aAAa;oBAC5B,IAAI,EAAE,oBAAoB;iBAC3B;gBACD;oBACE,IAAI,EAAE,KAAK;oBACX,IAAI,EAAE,wCAAwC;oBAC9C,KAAK,EAAE,MAAM;oBACb,KAAK,EAAE,MAAM;oBACb,aAAa,EAAE,aAAa;oBAC5B,IAAI,EAAE,oBAAoB;iBAC3B;gBACD;oBACE,IAAI,EAAE,KAAK;oBACX,IAAI,EAAEA,IAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG;oBACtC,KAAK,EAAE,SAAS;oBAChB,KAAK,EAAE,MAAM;oBACb,aAAa,EAAE,aAAa;oBAC5B,IAAI,EAAE,oBAAoB;iBAC3B;aACF;YACD;gBACE,EAAE,IAAI,EAAE,eAAe,EAAE;gBACzB;oBACE,IAAI,EAAE,QAAQ;oBACd,aAAa,EAAE,UAAU;oBACzB,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,eAAQ;iBAClB;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,aAAa,EAAE,MAAM;oBACrB,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,eAAQ;iBAClB;gBACD;oBACE,IAAI,EAAE,QAAQ;oBACd,aAAa,EAAE,SAAS;oBACxB,KAAK,EAAE,MAAM;oBACb,OAAO,EAAE,eAAQ;iBAClB;aACF;YACD;gBACE;oBACE,IAAI,EAAE,mBAAmB;iBAC1B;gBACD;oBACE,MAAM,EAAE,IAAI;oBACZ,IAAI,EAAE,MAAM;oBACZ,WAAW,EAAE,WAAW;oBACxB,WAAW,EAAE,OAAO;oBACpB,YAAY,EAAE,YAAY;iBAC3B;gBACD;oBACE,MAAM,EAAE,IAAI;oBACZ,IAAI,EAAE,MAAM;oBACZ,WAAW,EAAE,WAAW;oBACxB,WAAW,EAAE,OAAO;oBACpB,YAAY,EAAE,YAAY;iBAC3B;gBACD;oBACE,MAAM,EAAE,IAAI;oBACZ,IAAI,EAAE,MAAM;oBACZ,WAAW,EAAE,WAAW;oBACxB,WAAW,EAAE,OAAO;oBACpB,YAAY,EAAE,YAAY;iBAC3B;aACF;YACD;gBACE;oBACE,IAAI,EAAE,iCAAiC;oBACvC,WAAW,EAAE,kCAAkC;oBAC/C,YAAY,EAAE,yBAAyB;iBACxC;gBACD,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE;gBAC1C,EAAE,IAAI,EAAE,KAAK,EAAE;gBACf,EAAE,IAAI,EAAE,UAAU,EAAE;aACrB;YACD;gBACE,EAAE,IAAI,EAAE,YAAY;oBAClB,YAAY,EAAE,iBAAiB;oBAC/B,UAAU,EAAE,+BAA+B;iBAC3C;gBACF;oBACE,cAAc,EAAE,IAAI;oBACpB,YAAY,EAAE,0BAA0B;oBACxC,UAAU,EAAE,wCAAwC;iBACrD;gBACD,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE;gBAC/C,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC;oBACE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE;oBACjC,YAAY,EAAE,sBAAsB;iBACrC;gBACD,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;SACF;KACF;IACD;QACE,OAAO,EAAE;YACP,IAAI,EAAEA,IAAC,cAAc,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG;YAC3C,KAAK,EAAE,QAAQ;SAChB;QACD,IAAI,EAAE;YACJ;gBACE,EAAE,IAAI,EAAE,iCAAiC,EAAE;gBAC3C,EAAE,IAAI,EAAE,IAAI,EAAE;gBACd,EAAE,IAAI,EAAE,KAAK,EAAE;gBACf,EAAE,IAAI,EAAE,KAAK,EAAE;aAChB;YACD;gBACE,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE;gBAC5C;oBACE,IAAI,EAAE,yCAAyC;oBAC/C,YAAY,EAAE,OAAO;iBACtB;gBACD,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE;gBACxC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE;gBAC5D,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;YACD;gBACE;oBACE,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,CAAC;oBACV,KAAK,EAAE,eAAe;oBACtB,IAAI,EAAE,qBAAqB;oBAC3B,IAAI,EAAE,yCAAyC;oBAC/C,WAAW,EACT,sFAAsF;iBACzF;aACF;SACF;KACF;IACD;QACE,OAAO,EAAE;YACP,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,uCAAuC;SAC9C;QACD,IAAI,EAAE;YACJ;gBACE,EAAE,IAAI,EAAE,iCAAiC,EAAE;gBAC3C,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE;gBACrC,EAAE,IAAI,EAAE,KAAK,EAAE;gBACf,EAAE,IAAI,EAAE,KAAK,EAAE;aAChB;YACD;gBACE,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE;gBAC5C;oBACE,cAAc,EAAE,IAAI;oBACpB,YAAY,EAAE,OAAO;oBACrB,WAAW,EAAE,2CAA2C;iBACzD;gBACD,EAAE,cAAc,EAAE,KAAK,EAAE;gBACzB,EAAE,cAAc,EAAE,IAAI,EAAE;aACzB;YACD;gBACE,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE;gBACxC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE;gBAC5D,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;gBACrC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE;aACvC;SACF;KACF;CACF,CAAC;IAEI,KAAK,GAAG;IACZ,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,UAAU,EACR,8DAA8D;SACjE;QACD,KAAK,EAAE;YACL,UAAU,EACR,wFAAwF;SAC3F;QACD,mBAAmB,EAAE;YACnB,UAAU,EAAE,6DAA6D;SAC1E;QACD,WAAW,EAAE;YACX,UAAU,EAAE,wDAAwD;SACrE;QACD,qBAAqB,EAAE;YACrB,UAAU,EACR,8DAA8D;SACjE;QACD,SAAS,EAAE;YACT,UAAU,EACR,oEAAoE;SACvE;QACD,aAAa,EAAE;YACb,UAAU,EACR,gFAAgF;SACnF;QACD,WAAW,EAAE;YACX,UAAU,EAAE,wDAAwD;SACrE;QACD,oBAAoB,EAAE;YACpB,UAAU,EAAE,sDAAsD;SACnE;QACD,kBAAkB,EAAE;YAClB,UAAU,EACR,6GAA6G;YAC/G,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;QACD,WAAW,EAAE;YACX,UAAU,EACR,2GAA2G;YAC7G,KAAK,EAAE;gBACL,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,mBAAmB,EAAE,KAAK;QAC1B,WAAW,EAAE,KAAK;QAClB,qBAAqB,EAAE,CAAC;QACxB,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE,EAAE;QACb,aAAa,EAAE;YACb,WAAW,EAAE,cAAc;YAC3B,WAAW,EAAE,cAAc;SAC5B;QACD,WAAW,EAAE,EAAE;KAChB;EACD;IAEW,UAAU,GAAG,UAAC,EAQd;QAPX,mBAAmB,yBAAA,EACnB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,qBAAqB,2BAAA,EACrB,aAAa,mBAAA,EACb,KAAK,WAAA;IAEC,IAAA,KAAoB,QAAQ,CAAC,GAAG,CAAC,EAAhC,KAAK,QAAA,EAAE,QAAQ,QAAiB,CAAC;IACxC,QACEC,yBACEA,cAAK,SAAS,EAAC,sCAAsC,aACnDD,eAAO,OAAO,EAAC,EAAE,4DAAoD,EACrEA,IAAC,KAAK,IACJ,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAA,EACjD,KAAK,EAAE,KAAK,GACZ,IACE,EAENA,IAAC,KAAK,IACJ,gBAAgB,EAAE;oBAChB,IAAI,EAAE;wBACJ,IAAI,EAAE,KAAK;wBACX,KAAK,EAAE,WAAW;wBAClB,KAAK,EAAE,gBAAI,KAAK,CAAE;wBAClB,aAAa,EAAE,gBAAgB;wBAC/B,IAAI,EAAE,oBAAoB;qBAC3B;oBACD,IAAI,EAAE;wBACJ,IAAI,EAAE,QAAQ;wBACd,aAAa,EAAE,oBAAoB;qBACpC;oBACD,IAAI,EAAE;wBACJ,WAAW,EAAE,UAAU;qBACxB;iBACF,EACD,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACxB,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,GACZ,IACE,EACN;AACJ,EAAE;IAEW,aAAa,GAAG;IAC3B,QACEA,uBACG,mZAmBA,GACG,EACN;AACJ,EAAE;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}

package/dist/esm/components/table/Table.test.js

@@ -35,7 +35,7 @@ import '../../index-dd80248b.js';
 import '../modal/regularModal/index.js';
 import '../icon/icons/ChevronDown.js';
 import '../icon/icons/ChevronUp.js';
-import '../../TableSection-a6e85f15.js';
+import '../../TableSection-a26ba0c5.js';
 import './components/TableContents/TableContents.js';
 import './components/TableContents/Collapsible.js';
 import '../../useTableNavigation-f929fbc9.js';

package/dist/esm/components/table/components/TableContents/TableContents.js

@@ -1,7 +1,7 @@
 import { a as __assign, _ as __spreadArray } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { T as TableSection } from '../../../../TableSection-a6e85f15.js';
+import { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
 import ChevronDownIcon from '../../../icon/icons/ChevronDown.js';
 import ChevronUpIcon from '../../../icon/icons/ChevronUp.js';
 import { Card } from '../../../cards/card/index.js';

package/dist/esm/components/table/components/TableContents/TableContents.test.js

@@ -6,7 +6,7 @@ import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
 import 'react-dom/test-utils';
-import '../../../../TableSection-a6e85f15.js';
+import '../../../../TableSection-a26ba0c5.js';
 import '../../../../index-6ea95111.js';
 import '../../../../style-inject.es-1f59c1d0.js';
 import '../TableCell/TableCell.js';

package/dist/esm/components/table/components/TableSection/TableSection.js

@@ -1,7 +1,7 @@
 import '../../../../tslib.es6-a39f91fc.js';
 import 'react/jsx-runtime';
 import '../../../../index-6ea95111.js';
-export { T as TableSection } from '../../../../TableSection-a6e85f15.js';
+export { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
 import '../TableCell/TableCell.js';
 import 'react';
 import '../../../../style-inject.es-1f59c1d0.js';

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-be47569b.js';
-import { T as TableSection } from '../../../../TableSection-a6e85f15.js';
+import { T as TableSection } from '../../../../TableSection-a26ba0c5.js';
 import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';

package/dist/esm/index.js

@@ -31,7 +31,7 @@ export { a as Toaster, t as toast } from './index-4b19aafb.js';
 export { Accordion } from './components/accordion/index.js';
 export { Table } from './components/table/Table.js';
 import { useCallback, useEffect } from 'react';
-export { u as useMediaQuery } from './TableSection-a6e85f15.js';
+export { u as useMediaQuery } from './TableSection-a26ba0c5.js';
 export { default as Svg1Icon } from './components/icon/icons/1.js';
 export { default as Svg2Icon } from './components/icon/icons/2.js';
 export { default as Svg3Icon } from './components/icon/icons/3.js';

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

@@ -56,7 +56,7 @@ declare const story: {
     };
 };
 export declare const AutocompleteAddressStory: {
-    ({ address: defaultAddress, apiKey, manualAddressEntryTexts, onAddressChange, placeholders, }: AutocompleteAddressProps): JSX.Element;
+    ({ address: defaultAddress, apiKey, manualAddressEntryTexts, onAddressChange, placeholders, countryCode }: AutocompleteAddressProps): JSX.Element;
     storyName: string;
 };
 export declare const WithAddress: ({ apiKey, onAddressChange, placeholders, }: AutocompleteAddressProps) => JSX.Element;

package/dist/esm/lib/components/table/types.d.ts

@@ -6,6 +6,7 @@ import { CardCellProps } from './components/TableCell/CardCell/CardCell';
 type DefaultCellProps = {
     cellId?: string;
     colSpan?: number;
+    modalTitle?: ReactNode;
 };
 type BaseCellData = BaseCellProps & {
     type?: undefined;

package/package.json

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

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

@@ -71,6 +71,7 @@ export const AutocompleteAddressStory = ({
   manualAddressEntryTexts,
   onAddressChange,
   placeholders,
+  countryCode
 }: AutocompleteAddressProps) => {
   const [address, setAddress] = useState<Partial<Address> | undefined>(
     defaultAddress
@@ -87,6 +88,7 @@ export const AutocompleteAddressStory = ({
       manualAddressEntryTexts={manualAddressEntryTexts}
       onAddressChange={handleOnAddressChange}
       placeholders={placeholders}
+      countryCode={countryCode}
     />
   );
 };

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

@@ -153,7 +153,7 @@ const AutocompleteAddress = ({
     });
 
     setPlaceFromAddress(address);
-  }, [hasLoadedGoogleAPI]); // eslint-disable-line
+  }, [hasLoadedGoogleAPI, countryCode]); // eslint-disable-line
 
   const onPlaceChanged = (
     newPlace:

package/src/lib/components/table/Table.stories.tsx

@@ -92,8 +92,15 @@ const initialData: TableData = [
         { text: '80%-100%' },
       ],
       [
-        { text: 'Operations', modalContent: 'Operations info' },
-        { checkmarkValue: true, modalContent: 'Operations info column 2' },
+        { text: 'Operations',
+          modalContent: 'Operations info',
+          modalTitle: 'Custom operations modal title'
+         },
+        { 
+          checkmarkValue: true,
+          modalContent: 'Operations info column 2',
+          modalTitle: 'Custom operations modal title column 2'
+        },
         { checkmarkValue: false },
         { checkmarkValue: true },
       ],

package/src/lib/components/table/components/TableSection/TableSection.tsx

@@ -125,11 +125,7 @@ const TableSection = ({
                 {row.map((tableCellData, cellIndex) => {
                   const key = `${rowIndex}-${cellIndex}`;
                   const isFirstCellInRow = cellIndex === 0;
-
                   const titleFromRow = getModalTitleFromRowHeader(row);
-                  const titleFromColumnOrRow =
-                    getModalTitleFromColumnHeader(cellIndex) ||
-                    getModalTitleFromRowHeader(row);
 
                   const cellReplacementData =
                     (tableCellData.cellId &&
@@ -141,9 +137,7 @@ const TableSection = ({
                     ...cellReplacementData,
                     ...{
                       openModal,
-                      modalTitle: isFirstCellInRow
-                        ? titleFromRow
-                        : titleFromColumnOrRow,
+                      modalTitle: tableCellData?.modalTitle || titleFromRow,
                       align: isFirstCellInRow ? 'left' : 'center',
                     },
                   } as TableCellData;

package/src/lib/components/table/types.ts

@@ -7,6 +7,7 @@ import { CardCellProps } from './components/TableCell/CardCell/CardCell';
 type DefaultCellProps = {
   cellId?: string;
   colSpan?: number;
+  modalTitle?: ReactNode;
 };
 
 type BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;

package/dist/esm/TableSection-a6e85f15.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableSection-a6e85f15.js","sources":["../../../src/lib/components/table/types.ts","../../../src/lib/hooks/useMediaQuery.ts","../../../src/lib/components/table/components/TableSection/TableSection.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';\nimport { CTACellProps } from './components/TableCell/CTACell/CTACell';\nimport { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';\nimport { CardCellProps } from './components/TableCell/CardCell/CardCell';\n\ntype DefaultCellProps = {\n  cellId?: string;\n  colSpan?: number;\n};\n\ntype BaseCellData = BaseCellProps & { type?: undefined } & DefaultCellProps;\ntype CTACellData = CTACellProps & { type: 'CTA' } & DefaultCellProps;\ntype ButtonCellData = ButtonCellProps & { type: 'BUTTON' } & DefaultCellProps;\ntype CardCellData = CardCellProps & { type: 'CARD' } & DefaultCellProps;\n\nexport type TableCellData =\n  | BaseCellData\n  | CTACellData\n  | ButtonCellData\n  | CardCellData;\n\nexport const isBaseCell = (\n  tableCellData: TableCellData\n): tableCellData is BaseCellData => {\n  return !tableCellData.type;\n};\n\nexport type TableSectionType = {\n  title?: string;\n  icon?: ReactNode;\n};\n\nexport type ModalData = {\n  title?: ReactNode;\n  body?: ReactNode;\n};\n\nexport type TableCellRowData = TableCellData[];\n\nexport type TableSectionData = {\n  section?: TableSectionType;\n  rows: TableCellRowData[];\n};\n\nexport type TableData = TableSectionData[];\n\nexport type ModalFunction = (modalData: ModalData) => void;\n\nexport type CellReplacements = Record<string, Partial<TableCellData>>;\n","import { useEffect, useState } from 'react';\n\n// USAGE:\n// const isMobile = useMediaQuery('BELOW_MOBILE');\n\nexport const breakpointsArray = [\n  'ABOVE_MOBILE',\n  'ABOVE_TABLET',\n  'ABOVE_DESKTOP',\n  'BELOW_MOBILE',\n  'BELOW_TABLET',\n  'BELOW_DESKTOP',\n] as const;\n\nexport type Breakpoint = typeof breakpointsArray[number];\nexport type BreakpointData = { initialValue: boolean; queryString: string };\n\nexport const breakpointLookup = (breakpoint: Breakpoint): BreakpointData => {\n  if (typeof window === 'undefined') {\n    return {\n      initialValue: false,\n      queryString: '',\n    };\n  }\n\n  switch (breakpoint) {\n    case 'BELOW_TABLET':\n      return {\n        initialValue: window.innerWidth <= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(max-width: 45rem)',\n      };\n    case 'BELOW_DESKTOP':\n      return {\n        initialValue: window.innerWidth <= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(max-width: 64rem)',\n      };\n    case 'ABOVE_MOBILE':\n      return {\n        initialValue: window.innerWidth >= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(min-width: 34rem)',\n      };\n    case 'ABOVE_TABLET':\n      return {\n        initialValue: window.innerWidth >= 720, // 45rem = 720px = tablet breakpoint\n        queryString: '(min-width: 45rem)',\n      };\n    case 'ABOVE_DESKTOP':\n      return {\n        initialValue: window.innerWidth >= 1024, // 64rem = 1024px = desktop breakpoint\n        queryString: '(min-width: 64rem)',\n      };\n    case 'BELOW_MOBILE':\n    default:\n      return {\n        initialValue: window.innerWidth <= 544, // 34rem = 544px = mobile breakpoint}\n        queryString: '(max-width: 34rem)',\n      };\n  }\n};\n\nexport const useMediaQuery = (breakpoint: Breakpoint) => {\n  const { initialValue, queryString } = breakpointLookup(breakpoint);\n\n  const [matchesBreakpoint, setMatchesBreakpoint] = useState(initialValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(queryString);\n\n    const updateMediaQuery = (e: MediaQueryListEvent) =>\n      setMatchesBreakpoint(e.matches);\n\n    mediaQuery.addEventListener('change', updateMediaQuery);\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateMediaQuery);\n    };\n  }, [queryString]);\n\n  return matchesBreakpoint;\n};\n","import classNames from 'classnames';\n\nimport styles from './TableSection.module.scss';\nimport { TableCell } from '../TableCell/TableCell';\nimport {\n  CellReplacements,\n  isBaseCell,\n  ModalFunction,\n  TableCellData,\n  TableCellRowData,\n} from '../../types';\nimport { useCallback } from 'react';\nimport { useMediaQuery } from '../../../../hooks/useMediaQuery';\n\nexport interface TableSectionProps {\n  className?: string;\n  tableCellRows: TableCellRowData[];\n  hideColumns?: number[];\n  hideHeader?: boolean;\n  openModal?: ModalFunction;\n  title: string;\n  width?: number | string;\n  cellReplacements?: CellReplacements;\n  imageComponent?: (args: any) => JSX.Element;\n}\n\nconst TableSection = ({\n  className,\n  tableCellRows,\n  hideColumns = [],\n  hideHeader,\n  openModal,\n  title,\n  width,\n  cellReplacements,\n  imageComponent,\n}: TableSectionProps) => {\n  const headerRow = tableCellRows?.[0];\n  const isBelowDesktop = useMediaQuery('BELOW_DESKTOP');\n\n  const getModalTitleFromColumnHeader = (cellIndex: number) => {\n    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];\n    let titleFromColumn;\n\n    switch (firstCellInColumn.type) {\n      case 'BUTTON':\n        titleFromColumn = firstCellInColumn.buttonCaption;\n        break;\n      case 'CTA':\n        titleFromColumn = firstCellInColumn.title;\n        break;\n      case undefined:\n        titleFromColumn = firstCellInColumn.text || '';\n        break;\n    }\n\n    return titleFromColumn;\n  };\n\n  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {\n    const firstCellInRow = currentRow?.[0];\n    const titleFromRow =\n      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';\n\n    return titleFromRow;\n  };\n\n  const isVisibleColumn = useCallback(\n    (cellIndex: number) => !hideColumns.includes(cellIndex),\n    [hideColumns]\n  );\n\n  return (\n    <table\n      className={classNames(className, 'w100', styles.table)}\n      width={width}\n    >\n      <caption className=\"sr-only\">{title}</caption>\n\n      {headerRow && (\n        <thead className={hideHeader ? 'sr-only' : ''}>\n          <tr>\n            {headerRow.map((tableCellData, cellIndex) => {\n              const isFirstCellInRow = cellIndex === 0;\n              const cellReplacementData =\n                (tableCellData.cellId &&\n                  cellReplacements?.[tableCellData.cellId]) ||\n                {};\n\n              const cellProps = {\n                ...tableCellData,\n                ...cellReplacementData,\n                ...{\n                  openModal,\n                  modalTitle:\n                    (isBaseCell(tableCellData) && tableCellData.text) ||\n                    getModalTitleFromColumnHeader(cellIndex),\n                  align: isFirstCellInRow ? 'left' : 'center',\n                },\n              } as TableCellData;\n\n              return (\n                isVisibleColumn(cellIndex) && (\n                  <TableCell\n                    key={cellIndex}\n                    isBelowDesktop={isBelowDesktop}\n                    isHeader\n                    isFirstCellInRow={isFirstCellInRow}\n                    isTopLeftCell={isFirstCellInRow}\n                    {...cellProps}\n                    imageComponent={imageComponent}\n                  />\n                )\n              );\n            })}\n          </tr>\n        </thead>\n      )}\n\n      <tbody>\n        {tableCellRows.map(\n          (row, rowIndex) =>\n            rowIndex > 0 && (\n              <tr key={rowIndex} className={styles.tr}>\n                {row.map((tableCellData, cellIndex) => {\n                  const key = `${rowIndex}-${cellIndex}`;\n                  const isFirstCellInRow = cellIndex === 0;\n\n                  const titleFromRow = getModalTitleFromRowHeader(row);\n                  const titleFromColumnOrRow =\n                    getModalTitleFromColumnHeader(cellIndex) ||\n                    getModalTitleFromRowHeader(row);\n\n                  const cellReplacementData =\n                    (tableCellData.cellId &&\n                      cellReplacements?.[tableCellData.cellId]) ||\n                    {};\n\n                  const cellProps = {\n                    ...tableCellData,\n                    ...cellReplacementData,\n                    ...{\n                      openModal,\n                      modalTitle: isFirstCellInRow\n                        ? titleFromRow\n                        : titleFromColumnOrRow,\n                      align: isFirstCellInRow ? 'left' : 'center',\n                    },\n                  } as TableCellData;\n\n                  return (\n                    !hideColumns.includes(cellIndex) && (\n                      <TableCell\n                        isBelowDesktop={isBelowDesktop}\n                        isFirstCellInRow={isFirstCellInRow}\n                        key={key}\n                        {...cellProps}\n                        imageComponent={imageComponent}\n                      />\n                    )\n                  );\n                })}\n              </tr>\n            )\n        )}\n      </tbody>\n    </table>\n  );\n};\n\nexport { TableSection };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}