@popsure/dirty-swan 0.66.15 → 0.66.17

package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js

@@ -7,8 +7,8 @@ import { Button } from '../../../../button/index.js';
 import '../../../../../_commonjsHelpers-BFTU3MAI.js';
 import 'react';
 
-var css_248z = ".CTACell-module_narrow__1EPPT {\n  height: 40px;\n  padding: 8px !important;\n}";
-var styles = {"narrow":"CTACell-module_narrow__1EPPT"};
+var css_248z = ".CTACell-module_button__38ozg {\n  max-width: 176px;\n}\n\n.CTACell-module_narrow__1EPPT {\n  height: 40px;\n  padding: 8px !important;\n}";
+var styles = {"button":"CTACell-module_button__38ozg","narrow":"CTACell-module_narrow__1EPPT"};
 styleInject(css_248z);
 
 var CTACell = function (_a) {
@@ -20,7 +20,7 @@ var CTACell = function (_a) {
                 href: href,
                 target: '_blank',
                 rel: 'noopener noreferrer',
-            }, { className: classNames('mt16 w100 wmx3', (_b = {
+            }, { className: classNames('mt16 w100', styles.button, (_b = {
                         'p-btn--primary': !grey,
                         'p-btn--secondary-grey': grey
                     },

package/dist/esm/components/table/components/TableCell/CTACell/CTACell.js.map

@@ -1 +1 @@
-{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n  title: ReactNode;\n  price?: ReactNode;\n  icon?: ReactNode;\n  imageComponent?: (args: any) => JSX.Element;\n  buttonCaption?: ReactNode;\n  grey?: boolean;\n  narrow?: boolean;\n  href: string;\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n  onClick?: () => void;\n};\n\nexport const CTACell = ({\n  title,\n  price,\n  icon,\n  grey,\n  narrow,\n  href,\n  buttonCaption,\n  imageComponent,\n  className,\n  dataCy,\n  dataTestId,\n  onClick,\n}: CTACellProps) => {\n  const renderedIcon = (\n    <IconRenderer icon={icon} imageComponent={imageComponent} />\n  );\n\n  return (\n    <div\n      className={classNames(className, \"ta-left\")}\n      data-cy={dataCy}\n      data-testid={dataTestId}\n    >\n      <div className=\"d-flex ai-center gap8\">\n        {renderedIcon}\n        <p className=\"p-h3\">\n          {title}\n          {price && <span className=\"tc-purple-600\"> {price}</span>}\n        </p>\n      </div>\n\n      <Button\n        {...onClick ? { onClick } : {\n          as: 'a',\n          href: href,\n          target: '_blank',\n          rel: 'noopener noreferrer',\n        }}\n        className={classNames('mt16 w100 wmx3', {\n          'p-btn--primary': !grey,\n          'p-btn--secondary-grey': grey,\n          [styles.narrow]: narrow,\n        })}\n      >\n        {buttonCaption}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAsBO,IAAM,OAAO,GAAG,UAAC,EAaT,EAAA;;AAZb,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,YAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA;AAEP,IAAA,IAAM,YAAY,IAChBA,GAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAA,CAAI,CAC7D;IAED,QACEC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA,SAAA,EAClC,MAAM,iBACF,UAAU,EAAA,QAAA,EAAA,CAEvBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CACnC,YAAY,EACbA,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CAChB,KAAK,EACL,KAAK,IAAIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,KAAK,CAAA,EAAA,CAAQ,CAAA,EAAA,CACvD,CAAA,EAAA,CACA,EAEND,IAAC,MAAM,EAAA,QAAA,CAAA,EAAA,EACD,OAAO,GAAG,EAAE,OAAO,EAAA,OAAA,EAAE,GAAG;AAC1B,gBAAA,EAAE,EAAE,GAAG;AACP,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,GAAG,EAAE,qBAAqB;AAC3B,aAAA,EAAA,EACD,SAAS,EAAE,UAAU,CAAC,gBAAgB,GAAA,EAAA,GAAA;wBACpC,gBAAgB,EAAE,CAAC,IAAI;AACvB,wBAAA,uBAAuB,EAAE;;AACzB,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,oBAAA,EAAA,EAAA,EAAA,QAAA,EAED,aAAa,EAAA,CAAA,CACP,CAAA,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"CTACell.js","sources":["../../../../../../../../src/lib/components/table/components/TableCell/CTACell/CTACell.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { ReactNode } from 'react';\n\nimport styles from './CTACell.module.scss';\nimport { IconRenderer } from '../../IconRenderer/IconRenderer';\nimport { Button } from '../../../../button';\n\nexport type CTACellProps = {\n  title: ReactNode;\n  price?: ReactNode;\n  icon?: ReactNode;\n  imageComponent?: (args: any) => JSX.Element;\n  buttonCaption?: ReactNode;\n  grey?: boolean;\n  narrow?: boolean;\n  href: string;\n  className?: string;\n  dataTestId?: string;\n  dataCy?: string;\n  onClick?: () => void;\n};\n\nexport const CTACell = ({\n  title,\n  price,\n  icon,\n  grey,\n  narrow,\n  href,\n  buttonCaption,\n  imageComponent,\n  className,\n  dataCy,\n  dataTestId,\n  onClick,\n}: CTACellProps) => {\n  const renderedIcon = (\n    <IconRenderer icon={icon} imageComponent={imageComponent} />\n  );\n\n  return (\n    <div\n      className={classNames(className, \"ta-left\")}\n      data-cy={dataCy}\n      data-testid={dataTestId}\n    >\n      <div className=\"d-flex ai-center gap8\">\n        {renderedIcon}\n        <p className=\"p-h3\">\n          {title}\n          {price && <span className=\"tc-purple-600\"> {price}</span>}\n        </p>\n      </div>\n\n      <Button\n        {...onClick ? { onClick } : {\n          as: 'a',\n          href: href,\n          target: '_blank',\n          rel: 'noopener noreferrer',\n        }}\n        className={classNames('mt16 w100', styles.button, {\n          'p-btn--primary': !grey,\n          'p-btn--secondary-grey': grey,\n          [styles.narrow]: narrow,\n        })}\n      >\n        {buttonCaption}\n      </Button>\n    </div>\n  );\n};\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;AAsBO,IAAM,OAAO,GAAG,UAAC,EAaT,EAAA;;AAZb,IAAA,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,cAAc,GAAA,EAAA,CAAA,cAAA,EACd,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,MAAM,YAAA,EACN,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA;AAEP,IAAA,IAAM,YAAY,IAChBA,GAAA,CAAC,YAAY,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,cAAc,EAAA,CAAI,CAC7D;IAED,QACEC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,EAAA,SAAA,EAClC,MAAM,iBACF,UAAU,EAAA,QAAA,EAAA,CAEvBA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CACnC,YAAY,EACbA,IAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,MAAM,EAAA,QAAA,EAAA,CAChB,KAAK,EACL,KAAK,IAAIA,IAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,CAAA,GAAA,EAAG,KAAK,CAAA,EAAA,CAAQ,CAAA,EAAA,CACvD,CAAA,EAAA,CACA,EAEND,IAAC,MAAM,EAAA,QAAA,CAAA,EAAA,EACD,OAAO,GAAG,EAAE,OAAO,EAAA,OAAA,EAAE,GAAG;AAC1B,gBAAA,EAAE,EAAE,GAAG;AACP,gBAAA,IAAI,EAAE,IAAI;AACV,gBAAA,MAAM,EAAE,QAAQ;AAChB,gBAAA,GAAG,EAAE,qBAAqB;aAC3B,EAAA,EACD,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA;wBAC9C,gBAAgB,EAAE,CAAC,IAAI;AACvB,wBAAA,uBAAuB,EAAE;;AACzB,oBAAA,EAAA,CAAC,MAAM,CAAC,MAAM,CAAA,GAAG,MAAM;AACvB,oBAAA,EAAA,EAAA,EAAA,QAAA,EAED,aAAa,EAAA,CAAA,CACP,CAAA,EAAA,CACL;AAEV;;;;"}

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

@@ -4,7 +4,7 @@ import { s as styleInject } from '../../../../style-inject.es-tgCJW-Cu.js';
 import { c as classNames } from '../../../../index-DLQEsiym.js';
 import '../../../../_commonjsHelpers-BFTU3MAI.js';
 
-var css_248z = ".Collapsible-module_collapsible__2wWKs {\n  transition: max-height 0.3s ease-in-out;\n  overflow-y: clip;\n}";
+var css_248z = ".Collapsible-module_collapsible__2wWKs {\n  display: flow-root;\n  transition: max-height 0.3s ease-in-out;\n  overflow-y: clip;\n}";
 var styles = {"collapsible":"Collapsible-module_collapsible__2wWKs"};
 styleInject(css_248z);
 

package/dist/esm/lib/components/table/Table.stories.d.ts

@@ -83,5 +83,17 @@ export declare const SinglePlanQuoteTable: {
     render: () => JSX.Element;
     name: string;
 };
+export declare const SinglePlanQuoteWebsite: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const TwoPlanQuoteWebsite: {
+    render: () => JSX.Element;
+    name: string;
+};
+export declare const ThreePlanQuoteWebsite: {
+    render: () => JSX.Element;
+    name: string;
+};
 export declare const TableDataType: () => JSX.Element;
 export default story;

package/package.json

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

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

@@ -467,6 +467,396 @@ export const SinglePlanQuoteTable = {
   name: 'Single Plan Quote',
 };
 
+const singlePlanWebsiteData: TableData = [
+  {
+    rows: [
+      [
+        { text: 'Our plans' },
+        {
+          type: 'CTA',
+          title: 'Plan name',
+          buttonCaption: 'Get a quote',
+          href: 'http://example.com',
+        },
+      ],
+      [
+        { text: 'Monthly price' },
+        {
+          text: '~€99',
+          fontVariant: 'PRICE',
+          modalContent: 'Price info',
+        },
+      ],
+      [
+        { text: 'Label with a description value' },
+        { text: 'Value', description: 'Value description' },
+      ],
+      [
+        {
+          text: 'Label with a long text that wraps into multiple lines in the table',
+        },
+        {
+          checkmarkValue: true,
+          modalContent: 'Checkmark info',
+        },
+      ],
+      [
+        {
+          text: 'Label with a boolean value',
+        },
+        { checkmarkValue: false },
+      ],
+      [
+        {
+          text: 'Label with info',
+          modalContent: 'Label info',
+        },
+        { text: 'Text value' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'First section',
+    },
+    rows: [
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+    ],
+  },
+  {
+    section: {
+      title: 'Second section',
+    },
+    rows: [
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+      [{ text: 'Row label' }, { checkmarkValue: false }],
+    ],
+  },
+  {
+    section: {
+      title: 'Third section',
+    },
+    rows: [
+      [
+        { text: 'Row label' },
+        { text: 'Up to €1,500', description: 'Value description' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Fourth section',
+    },
+    rows: [
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+    ],
+  },
+  {
+    section: {
+      title: 'Fifth section',
+    },
+    rows: [
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+    ],
+  },
+  {
+    section: {
+      title: 'Sixth section',
+    },
+    rows: [
+      [{ text: 'Row label' }, { text: 'Up to €5,000' }],
+      [{ text: 'Row label' }, { checkmarkValue: true }],
+    ],
+  },
+];
+
+export const SinglePlanQuoteWebsite = {
+  render: () => (
+    <div style={{ maxWidth: 756 }}>
+      <Table
+        tableData={singlePlanWebsiteData}
+        title="Single plan quote website"
+        collapsibleSections
+        hideTableNavigation
+      />
+    </div>
+  ),
+
+  name: 'Single Plan - Website',
+};
+
+const twoPlanWebsiteData: TableData = [
+  {
+    rows: [
+      [
+        { text: 'Our plans' },
+        {
+          type: 'CTA',
+          title: 'Plan name',
+          buttonCaption: 'Get a quote',
+          href: 'http://example.com',
+        },
+        {
+          type: 'CTA',
+          title: 'Plan name',
+          buttonCaption: 'Get a quote',
+          href: 'http://example.com',
+        },
+      ],
+      [
+        {
+          text: 'Monthly price',
+          description: 'Label description with additional pricing context',
+        },
+        { text: '~€14-35', fontVariant: 'PRICE' },
+        { text: '~€50-91', fontVariant: 'PRICE' },
+      ],
+      [
+        {
+          text: 'Label with info',
+          modalContent: 'Label info',
+        },
+        { text: 'Text value' },
+        { text: 'Text value' },
+      ],
+      [
+        {
+          text: 'Label with info',
+          modalContent: 'Label info',
+        },
+        { text: 'Text value', modalContent: 'Value info' },
+        { text: 'Text value', modalContent: 'Value info' },
+      ],
+      [
+        { text: 'Label with a boolean value' },
+        { checkmarkValue: true, description: 'Value description' },
+        { checkmarkValue: true, description: 'Value description' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'First section',
+    },
+    rows: [
+      [
+        { text: 'Row label' },
+        { text: 'Up to €1,500' },
+        { text: 'Up to €3,000' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Second section',
+    },
+    rows: [
+      [
+        { text: 'Row label', description: 'Row label description' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Row label' },
+        { checkmarkValue: false },
+        { checkmarkValue: false },
+      ],
+      [
+        { text: 'Row label', description: 'Row label description' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Row label' },
+        { text: 'Text value' },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Row label' },
+        { text: 'Text value', description: 'Value description' },
+        { text: 'Text value', description: 'Value description' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Third section',
+    },
+    rows: [
+      [
+        { text: 'Row label' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Fourth section',
+    },
+    rows: [
+      [
+        { text: 'Row label' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Fifth section',
+    },
+    rows: [
+      [
+        { text: 'Row label' },
+        { text: 'Text value' },
+        { text: 'Text value' },
+      ],
+    ],
+  },
+];
+
+export const TwoPlanQuoteWebsite = {
+  render: () => (
+    <div style={{ maxWidth: 900 }}>
+      <Table
+        tableData={twoPlanWebsiteData}
+        title="Two plan quote website"
+        collapsibleSections
+        hideTableNavigation
+      />
+    </div>
+  ),
+
+  name: 'Two Plan - Website',
+};
+
+const threePlanWebsiteData: TableData = [
+  {
+    rows: [
+      [
+        { text: 'Our plans' },
+        {
+          type: 'CTA',
+          icon: 'https://placehold.co/24x24/green/white',
+          title: 'Plan name',
+          buttonCaption: 'Get a quote',
+          href: '',
+          onClick: () => {},
+        },
+        {
+          type: 'CTA',
+          icon: 'https://placehold.co/24x24/blue/white',
+          title: 'Plan name',
+          buttonCaption: 'Get a quote',
+          href: '',
+          onClick: () => {},
+        },
+        {
+          type: 'CTA',
+          icon: 'https://placehold.co/24x24/orange/white',
+          title: 'Plan name',
+          buttonCaption: 'Get a quote',
+          href: '',
+          onClick: () => {},
+        },
+      ],
+      [
+        { text: 'Monthly price' },
+        { text: '€–', fontVariant: 'PRICE' },
+        { text: '€–', fontVariant: 'PRICE' },
+        { text: '€–', fontVariant: 'PRICE' },
+      ],
+      [
+        { text: 'Label with star rating' },
+        { rating: { type: 'star', value: 2 }, modalContent: 'Rating info' },
+        { rating: { type: 'star', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+      [
+        { text: 'Label with zap rating' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'zap', value: 3 }, modalContent: 'Rating info' },
+        { rating: { type: 'zap', value: 3 }, modalContent: 'Rating info' },
+      ],
+      [
+        { text: 'Label with info', modalContent: 'Label info' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Label with progress bar' },
+        { text: '100%' },
+        { text: '70%' },
+        { text: '100%' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'First section',
+    },
+    rows: [
+      [
+        { text: 'Row label with info', modalContent: 'Label info' },
+        { text: 'Up to €2 million' },
+        { text: 'Up to €1.5 million' },
+        { text: 'Up to €1.5 million' },
+      ],
+      [
+        { text: 'Row label with info', modalContent: 'Label info' },
+        { text: 'Text value' },
+        { text: 'Text value' },
+        { text: 'Text value' },
+      ],
+      [
+        { text: 'Row label' },
+        { text: '80% covered' },
+        { text: '80% covered' },
+        { text: '80% covered' },
+      ],
+      [
+        { text: 'Row label' },
+        { checkmarkValue: false },
+        { checkmarkValue: false },
+        { checkmarkValue: false },
+      ],
+      [
+        { text: 'Row label' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Row label' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+    ],
+  },
+];
+
+export const ThreePlanQuoteWebsite = {
+  render: () => (
+    <div style={{ maxWidth: 900 }}>
+      <Table
+        tableData={threePlanWebsiteData}
+        title="Three plan quote website"
+        collapsibleSections
+        hideTableNavigation
+      />
+    </div>
+  ),
+
+  name: 'Three Plan - Website',
+};
+
 export const TableDataType = () => {
   return (
     <pre>

package/src/lib/components/table/components/TableCell/BaseCell/BaseCell.tsx

@@ -141,7 +141,7 @@ export const BaseCell = ({
 
             {text && fontVariant === 'PRICE' && (
               <div
-                className="p-h1 p--serif tc-neutral-900"
+                className="p-h2 tc-neutral-900"
                 data-testid="table-cell-content"
               >
                 {text}

package/src/lib/components/table/components/TableCell/CTACell/CTACell.module.scss

@@ -1,3 +1,7 @@
+.button {
+  max-width: 176px;
+}
+
 .narrow {
   height: 40px;
   padding: 8px!important;

package/src/lib/components/table/components/TableCell/CTACell/CTACell.tsx

@@ -59,7 +59,7 @@ export const CTACell = ({
           target: '_blank',
           rel: 'noopener noreferrer',
         }}
-        className={classNames('mt16 w100 wmx3', {
+        className={classNames('mt16 w100', styles.button, {
           'p-btn--primary': !grey,
           'p-btn--secondary-grey': grey,
           [styles.narrow]: narrow,

package/src/lib/components/table/components/TableContents/Collapsible.module.scss

@@ -1,4 +1,5 @@
 .collapsible {
+  display: flow-root;
   transition: max-height 0.3s ease-in-out;
   overflow-y: clip;
 }