@popsure/dirty-swan 0.54.0 → 0.54.2

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

@@ -1,31 +1,38 @@
-import { Table, TableData, TableProps } from './Table';
+import { Table, TableProps } from './Table';
 import { DentalPlusIcon, PlaneIcon } from '../icon';
+import { TableData } from './types';
 
 const initialData: TableData = [
   {
-    items: [
+    rows: [
       [
-        { text: 'Our plans' },
-        { text: 'Surgery', info: 'More info on this one he' },
-        { text: 'Standard' },
-        { text: 'Premium' },
+        { content: 'Our plans' },
+        { content: 'Surgery', modalContent: 'More info on surgery' },
+        { content: 'Standard' },
+        { content: 'Premium' },
       ],
       [
-        { text: 'Regular vet visits & medication', description: 'Annual Only' },
-        { text: 'No', description: 'Annual Only' },
-        { text: 'Yes' },
-        { text: 'Yes' },
+        {
+          content: 'Regular vet visits & medication',
+          subContent: 'Annual Only',
+        },
+        { content: 'No', subContent: 'Annual Only' },
+        { content: 'Yes' },
+        { content: 'Yes' },
       ],
       [
-        { text: 'Operations', info: 'info' },
-        { boolean: true, info: 'Maybe' },
-        { boolean: false },
-        { boolean: true },
+        { content: 'Operations', modalContent: 'Operations info' },
+        { checkmarkValue: true, modalContent: 'Operations info column 2' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
       ],
       [
-        { text: 'Rating', info: 'info' },
-        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
-        { rating: { type: 'zap', value: 3 } },
+        { content: 'Rating', modalContent: 'Rating info' },
+        { rating: { type: 'zap', value: 1 } },
+        {
+          rating: { type: 'zap', value: 3 },
+          modalContent: 'Rating info column 3',
+        },
         { rating: { type: 'star', value: 3 } },
       ],
     ],
@@ -35,22 +42,22 @@ const initialData: TableData = [
       icon: <DentalPlusIcon size={24} noMargin />,
       title: 'Dental',
     },
-    items: [
+    rows: [
       [
-        { text: 'Regular vet visits & medication' },
-        { text: 'No' },
-        { text: 'Yes' },
-        { text: 'Yes' },
+        { content: 'Regular vet visits & medication' },
+        { content: 'No' },
+        { content: 'Yes' },
+        { content: 'Yes' },
       ],
       [
-        { text: 'Operations', info: 'info' },
-        { boolean: true, info: 'Maybe' },
-        { boolean: false },
-        { boolean: true },
+        { content: 'Operations', modalContent: 'info' },
+        { checkmarkValue: true, modalContent: 'Maybe' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
       ],
       [
-        { text: 'Rating', info: 'info' },
-        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+        { content: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
         { rating: { type: 'zap', value: 3 } },
         { rating: { type: 'star', value: 3 } },
       ],
@@ -61,22 +68,22 @@ const initialData: TableData = [
       title: 'Travel',
       icon: <PlaneIcon size={24} noMargin />,
     },
-    items: [
+    rows: [
       [
-        { text: 'Regular vet visits & medication' },
-        { text: 'No', boolean: false },
-        { text: 'Yes' },
-        { text: 'Yes' },
+        { content: 'Regular vet visits & medication' },
+        { content: 'No', checkmarkValue: false },
+        { content: 'Yes' },
+        { content: 'Yes' },
       ],
       [
-        { text: 'Operations', info: 'info' },
-        { boolean: true, info: 'Maybe' },
-        { boolean: false },
-        { boolean: true },
+        { content: 'Operations', modalContent: 'info' },
+        { checkmarkValue: true, modalContent: 'Maybe' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
       ],
       [
-        { text: 'Rating', info: 'info' },
-        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+        { content: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
         { rating: { type: 'zap', value: 3 } },
         { rating: { type: 'star', value: 3 } },
       ],
@@ -89,41 +96,40 @@ const story = {
   component: Table,
   argTypes: {
     data: {
-      description:
+      subContent:
         'This property allows to set the data of the Table component.',
     },
     title: {
-      description:
+      subContent:
         'This property allows to add a title to the Table component for accessibility purposes.',
     },
     collapsibleSections: {
-      description:
-        'This property allows to collapse the sections of the table.',
+      subContent: 'This property allows to collapse the sections of the table.',
     },
     hideDetails: {
-      description: 'This property allows to hide the details of the table.',
+      subContent: 'This property allows to hide the details of the table.',
     },
     stickyHeaderTopOffset: {
-      description:
+      subContent:
         'This property allows to set the offset of the sticky header.',
     },
     className: {
-      description:
+      subContent:
         'This property allows to set a custom class to the Table component.',
     },
     textOverrides: {
-      description:
+      subContent:
         'This property allows to set custom text for the show and hide details buttons.',
     },
     onSelectionChanged: {
-      description:
+      subContent:
         'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',
       table: {
         category: 'Events',
       },
     },
     onModalOpen: {
-      description:
+      subContent:
         'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',
       table: {
         category: 'Events',
@@ -131,7 +137,7 @@ const story = {
     },
   },
   args: {
-    data: initialData,
+    tableData: initialData,
     collapsibleSections: false,
     hideDetails: false,
     stickyHeaderTopOffset: 0,
@@ -146,7 +152,7 @@ const story = {
 
 export const TableStory = ({
   collapsibleSections,
-  data,
+  tableData,
   hideDetails,
   stickyHeaderTopOffset,
   textOverrides,
@@ -154,7 +160,7 @@ export const TableStory = ({
 }: TableProps) => (
   <Table
     collapsibleSections={collapsibleSections}
-    data={data}
+    tableData={tableData}
     hideDetails={hideDetails}
     stickyHeaderTopOffset={stickyHeaderTopOffset}
     textOverrides={textOverrides}
@@ -171,18 +177,17 @@ type TableData = {
     title?: string;
     icon?: ReactNode;
   };
-  items: {
+  rows: {
     align?: 'center' | 'left' | 'right';
-    boolean?: boolean;
-    cellProps?: HTMLProps<HTMLTableCellElement>;
-    description?: ReactNode;
-    info?: ReactNode;
+    checkmarkValue?: boolean;
+    content?: ReactNode;
+    modalContent?: ReactNode;
+    subContent?: ReactNode;
     rating?: {
       value: number;
       type: 'zap' | 'star';
     }
-    text?: ReactNode;
-    openModal?: (info: ReactNode) => void;
+    openModal?: (modalContent: ReactNode) => void;
   }[][];
 }[];
       `}

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

@@ -1,26 +1,32 @@
 import { render, screen } from '../../util/testUtils';
 import { Table } from './Table';
+import { TableSectionData } from './types';
 
-const data = [
+const tableData: TableSectionData[] = [
   {
     section: {
       title: 'Section 1',
       icon: <span>Icon 1</span>,
     },
-    items: [[{ text: 'Item 1' }, { text: 'Item 2' }]],
+    rows: [[{ content: 'Item 1' }, { content: 'Item 2' }]],
   },
   {
     section: {
       title: 'Section 2',
       icon: <span>Icon 2</span>,
     },
-    items: [[{ text: 'Item 3' }, { text: 'Item 4', info: 'Additional item' }]],
+    rows: [
+      [
+        { content: 'Item 3' },
+        { content: 'Item 4', modalContent: 'Additional item' },
+      ],
+    ],
   },
 ];
 
 describe('Table', () => {
   it('renders the table with sections and items', () => {
-    render(<Table data={data} title="Test Table" />);
+    render(<Table tableData={tableData} title="Test Table" />);
 
     expect(screen.getByText('Section 1')).toBeInTheDocument();
     expect(screen.getByText('Section 2')).toBeInTheDocument();
@@ -32,28 +38,28 @@ describe('Table', () => {
   });
 
   it('renders the table without sections', () => {
-    const dataWithoutSections = [{ items: data[0].items }];
+    const dataWithoutSections = [{ rows: tableData[0].rows }];
 
-    render(<Table data={dataWithoutSections} title="Test Table" />);
+    render(<Table tableData={dataWithoutSections} title="Test Table" />);
 
     expect(screen.getAllByText('Item 1')[0]).toBeVisible();
     expect(screen.getAllByText('Item 2')[0]).toBeVisible();
   });
 
   it('hides the show/hide details button if hideDetails is false', () => {
-    render(<Table data={data} hideDetails title="Test Table" />);
+    render(<Table tableData={tableData} hideDetails title="Test Table" />);
 
     expect(screen.queryByTestId('show-hide-details')).toBeInTheDocument();
   });
 
   it('shows the show/hide details button if hideDetails is true', () => {
-    render(<Table data={data} hideDetails title="Test Table" />);
+    render(<Table tableData={tableData} hideDetails title="Test Table" />);
 
     expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
   });
 
   it('hides the sections if hideDetails is true', () => {
-    render(<Table data={data} hideDetails title="Test Table" />);
+    render(<Table tableData={tableData} hideDetails title="Test Table" />);
 
     expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
     expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
@@ -61,7 +67,7 @@ describe('Table', () => {
 
   it('hides the sections if hideDetails is true and shows if clicking on button', async () => {
     const { user } = render(
-      <Table data={data} hideDetails title="Test Table" />
+      <Table tableData={tableData} hideDetails title="Test Table" />
     );
 
     expect(screen.getByText('Show details')).toBeVisible();
@@ -73,7 +79,7 @@ describe('Table', () => {
   });
 
   it('shows a modal when clicking on info icon', async () => {
-    const { user } = render(<Table data={data} title="Test Table" />);
+    const { user } = render(<Table tableData={tableData} title="Test Table" />);
 
     await user.click(screen.getByText('View more info'));
 

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

@@ -1,51 +1,30 @@
 import { TableCell, TableCellProps } from './components/TableCell/TableCell';
 import { BottomOrRegularModal } from '../modal';
-import { ReactNode, useEffect, useRef, useState } from 'react';
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronUpIcon,
-} from '../icon';
+import { useRef, useState } from 'react';
+import { ChevronDownIcon, ChevronUpIcon } from '../icon';
 import { Card } from '../cards/card';
 
 import styles from './Table.module.scss';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
-import { TableSection } from './components/TableSection/TableSection';
+import { TableContents } from './components/TableContents/TableContents';
 import classNames from 'classnames';
 import { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';
 import { TableControls } from './components/TableControls/TableControls';
-import { TableContent } from './components/TableContent/TableContent';
+import { TableSection } from './components/TableSection/TableSection';
 import { useScrollSync } from './utils/useScrollSync/useScrollSync';
+import { ModalData, ModalFunction, TableData } from './types';
 
 type TextOverrides = {
   showDetails?: string;
   hideDetails?: string;
 };
 
-export type TableSectionType = {
-  title?: string;
-  icon?: ReactNode;
-};
-
-interface ModalType {
-  title?: ReactNode;
-  body?: ReactNode;
-}
-
-interface TableSectionData {
-  section?: TableSectionType;
-  items: TableCellProps[][];
-}
-
-export type TableData = TableSectionData[];
-
 export interface TableProps {
   className?: string;
   collapsibleSections?: boolean;
-  data: TableData;
+  tableData: TableData;
   hideDetails?: boolean;
-  onModalOpen?: (title: ReactNode, body: ReactNode) => void;
+  onModalOpen?: ModalFunction;
   onSelectionChanged?: (index: number) => void;
   stickyHeaderTopOffset?: number;
   textOverrides?: TextOverrides;
@@ -60,7 +39,7 @@ const defaultTextOverrides = {
 const Table = ({
   className,
   collapsibleSections,
-  data,
+  tableData,
   hideDetails,
   onModalOpen,
   onSelectionChanged,
@@ -70,11 +49,11 @@ const Table = ({
 }: TableProps) => {
   const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };
   const isMobile = useMediaQuery('BELOW_MOBILE');
-  const [infoModal, setInfoModal] = useState<ModalType | null>(null);
+  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);
   const [shouldHideDetails, setShouldHideDetails] = useState(true);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const headerRef = useRef<HTMLDivElement | null>(null);
-  const columnsLength = data[0].items[0].length;
+  const columnsLength = tableData[0].rows[0].length;
 
   useScrollSync(headerRef, containerRef, !isMobile);
 
@@ -85,11 +64,11 @@ const Table = ({
     onSelectionChanged,
   });
 
-  const currentActiveSection = data?.[0]?.items?.[0]?.[activeSection];
+  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];
 
-  const handleOpenModal = (modalTitle: ReactNode, body: ReactNode) => {
-    onModalOpen?.(modalTitle, body);
-    setInfoModal({ title: modalTitle, body });
+  const handleOpenModal: ModalFunction = ({ body, title }) => {
+    onModalOpen?.({ body, title });
+    setInfoModalData({ body, title });
   };
 
   return (
@@ -103,9 +82,13 @@ const Table = ({
         >
           <TableCell
             {...currentActiveSection}
-            openModal={(info) =>
-              handleOpenModal(currentActiveSection?.text, info)
+            openModal={(body) =>
+              handleOpenModal({
+                body,
+                title: currentActiveSection?.content,
+              })
             }
+            isNavigation
           />
         </TableControls>
       ) : (
@@ -115,8 +98,8 @@ const Table = ({
           style={{ top: `${stickyHeaderTopOffset}px` }}
         >
           <div className={styles.container} ref={headerRef}>
-            <TableContent
-              data={[data?.[0]?.items?.[0]]}
+            <TableSection
+              tableCellRows={[tableData?.[0]?.rows?.[0]]}
               title={title}
               className={className}
               openModal={handleOpenModal}
@@ -126,8 +109,8 @@ const Table = ({
       )}
 
       <div ref={containerRef} className={classNames(styles.container, 'pb8')}>
-        <TableSection
-          data={data}
+        <TableContents
+          tableData={tableData}
           title={title}
           className={className}
           collapsibleSections={collapsibleSections}
@@ -167,11 +150,11 @@ const Table = ({
       )}
 
       <BottomOrRegularModal
-        isOpen={infoModal?.body ? true : false}
-        title={infoModal?.title}
-        onClose={() => setInfoModal(null)}
+        isOpen={infoModalData?.body ? true : false}
+        title={infoModalData?.title}
+        onClose={() => setInfoModalData(null)}
       >
-        <div className="pt8 p24 wmn6">{infoModal?.body}</div>
+        <div className="pt8 p24 wmn6">{infoModalData?.body}</div>
       </BottomOrRegularModal>
     </div>
   );

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

@@ -1,9 +1,72 @@
+@use '../../../../scss/public/colors' as *;
+@use '../../../../scss/public/grid' as *;
+
 .button {
   min-height: initial;
   height: initial;
   width: initial;
+  padding: 0;
 }
 
 .icon {
   margin: 2px;
-}
+}
+
+.th {
+  vertical-align: middle;
+  scroll-snap-align: end;
+  width: 50%;
+
+  @include p-size-tablet {
+    width: auto;
+    scroll-snap-align: unset;
+  }
+}
+
+.thRow {
+  position: sticky;
+  top: 0;
+}
+
+.thCol {
+  text-align: left;
+}
+
+.fixedCell {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 1px;
+    background-color: $ds-grey-200;
+  }
+}
+
+.topLeftCell {
+  position: relative;
+  display: none;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: calc(
+      50% + 16px
+    ); // Display bottom border at the same distance regardless of cell height
+
+    height: 4px;
+    width: 100%;
+    max-width: 140px;
+    background-color: $ds-primary-500;
+  }
+
+  @include p-size-tablet {
+    display: flex;
+  }
+}

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

@@ -5,14 +5,14 @@ const openModal = jest.fn();
 
 describe('TableCell', () => {
   it('renders the component with boolean true', () => {
-    render(<TableCell boolean={true} />);
+    render(<TableCell checkmarkValue={true} />);
 
     expect(screen.getByTitle('Yes')).toBeInTheDocument();
     expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();
   });
 
   it('renders the component with boolean false', () => {
-    render(<TableCell boolean={false} />);
+    render(<TableCell checkmarkValue={false} />);
 
     expect(screen.getByTitle('No')).toBeInTheDocument();
     expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();
@@ -44,7 +44,7 @@ describe('TableCell', () => {
   });
 
   it('renders the component with text', () => {
-    render(<TableCell text="Sample text" />);
+    render(<TableCell content="Sample text" />);
 
     expect(screen.getByText('Sample text')).toBeInTheDocument();
   });
@@ -62,7 +62,9 @@ describe('TableCell', () => {
   });
 
   it('calls openModal when info button is clicked', () => {
-    render(<TableCell info="Additional information" openModal={openModal} />);
+    render(
+      <TableCell modalContent="Additional information" openModal={openModal} />
+    );
 
     // Click info button
     screen.getByText('View more info').click();