@popsure/dirty-swan 0.54.0 → 0.54.2

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

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Button } from '../../../button';
 import {
   CheckIcon,
@@ -11,29 +11,55 @@ import classNames from 'classnames';
 
 import styles from './TableCell.module.scss';
 
-export interface TableCellProps {
+interface BaseTableCellProps {
   align?: 'center' | 'left' | 'right';
-  boolean?: boolean;
-  cellProps?: HTMLProps<HTMLTableCellElement>;
-  description?: ReactNode;
-  info?: ReactNode;
+  checkmarkValue?: boolean;
+  content?: ReactNode;
+  modalContent?: ReactNode;
+  openModal?: (modalContent: ReactNode) => void;
+  subContent?: ReactNode;
   rating?: {
     value: number;
     type: 'zap' | 'star';
   };
-  text?: ReactNode;
-  openModal?: (info: ReactNode) => void;
 }
 
+interface PositionalTableCellProps {
+  isHeader?: boolean;
+  isFirstCellInRow?: boolean;
+  isTopLeftCell?: boolean;
+  isNavigation?: boolean;
+}
+
+export type TableCellProps = BaseTableCellProps & PositionalTableCellProps;
+
 const TableCell = ({
   align = 'center',
-  boolean,
-  description = '',
-  info = '',
+  checkmarkValue,
+  content = '',
+  isFirstCellInRow = false,
+  isHeader = false,
+  isNavigation = false,
+  isTopLeftCell = false,
+  modalContent = '',
   openModal,
   rating,
-  text = '',
+  subContent = '',
 }: TableCellProps) => {
+  // prettier-ignore
+  const Tag = isNavigation
+    ? 'div'
+    : isHeader || isFirstCellInRow ? 'th' : 'td';
+
+  // prettier-ignore
+  const thScope = isHeader
+    ? 'col'
+    : isFirstCellInRow ? 'row' : undefined;
+
+  const scope = {
+    scope: thScope,
+  };
+
   const alignClassName = {
     center: 'ta-center jc-center',
     left: 'ta-left jc-start',
@@ -44,75 +70,96 @@ const TableCell = ({
   const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;
 
   return (
-    <div className="d-flex fd-column gap8">
-      <div className={classNames('d-flex gap8 ai-center', alignClassName)}>
-        {rating?.value && (
-          <span
-            data-testid="table-cell-rating"
-            title={`${rating?.value} out of 3`}
-          >
-            {validRatingValues.map((value) => (
-              <SelectedIcon
-                aria-hidden="true"
-                key={value}
-                color={value <= rating?.value ? 'primary-500' : 'grey-400'}
-                className={styles.icon}
-              />
-            ))}
-          </span>
-        )}
+    <Tag
+      {...scope}
+      className={classNames('bg-white py24 px8', styles.th, {
+        'ta-left': isFirstCellInRow,
+        [styles.fixedCell]: isFirstCellInRow,
+        pl32: isFirstCellInRow,
+      })}
+    >
+      <div className="d-flex fd-column gap8">
+        <div className={classNames('d-flex gap8 ai-center', alignClassName)}>
+          {rating?.value && (
+            <span
+              data-testid="table-cell-rating"
+              title={`${rating?.value} out of 3`}
+            >
+              {validRatingValues.map((value) => (
+                <SelectedIcon
+                  aria-hidden="true"
+                  key={value}
+                  color={value <= rating?.value ? 'primary-500' : 'grey-400'}
+                  className={styles.icon}
+                />
+              ))}
+            </span>
+          )}
 
-        {boolean !== undefined && (
-          <span title={boolean ? 'Yes' : 'No'}>
-            {boolean ? (
-              <CheckIcon
-                data-testid="table-cell-boolean-yes"
-                size={24}
-                aria-hidden
-                color="primary-500"
-              />
-            ) : (
-              <XIcon
-                data-testid="table-cell-boolean-no"
-                size={24}
-                aria-hidden
-                color="grey-400"
-              />
-            )}
-          </span>
-        )}
+          {checkmarkValue !== undefined && (
+            <span title={checkmarkValue ? 'Yes' : 'No'}>
+              {checkmarkValue ? (
+                <CheckIcon
+                  data-testid="table-cell-boolean-yes"
+                  size={24}
+                  aria-hidden
+                  color="primary-500"
+                />
+              ) : (
+                <XIcon
+                  data-testid="table-cell-boolean-no"
+                  size={24}
+                  aria-hidden
+                  color="grey-400"
+                />
+              )}
+            </span>
+          )}
 
-        {text && (
-          <div className="p-p" data-testid="table-cell-text">
-            {text}
-          </div>
-        )}
+          {content && !isTopLeftCell && (
+            <div className="p-p" data-testid="table-cell-content">
+              {content}
+            </div>
+          )}
 
-        {info && openModal && (
-          <Button
-            className={classNames(styles.button)}
-            hideLabel
-            leftIcon={<InfoIcon size={20} />}
-            onClick={() => openModal(info)}
-            type="button"
-            variant="textColor"
-          >
-            View more info
-          </Button>
-        )}
-      </div>
+          {content && isTopLeftCell && (
+            <div
+              aria-hidden
+              className={classNames(
+                'tc-grey-800 p-h2 p--serif',
+                styles.topLeftCell
+              )}
+            >
+              {content}
+            </div>
+          )}
 
-      {description && (
-        <div
-          className={classNames(
-            'd-flex p-p--small tc-grey-500',
-            alignClassName
+          {modalContent && openModal && (
+            <Button
+              className={styles.button}
+              hideLabel
+              leftIcon={<InfoIcon size={20} />}
+              onClick={() => openModal(modalContent)}
+              type="button"
+              variant="textColor"
+            >
+              View more info
+            </Button>
           )}
-        >
-          {description}
         </div>
-      )}
-    </div>
+
+        {subContent && (
+          <div
+            className={classNames(
+              'd-flex p-p--small tc-grey-500',
+              alignClassName
+            )}
+          >
+            {subContent}
+          </div>
+        )}
+      </div>
+    </Tag>
   );
 };
 

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: [
-      [{ 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' }],
-    ],
-  },
+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');
   });
 });