@popsure/dirty-swan 0.53.3 → 0.54.0

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

@@ -0,0 +1,49 @@
+import { RenderResult } from '@testing-library/react';
+import { TableColumn, TableColumnProps } from './TableColumn';
+import { render, screen } from '../../../../util/testUtils';
+
+const setup = (props: TableColumnProps): RenderResult =>
+  render(
+    <table>
+      <tbody>
+        <tr>
+          <TableColumn {...props} />
+        </tr>
+      </tbody>
+    </table>
+  );
+
+describe('TableColumn', () => {
+  it('renders children correctly', () => {
+    const children = 'TableColumn content';
+    setup({ children });
+
+    expect(screen.getByText(children)).toBeInTheDocument();
+  });
+
+  it('should render as a th element when isHeader prop is true', () => {
+    const { container } = setup({ isHeader: true });
+
+    expect(container.querySelector('th')).toBeInTheDocument();
+  });
+
+  it('should render as a td element when isHeader prop is false', () => {
+    const { container } = setup({ isHeader: false });
+
+    expect(container.querySelector('td')).toBeInTheDocument();
+  });
+
+  it('should apply custom cellProps correctly', () => {
+    const cellProps = {
+      'data-testid': 'custom-cell',
+      className: 'custom-class',
+    };
+
+    setup({ cellProps });
+
+    const customCell = screen.getByTestId('custom-cell');
+
+    expect(customCell).toBeInTheDocument();
+    expect(customCell).toHaveClass('custom-class');
+  });
+});

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

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+
+import styles from './TableColumn.module.scss';
+
+export interface TableColumnProps {
+  children?: React.ReactNode;
+  isColumn?: boolean;
+  isFixed?: boolean;
+  isHeader?: boolean;
+  cellProps?: React.HTMLProps<HTMLTableCellElement>;
+}
+
+const TableColumn = ({
+  children,
+  isColumn,
+  isFixed,
+  isHeader,
+  cellProps = {},
+}: TableColumnProps) => {
+  const Tag = isHeader ? 'th' : 'td';
+
+  return (
+    <Tag
+      scope={isColumn ? 'col' : 'row'}
+      className={classNames('bg-white py24 px8', styles.th, {
+        [styles.thCol]: isColumn,
+        [styles.fixedCell]: isFixed,
+        pl32: isFixed,
+      })}
+      {...cellProps}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+export { TableColumn };

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

@@ -0,0 +1,38 @@
+@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;
+}
+
+.title {
+  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/TableContent/TableContent.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from '../../../../util/testUtils';
+import { TableContent, TableContentProps } from './TableContent';
+
+const mockData: TableContentProps['data'] = [
+  [{ 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: TableContentProps = {
+  data: mockData,
+  title: mockTitle,
+  openModal: mockOpenModal,
+};
+
+describe('TableContent', () => {
+  it('renders the table caption', () => {
+    render(<TableContent {...defaultProps} />);
+
+    expect(screen.getByText(mockTitle)).toBeInTheDocument();
+  });
+
+  it('renders the table with correct data', () => {
+    render(<TableContent {...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(<TableContent {...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(<TableContent {...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/TableContent/TableContent.tsx

@@ -0,0 +1,127 @@
+import classNames from 'classnames';
+
+import styles from './TableContent.module.scss';
+import { TableCell, TableCellProps } from '../TableCell/TableCell';
+import { ReactNode, useCallback } from 'react';
+import { TableColumn } from '../TableColumn/TableColumn';
+
+export interface TableContentProps {
+  className?: string;
+  data: TableCellProps[][];
+  hideHeader?: boolean;
+  openModal?: (title: ReactNode, body: ReactNode) => void;
+  title: string;
+  width?: number | string;
+}
+
+const TableContent = ({
+  className,
+  data,
+  hideHeader,
+  openModal,
+  title,
+  width,
+}: TableContentProps) => {
+  const headerRow = data?.[0];
+
+  const getColumnTextByKey = useCallback(
+    (key: number) => data?.[0]?.[key]?.text || '',
+    [data]
+  );
+
+  const handleOpenModal = (
+    cellIndex: number,
+    modalBody: ReactNode,
+    title?: ReactNode
+  ) => openModal?.(title || getColumnTextByKey(cellIndex), modalBody);
+
+  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(({ cellProps, ...cell }, cellIndex) => {
+              const isFirstColumn = cellIndex === 0;
+
+              return (
+                <TableColumn
+                  key={cellIndex}
+                  cellProps={cellProps}
+                  isColumn
+                  isFixed={isFirstColumn}
+                  isHeader
+                >
+                  {isFirstColumn ? (
+                    <div
+                      aria-hidden
+                      className={classNames(
+                        'tc-grey-800 p-h2 p--serif',
+                        styles.title
+                      )}
+                    >
+                      {cell?.text}
+                    </div>
+                  ) : (
+                    <TableCell
+                      {...cell}
+                      openModal={(info) => handleOpenModal(0, info, cell?.text)}
+                    />
+                  )}
+                </TableColumn>
+              );
+            })}
+          </tr>
+        </thead>
+      )}
+
+      <tbody>
+        {data.map((row, rowIndex) => {
+          const isSingleCell = row.length === 1;
+
+          return (
+            rowIndex > 0 && (
+              <tr key={rowIndex} className={styles.tr}>
+                {row.map(({ cellProps, ...cell }, cellIndex) => {
+                  const isFirstCol = cellIndex === 0;
+                  const key = `${rowIndex}-${cellIndex}`;
+                  const isHeader = isFirstCol && !isSingleCell;
+
+                  const onCelInfoClick = (info: ReactNode) =>
+                    handleOpenModal(
+                      cellIndex,
+                      info,
+                      isFirstCol ? cell.text : undefined
+                    );
+
+                  return (
+                    <TableColumn
+                      key={key}
+                      cellProps={cellProps}
+                      isFixed={isHeader}
+                      isHeader={isHeader}
+                    >
+                      <TableCell
+                        align={isFirstCol && !isSingleCell ? 'left' : 'center'}
+                        openModal={onCelInfoClick}
+                        {...cell}
+                      />
+                    </TableColumn>
+                  );
+                })}
+              </tr>
+            )
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export type { TableCellProps };
+
+export { TableContent };

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

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

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/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/TableSection/TableSection.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/TableSection/TableSection.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '../../../../util/testUtils';
+import { TableSection, TableSectionProps } from './TableSection';
+
+const mockData: TableSectionProps['data'] = [
+  {
+    items: [
+      [{ text: 'Item 1.1.1' }, { text: 'Item 1.1.2' }],
+      [{ text: 'Item 1.2.1' }, { text: 'Item 1.2.2' }],
+    ],
+  },
+  {
+    section: {
+      title: 'Section 2',
+    },
+    items: [
+      [{ text: 'Item 2.1.1' }, { text: 'Item 2.1.2' }],
+      [{ text: 'Item 2.2.1' }, { text: 'Item 2.2.2' }],
+    ],
+  },
+];
+
+describe('TableSection', () => {
+  it('renders the table sections with sections', () => {
+    render(<TableSection collapsibleSections data={mockData} title="Table" />);
+
+    expect(screen.getByText('Section 2')).toBeInTheDocument();
+  });
+
+  it('renders the table sections with sections data', () => {
+    render(<TableSection collapsibleSections data={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(
+      <TableSection
+        hideDetails
+        shouldHideDetails
+        data={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(
+      <TableSection
+        collapsibleSections
+        isMobile
+        data={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(
+      <TableSection
+        collapsibleSections
+        isMobile
+        data={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/TableSection/TableSection.tsx

@@ -0,0 +1,117 @@
+import { TableCellProps } from '../TableCell/TableCell';
+import { ReactNode, useState } from 'react';
+import { TableContent } from '../TableContent/TableContent';
+import { ChevronDownIcon, ChevronUpIcon } from '../../../icon';
+import { Card } from '../../../cards/card';
+
+import styles from './TableSection.module.scss';
+import classNames from 'classnames';
+import { Collapsible } from './Collapsible';
+
+export type TableSectionType = {
+  title?: string;
+  icon?: ReactNode;
+};
+
+interface TableSectionData {
+  section?: TableSectionType;
+  items: TableCellProps[][];
+}
+
+export type TableData = TableSectionData[];
+
+export interface TableSectionProps {
+  className?: string;
+  collapsibleSections?: boolean;
+  data: TableData;
+  hideDetails?: boolean;
+  isMobile?: boolean;
+  openModal?: (title: ReactNode, body: ReactNode) => void;
+  shouldHideDetails?: boolean;
+  title: string;
+}
+
+const TableSection = ({
+  className,
+  collapsibleSections,
+  data,
+  hideDetails,
+  isMobile,
+  openModal,
+  shouldHideDetails,
+  title,
+}: TableSectionProps) => {
+  const [isSectionOpen, setOpenSection] = useState<number | null>(null);
+  const firstHeadRow = data?.[0]?.items?.[0];
+  const tableWidth = isMobile ? `${firstHeadRow?.length * 50}%` : '';
+
+  const handleToggleSection = (index: number) => {
+    setOpenSection((currentSection) =>
+      currentSection === index ? null : index
+    );
+  };
+
+  return (
+    <div style={{ width: tableWidth }}>
+      {data.map(({ items, 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}>
+                <TableContent
+                  className={classNames(className, 'mb24')}
+                  data={isFirstSection ? items : [firstHeadRow, ...items]}
+                  hideHeader
+                  openModal={openModal}
+                  title={`${title}${
+                    section?.title ? ` - ${section.title}` : ''
+                  }`}
+                  width={tableWidth}
+                />
+              </Collapsible>
+            </div>
+          )
+        );
+      })}
+    </div>
+  );
+};
+
+export { TableSection };