@popsure/dirty-swan 0.66.12 → 0.66.14

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

@@ -1,7 +1,7 @@
 import '../../../../tslib.es6-CVlKGIvp.js';
 import 'react/jsx-runtime';
 import '../../../../index-DLQEsiym.js';
-export { T as TableSection } from '../../../../TableSection-CEhD4eoy.js';
+export { T as TableSection } from '../../../../TableSection-Cm50RX-V.js';
 import '../TableCell/TableCell.js';
 import 'react';
 import '../../../../useMediaQuery-BlEUymPA.js';

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

@@ -1,7 +1,7 @@
 import { b as __assign } from '../../../../tslib.es6-CVlKGIvp.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-DzdqZxUd.js';
-import { T as TableSection } from '../../../../TableSection-CEhD4eoy.js';
+import { T as TableSection } from '../../../../TableSection-Cm50RX-V.js';
 import '../../../../_commonjsHelpers-BFTU3MAI.js';
 import 'react';
 import 'react-dom';

package/dist/esm/index.js

@@ -470,7 +470,7 @@ import './components/table/components/IconRenderer/IconRenderer.js';
 import './components/table/components/TableCell/CardCell/CardCell.js';
 import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
 import './components/table/components/TableContents/TableContents.js';
-import './TableSection-CEhD4eoy.js';
+import './TableSection-Cm50RX-V.js';
 import './components/table/components/TableContents/Collapsible.js';
 import './useTableNavigation-CrxoXTVd.js';
 import './components/table/components/TableControls/TableControls.js';

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

@@ -24,6 +24,8 @@ export interface TableProps {
     title: string;
     activeSection?: number;
     hideTableNavigation?: boolean;
+    hideStickyHeader?: boolean;
+    showSelectedColumn?: boolean;
 }
-declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, }: TableProps) => JSX.Element;
+declare const Table: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, }: TableProps) => JSX.Element;
 export { Table };

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

@@ -2,7 +2,7 @@ import { TableProps } from './Table';
 import { TableData } from './types';
 declare const story: {
     title: string;
-    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, }: TableProps) => JSX.Element;
+    component: ({ cellReplacements, className, collapsibleSections, hideColumns, hideDetails, hideRows, imageComponent, modalContentRenderer, onModalOpen, onSelectionChanged, scrollOnOpen, scrollTopOffset, stickyHeaderTopOffset, tableData, textOverrides: definedTextOverrides, title, activeSection: externalActiveSection, hideTableNavigation, hideStickyHeader, showSelectedColumn, }: TableProps) => JSX.Element;
     argTypes: {
         tableData: {
             subContent: string;
@@ -22,6 +22,9 @@ declare const story: {
         hideDetails: {
             subContent: string;
         };
+        hideStickyHeader: {
+            subContent: string;
+        };
         stickyHeaderTopOffset: {
             subContent: string;
         };
@@ -69,10 +72,15 @@ declare const story: {
         hideColumns: never[];
         hideRows: never[];
         hideTableNavigation: boolean;
+        showSelectedColumn: boolean;
     };
 };
 export declare const TableStory: {
-    render: ({ collapsibleSections, scrollOnOpen, scrollTopOffset, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, activeSection, hideTableNavigation, }: TableProps) => JSX.Element;
+    render: ({ collapsibleSections, scrollOnOpen, scrollTopOffset, tableData, hideColumns, hideDetails, hideRows, stickyHeaderTopOffset, textOverrides, title, activeSection, hideTableNavigation, showSelectedColumn, }: TableProps) => JSX.Element;
+    name: string;
+};
+export declare const SinglePlanQuoteTable: {
+    render: () => JSX.Element;
     name: string;
 };
 export declare const TableDataType: () => JSX.Element;

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

@@ -5,9 +5,11 @@ type ExtraTableCellProps = {
     isFirstCellInRow?: boolean;
     isTopLeftCell?: boolean;
     isNavigation?: boolean;
+    isSelectedColumn?: boolean;
+    selectedColumnPosition?: 'top' | 'bottom' | 'middle';
     imageComponent?: (args: any) => JSX.Element;
     isBelowDesktop?: boolean;
 };
 export type TableCellProps = TableCellData & ExtraTableCellProps;
-declare const TableCell: React.MemoExoticComponent<({ isFirstCellInRow, isHeader, isNavigation, isTopLeftCell, colSpan, isBelowDesktop, ...cellProps }: TableCellProps) => JSX.Element>;
+declare const TableCell: React.MemoExoticComponent<({ isFirstCellInRow, isHeader, isNavigation, isSelectedColumn, selectedColumnPosition, isTopLeftCell, colSpan, isBelowDesktop, ...cellProps }: TableCellProps) => JSX.Element>;
 export { TableCell };

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

@@ -16,6 +16,7 @@ export interface TableContentsProps {
     title: string;
     cellReplacements?: CellReplacements;
     imageComponent?: (args: any) => JSX.Element;
+    selectedColumn?: number;
 }
-declare const TableContents: ({ className, collapsibleSections, scrollOnOpen, scrollTopOffset, stickyHeaderRef, tableData, hideColumns, hideDetails, hideRows, isMobile, openModal, shouldHideDetails, title, cellReplacements, imageComponent, }: TableContentsProps) => JSX.Element;
+declare const TableContents: ({ className, collapsibleSections, scrollOnOpen, scrollTopOffset, stickyHeaderRef, tableData, hideColumns, hideDetails, hideRows, isMobile, openModal, shouldHideDetails, title, cellReplacements, imageComponent, selectedColumn, }: TableContentsProps) => JSX.Element;
 export { TableContents };

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

@@ -10,6 +10,7 @@ export interface TableSectionProps {
     width?: number | string;
     cellReplacements?: CellReplacements;
     imageComponent?: (args: any) => JSX.Element;
+    selectedColumn?: number;
 }
-declare const TableSection: ({ className, tableCellRows, hideColumns, hideRows, hideHeader, openModal, title, width, cellReplacements, imageComponent, }: TableSectionProps) => JSX.Element;
+declare const TableSection: ({ className, tableCellRows, hideColumns, hideRows, hideHeader, openModal, title, width, cellReplacements, imageComponent, selectedColumn, }: TableSectionProps) => JSX.Element;
 export { TableSection };

package/dist/esm/lib/models/styles.d.ts

@@ -1,2 +1,2 @@
-export type Color = 'transparent' | 'blue-100' | 'blue-300' | 'blue-500' | 'blue-700' | 'blue-900' | 'purple-50' | 'purple-100' | 'purple-200' | 'purple-300' | 'purple-400' | 'purple-500' | 'purple-600' | 'purple-700' | 'purple-800' | 'purple-900' | 'red-100' | 'red-300' | 'red-500' | 'red-700' | 'red-900' | 'neutral-50' | 'neutral-100' | 'neutral-300' | 'neutral-400' | 'neutral-600' | 'neutral-700' | 'neutral-800' | 'neutral-900' | 'green-100' | 'green-300' | 'green-500' | 'green-700' | 'green-900' | 'yellow-100' | 'yellow-300' | 'yellow-500' | 'yellow-700' | 'yellow-900';
+export type Color = 'transparent' | 'blue-100' | 'blue-300' | 'blue-500' | 'blue-700' | 'blue-900' | 'purple-50' | 'purple-100' | 'purple-200' | 'purple-300' | 'purple-400' | 'purple-500' | 'purple-600' | 'purple-700' | 'purple-800' | 'purple-900' | 'red-100' | 'red-300' | 'red-500' | 'red-700' | 'red-900' | 'neutral-50' | 'neutral-100' | 'neutral-300' | 'neutral-400' | 'neutral-500' | 'neutral-600' | 'neutral-700' | 'neutral-800' | 'neutral-900' | 'green-100' | 'green-300' | 'green-500' | 'green-700' | 'green-900' | 'yellow-100' | 'yellow-300' | 'yellow-500' | 'yellow-700' | 'yellow-900';
 export type Size = 0 | 4 | 8 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 40 | 48 | 56 | 64 | 72 | 80 | 88 | 96;

package/package.json

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

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

@@ -4,6 +4,9 @@
 
 .wrapper {
   position: relative;
+  border: 1px solid $ds-neutral-200;
+  border-radius: 12px;
+  padding: 24px 24px 0;
 }
 
 .container {

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

@@ -255,6 +255,10 @@ const story = {
     hideDetails: {
       subContent: 'This property allows to hide the details of the table.',
     },
+    hideStickyHeader: {
+      subContent:
+        'This property allows to hide the sticky header row on desktop, e.g. for single plan tables without a plan selector.',
+    },
     stickyHeaderTopOffset: {
       subContent:
         'This property allows to set the offset of the sticky header.',
@@ -307,6 +311,7 @@ const story = {
     hideColumns: [],
     hideRows: [],
     hideTableNavigation: true,
+    showSelectedColumn: false,
   },
 };
 
@@ -324,6 +329,7 @@ export const TableStory = {
     title,
     activeSection,
     hideTableNavigation,
+    showSelectedColumn,
   }: TableProps) => {
     const [price, setPrice] = useState(999);
     return (
@@ -367,6 +373,7 @@ export const TableStory = {
           title={title}
           activeSection={activeSection}
           hideTableNavigation={hideTableNavigation}
+          showSelectedColumn={showSelectedColumn}
         />
       </div>
     );
@@ -375,6 +382,91 @@ export const TableStory = {
   name: 'Table',
 };
 
+const singlePlanData: TableData = [
+  {
+    rows: [
+      [{ text: '' }, { text: '' }],
+      [
+        { text: 'Price' },
+        {
+          text: '€9.99',
+          description: 'With monthly cancellation',
+          fontVariant: 'PRICE',
+        },
+      ],
+      [
+        {
+          text: 'Regular vet visits & medication',
+          modalContent: 'Some stories about vets',
+        },
+        { text: 'Up to €1 million' },
+      ],
+      [
+        {
+          text: 'Specialist visits',
+          modalContent: 'Some stories about specialists',
+        },
+        { text: '4 visits per year' },
+      ],
+      [{ text: 'Medication' }, { text: '80% covered' }],
+      [{ text: 'Grooming' }, { checkmarkValue: false }],
+      [{ text: 'Boarding fees' }, { checkmarkValue: false }],
+      [
+        {
+          text: 'Alternative treatments',
+          description: 'E.g. physiotherapy, hydrotherapy',
+        },
+        { checkmarkValue: false },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Dental',
+    },
+    rows: [
+      [{ text: 'Dental cleanings' }, { text: 'Up to €500' }],
+      [{ text: 'Dental treatments' }, { text: 'Up to €500' }],
+      [{ text: 'Operations' }, { checkmarkValue: true }],
+    ],
+  },
+  {
+    section: {
+      title: 'Travel',
+    },
+    rows: [
+      [{ text: 'Trips abroad' }, { checkmarkValue: true }],
+      [{ text: 'Emergency care abroad' }, { checkmarkValue: true }],
+    ],
+  },
+  {
+    section: {
+      title: 'Add-ons',
+    },
+    rows: [
+      [{ text: 'Extended coverage' }, { checkmarkValue: true }],
+      [{ text: 'Equipment protection' }, { checkmarkValue: true }],
+    ],
+  },
+];
+
+export const SinglePlanQuoteTable = {
+  render: () => (
+    <div style={{ maxWidth: 756 }}>
+      <Table
+        tableData={singlePlanData}
+        title="Single plan quote"
+        collapsibleSections
+        hideTableNavigation
+        hideStickyHeader
+        showSelectedColumn
+      />
+    </div>
+  ),
+
+  name: 'Single Plan Quote',
+};
+
 export const TableDataType = () => {
   return (
     <pre>

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

@@ -75,6 +75,21 @@ describe('Table', () => {
     expect(screen.getByText('Hide details')).toBeVisible();
   });
 
+  it('does not render the sticky header row when hideStickyHeader is true', () => {
+    const { rerender } = render(
+      <Table tableData={tableData} title="Test Table" />
+    );
+    const countWithStickyHeader = screen.getAllByText('Item 1').length;
+
+    rerender(
+      <Table tableData={tableData} hideStickyHeader title="Test Table" />
+    );
+
+    expect(screen.getAllByText('Item 1')).toHaveLength(
+      countWithStickyHeader - 1
+    );
+  });
+
   it('shows a modal when clicking on info icon', async () => {
     const { user } = render(<Table tableData={tableData} title="Test Table" />);
 

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

@@ -47,6 +47,8 @@ export interface TableProps {
   title: string;
   activeSection?: number;
   hideTableNavigation?: boolean;
+  hideStickyHeader?: boolean;
+  showSelectedColumn?: boolean;
 }
 
 const defaultTextOverrides = {
@@ -73,6 +75,8 @@ const Table = ({
   title,
   activeSection: externalActiveSection,
   hideTableNavigation = false,
+  hideStickyHeader = false,
+  showSelectedColumn = false,
 }: TableProps) => {
   const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };
   const isMobile = useMediaQuery('BELOW_MOBILE');
@@ -99,7 +103,7 @@ const Table = ({
   };
   const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];
   const currentActiveSectionReplacements =
-    (currentActiveSection.cellId &&
+    (currentActiveSection?.cellId &&
       cellReplacements?.[currentActiveSection.cellId]) ||
     {};
 
@@ -133,7 +137,7 @@ const Table = ({
             />
           )}
 
-          {!hideTableNavigation && (
+          {!hideTableNavigation && currentActiveSection && (
             <TableControls
               activeSection={activeSection}
               columnsLength={columnsLength}
@@ -158,25 +162,27 @@ const Table = ({
           )}
         </>
       ) : (
-        <div
-          ref={stickyHeaderRef}
-          aria-hidden
-          className={styles.stickyHeader}
-          style={{ top: `${stickyHeaderTopOffset}px` }}
-        >
-          <div className={styles.container} ref={headerRef}>
-            <TableSection
-              cellReplacements={cellReplacements}
-              className={className}
-              hideColumns={hideColumns}
-              hideRows={hideRows}
-              openModal={handleOpenModal}
-              tableCellRows={[tableData?.[0]?.rows?.[0]]}
-              title={title}
-              imageComponent={imageComponent}
-            />
+        !hideStickyHeader && (
+          <div
+            ref={stickyHeaderRef}
+            aria-hidden
+            className={styles.stickyHeader}
+            style={{ top: `${stickyHeaderTopOffset}px` }}
+          >
+            <div className={styles.container} ref={headerRef}>
+              <TableSection
+                cellReplacements={cellReplacements}
+                className={className}
+                hideColumns={hideColumns}
+                hideRows={hideRows}
+                openModal={handleOpenModal}
+                tableCellRows={[tableData?.[0]?.rows?.[0]]}
+                title={title}
+                imageComponent={imageComponent}
+              />
+            </div>
           </div>
-        </div>
+        )
       )}
 
       <div ref={containerRef} className={classNames(styles.container, 'pb8')}>
@@ -196,6 +202,7 @@ const Table = ({
           openModal={handleOpenModal}
           cellReplacements={cellReplacements}
           imageComponent={imageComponent}
+          selectedColumn={showSelectedColumn ? activeSection : undefined}
         />
       </div>
 

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

@@ -121,7 +121,7 @@ export const BaseCell = ({
                   data-testid="table-cell-boolean-no"
                   size={24}
                   aria-hidden
-                  color="neutral-400"
+                  color="neutral-500"
                 />
               )}
             </span>

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

@@ -29,7 +29,7 @@ export const ButtonCell = ({
     <div
       className={
         classNames(
-          "w100 d-flex fd-column ai-center jc-center gap8",
+          "w100 d-flex fd-column ai-start jc-center gap8",
           className,
         )
       }

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

@@ -40,11 +40,11 @@ export const CTACell = ({
 
   return (
     <div
-      className={classNames(className, "ta-center")}
+      className={classNames(className, "ta-left")}
       data-cy={dataCy}
       data-testid={dataTestId}
     >
-      <div className="d-flex jc-center ai-center gap8">
+      <div className="d-flex ai-center gap8">
         {renderedIcon}
         <p className="p-h3">
           {title}

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

@@ -5,6 +5,7 @@
   vertical-align: middle;
   scroll-snap-align: end;
   width: 50%;
+  padding: 28px 24px;
 
   @include p-size-tablet {
     width: auto;
@@ -26,20 +27,15 @@
   position: sticky;
   left: 0;
   z-index: 2;
+  padding-left: 0;
+}
 
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 1px;
-    background-color: $ds-neutral-100;
-  }
+.selectedColumnTop {
+  border-radius: 16px 16px 0 0;
+}
 
-  @include p-size-tablet {
-    padding-left: 16px;
-  }
+.selectedColumnBottom {
+  border-radius: 0 0 16px 16px;
 }
 
 .fixedCard {

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

@@ -13,6 +13,8 @@ type ExtraTableCellProps = {
   isFirstCellInRow?: boolean;
   isTopLeftCell?: boolean;
   isNavigation?: boolean;
+  isSelectedColumn?: boolean;
+  selectedColumnPosition?: 'top' | 'bottom' | 'middle';
   imageComponent?: (args: any) => JSX.Element;
   isBelowDesktop?: boolean;
 };
@@ -24,6 +26,8 @@ const TableCell = React.memo(
     isFirstCellInRow = false,
     isHeader = false,
     isNavigation = false,
+    isSelectedColumn = false,
+    selectedColumnPosition,
     isTopLeftCell = false,
     colSpan = 0,
     isBelowDesktop,
@@ -46,11 +50,13 @@ const TableCell = React.memo(
     return (
       <Tag
         {...scope}
-        className={classNames('bg-white py24 px8', styles.th, {
+        className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {
           'ta-left': isFirstCellInRow,
           [styles.thNavigation]: isNavigation,
           [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,
           [styles.fixedCard]: cellProps.type === 'CARD',
+          [styles.selectedColumnTop]: selectedColumnPosition === 'top',
+          [styles.selectedColumnBottom]: selectedColumnPosition === 'bottom',
         })}
         colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}
       >

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

@@ -1,34 +1,33 @@
 @use "../../../../scss/public/colors" as *;
 
-.cardWrapper {
-  height: 88px;
+.sectionButtonWrapper {
+  height: 74px;
 }
 
-.cardButton {
-  div {
-    background-color: $ds-orange-50;
-  }
+.sectionButton {
+  position: absolute;
+  left: 24px;
+  right: 24px;
+  z-index: 3;
+  height: 74px;
+  border: none;
+  border-bottom: 1px solid $ds-neutral-300;
+  color: $ds-neutral-900;
+  padding: 0;
+}
 
-  &:hover div {
-    border-color: transparent!important;
-    outline-color: transparent!important;
-    box-shadow: none!important;
-    background-color: $ds-orange-100!important;
-  }
+button.sectionButton {
+  cursor: pointer;
 
-  &:focus-visible div {
-    background-color: $ds-orange-100!important;
+  &:hover {
+    color: $ds-neutral-700;
+
+    :global(.p-h3) {
+      color: $ds-neutral-700;
+    }
   }
 }
 
-.card {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 3;
+div:last-child > .sectionButtonWrapper > .sectionButton {
+  border-bottom: none;
 }
-
-.cardIcon {
-  width: 20px;
-  margin-right: 8px;
-}

package/src/lib/components/table/components/TableContents/TableContents.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../../../../util/testUtils';
+import { fireEvent, render, screen } from '../../../../util/testUtils';
 import { TableContents, TableContentsProps } from './TableContents';
 
 const mockData: TableContentsProps['tableData'] = [
@@ -39,6 +39,27 @@ describe('TableContents', () => {
     expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();
   });
 
+  it('renders collapsible section headers as buttons and toggles them', () => {
+    render(
+      <TableContents collapsibleSections tableData={mockData} title="Table" />
+    );
+
+    const sectionButton = screen.getByRole('button', { name: 'Section 2' });
+    expect(sectionButton).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(sectionButton);
+    expect(sectionButton).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('renders section headers without a button when not collapsible', () => {
+    render(<TableContents tableData={mockData} title="Table" />);
+
+    expect(
+      screen.queryByRole('button', { name: 'Section 2' })
+    ).not.toBeInTheDocument();
+    expect(screen.getByText('Section 2')).toBeInTheDocument();
+  });
+
   it('hides the table sections when hideDetails and shouldHideDetails is true', () => {
     render(
       <TableContents