@popsure/dirty-swan 0.66.16 → 0.66.18

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

@@ -467,6 +467,393 @@ 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
+      />
+    </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', modalContent: 'Price info' },
+        { text: '~€50-91', fontVariant: 'PRICE', modalContent: 'Price info' },
+      ],
+      [
+        {
+          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
+      />
+    </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', modalContent: 'Price info' },
+        { text: '€–', fontVariant: 'PRICE', modalContent: 'Price info' },
+        { text: '€–', fontVariant: 'PRICE', modalContent: 'Price info' },
+      ],
+      [
+        { 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
+      />
+    </div>
+  ),
+
+  name: 'Three Plan - Website',
+};
+
 export const TableDataType = () => {
   return (
     <pre>

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

@@ -127,7 +127,7 @@ export const BaseCell = ({
             </span>
           )}
 
-          <div className="d-inline">
+          <div className="d-flex ai-center">
             {text && fontVariant === 'NORMAL' && (
               <div className={classNames(
                 "p-p d-inline",
@@ -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.tsx

@@ -13,6 +13,7 @@ export type CTACellProps = {
   buttonCaption?: ReactNode;
   grey?: boolean;
   narrow?: boolean;
+  centered?: boolean;
   href: string;
   className?: string;
   dataTestId?: string;
@@ -26,6 +27,7 @@ export const CTACell = ({
   icon,
   grey,
   narrow,
+  centered,
   href,
   buttonCaption,
   imageComponent,
@@ -40,7 +42,9 @@ export const CTACell = ({
 
   return (
     <div
-      className={classNames(className, "ta-left")}
+      className={classNames(className, 'ta-left', {
+        'd-flex fd-column ai-center': centered,
+      })}
       data-cy={dataCy}
       data-testid={dataTestId}
     >

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

@@ -23,6 +23,10 @@
   }
 }
 
+.navigationTitle {
+  padding-left: 0;
+}
+
 .headerCell {
   vertical-align: top;
 }

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

@@ -54,6 +54,7 @@ const TableCell = React.memo(
           'ta-left': isFirstCellInRow,
           [styles.headerCell]: isHeader,
           [styles.thNavigation]: isNavigation,
+          [styles.navigationTitle]: isNavigation && isTopLeftCell,
           [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,
           [styles.fixedCard]: cellProps.type === 'CARD',
           [styles.selectedColumnTop]: selectedColumnPosition === 'top',
@@ -71,7 +72,9 @@ const TableCell = React.memo(
             }
           />
         )}
-        {cellProps.type === 'CTA' && <CTACell {...cellProps} />}
+        {cellProps.type === 'CTA' && (
+          <CTACell {...cellProps} centered={isNavigation} />
+        )}
         {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}
         {cellProps.type === 'CARD' && <CardCell {...cellProps} />}
       </Tag>

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