@popsure/dirty-swan 0.66.12 → 0.66.13

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.13",
   "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/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,6 +27,7 @@
   position: sticky;
   left: 0;
   z-index: 2;
+  padding-left: 0;
 
   &:after {
     content: '';
@@ -36,10 +38,14 @@
     width: 1px;
     background-color: $ds-neutral-100;
   }
+}
 
-  @include p-size-tablet {
-    padding-left: 16px;
-  }
+.selectedColumnTop {
+  border-radius: 16px 16px 0 0;
+}
+
+.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

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

@@ -1,7 +1,6 @@
 import { MutableRefObject, useCallback, useRef, useState } from 'react';
 import { TableSection } from '../TableSection/TableSection';
 import { ChevronDownIcon, ChevronUpIcon } from '../../../icon';
-import { Card } from '../../../cards/card';
 
 import styles from './TableContents.module.scss';
 import classNames from 'classnames';
@@ -25,6 +24,7 @@ export interface TableContentsProps {
   title: string;
   cellReplacements?: CellReplacements;
   imageComponent?: (args: any) => JSX.Element;
+  selectedColumn?: number;
 }
 
 const TableContents = ({
@@ -43,6 +43,7 @@ const TableContents = ({
   title,
   cellReplacements,
   imageComponent,
+  selectedColumn,
 }: TableContentsProps) => {
   const [isSectionOpen, setOpenSection] = useState<number | null>(null);
   const lastToggledSection = useRef<number | null>(null);
@@ -96,35 +97,40 @@ const TableContents = ({
         const result = (isFirstSection || isVisible) && (
           <div key={index} ref={(el) => { sectionRefs.current[index] = el; }}>
             {section?.title && (
-              <div className={styles.cardWrapper}>
-                <div className={classNames(styles.card, 'p0')}>
-                  <Card
-                    actionIcon={
-                      isExpanded ? (
-                        <ChevronUpIcon size={24} />
-                      ) : (
-                        <ChevronDownIcon size={24} />
-                      )
-                    }
-                    aria-expanded={isExpanded ? 'true' : 'false'}
-                    aria-hidden
-                    classNames={{
-                      wrapper: 'pl16',
-                      buttonWrapper: styles.cardButton,
-                      icon: classNames(styles.cardIcon, 'tc-neutral-900'),
-                    }}
-                    dropShadow={false}
-                    icon={renderedIcon}
-                    title={section.title}
-                    titleVariant="medium"
-                    variant="primary"
-                    {...(collapsibleSections
-                      ? {
-                          onClick: () => handleToggleSection(index),
-                        }
-                      : {})}
-                  />
-                </div>
+              <div className={styles.sectionButtonWrapper}>
+                {collapsibleSections ? (
+                  <button
+                    type="button"
+                    aria-expanded={isExpanded}
+                    className={classNames(
+                      'd-flex ai-center jc-between ta-left bg-white',
+                      styles.sectionButton
+                    )}
+                    onClick={() => handleToggleSection(index)}
+                  >
+                    <span className="d-flex ai-center gap8">
+                      {renderedIcon}
+                      <span className="p-h3">{section.title}</span>
+                    </span>
+                    {isExpanded ? (
+                      <ChevronUpIcon size={20} />
+                    ) : (
+                      <ChevronDownIcon size={20} />
+                    )}
+                  </button>
+                ) : (
+                  <div
+                    className={classNames(
+                      'd-flex ai-center jc-between ta-left bg-white',
+                      styles.sectionButton
+                    )}
+                  >
+                    <span className="d-flex ai-center gap8">
+                      {renderedIcon}
+                      <span className="p-h3">{section.title}</span>
+                    </span>
+                  </div>
+                )}
               </div>
             )}
 
@@ -133,7 +139,9 @@ const TableContents = ({
               onTransitionEnd={() => handleScrollToSection(index)}
             >
               <TableSection
-                className={classNames(className, 'mb24')}
+                className={classNames(className, 'mb16', {
+                  mt16: !!section?.title,
+                })}
                 tableCellRows={
                   isFirstSection ? rows : [firstHeadRow, ...rows]
                 }
@@ -147,6 +155,7 @@ const TableContents = ({
                 width={tableWidth}
                 cellReplacements={cellReplacements}
                 imageComponent={imageComponent}
+                selectedColumn={selectedColumn}
               />
             </Collapsible>
           </div>

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

@@ -4,7 +4,9 @@
 .table {
   border-collapse: collapse;
   table-layout: fixed;
+}
 
+.tableMultiplePlans {
   @include p-size-tablet {
     min-width: 845px;
   }
@@ -12,4 +14,9 @@
 
 .tr {
   min-height: 72px;
+  border-bottom: 1px solid $ds-neutral-300;
+
+  &:last-child {
+    border-bottom: none;
+  }
 }