@popsure/dirty-swan 0.53.3 → 0.53.5

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

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+
+import styles from './TableCell.module.scss';
+import { BaseCell, BaseCellProps } from './BaseCell/BaseCell';
+import { TableCellData } from '../../types';
+import { CTACell } from './CTACell/CTACell';
+import { ButtonCell } from './ButtonCell/ButtonCell';
+
+type PositionalTableCellProps = {
+  isHeader?: boolean;
+  isFirstCellInRow?: boolean;
+  isTopLeftCell?: boolean;
+  isNavigation?: boolean;
+};
+
+export type TableCellProps = TableCellData & PositionalTableCellProps;
+
+const TableCell = ({
+  isFirstCellInRow = false,
+  isHeader = false,
+  isNavigation = false,
+  isTopLeftCell = false,
+  ...cellProps
+}: TableCellProps) => {
+  // prettier-ignore
+  const Tag = isNavigation
+    ? 'div'
+    : isHeader || isFirstCellInRow ? 'th' : 'td';
+
+  // prettier-ignore
+  const thScope = isHeader
+    ? 'col'
+    : isFirstCellInRow ? 'row' : undefined;
+
+  const scope = {
+    scope: thScope,
+  };
+
+  return (
+    <Tag
+      {...scope}
+      className={classNames('bg-white py24 px8', styles.th, {
+        'ta-left': isFirstCellInRow,
+        [styles.fixedCell]: isFirstCellInRow,
+        pl32: isFirstCellInRow,
+      })}
+    >
+      {!cellProps.type && (
+        <BaseCell
+          {...cellProps}
+          fontVariant={
+            isTopLeftCell
+              ? 'BIG_WITH_UNDERLINE'
+              : cellProps.fontVariant ?? 'NORMAL'
+          }
+        />
+      )}
+      {cellProps.type === 'CTA' && <CTACell {...cellProps} />}
+      {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}
+    </Tag>
+  );
+};
+
+export { TableCell };

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

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import AnimateHeight from "react-animate-height";
+import { useMediaQuery } from "../../../../hooks/useMediaQuery";
+
+interface CollapsibleProps {
+  children: ReactNode;
+  isExpanded?: boolean;
+  isMobile?: boolean;
+}
+  
+export const Collapsible = ({ children, isExpanded }: CollapsibleProps) => {
+  const isDesktop = useMediaQuery('ABOVE_DESKTOP');
+
+  if (!isDesktop) {
+    return (
+      <div>
+        {isExpanded ? children : null}
+      </div>
+    );
+  }
+
+  return (
+    <AnimateHeight
+      duration={300}
+      height={isExpanded ? 'auto' : 0}
+    >
+      <div>{children}</div>
+    </AnimateHeight>
+  );
+}

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, TableContentsProps } from './TableContents';
+
+const mockData: TableContentsProps['tableData'] = [
+  {
+    rows: [
+      [{ text: 'Item 1.1.1' }, { text: 'Item 1.1.2' }],
+      [{ text: 'Item 1.2.1' }, { text: 'Item 1.2.2' }],
+    ],
+  },
+  {
+    section: {
+      title: 'Section 2',
+    },
+    rows: [
+      [{ text: 'Item 2.1.1' }, { text: 'Item 2.1.2' }],
+      [{ text: 'Item 2.2.1' }, { text: '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

@@ -0,0 +1,16 @@
+
+.stickyHeader {
+  display: flex;
+  position: sticky;
+  left: 0;
+  right: 0;
+  min-height: 72px;
+  z-index: 9;
+}
+
+.controlButton {
+  border-radius: 50%!important;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}

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

@@ -0,0 +1,58 @@
+import { render, screen } from '../../../../util/testUtils';
+import { TableControls, TableControlsProps } from './TableControls';
+
+const mockNavigateTable = jest.fn();
+
+const defaultProps: TableControlsProps = {
+  activeSection: 1,
+  children: <div>Table content</div>,
+  columnsLength: 3,
+  stickyHeaderTopOffset: 0,
+  navigateTable: mockNavigateTable,
+};
+
+describe('TableControls', () => {
+  it('renders the previous and next section buttons', () => {
+    render(<TableControls {...defaultProps} />);
+
+    const previousButton = screen.getByText('Previous section');
+    const nextButton = screen.getByText('Next section');
+
+    expect(previousButton).toBeInTheDocument();
+    expect(nextButton).toBeInTheDocument();
+  });
+
+  it('disables the previous button when activeSection is 1', () => {
+    render(<TableControls {...defaultProps} activeSection={1} />);
+
+    const previousButton = screen.getByTestId('previous-section-button');
+
+    expect(previousButton).toBeDisabled();
+  });
+
+  it('disables the next button when activeSection is equal to columnsLength - 1', () => {
+    render(<TableControls {...defaultProps} activeSection={2} />);
+
+    const nextButton = screen.getByTestId('next-section-button');
+
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('calls navigateTable with no arguments when previous button is clicked', async () => {
+    const { user } = render(
+      <TableControls {...defaultProps} activeSection={2} />
+    );
+
+    await user.click(screen.getByTestId('previous-section-button'));
+
+    expect(mockNavigateTable).toHaveBeenCalledWith();
+  });
+
+  it('calls navigateTable with true argument when next button is clicked', async () => {
+    const { user } = render(<TableControls {...defaultProps} />);
+
+    await user.click(screen.getByTestId('next-section-button'));
+
+    expect(mockNavigateTable).toHaveBeenCalledWith(true);
+  });
+});

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

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '../../../icon';
+import styles from './TableControls.module.scss';
+import { Button } from '../../../button';
+import classNames from 'classnames';
+
+export interface TableControlsProps {
+  activeSection: number;
+  children: ReactNode;
+  columnsLength: number;
+  stickyHeaderTopOffset: number;
+  navigateTable: (next?: boolean) => void;
+}
+
+const TableControls = ({
+  activeSection,
+  children,
+  columnsLength,
+  stickyHeaderTopOffset,
+  navigateTable,
+}: TableControlsProps) => {
+  return (
+    <div
+      aria-hidden
+      className={classNames(
+        'd-flex ai-center jc-between bg-white px8',
+        styles.stickyHeader
+      )}
+      style={{ top: `${stickyHeaderTopOffset}px` }}
+    >
+      <Button
+        className={styles.controlButton}
+        disabled={activeSection <= 1}
+        hideLabel
+        leftIcon={<ChevronLeftIcon />}
+        onClick={() => navigateTable()}
+        type="button"
+        variant="filledGray"
+        data-testid="previous-section-button"
+      >
+        Previous section
+      </Button>
+
+      {children}
+
+      <Button
+        className={styles.controlButton}
+        disabled={activeSection >= columnsLength - 1}
+        hideLabel
+        leftIcon={<ChevronRightIcon />}
+        onClick={() => navigateTable(true)}
+        type="button"
+        variant="filledGray"
+        data-testid="next-section-button"
+      >
+        Next section
+      </Button>
+    </div>
+  );
+};
+
+export { TableControls };

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

@@ -0,0 +1,15 @@
+@use '../../../../scss/public/colors' as *;
+@use '../../../../scss/public/grid' as *;
+
+.table {
+  border-collapse: collapse;
+  table-layout: fixed;
+
+  @include p-size-tablet {
+    min-width: 845px;
+  }
+}
+
+.tr {
+  min-height: 72px;
+}

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

@@ -0,0 +1,56 @@
+import { render, screen } from '../../../../util/testUtils';
+import { TableSection, TableSectionProps } from './TableSection';
+
+const tableCellRows: TableSectionProps['tableCellRows'] = [
+  [{ text: 'Cell 1.1' }, { text: 'Cell 1.2' }, { text: 'Cell 1.3' }],
+  [{ text: 'Cell 2.1' }, { text: 'Cell 2.2' }, { text: 'Cell 2.3' }],
+];
+
+const mockTitle = 'Test Table';
+
+const mockOpenModal = jest.fn();
+
+const defaultProps: TableSectionProps = {
+  tableCellRows,
+  title: mockTitle,
+  openModal: mockOpenModal,
+};
+
+describe('TableSection', () => {
+  it('renders the table caption', () => {
+    render(<TableSection {...defaultProps} />);
+
+    expect(screen.getByText(mockTitle)).toBeInTheDocument();
+  });
+
+  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('Cell 2.1')).toBeInTheDocument();
+    expect(screen.getByText('Cell 2.2')).toBeInTheDocument();
+    expect(screen.getByText('Cell 2.3')).toBeInTheDocument();
+  });
+
+  it('should render table headers', () => {
+    const { container } = render(<TableSection {...defaultProps} />);
+
+    const thElements = container.querySelectorAll('th');
+
+    expect(thElements.length).toBe(4);
+    expect(thElements[0]).toHaveTextContent('Cell 1.1');
+    expect(thElements[3]).toHaveTextContent('Cell 2.1');
+  });
+
+  it('should render table data cells', () => {
+    const { container } = render(<TableSection {...defaultProps} />);
+
+    const tdElements = container.querySelectorAll('td');
+    expect(tdElements.length).toBe(2);
+    expect(tdElements[0]).toHaveTextContent('Cell 2.2');
+    expect(tdElements[1]).toHaveTextContent('Cell 2.3');
+  });
+});

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

@@ -0,0 +1,147 @@
+import classNames from 'classnames';
+
+import styles from './TableSection.module.scss';
+import { TableCell, TableCellProps } from '../TableCell/TableCell';
+import { ReactNode, useCallback } from 'react';
+import {
+  isBaseCell,
+  ModalData,
+  ModalFunction,
+  TableCellRowData,
+} from '../../types';
+
+export interface TableSectionProps {
+  className?: string;
+  tableCellRows: TableCellRowData[];
+  hideHeader?: boolean;
+  openModal?: ModalFunction;
+  title: string;
+  width?: number | string;
+}
+
+const TableSection = ({
+  className,
+  tableCellRows,
+  hideHeader,
+  openModal,
+  title,
+  width,
+}: TableSectionProps) => {
+  const headerRow = tableCellRows?.[0];
+
+  const getModalTitleFromColumnHeader = (cellIndex: number) => {
+    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];
+    let titleFromColumn;
+
+    switch (firstCellInColumn.type) {
+      case 'BUTTON':
+        titleFromColumn = firstCellInColumn.buttonCaption;
+        break;
+      case 'CTA':
+        titleFromColumn = firstCellInColumn.title;
+        break;
+      case undefined:
+        titleFromColumn = firstCellInColumn.text || '';
+        break;
+    }
+
+    return titleFromColumn;
+  };
+
+  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {
+    const firstCellInRow = currentRow?.[0];
+    const titleFromRow =
+      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';
+
+    return titleFromRow;
+  };
+
+  return (
+    <table
+      className={classNames(className, 'w100', styles.table)}
+      width={width}
+    >
+      <caption className="sr-only">{title}</caption>
+
+      {headerRow && (
+        <thead className={hideHeader ? 'sr-only' : ''}>
+          <tr>
+            {headerRow.map((tableCellData, cellIndex) => {
+              const isFirstCellInRow = cellIndex === 0;
+
+              return (
+                <TableCell
+                  key={cellIndex}
+                  isHeader
+                  isFirstCellInRow={isFirstCellInRow}
+                  isTopLeftCell={isFirstCellInRow}
+                  {...tableCellData}
+                  {...(isBaseCell(tableCellData)
+                    ? {
+                        openModal: (body: ReactNode) =>
+                          openModal?.({
+                            body,
+                            title:
+                              tableCellData.text ||
+                              getModalTitleFromColumnHeader(cellIndex),
+                          }),
+                        align: isFirstCellInRow ? 'left' : 'center',
+                      }
+                    : {})}
+                />
+              );
+            })}
+          </tr>
+        </thead>
+      )}
+
+      <tbody>
+        {tableCellRows.map((row, rowIndex) => {
+          const isSingleCell = row.length === 1;
+
+          return (
+            rowIndex > 0 && (
+              <tr key={rowIndex} className={styles.tr}>
+                {row.map((tableCellData, cellIndex) => {
+                  const key = `${rowIndex}-${cellIndex}`;
+                  const isFirstCellInRow = cellIndex === 0;
+
+                  return (
+                    <TableCell
+                      isFirstCellInRow={isFirstCellInRow}
+                      key={key}
+                      {...tableCellData}
+                      {...(isBaseCell(tableCellData)
+                        ? {
+                            openModal: (body: ReactNode) => {
+                              const titleFromRow =
+                                getModalTitleFromRowHeader(row);
+                              const titleFromColumnOrRow =
+                                getModalTitleFromColumnHeader(cellIndex) ||
+                                getModalTitleFromRowHeader(row);
+
+                              return openModal?.({
+                                body,
+                                title: isFirstCellInRow
+                                  ? titleFromRow
+                                  : titleFromColumnOrRow,
+                              });
+                            },
+                            align: isFirstCellInRow ? 'left' : 'center',
+                          }
+                        : {})}
+                    />
+                  );
+                })}
+              </tr>
+            )
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export type { TableCellProps };
+
+export { TableSection };

package/src/lib/components/table/types.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';
+import { CTACellProps } from './components/TableCell/CTACell/CTACell';
+import { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';
+
+type BaseCellData = BaseCellProps & { type?: undefined; cellId?: string };
+type CTACellData = CTACellProps & { type: 'CTA'; cellId?: string };
+type ButtonCellData = ButtonCellProps & { type: 'BUTTON'; cellId?: string };
+
+export type TableCellData = BaseCellData | CTACellData | ButtonCellData;
+
+export const isBaseCell = (
+  tableCellData: TableCellData
+): tableCellData is BaseCellData => {
+  return !tableCellData.type;
+};
+
+export type TableSectionType = {
+  title?: string;
+  icon?: ReactNode;
+};
+
+export type ModalData = {
+  title?: ReactNode;
+  body?: ReactNode;
+};
+
+export type TableCellRowData = TableCellData[];
+
+export type TableSectionData = {
+  section?: TableSectionType;
+  rows: TableCellRowData[];
+};
+
+export type TableData = TableSectionData[];
+
+export type ModalFunction = (modalData: ModalData) => void;