@popsure/dirty-swan 0.53.3 → 0.54.0

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

@@ -0,0 +1,195 @@
+import { Table, TableData, TableProps } from './Table';
+import { DentalPlusIcon, PlaneIcon } from '../icon';
+
+const initialData: TableData = [
+  {
+    items: [
+      [
+        { text: 'Our plans' },
+        { text: 'Surgery', info: 'More info on this one he' },
+        { text: 'Standard' },
+        { text: 'Premium' },
+      ],
+      [
+        { text: 'Regular vet visits & medication', description: 'Annual Only' },
+        { text: 'No', description: 'Annual Only' },
+        { text: 'Yes' },
+        { text: 'Yes' },
+      ],
+      [
+        { text: 'Operations', info: 'info' },
+        { boolean: true, info: 'Maybe' },
+        { boolean: false },
+        { boolean: true },
+      ],
+      [
+        { text: 'Rating', info: 'info' },
+        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+    ],
+  },
+  {
+    section: {
+      icon: <DentalPlusIcon size={24} noMargin />,
+      title: 'Dental',
+    },
+    items: [
+      [
+        { text: 'Regular vet visits & medication' },
+        { text: 'No' },
+        { text: 'Yes' },
+        { text: 'Yes' },
+      ],
+      [
+        { text: 'Operations', info: 'info' },
+        { boolean: true, info: 'Maybe' },
+        { boolean: false },
+        { boolean: true },
+      ],
+      [
+        { text: 'Rating', info: 'info' },
+        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Travel',
+      icon: <PlaneIcon size={24} noMargin />,
+    },
+    items: [
+      [
+        { text: 'Regular vet visits & medication' },
+        { text: 'No', boolean: false },
+        { text: 'Yes' },
+        { text: 'Yes' },
+      ],
+      [
+        { text: 'Operations', info: 'info' },
+        { boolean: true, info: 'Maybe' },
+        { boolean: false },
+        { boolean: true },
+      ],
+      [
+        { text: 'Rating', info: 'info' },
+        { rating: { type: 'zap', value: 1 }, info: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+    ],
+  },
+];
+
+const story = {
+  title: 'JSX/Table',
+  component: Table,
+  argTypes: {
+    data: {
+      description:
+        'This property allows to set the data of the Table component.',
+    },
+    title: {
+      description:
+        '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.',
+    },
+    hideDetails: {
+      description: 'This property allows to hide the details of the table.',
+    },
+    stickyHeaderTopOffset: {
+      description:
+        'This property allows to set the offset of the sticky header.',
+    },
+    className: {
+      description:
+        'This property allows to set a custom class to the Table component.',
+    },
+    textOverrides: {
+      description:
+        'This property allows to set custom text for the show and hide details buttons.',
+    },
+    onSelectionChanged: {
+      description:
+        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',
+      table: {
+        category: 'Events',
+      },
+    },
+    onModalOpen: {
+      description:
+        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',
+      table: {
+        category: 'Events',
+      },
+    },
+  },
+  args: {
+    data: initialData,
+    collapsibleSections: false,
+    hideDetails: false,
+    stickyHeaderTopOffset: 0,
+    title: 'Title of the table',
+    className: '',
+    textOverrides: {
+      showDetails: 'Show details',
+      hideDetails: 'Hide details',
+    },
+  },
+};
+
+export const TableStory = ({
+  collapsibleSections,
+  data,
+  hideDetails,
+  stickyHeaderTopOffset,
+  textOverrides,
+  title,
+}: TableProps) => (
+  <Table
+    collapsibleSections={collapsibleSections}
+    data={data}
+    hideDetails={hideDetails}
+    stickyHeaderTopOffset={stickyHeaderTopOffset}
+    textOverrides={textOverrides}
+    title={title}
+  />
+);
+
+export const TableDataType = () => {
+  return (
+    <pre>
+      {`
+type TableData = {
+  section?: 
+    title?: string;
+    icon?: ReactNode;
+  };
+  items: {
+    align?: 'center' | 'left' | 'right';
+    boolean?: boolean;
+    cellProps?: HTMLProps<HTMLTableCellElement>;
+    description?: ReactNode;
+    info?: ReactNode;
+    rating?: {
+      value: number;
+      type: 'zap' | 'star';
+    }
+    text?: ReactNode;
+    openModal?: (info: ReactNode) => void;
+  }[][];
+}[];
+      `}
+    </pre>
+  );
+};
+
+TableStory.storyName = 'Table';
+
+export default story;

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

@@ -0,0 +1,82 @@
+import { render, screen } from '../../util/testUtils';
+import { Table } from './Table';
+
+const data = [
+  {
+    section: {
+      title: 'Section 1',
+      icon: <span>Icon 1</span>,
+    },
+    items: [[{ text: 'Item 1' }, { text: 'Item 2' }]],
+  },
+  {
+    section: {
+      title: 'Section 2',
+      icon: <span>Icon 2</span>,
+    },
+    items: [[{ text: 'Item 3' }, { text: 'Item 4', info: 'Additional item' }]],
+  },
+];
+
+describe('Table', () => {
+  it('renders the table with sections and items', () => {
+    render(<Table data={data} title="Test Table" />);
+
+    expect(screen.getByText('Section 1')).toBeInTheDocument();
+    expect(screen.getByText('Section 2')).toBeInTheDocument();
+
+    expect(screen.getAllByText('Item 1')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('Item 2')[0]).toBeInTheDocument();
+    expect(screen.getByText('Item 3')).toBeInTheDocument();
+    expect(screen.getByText('Item 4')).toBeInTheDocument();
+  });
+
+  it('renders the table without sections', () => {
+    const dataWithoutSections = [{ items: data[0].items }];
+
+    render(<Table data={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" />);
+
+    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" />);
+
+    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
+  });
+
+  it('hides the sections if hideDetails is true', () => {
+    render(<Table data={data} hideDetails title="Test Table" />);
+
+    expect(screen.queryByText('Section 2')).not.toBeInTheDocument();
+    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
+  });
+
+  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" />
+    );
+
+    expect(screen.getByText('Show details')).toBeVisible();
+
+    await user.click(screen.getByTestId('show-hide-details'));
+
+    expect(screen.getByText('Section 2')).toBeVisible();
+    expect(screen.getByText('Hide details')).toBeVisible();
+  });
+
+  it('shows a modal when clicking on info icon', async () => {
+    const { user } = render(<Table data={data} title="Test Table" />);
+
+    await user.click(screen.getByText('View more info'));
+
+    expect(screen.getByText('Additional item')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,180 @@
+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 { Card } from '../cards/card';
+
+import styles from './Table.module.scss';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
+import { TableSection } from './components/TableSection/TableSection';
+import classNames from 'classnames';
+import { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';
+import { TableControls } from './components/TableControls/TableControls';
+import { TableContent } from './components/TableContent/TableContent';
+import { useScrollSync } from './utils/useScrollSync/useScrollSync';
+
+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;
+  hideDetails?: boolean;
+  onModalOpen?: (title: ReactNode, body: ReactNode) => void;
+  onSelectionChanged?: (index: number) => void;
+  stickyHeaderTopOffset?: number;
+  textOverrides?: TextOverrides;
+  title: string;
+}
+
+const defaultTextOverrides = {
+  showDetails: 'Show details',
+  hideDetails: 'Hide details',
+};
+
+const Table = ({
+  className,
+  collapsibleSections,
+  data,
+  hideDetails,
+  onModalOpen,
+  onSelectionChanged,
+  stickyHeaderTopOffset = 0,
+  textOverrides: definedTextOverrides,
+  title,
+}: TableProps) => {
+  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };
+  const isMobile = useMediaQuery('BELOW_MOBILE');
+  const [infoModal, setInfoModal] = useState<ModalType | 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;
+
+  useScrollSync(headerRef, containerRef, !isMobile);
+
+  const { activeSection, navigateTable } = useTableNavigation({
+    enabled: isMobile,
+    containerRef,
+    columnsLength,
+    onSelectionChanged,
+  });
+
+  const currentActiveSection = data?.[0]?.items?.[0]?.[activeSection];
+
+  const handleOpenModal = (modalTitle: ReactNode, body: ReactNode) => {
+    onModalOpen?.(modalTitle, body);
+    setInfoModal({ title: modalTitle, body });
+  };
+
+  return (
+    <div className={classNames(styles.wrapper, 'bg-white')}>
+      {isMobile ? (
+        <TableControls
+          activeSection={activeSection}
+          columnsLength={columnsLength}
+          navigateTable={navigateTable}
+          stickyHeaderTopOffset={stickyHeaderTopOffset}
+        >
+          <TableCell
+            {...currentActiveSection}
+            openModal={(info) =>
+              handleOpenModal(currentActiveSection?.text, info)
+            }
+          />
+        </TableControls>
+      ) : (
+        <div
+          aria-hidden
+          className={styles.stickyHeader}
+          style={{ top: `${stickyHeaderTopOffset}px` }}
+        >
+          <div className={styles.container} ref={headerRef}>
+            <TableContent
+              data={[data?.[0]?.items?.[0]]}
+              title={title}
+              className={className}
+              openModal={handleOpenModal}
+            />
+          </div>
+        </div>
+      )}
+
+      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>
+        <TableSection
+          data={data}
+          title={title}
+          className={className}
+          collapsibleSections={collapsibleSections}
+          hideDetails={hideDetails}
+          isMobile={isMobile}
+          shouldHideDetails={shouldHideDetails}
+          openModal={handleOpenModal}
+        />
+      </div>
+
+      {hideDetails && (
+        <Card
+          data-testid="show-hide-details"
+          classNames={{
+            buttonWrapper: 'm8 mt32',
+            title: 'd-flex gap8 ai-center jc-center',
+            wrapper: 'bg-grey-200',
+          }}
+          title={
+            <>
+              {shouldHideDetails
+                ? textOverrides.showDetails
+                : textOverrides.hideDetails}
+              {shouldHideDetails ? (
+                <ChevronDownIcon size={24} />
+              ) : (
+                <ChevronUpIcon size={24} />
+              )}
+            </>
+          }
+          actionIcon={null}
+          dropShadow={false}
+          titleVariant="small"
+          density="compact"
+          onClick={() => setShouldHideDetails((current) => !current)}
+        />
+      )}
+
+      <BottomOrRegularModal
+        isOpen={infoModal?.body ? true : false}
+        title={infoModal?.title}
+        onClose={() => setInfoModal(null)}
+      >
+        <div className="pt8 p24 wmn6">{infoModal?.body}</div>
+      </BottomOrRegularModal>
+    </div>
+  );
+};
+
+export { Table };

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

@@ -0,0 +1,9 @@
+.button {
+  min-height: initial;
+  height: initial;
+  width: initial;
+}
+
+.icon {
+  margin: 2px;
+}

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

@@ -0,0 +1,73 @@
+import { render, screen } from '../../../../util/testUtils';
+import { TableCell } from './TableCell';
+
+const openModal = jest.fn();
+
+describe('TableCell', () => {
+  it('renders the component with boolean true', () => {
+    render(<TableCell boolean={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} />);
+
+    expect(screen.getByTitle('No')).toBeInTheDocument();
+    expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();
+  });
+
+  it('renders the component without boolean', () => {
+    render(<TableCell />);
+
+    expect(screen.queryByTitle('Yes')).not.toBeInTheDocument();
+    expect(screen.queryByTitle('No')).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('table-cell-boolean-yes')
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('table-cell-boolean-no')
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders the component with rating', () => {
+    render(<TableCell rating={{ type: 'star', value: 2 }} />);
+
+    expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();
+  });
+
+  it('renders the component without rating', () => {
+    render(<TableCell />);
+
+    expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();
+  });
+
+  it('renders the component with text', () => {
+    render(<TableCell text="Sample text" />);
+
+    expect(screen.getByText('Sample text')).toBeInTheDocument();
+  });
+
+  it('renders the component without text', () => {
+    render(<TableCell />);
+
+    expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();
+  });
+
+  it('renders the component without info', () => {
+    render(<TableCell />);
+
+    expect(screen.queryByText('View more info')).not.toBeInTheDocument();
+  });
+
+  it('calls openModal when info button is clicked', () => {
+    render(<TableCell info="Additional information" openModal={openModal} />);
+
+    // Click info button
+    screen.getByText('View more info').click();
+
+    // Assert openModal is called with info prop
+    expect(openModal).toHaveBeenCalledWith('Additional information');
+  });
+});

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

@@ -0,0 +1,119 @@
+import { HTMLProps, ReactNode } from 'react';
+import { Button } from '../../../button';
+import {
+  CheckIcon,
+  InfoIcon,
+  StarFilledIcon,
+  XIcon,
+  ZapFilledIcon,
+} from '../../../icon';
+import classNames from 'classnames';
+
+import styles from './TableCell.module.scss';
+
+export interface TableCellProps {
+  align?: 'center' | 'left' | 'right';
+  boolean?: boolean;
+  cellProps?: HTMLProps<HTMLTableCellElement>;
+  description?: ReactNode;
+  info?: ReactNode;
+  rating?: {
+    value: number;
+    type: 'zap' | 'star';
+  };
+  text?: ReactNode;
+  openModal?: (info: ReactNode) => void;
+}
+
+const TableCell = ({
+  align = 'center',
+  boolean,
+  description = '',
+  info = '',
+  openModal,
+  rating,
+  text = '',
+}: TableCellProps) => {
+  const alignClassName = {
+    center: 'ta-center jc-center',
+    left: 'ta-left jc-start',
+    right: 'ta-right',
+  }[align];
+
+  const validRatingValues: number[] = [1, 2, 3];
+  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>
+        )}
+
+        {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>
+        )}
+
+        {text && (
+          <div className="p-p" data-testid="table-cell-text">
+            {text}
+          </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>
+
+      {description && (
+        <div
+          className={classNames(
+            'd-flex p-p--small tc-grey-500',
+            alignClassName
+          )}
+        >
+          {description}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { TableCell };

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

@@ -0,0 +1,38 @@
+@use '../../../../scss/public/colors' as *;
+@use '../../../../scss/public/grid' as *;
+
+.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;
+  }
+}