@popsure/dirty-swan 0.53.3 → 0.53.5

package/src/lib/components/cards/infoCard/index.tsx

@@ -42,7 +42,7 @@ export const InfoCard = ({
           alt={rightIcon === 'info' ? info.alt : rightIcon.alt}
         />
       )}
-      <div className="p-h4 ta-center mt64">{title}</div>
+      <h3 className="p-h4 ta-center mt64">{title}</h3>
       <div className="p-p mt16 tc-grey-600">{children}</div>
     </div>
   </div>

package/src/lib/components/comparisonTable/index.stories.tsx

@@ -277,7 +277,7 @@ const story = {
     hideDetailsCaption: 'Hide details',
     showDetailsCaption: 'Show details',
     hideScrollBars: false,
-    hideScrollBarsMobile: false,
+    hideScrollBarsMobile: true,
     collapsibleSections: false,
     cellWidth: undefined,
     firstColumnWidth: undefined,

package/src/lib/components/comparisonTable/index.tsx

@@ -81,7 +81,7 @@ const ComparisonTable = <T extends { id: number }>(
     showDetailsCaption = 'Show details',
     classNameOverrides,
     hideScrollBars,
-    hideScrollBarsMobile,
+    hideScrollBarsMobile = true,
     collapsibleSections,
     cellWidth,
     firstColumnWidth,

package/src/lib/components/icon/IconWrapper/IconWrapper.tsx

@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import { Color, Size } from '../../../models/styles';
 
 import styles from './styles.module.scss';
-import { ReactNode } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 
-export type IconWrapperProps = {
+export interface IconWrapperProps extends HTMLProps<HTMLSpanElement> {
   children?: ReactNode;
   size?: Size;
   color?: Color;
@@ -18,6 +18,7 @@ const IconWrapper = ({
   color,
   className,
   noMargin,
+  ...rest
 }: IconWrapperProps) => (
   <span
     className={classNames('d-inline-block', className ?? '', {
@@ -29,6 +30,7 @@ const IconWrapper = ({
       width: `${size}px`,
       height: `${size}px`
     }}
+    {...rest}
   >
     <svg className='w100' viewBox="0 0 24 24" fill="none">
       {children}

package/src/lib/components/icon/assets/zap-filled.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" fill="#8E8CEE" stroke="#8E8CEE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/lib/components/icon/icons/ZapFilled.tsx

@@ -0,0 +1,17 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <path
+      fill="currentColor"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z"
+    />
+  );

package/src/lib/components/icon/icons/index.ts

@@ -358,6 +358,7 @@ export { default as XOctagonIcon } from './XOctagon';
 export { default as XSquareIcon } from './XSquare';
 export { default as XIcon } from './X';
 export { default as YoutubeIcon } from './Youtube';
+export { default as ZapFilledIcon } from './ZapFilled';
 export { default as ZapOffIcon } from './ZapOff';
 export { default as ZapIcon } from './Zap';
 export { default as ZoomInIcon } from './ZoomIn';

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

@@ -0,0 +1,29 @@
+
+@use '../../scss/public/grid' as *;
+
+.wrapper {
+  position: relative;
+}
+
+.container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include p-size-tablet {
+    scroll-snap-type: unset;
+  }
+}
+
+.stickyHeader {
+  display: flex;
+  position: sticky;
+  z-index: 9;
+}

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

@@ -0,0 +1,262 @@
+import { Table, TableProps } from './Table';
+import { DentalPlusIcon, PlaneIcon } from '../icon';
+import { TableCellData, TableData } from './types';
+
+const initialData: TableData = [
+  {
+    rows: [
+      [
+        { text: 'Our plans' },
+        {
+          type: 'CTA',
+          title: 'Standard',
+          price: '€234',
+          buttonCaption: 'Get covered',
+          href: 'http://example.com',
+        },
+        {
+          type: 'CTA',
+          title: 'Plus',
+          price: '€344',
+          buttonCaption: 'Get covered',
+          href: 'http://example.com',
+        },
+        {
+          type: 'CTA',
+          title: 'Premium',
+          price: '€556',
+          buttonCaption: 'Get covered',
+          href: 'http://example.com',
+        },
+      ],
+      [
+        { text: 'Select a plan' },
+        {
+          type: 'BUTTON',
+          buttonCaption: 'Standard',
+          price: '€234',
+          onClick: () => {},
+        },
+        {
+          type: 'BUTTON',
+          buttonCaption: 'Plus',
+          price: '€344',
+          onClick: () => {},
+        },
+        {
+          type: 'BUTTON',
+          buttonCaption: 'Premium',
+          price: '€556',
+          onClick: () => {},
+        },
+      ],
+      [
+        {
+          text: 'Your contribution',
+        },
+        {
+          text: '€210',
+          description: 'per month',
+          fontVariant: 'PRICE',
+          modalContent: 'Price info',
+        },
+        {
+          text: '€275',
+          description: 'per month',
+          fontVariant: 'PRICE',
+          modalContent: 'Price info',
+        },
+        {
+          text: '€310',
+          description: 'per month',
+          fontVariant: 'PRICE',
+          modalContent: 'Price info',
+        },
+      ],
+      [
+        {
+          text: 'Regular vet visits & medication',
+          description: 'Annual Only',
+        },
+        { text: 'No', description: 'Annual Only' },
+        { text: '50%' },
+        { text: '80%-100%' },
+      ],
+      [
+        { text: 'Operations', modalContent: 'Operations info' },
+        { checkmarkValue: true, modalContent: 'Operations info column 2' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Rating', modalContent: 'Rating info' },
+        { rating: { type: 'zap', value: 1 } },
+        {
+          rating: { type: 'zap', value: 3 },
+          modalContent: 'Rating info column 3',
+        },
+        { rating: { type: 'star', value: 3 } },
+      ],
+    ],
+  },
+  {
+    section: {
+      icon: <DentalPlusIcon size={24} noMargin />,
+      title: 'Dental',
+    },
+    rows: [
+      [
+        { text: 'Regular vet visits & medication' },
+        { text: 'No' },
+        { text: 'Yes' },
+        { text: 'Yes' },
+      ],
+      [
+        { text: 'Operations', modalContent: 'info' },
+        { checkmarkValue: true, modalContent: 'Maybe' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Travel',
+      icon: <PlaneIcon size={24} noMargin />,
+    },
+    rows: [
+      [
+        { text: 'Regular vet visits & medication' },
+        { text: 'No', checkmarkValue: false },
+        { text: 'Yes' },
+        { text: 'Yes' },
+      ],
+      [
+        { text: 'Operations', modalContent: 'info' },
+        { checkmarkValue: true, modalContent: 'Maybe' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Rating', modalContent: 'info' },
+        { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
+        { rating: { type: 'zap', value: 3 } },
+        { rating: { type: 'star', value: 3 } },
+      ],
+    ],
+  },
+];
+
+const story = {
+  title: 'JSX/Table',
+  component: Table,
+  argTypes: {
+    data: {
+      subContent:
+        'This property allows to set the data of the Table component.',
+    },
+    title: {
+      subContent:
+        'This property allows to add a title to the Table component for accessibility purposes.',
+    },
+    collapsibleSections: {
+      subContent: 'This property allows to collapse the sections of the table.',
+    },
+    hideDetails: {
+      subContent: 'This property allows to hide the details of the table.',
+    },
+    stickyHeaderTopOffset: {
+      subContent:
+        'This property allows to set the offset of the sticky header.',
+    },
+    className: {
+      subContent:
+        'This property allows to set a custom class to the Table component.',
+    },
+    textOverrides: {
+      subContent:
+        'This property allows to set custom text for the show and hide details buttons.',
+    },
+    onSelectionChanged: {
+      subContent:
+        'This event is triggered when a selection is changed. It receives the index of the selection as an argument.',
+      table: {
+        category: 'Events',
+      },
+    },
+    onModalOpen: {
+      subContent:
+        'This event is triggered when a modal is opened. It receives the title and body of the modal as arguments.',
+      table: {
+        category: 'Events',
+      },
+    },
+  },
+  args: {
+    tableData: initialData,
+    collapsibleSections: false,
+    hideDetails: false,
+    stickyHeaderTopOffset: 0,
+    title: 'Title of the table',
+    className: '',
+    textOverrides: {
+      showDetails: 'Show details',
+      hideDetails: 'Hide details',
+    },
+  },
+};
+
+export const TableStory = ({
+  collapsibleSections,
+  tableData,
+  hideDetails,
+  stickyHeaderTopOffset,
+  textOverrides,
+  title,
+}: TableProps) => (
+  <Table
+    collapsibleSections={collapsibleSections}
+    tableData={tableData}
+    hideDetails={hideDetails}
+    stickyHeaderTopOffset={stickyHeaderTopOffset}
+    textOverrides={textOverrides}
+    title={title}
+  />
+);
+
+export const TableDataType = () => {
+  return (
+    <pre>
+      {`
+type TableData = {
+  section?: 
+    title?: string;
+    icon?: ReactNode;
+  };
+  rows: {
+    align?: 'center' | 'left' | 'right';
+    checkmarkValue?: boolean;
+    text?: ReactNode;
+    modalContent?: ReactNode;
+    subContent?: ReactNode;
+    rating?: {
+      value: number;
+      type: 'zap' | 'star';
+    }
+    openModal?: (modalContent: ReactNode) => void;
+  }[][];
+}[];
+      `}
+    </pre>
+  );
+};
+
+TableStory.storyName = 'Table';
+
+export default story;

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

@@ -0,0 +1,85 @@
+import { render, screen } from '../../util/testUtils';
+import { Table } from './Table';
+import { TableSectionData } from './types';
+
+const tableData: TableSectionData[] = [
+  {
+    section: {
+      title: 'Section 1',
+      icon: <span>Icon 1</span>,
+    },
+    rows: [[{ text: 'Item 1' }, { text: 'Item 2' }]],
+  },
+  {
+    section: {
+      title: 'Section 2',
+      icon: <span>Icon 2</span>,
+    },
+    rows: [
+      [{ text: 'Item 3' }, { text: 'Item 4', modalContent: 'Additional item' }],
+    ],
+  },
+];
+
+describe('Table', () => {
+  it('renders the table with sections and items', () => {
+    render(<Table tableData={tableData} 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 = [{ rows: tableData[0].rows }];
+
+    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 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 tableData={tableData} hideDetails title="Test Table" />);
+
+    expect(screen.getByTestId('show-hide-details')).toBeInTheDocument();
+  });
+
+  it('hides the sections if hideDetails is true', () => {
+    render(<Table tableData={tableData} 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 tableData={tableData} 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 tableData={tableData} title="Test Table" />);
+
+    await user.click(screen.getByTestId('ds-table-info-button'));
+
+    expect(screen.getByText('Additional item')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,165 @@
+import { TableCell, TableCellProps } from './components/TableCell/TableCell';
+import { BottomOrRegularModal } from '../modal';
+import { ReactNode, useRef, useState } from 'react';
+import { ChevronDownIcon, ChevronUpIcon } from '../icon';
+import { Card } from '../cards/card';
+
+import styles from './Table.module.scss';
+import { useMediaQuery } from '../../hooks/useMediaQuery';
+import { TableContents } from './components/TableContents/TableContents';
+import classNames from 'classnames';
+import { useTableNavigation } from './utils/useTableNavigation/useTableNavigation';
+import { TableControls } from './components/TableControls/TableControls';
+import { TableSection } from './components/TableSection/TableSection';
+import { useScrollSync } from './utils/useScrollSync/useScrollSync';
+import { isBaseCell, ModalData, ModalFunction, TableData } from './types';
+
+type TextOverrides = {
+  showDetails?: string;
+  hideDetails?: string;
+};
+
+export interface TableProps {
+  className?: string;
+  collapsibleSections?: boolean;
+  tableData: TableData;
+  hideDetails?: boolean;
+  onModalOpen?: ModalFunction;
+  onSelectionChanged?: (index: number) => void;
+  stickyHeaderTopOffset?: number;
+  textOverrides?: TextOverrides;
+  title: string;
+}
+
+const defaultTextOverrides = {
+  showDetails: 'Show details',
+  hideDetails: 'Hide details',
+};
+
+const Table = ({
+  className,
+  collapsibleSections,
+  tableData,
+  hideDetails,
+  onModalOpen,
+  onSelectionChanged,
+  stickyHeaderTopOffset = 0,
+  textOverrides: definedTextOverrides,
+  title,
+}: TableProps) => {
+  const textOverrides = { ...defaultTextOverrides, ...definedTextOverrides };
+  const isMobile = useMediaQuery('BELOW_MOBILE');
+  const [infoModalData, setInfoModalData] = useState<ModalData | null>(null);
+  const [shouldHideDetails, setShouldHideDetails] = useState(true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const headerRef = useRef<HTMLDivElement | null>(null);
+  const columnsLength = tableData[0].rows[0].length;
+
+  useScrollSync(headerRef, containerRef, !isMobile);
+
+  const { activeSection, navigateTable } = useTableNavigation({
+    enabled: isMobile,
+    containerRef,
+    onSelectionChanged,
+  });
+
+  const currentActiveSection = tableData?.[0]?.rows?.[0]?.[activeSection];
+
+  const handleOpenModal: ModalFunction = ({ body, title }) => {
+    onModalOpen?.({ body, title });
+    setInfoModalData({ body, title });
+  };
+
+  return (
+    <div className={classNames(styles.wrapper, 'bg-white')}>
+      {isMobile ? (
+        <TableControls
+          activeSection={activeSection}
+          columnsLength={columnsLength}
+          navigateTable={navigateTable}
+          stickyHeaderTopOffset={stickyHeaderTopOffset}
+        >
+          <TableCell
+            {...currentActiveSection}
+            {...(isBaseCell(currentActiveSection)
+              ? {
+                  openModal: (body: ReactNode) =>
+                    handleOpenModal({
+                      body,
+                      title: currentActiveSection?.text,
+                    }),
+                }
+              : {})}
+            isNavigation
+          />
+        </TableControls>
+      ) : (
+        <div
+          aria-hidden
+          className={styles.stickyHeader}
+          style={{ top: `${stickyHeaderTopOffset}px` }}
+        >
+          <div className={styles.container} ref={headerRef}>
+            <TableSection
+              tableCellRows={[tableData?.[0]?.rows?.[0]]}
+              title={title}
+              className={className}
+              openModal={handleOpenModal}
+            />
+          </div>
+        </div>
+      )}
+
+      <div ref={containerRef} className={classNames(styles.container, 'pb8')}>
+        <TableContents
+          tableData={tableData}
+          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={infoModalData?.body ? true : false}
+        title={infoModalData?.title}
+        onClose={() => setInfoModalData(null)}
+      >
+        <div className="pt8 p24 wmn6">{infoModalData?.body}</div>
+      </BottomOrRegularModal>
+    </div>
+  );
+};
+
+export { Table };

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

@@ -0,0 +1,36 @@
+@use "../../../../../scss/public/grid" as *;
+@use "../../../../../scss/public/colors" as *;
+
+.infoButton {
+  min-height: initial;
+  height: initial;
+  width: initial;
+  padding: 0;
+}
+
+.icon {
+  margin: 2px;
+}
+
+.bigWithUnderline {
+  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;
+  }
+}