@popsure/dirty-swan 0.54.1 → 0.54.2

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

@@ -1,9 +1,10 @@
-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: [
       [
         { content: 'Our plans' },
         { content: 'Surgery', modalContent: 'More info on surgery' },
@@ -41,7 +42,7 @@ const initialData: TableData = [
       icon: <DentalPlusIcon size={24} noMargin />,
       title: 'Dental',
     },
-    items: [
+    rows: [
       [
         { content: 'Regular vet visits & medication' },
         { content: 'No' },
@@ -67,7 +68,7 @@ const initialData: TableData = [
       title: 'Travel',
       icon: <PlaneIcon size={24} noMargin />,
     },
-    items: [
+    rows: [
       [
         { content: 'Regular vet visits & medication' },
         { content: 'No', checkmarkValue: false },
@@ -136,7 +137,7 @@ const story = {
     },
   },
   args: {
-    data: initialData,
+    tableData: initialData,
     collapsibleSections: false,
     hideDetails: false,
     stickyHeaderTopOffset: 0,
@@ -151,7 +152,7 @@ const story = {
 
 export const TableStory = ({
   collapsibleSections,
-  data,
+  tableData,
   hideDetails,
   stickyHeaderTopOffset,
   textOverrides,
@@ -159,7 +160,7 @@ export const TableStory = ({
 }: TableProps) => (
   <Table
     collapsibleSections={collapsibleSections}
-    data={data}
+    tableData={tableData}
     hideDetails={hideDetails}
     stickyHeaderTopOffset={stickyHeaderTopOffset}
     textOverrides={textOverrides}
@@ -176,17 +177,16 @@ 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?: (modalContent: ReactNode) => void;
   }[][];
 }[];

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

@@ -2,20 +2,20 @@ import { render, screen } from '../../util/testUtils';
 import { Table } from './Table';
 import { TableSectionData } from './types';
 
-const data: TableSectionData[] = [
+const tableData: TableSectionData[] = [
   {
     section: {
       title: 'Section 1',
       icon: <span>Icon 1</span>,
     },
-    items: [[{ content: 'Item 1' }, { content: 'Item 2' }]],
+    rows: [[{ content: 'Item 1' }, { content: 'Item 2' }]],
   },
   {
     section: {
       title: 'Section 2',
       icon: <span>Icon 2</span>,
     },
-    items: [
+    rows: [
       [
         { content: 'Item 3' },
         { content: 'Item 4', modalContent: 'Additional item' },
@@ -26,7 +26,7 @@ const data: TableSectionData[] = [
 
 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();
@@ -38,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();
@@ -67,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();
@@ -79,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

@@ -6,25 +6,23 @@ 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, TableSectionData } from './types';
+import { ModalData, ModalFunction, TableData } from './types';
 
 type TextOverrides = {
   showDetails?: string;
   hideDetails?: string;
 };
 
-export type TableData = TableSectionData[];
-
 export interface TableProps {
   className?: string;
   collapsibleSections?: boolean;
-  data: TableData;
+  tableData: TableData;
   hideDetails?: boolean;
   onModalOpen?: ModalFunction;
   onSelectionChanged?: (index: number) => void;
@@ -41,7 +39,7 @@ const defaultTextOverrides = {
 const Table = ({
   className,
   collapsibleSections,
-  data,
+  tableData,
   hideDetails,
   onModalOpen,
   onSelectionChanged,
@@ -55,7 +53,7 @@ const Table = ({
   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);
 
@@ -66,7 +64,7 @@ const Table = ({
     onSelectionChanged,
   });
 
-  const currentActiveSection = data?.[0]?.items?.[0]?.[activeSection];
+  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];
 
   const handleOpenModal: ModalFunction = ({ body, title }) => {
     onModalOpen?.({ body, title });
@@ -100,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}
@@ -111,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}

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

@@ -5,6 +5,7 @@
   min-height: initial;
   height: initial;
   width: initial;
+  padding: 0;
 }
 
 .icon {

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

@@ -0,0 +1,10 @@
+.cardWrapper {
+  height: 88px;
+}
+
+.card {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+}

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

@@ -0,0 +1,86 @@
+import { render, screen } from '../../../../util/testUtils';
+import { TableContents, TableSectionProps } from './TableContents';
+
+const mockData: TableSectionProps['tableData'] = [
+  {
+    rows: [
+      [{ content: 'Item 1.1.1' }, { content: 'Item 1.1.2' }],
+      [{ content: 'Item 1.2.1' }, { content: 'Item 1.2.2' }],
+    ],
+  },
+  {
+    section: {
+      title: 'Section 2',
+    },
+    rows: [
+      [{ content: 'Item 2.1.1' }, { content: 'Item 2.1.2' }],
+      [{ content: 'Item 2.2.1' }, { content: 'Item 2.2.2' }],
+    ],
+  },
+];
+
+describe('TableContents', () => {
+  it('renders the table sections with sections', () => {
+    render(
+      <TableContents collapsibleSections tableData={mockData} title="Table" />
+    );
+
+    expect(screen.getByText('Section 2')).toBeInTheDocument();
+  });
+
+  it('renders the table sections with sections data', () => {
+    render(
+      <TableContents collapsibleSections tableData={mockData} title="Table" />
+    );
+
+    expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();
+    expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();
+    expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();
+    expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();
+  });
+
+  it('hides the table sections when hideDetails and shouldHideDetails is true', () => {
+    render(
+      <TableContents
+        hideDetails
+        shouldHideDetails
+        tableData={mockData}
+        title="Table"
+      />
+    );
+
+    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();
+  });
+
+  it('hides the table sections details when collapsibleSections is true', () => {
+    render(
+      <TableContents
+        collapsibleSections
+        isMobile
+        tableData={mockData}
+        title="Table"
+      />
+    );
+
+    expect(screen.getByText('Section 2')).toBeVisible();
+    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
+  });
+
+  it('shows the table sections when hideDetails is collapsibleSections true has expanded ', async () => {
+    const { user } = render(
+      <TableContents
+        collapsibleSections
+        isMobile
+        tableData={mockData}
+        title="Table"
+      />
+    );
+
+    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
+
+    await user.click(screen.getByText('Section 2'));
+
+    expect(screen.getByText('Item 2.1.1')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,106 @@
+import { 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';
+import { Collapsible } from './Collapsible';
+import { ModalFunction, TableData } from '../../types';
+
+export interface TableContentsProps {
+  className?: string;
+  collapsibleSections?: boolean;
+  tableData: TableData;
+  hideDetails?: boolean;
+  isMobile?: boolean;
+  openModal?: ModalFunction;
+  shouldHideDetails?: boolean;
+  title: string;
+}
+
+const TableContents = ({
+  className,
+  collapsibleSections,
+  tableData,
+  hideDetails,
+  isMobile,
+  openModal,
+  shouldHideDetails,
+  title,
+}: TableContentsProps) => {
+  const [isSectionOpen, setOpenSection] = useState<number | null>(null);
+  const firstHeadRow = tableData?.[0]?.rows?.[0];
+  const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';
+  const handleToggleSection = (index: number) => {
+    setOpenSection((currentSection) =>
+      currentSection === index ? null : index
+    );
+  };
+
+  return (
+    <div style={{ width: tableWidth }}>
+      {tableData.map(({ rows, section = {} }, index) => {
+        const isFirstSection = index === 0;
+        const isExpanded = !collapsibleSections
+          ? true
+          : isSectionOpen === index || isFirstSection;
+        const isVisible = hideDetails ? !shouldHideDetails : true;
+
+        return (
+          (isFirstSection || isVisible) && (
+            <div key={index}>
+              {section?.title && (
+                <div className={styles.cardWrapper}>
+                  <div className={classNames(styles.card, 'p8')}>
+                    <Card
+                      actionIcon={
+                        isExpanded ? (
+                          <ChevronUpIcon size={24} />
+                        ) : (
+                          <ChevronDownIcon size={24} />
+                        )
+                      }
+                      aria-expanded={isExpanded ? 'true' : 'false'}
+                      aria-hidden
+                      classNames={{
+                        wrapper: 'bg-grey-200',
+                        icon: 'tc-grey-900',
+                      }}
+                      dropShadow={false}
+                      icon={section?.icon}
+                      title={section.title}
+                      titleVariant="medium"
+                      {...(collapsibleSections
+                        ? {
+                            onClick: () => handleToggleSection(index),
+                          }
+                        : {})}
+                    />
+                  </div>
+                </div>
+              )}
+
+              <Collapsible isExpanded={isExpanded} isMobile={isMobile}>
+                <TableSection
+                  className={classNames(className, 'mb24')}
+                  tableCellRows={
+                    isFirstSection ? rows : [firstHeadRow, ...rows]
+                  }
+                  hideHeader
+                  openModal={openModal}
+                  title={`${title}${
+                    section?.title ? ` - ${section.title}` : ''
+                  }`}
+                  width={tableWidth}
+                />
+              </Collapsible>
+            </div>
+          )
+        );
+      })}
+    </div>
+  );
+};
+
+export { TableContents };

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

@@ -5,11 +5,12 @@
   left: 0;
   right: 0;
   min-height: 72px;
-  z-index: 3;
+  z-index: 9;
 }
 
 .controlButton {
   border-radius: 50%!important;
   width: 32px;
   height: 32px;
+  padding: 0;
 }

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

@@ -1,10 +1,15 @@
-.cardWrapper {
-  height: 88px;
+@use '../../../../scss/public/colors' as *;
+@use '../../../../scss/public/grid' as *;
+
+.table {
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  @include p-size-tablet {
+    min-width: 845px;
+  }
 }
 
-.card {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 3;
-}
+.tr {
+  min-height: 72px;
+}

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

@@ -1,82 +1,56 @@
 import { render, screen } from '../../../../util/testUtils';
-import { TableSection, TableSectionProps } from './TableSection';
+import { TableSection, TableContentProps } from './TableSection';
 
-const mockData: TableSectionProps['data'] = [
-  {
-    items: [
-      [{ content: 'Item 1.1.1' }, { content: 'Item 1.1.2' }],
-      [{ content: 'Item 1.2.1' }, { content: 'Item 1.2.2' }],
-    ],
-  },
-  {
-    section: {
-      title: 'Section 2',
-    },
-    items: [
-      [{ content: 'Item 2.1.1' }, { content: 'Item 2.1.2' }],
-      [{ content: 'Item 2.2.1' }, { content: 'Item 2.2.2' }],
-    ],
-  },
+const tableCellRows: TableContentProps['tableCellRows'] = [
+  [{ content: 'Cell 1.1' }, { content: 'Cell 1.2' }, { content: 'Cell 1.3' }],
+  [{ content: 'Cell 2.1' }, { content: 'Cell 2.2' }, { content: 'Cell 2.3' }],
 ];
 
-describe('TableSection', () => {
-  it('renders the table sections with sections', () => {
-    render(<TableSection collapsibleSections data={mockData} title="Table" />);
-
-    expect(screen.getByText('Section 2')).toBeInTheDocument();
-  });
+const mockTitle = 'Test Table';
 
-  it('renders the table sections with sections data', () => {
-    render(<TableSection collapsibleSections data={mockData} title="Table" />);
+const mockOpenModal = jest.fn();
 
-    expect(screen.getByText('Item 1.2.1')).toBeInTheDocument();
-    expect(screen.getByText('Item 1.2.2')).toBeInTheDocument();
-    expect(screen.getByText('Item 2.1.2')).toBeInTheDocument();
-    expect(screen.getByText('Item 2.2.1')).toBeInTheDocument();
-  });
+const defaultProps: TableContentProps = {
+  tableCellRows,
+  title: mockTitle,
+  openModal: mockOpenModal,
+};
 
-  it('hides the table sections when hideDetails and shouldHideDetails is true', () => {
-    render(
-      <TableSection
-        hideDetails
-        shouldHideDetails
-        data={mockData}
-        title="Table"
-      />
-    );
+describe('TableSection', () => {
+  it('renders the table caption', () => {
+    render(<TableSection {...defaultProps} />);
 
-    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
-    expect(screen.queryByText('Item 2.1.1')).not.toBeInTheDocument();
+    expect(screen.getByText(mockTitle)).toBeInTheDocument();
   });
 
-  it('hides the table sections details when collapsibleSections is true', () => {
-    render(
-      <TableSection
-        collapsibleSections
-        isMobile
-        data={mockData}
-        title="Table"
-      />
-    );
+  it('renders the table with correct data', () => {
+    render(<TableSection {...defaultProps} />);
+
+    expect(screen.getByText('Cell 1.1')).toBeInTheDocument();
+    expect(screen.getByText('Cell 1.2')).toBeInTheDocument();
+    expect(screen.getByText('Cell 1.3')).toBeInTheDocument();
 
-    expect(screen.getByText('Section 2')).toBeVisible();
-    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
+    expect(screen.getByText('Cell 2.1')).toBeInTheDocument();
+    expect(screen.getByText('Cell 2.2')).toBeInTheDocument();
+    expect(screen.getByText('Cell 2.3')).toBeInTheDocument();
   });
 
-  it('shows the table sections when hideDetails is collapsibleSections true has expanded ', async () => {
-    const { user } = render(
-      <TableSection
-        collapsibleSections
-        isMobile
-        data={mockData}
-        title="Table"
-      />
-    );
+  it('should render table headers', () => {
+    const { container } = render(<TableSection {...defaultProps} />);
 
-    expect(screen.queryByText('Item 2.1.1')).not.toBeVisible();
+    const thElements = container.querySelectorAll('th');
+
+    expect(thElements.length).toBe(4);
+    expect(thElements[0]).toHaveTextContent('Cell 1.1');
+    expect(thElements[3]).toHaveTextContent('Cell 2.1');
+  });
 
-    await user.click(screen.getByText('Section 2'));
+  it('should render table data cells', () => {
+    const { container } = render(<TableSection {...defaultProps} />);
 
-    expect(screen.getByText('Item 2.1.1')).toBeVisible();
+    const tdElements = container.querySelectorAll('td');
+    expect(tdElements.length).toBe(2);
+    expect(tdElements[0]).toHaveTextContent('Cell 2.2');
+    expect(tdElements[1]).toHaveTextContent('Cell 2.3');
   });
 });