@popsure/dirty-swan 0.54.2 → 0.54.4

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

@@ -1,33 +1,95 @@
 import { Table, TableProps } from './Table';
 import { DentalPlusIcon, PlaneIcon } from '../icon';
-import { TableData } from './types';
+import { TableCellData, TableData } from './types';
 
 const initialData: TableData = [
   {
     rows: [
       [
-        { content: 'Our plans' },
-        { content: 'Surgery', modalContent: 'More info on surgery' },
-        { content: 'Standard' },
-        { content: 'Premium' },
+        { 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',
+        },
       ],
       [
         {
-          content: 'Regular vet visits & medication',
-          subContent: 'Annual Only',
+          text: 'Regular vet visits & medication',
+          description: 'Annual Only',
         },
-        { content: 'No', subContent: 'Annual Only' },
-        { content: 'Yes' },
-        { content: 'Yes' },
+        { text: 'No', description: 'Annual Only' },
+        { text: '50%' },
+        { text: '80%-100%' },
       ],
       [
-        { content: 'Operations', modalContent: 'Operations info' },
+        { text: 'Operations', modalContent: 'Operations info' },
         { checkmarkValue: true, modalContent: 'Operations info column 2' },
         { checkmarkValue: false },
         { checkmarkValue: true },
       ],
       [
-        { content: 'Rating', modalContent: 'Rating info' },
+        { text: 'Rating', modalContent: 'Rating info' },
         { rating: { type: 'zap', value: 1 } },
         {
           rating: { type: 'zap', value: 3 },
@@ -44,19 +106,19 @@ const initialData: TableData = [
     },
     rows: [
       [
-        { content: 'Regular vet visits & medication' },
-        { content: 'No' },
-        { content: 'Yes' },
-        { content: 'Yes' },
+        { text: 'Regular vet visits & medication' },
+        { text: 'No' },
+        { text: 'Yes' },
+        { text: 'Yes' },
       ],
       [
-        { content: 'Operations', modalContent: 'info' },
+        { text: 'Operations', modalContent: 'info' },
         { checkmarkValue: true, modalContent: 'Maybe' },
         { checkmarkValue: false },
         { checkmarkValue: true },
       ],
       [
-        { content: 'Rating', modalContent: 'info' },
+        { text: 'Rating', modalContent: 'info' },
         { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
         { rating: { type: 'zap', value: 3 } },
         { rating: { type: 'star', value: 3 } },
@@ -70,19 +132,19 @@ const initialData: TableData = [
     },
     rows: [
       [
-        { content: 'Regular vet visits & medication' },
-        { content: 'No', checkmarkValue: false },
-        { content: 'Yes' },
-        { content: 'Yes' },
+        { text: 'Regular vet visits & medication' },
+        { text: 'No', checkmarkValue: false },
+        { text: 'Yes' },
+        { text: 'Yes' },
       ],
       [
-        { content: 'Operations', modalContent: 'info' },
+        { text: 'Operations', modalContent: 'info' },
         { checkmarkValue: true, modalContent: 'Maybe' },
         { checkmarkValue: false },
         { checkmarkValue: true },
       ],
       [
-        { content: 'Rating', modalContent: 'info' },
+        { text: 'Rating', modalContent: 'info' },
         { rating: { type: 'zap', value: 1 }, modalContent: 'Maybe' },
         { rating: { type: 'zap', value: 3 } },
         { rating: { type: 'star', value: 3 } },
@@ -180,7 +242,7 @@ type TableData = {
   rows: {
     align?: 'center' | 'left' | 'right';
     checkmarkValue?: boolean;
-    content?: ReactNode;
+    text?: ReactNode;
     modalContent?: ReactNode;
     subContent?: ReactNode;
     rating?: {

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

@@ -8,7 +8,7 @@ const tableData: TableSectionData[] = [
       title: 'Section 1',
       icon: <span>Icon 1</span>,
     },
-    rows: [[{ content: 'Item 1' }, { content: 'Item 2' }]],
+    rows: [[{ text: 'Item 1' }, { text: 'Item 2' }]],
   },
   {
     section: {
@@ -16,10 +16,7 @@ const tableData: TableSectionData[] = [
       icon: <span>Icon 2</span>,
     },
     rows: [
-      [
-        { content: 'Item 3' },
-        { content: 'Item 4', modalContent: 'Additional item' },
-      ],
+      [{ text: 'Item 3' }, { text: 'Item 4', modalContent: 'Additional item' }],
     ],
   },
 ];
@@ -81,7 +78,7 @@ describe('Table', () => {
   it('shows a modal when clicking on info icon', async () => {
     const { user } = render(<Table tableData={tableData} title="Test Table" />);
 
-    await user.click(screen.getByText('View more info'));
+    await user.click(screen.getByTestId('ds-table-info-button'));
 
     expect(screen.getByText('Additional item')).toBeVisible();
   });

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

@@ -1,6 +1,6 @@
 import { TableCell, TableCellProps } from './components/TableCell/TableCell';
 import { BottomOrRegularModal } from '../modal';
-import { useRef, useState } from 'react';
+import { ReactNode, useRef, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '../icon';
 import { Card } from '../cards/card';
 
@@ -12,7 +12,7 @@ import { useTableNavigation } from './utils/useTableNavigation/useTableNavigatio
 import { TableControls } from './components/TableControls/TableControls';
 import { TableSection } from './components/TableSection/TableSection';
 import { useScrollSync } from './utils/useScrollSync/useScrollSync';
-import { ModalData, ModalFunction, TableData } from './types';
+import { isBaseCell, ModalData, ModalFunction, TableData } from './types';
 
 type TextOverrides = {
   showDetails?: string;
@@ -60,7 +60,6 @@ const Table = ({
   const { activeSection, navigateTable } = useTableNavigation({
     enabled: isMobile,
     containerRef,
-    columnsLength,
     onSelectionChanged,
   });
 
@@ -82,12 +81,15 @@ const Table = ({
         >
           <TableCell
             {...currentActiveSection}
-            openModal={(body) =>
-              handleOpenModal({
-                body,
-                title: currentActiveSection?.content,
-              })
-            }
+            {...(isBaseCell(currentActiveSection)
+              ? {
+                  openModal: (body: ReactNode) =>
+                    handleOpenModal({
+                      body,
+                      title: currentActiveSection?.text,
+                    }),
+                }
+              : {})}
             isNavigation
           />
         </TableControls>

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;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { BaseCell } from './BaseCell';
+
+const story = {
+  title: 'JSX/Table/Cells',
+  component: BaseCell,
+  argTypes: {},
+  args: {
+    text: 'For dogs',
+    description: 'Annual only',
+    modalContent: 'More info',
+    fontVariant: 'NORMAL',
+    checkmarkValue: undefined,
+    rating: {
+      value: 2,
+      type: 'zap',
+    },
+  },
+};
+
+export const BaseCellStory = ({
+  text,
+  description,
+  modalContent,
+  checkmarkValue,
+  rating,
+  fontVariant,
+  align,
+}: React.ComponentProps<typeof BaseCell>) => (
+  <div className="p48 d-flex fd-column gap16 bg-white">
+    <BaseCell
+      align={align}
+      checkmarkValue={checkmarkValue}
+      fontVariant={fontVariant}
+      description={description}
+      modalContent={modalContent}
+      openModal={() => {}}
+      rating={rating}
+      text={text}
+    />
+  </div>
+);
+
+BaseCellStory.storyName = 'BaseCell';
+
+export default story;

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

@@ -0,0 +1,158 @@
+import classNames from 'classnames';
+import {
+  CheckIcon,
+  XIcon,
+  StarFilledIcon,
+  ZapFilledIcon,
+} from '../../../../icon';
+import { ReactNode } from 'react';
+import styles from './BaseCell.module.scss';
+import { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';
+import { TableInfoButton } from '../../../../comparisonTable';
+
+export type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';
+
+const progressLookup: Record<string, number> = {
+  '30%': 1,
+  '50%': 2,
+  '70%': 3,
+  '75%': 4,
+  '80%': 4,
+  '90%': 4,
+  '75%-90%': 4,
+  '75%-100%': 4,
+  '80%-100%': 4,
+  '100%': 5,
+};
+
+export type Alignment = 'center' | 'left' | 'right';
+
+export type BaseCellProps = {
+  align?: Alignment;
+  checkmarkValue?: boolean;
+  fontVariant?: FontVariant;
+  description?: ReactNode;
+  modalContent?: ReactNode;
+  openModal?: (modalContent: ReactNode) => void;
+  text?: ReactNode;
+  rating?: {
+    value: number;
+    type: 'zap' | 'star';
+  };
+};
+
+export const BaseCell = ({
+  align = 'center',
+  checkmarkValue,
+  fontVariant = 'NORMAL',
+  description = '',
+  modalContent = '',
+  openModal,
+  rating,
+  text = '',
+}: BaseCellProps) => {
+  const alignClassName = {
+    center: 'ta-center jc-center ai-center',
+    left: 'ta-left jc-start',
+    right: 'ta-right jc-end ai-end',
+  }[align];
+
+  const validRatingValues: number[] = [1, 2, 3];
+  const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;
+
+  const progressBarValue =
+    typeof text === 'string' ? progressLookup[text] : undefined;
+
+  return (
+    <div
+      className={classNames('d-flex gap8 ai-center', {
+        'jc-center': align === 'center',
+      })}
+    >
+      <div className={classNames('d-flex fd-column', alignClassName)}>
+        {progressBarValue !== undefined && (
+          <MiniProgressBar nFilledBars={progressBarValue} />
+        )}
+
+        {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>
+        )}
+
+        <div className="d-flex ai-center">
+          {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 && fontVariant === 'NORMAL' && (
+            <div className="p-p" data-testid="table-cell-text">
+              {text}
+            </div>
+          )}
+
+          {text && fontVariant === 'PRICE' && (
+            <div
+              className="p-h1 p--serif tc-primary-500"
+              data-testid="table-cell-content"
+            >
+              {text}
+            </div>
+          )}
+
+          {text && fontVariant === 'BIG_WITH_UNDERLINE' && (
+            <div
+              aria-hidden
+              className={classNames(
+                'tc-grey-800 p-h2 p--serif',
+                styles.bigWithUnderline
+              )}
+            >
+              {text}
+            </div>
+          )}
+        </div>
+
+        {description && (
+          <div
+            className={classNames(
+              'd-flex p-p--small tc-grey-500',
+              alignClassName
+            )}
+          >
+            {description}
+          </div>
+        )}
+      </div>
+      {modalContent && openModal && (
+        <TableInfoButton onClick={() => openModal(modalContent)} />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,44 @@
+@use "../../../../../../scss/public/colors" as *;
+
+$defaultColor: $ds-purple-100;
+$oneOrTwoColor: $ds-grey-500;
+$threeOrFourColor: $ds-blue-300;
+$allFilledColor: $ds-purple-500;
+
+.progressBar {
+  margin-bottom: 4px;
+
+  rect {
+    fill: $defaultColor;
+  }
+}
+
+.filledBars1 {
+  rect:first-child {
+    fill: $oneOrTwoColor;
+  }
+}
+
+.filledBars2 {
+  rect:nth-child(-n + 2) {
+    fill: $oneOrTwoColor;
+  }
+}
+
+.filledBars3 {
+  rect:nth-child(-n + 3) {
+    fill: $threeOrFourColor;
+  }
+}
+
+.filledBars4 {
+  rect:nth-child(-n + 4) {
+    fill: $threeOrFourColor;
+  }
+}
+
+.filledBars5 {
+  rect {
+    fill: $allFilledColor;
+  }
+}

package/src/lib/components/table/components/TableCell/BaseCell/MiniProgressBar/MiniProgressBar.stories.tsx

@@ -0,0 +1,29 @@
+import { MiniProgressBar } from './MiniProgressBar';
+
+const story = {
+  title: 'JSX/Table/Misc',
+  component: MiniProgressBar,
+  argTypes: {
+    nFilledBars: {
+      description: 'Number of filled bars to show (0-5)',
+      control: {
+        min: 0,
+        max: 5,
+        type: 'number',
+      },
+    },
+  },
+  args: {
+    nFilledBars: 3,
+  },
+};
+
+export const MiniProgressBarStory = ({
+  nFilledBars,
+}: React.ComponentProps<typeof MiniProgressBar>) => (
+  <MiniProgressBar nFilledBars={nFilledBars} />
+);
+
+MiniProgressBarStory.storyName = 'MiniProgressBar';
+
+export default story;

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

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+
+import styles from './MiniProgressBar.module.scss';
+
+export const MiniProgressBar = ({ nFilledBars }: { nFilledBars: number }) => (
+  <svg
+    className={classNames(
+      styles.progressBar,
+      styles[`filledBars${nFilledBars}`]
+    )}
+    width="40"
+    height="6"
+    viewBox="0 0 40 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_37507_20658)">
+      <rect id="r1" x="0.5" y="0.5" width="7" height="5" rx="1" />
+      <rect id="r2" x="8.5" y="0.5" width="7" height="5" rx="1" />
+      <rect id="r3" x="16.5" y="0.5" width="7" height="5" rx="1" />
+      <rect id="r4" x="24.5" y="0.5" width="7" height="5" rx="1" />
+      <rect id="r5" x="32.5" y="0.5" width="7" height="5" rx="1" />
+    </g>
+    <defs>
+      <clipPath id="clip0_37507_20658">
+        <rect
+          width="39"
+          height="5"
+          fill="white"
+          transform="translate(0.5 0.5)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);

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

@@ -0,0 +1,43 @@
+@use "../../../../../scss/public/grid" as *;
+@use "../../../../../scss/public/colors" as *;
+
+.buttonCell {
+  color: $ds-grey-900;
+  border: 1px solid $ds-grey-400;
+
+  transition: all 0.3s ease-in-out;
+
+  @include p-size-mobile {
+    max-width: calc(100% - 96px);
+  }
+
+  &:disabled {
+    border: none;
+    background-color: $ds-grey-200;
+    color: $ds-grey-900;
+    opacity: 1;
+    cursor: default;
+
+    &:hover {
+      background-color: $ds-grey-200;
+    }
+  }
+
+  @include p-size-mobile {
+    pointer-events: none;
+  }
+}
+
+.withoutPrice {
+  height: 64px;
+}
+
+.withPrice {
+  height: 75px;
+}
+
+.selected {
+  transition: all 0.3 ease-in-out;
+  border: 2px solid $ds-purple-500;
+  background-color: $ds-purple-50;
+}