@popsure/dirty-swan 0.54.2 → 0.54.3

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

@@ -7,9 +7,45 @@ const initialData: TableData = [
     rows: [
       [
         { content: 'Our plans' },
-        { content: 'Surgery', modalContent: 'More info on surgery' },
-        { content: 'Standard' },
-        { content: 'Premium' },
+        {
+          type: 'CTA',
+          content: 'Standard',
+          subContent: '€234',
+          href: 'http://example.com',
+        },
+        {
+          type: 'CTA',
+          content: 'Plus',
+          subContent: '€344',
+          href: 'http://example.com',
+        },
+        {
+          type: 'CTA',
+          content: 'Premium',
+          subContent: '€556',
+          href: 'http://example.com',
+        },
+      ],
+      [
+        { content: 'Select a plan' },
+        {
+          type: 'BUTTON',
+          content: 'Standard',
+          subContent: '€234',
+          onClick: () => {},
+        },
+        {
+          type: 'BUTTON',
+          content: 'Plus',
+          subContent: '€344',
+          onClick: () => {},
+        },
+        {
+          type: 'BUTTON',
+          content: 'Premium',
+          subContent: '€556',
+          onClick: () => {},
+        },
       ],
       [
         {
@@ -17,8 +53,8 @@ const initialData: TableData = [
           subContent: 'Annual Only',
         },
         { content: 'No', subContent: 'Annual Only' },
-        { content: 'Yes' },
-        { content: 'Yes' },
+        { content: '50%' },
+        { content: '80%-100%' },
       ],
       [
         { content: 'Operations', modalContent: 'Operations info' },

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

@@ -81,7 +81,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';
 
@@ -60,7 +60,6 @@ const Table = ({
   const { activeSection, navigateTable } = useTableNavigation({
     enabled: isMobile,
     containerRef,
-    columnsLength,
     onSelectionChanged,
   });
 
@@ -71,6 +70,17 @@ const Table = ({
     setInfoModalData({ body, title });
   };
 
+  const isBaseCell = !currentActiveSection.type;
+  let openModal;
+
+  if (isBaseCell) {
+    openModal = (body: ReactNode) =>
+      handleOpenModal({
+        body,
+        title: currentActiveSection?.content,
+      });
+  }
+
   return (
     <div className={classNames(styles.wrapper, 'bg-white')}>
       {isMobile ? (
@@ -82,12 +92,11 @@ const Table = ({
         >
           <TableCell
             {...currentActiveSection}
-            openModal={(body) =>
-              handleOpenModal({
-                body,
-                title: currentActiveSection?.content,
-              })
-            }
+            {...(isBaseCell
+              ? {
+                  openModal,
+                }
+              : {})}
             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: {
+    rating: {
+      value: 2,
+      type: 'zap',
+    },
+    content: 'For dogs',
+    subContent: 'Annual only',
+    modalContent: 'More info',
+    checkmarkValue: undefined,
+    contentFontVariant: 'NORMAL',
+  },
+};
+
+export const BaseCellStory = ({
+  content,
+  subContent,
+  modalContent,
+  checkmarkValue,
+  rating,
+  contentFontVariant,
+  align,
+}: React.ComponentProps<typeof BaseCell>) => (
+  <div className="p48 d-flex fd-column gap16 bg-white">
+    <BaseCell
+      align={align}
+      checkmarkValue={checkmarkValue}
+      content={content}
+      contentFontVariant={contentFontVariant}
+      modalContent={modalContent}
+      openModal={() => {}}
+      rating={rating}
+      subContent={subContent}
+    />
+  </div>
+);
+
+BaseCellStory.storyName = 'BaseCell';
+
+export default story;

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

@@ -0,0 +1,160 @@
+import classNames from 'classnames';
+import { Button } from '../../../../button';
+import {
+  CheckIcon,
+  XIcon,
+  InfoIcon,
+  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 ContentFontVariant = '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;
+  content?: ReactNode;
+  modalContent?: ReactNode;
+  openModal?: (modalContent: ReactNode) => void;
+  subContent?: ReactNode;
+  rating?: {
+    value: number;
+    type: 'zap' | 'star';
+  };
+  contentFontVariant?: ContentFontVariant;
+};
+
+export const BaseCell = ({
+  align = 'center',
+  checkmarkValue,
+  content = '',
+  modalContent = '',
+  openModal,
+  rating,
+  subContent = '',
+  contentFontVariant = 'NORMAL',
+}: 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 content === 'string' ? progressLookup[content] : 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>
+          )}
+
+          {content && contentFontVariant === 'NORMAL' && (
+            <div className="p-p" data-testid="table-cell-content">
+              {content}
+            </div>
+          )}
+
+          {content && contentFontVariant === 'PRICE' && (
+            <div
+              className="p-h1 p--serif tc-primary-500"
+              data-testid="table-cell-content"
+            >
+              {content}
+            </div>
+          )}
+
+          {content && contentFontVariant === 'BIG_WITH_UNDERLINE' && (
+            <div
+              aria-hidden
+              className={classNames(
+                'tc-grey-800 p-h2 p--serif',
+                styles.bigWithUnderline
+              )}
+            >
+              {content}
+            </div>
+          )}
+        </div>
+
+        {subContent && (
+          <div
+            className={classNames(
+              'd-flex p-p--small tc-grey-500',
+              alignClassName
+            )}
+          >
+            {subContent}
+          </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;
+  }
+}
+
+.withoutSubContent {
+  height: 64px;
+}
+
+.withSubContent {
+  height: 75px;
+}
+
+.selected {
+  transition: all 0.3 ease-in-out;
+  border: 2px solid $ds-purple-500;
+  background-color: $ds-purple-50;
+}

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

@@ -0,0 +1,65 @@
+import { ButtonCell } from './ButtonCell';
+
+const story = {
+  title: 'JSX/Table/Cells',
+  component: ButtonCell,
+  argTypes: {},
+  args: {
+    isSelected: false,
+    content: 'Premium',
+    subContent: '€277/mo',
+    disabled: false,
+  },
+};
+
+export const ButtonCellStory = ({
+  isSelected,
+  content,
+  subContent,
+  disabled,
+}: React.ComponentProps<typeof ButtonCell>) => (
+  <div className="p48 d-flex fd-column gap16 bg-white">
+    <ButtonCell
+      content={content}
+      subContent={subContent}
+      isSelected={isSelected}
+      disabled={disabled}
+      onClick={() => {}}
+    />
+
+    <ButtonCell
+      content={content}
+      subContent={subContent}
+      isSelected
+      disabled={disabled}
+      onClick={() => {}}
+    />
+
+    <ButtonCell
+      content={content}
+      subContent={subContent}
+      disabled
+      onClick={() => {}}
+    />
+
+    <ButtonCell
+      content={content}
+      isSelected={isSelected}
+      disabled={disabled}
+      onClick={() => {}}
+    />
+
+    <ButtonCell
+      content={content}
+      isSelected
+      disabled={disabled}
+      onClick={() => {}}
+    />
+
+    <ButtonCell content={content} disabled onClick={() => {}} />
+  </div>
+);
+
+ButtonCellStory.storyName = 'ButtonCell';
+
+export default story;

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

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+
+import styles from './ButtonCell.module.scss';
+import { Button } from '../../../../button';
+import { ReactNode } from 'react';
+
+export type ButtonCellProps = {
+  content?: ReactNode;
+  disabled?: boolean;
+  isSelected?: boolean;
+  onClick: () => void;
+  subContent?: ReactNode;
+};
+
+export const ButtonCell = ({
+  isSelected,
+  onClick,
+  content,
+  subContent,
+  disabled,
+}: ButtonCellProps) => {
+  return (
+    <div className="w100 d-flex fd-column ai-center jc-center gap8">
+      <Button
+        className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {
+          [styles.selected]: isSelected,
+          [styles.withoutSubContent]: !subContent,
+          [styles.withSubContent]: !!subContent,
+        })}
+        variant="filledWhite"
+        type="submit"
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {content}
+        {subContent && <span className="p-p tc-purple-500">{subContent}</span>}
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,3 @@
+.narrow {
+  height: 40px;
+}

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

@@ -0,0 +1,34 @@
+import { CTACell } from './CTACell';
+
+const story = {
+  title: 'JSX/Table/Cells',
+  component: CTACell,
+  argTypes: {},
+  args: {
+    content: 'Premium',
+    subContent: '€277',
+    grey: false,
+    narrow: false,
+  },
+};
+
+export const CTACellStory = ({
+  content,
+  subContent,
+  grey,
+  narrow,
+}: React.ComponentProps<typeof CTACell>) => (
+  <div className="p48 d-flex fd-column gap16 bg-white">
+    <CTACell
+      content={content}
+      subContent={subContent}
+      href=""
+      grey={grey}
+      narrow={narrow}
+    />
+  </div>
+);
+
+CTACellStory.storyName = 'CTACell';
+
+export default story;