@popsure/dirty-swan 0.53.4 → 0.53.5

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

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: {
+    buttonCaption: 'Premium',
+    price: '€277/mo',
+    isSelected: false,
+    disabled: false,
+  },
+};
+
+export const ButtonCellStory = ({
+  isSelected,
+  buttonCaption,
+  price,
+  disabled,
+}: React.ComponentProps<typeof ButtonCell>) => (
+  <div className="p48 d-flex fd-column gap16 bg-white">
+    <ButtonCell
+      buttonCaption={buttonCaption}
+      price={price}
+      isSelected={isSelected}
+      disabled={disabled}
+      onClick={() => {}}
+    />
+
+    <ButtonCell
+      buttonCaption={buttonCaption}
+      price={price}
+      isSelected
+      disabled={disabled}
+      onClick={() => {}}
+    />
+
+    <ButtonCell
+      buttonCaption={buttonCaption}
+      price={price}
+      disabled
+      onClick={() => {}}
+    />
+
+    <ButtonCell
+      buttonCaption={buttonCaption}
+      isSelected={isSelected}
+      disabled={disabled}
+      onClick={() => {}}
+    />
+
+    <ButtonCell
+      buttonCaption={buttonCaption}
+      isSelected
+      disabled={disabled}
+      onClick={() => {}}
+    />
+
+    <ButtonCell buttonCaption={buttonCaption} 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 = {
+  buttonCaption: ReactNode;
+  disabled?: boolean;
+  isSelected?: boolean;
+  onClick: () => void;
+  price?: ReactNode;
+};
+
+export const ButtonCell = ({
+  isSelected,
+  onClick,
+  buttonCaption,
+  price,
+  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.withoutPrice]: !price,
+          [styles.withPrice]: !!price,
+        })}
+        variant="filledWhite"
+        type="submit"
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {buttonCaption}
+        {price && <span className="p-p tc-purple-500">{price}</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,37 @@
+import { CTACell } from './CTACell';
+
+const story = {
+  title: 'JSX/Table/Cells',
+  component: CTACell,
+  argTypes: {},
+  args: {
+    title: 'Premium',
+    price: '€277',
+    buttonCaption: 'Get covered',
+    grey: false,
+    narrow: false,
+  },
+};
+
+export const CTACellStory = ({
+  title,
+  price,
+  buttonCaption,
+  grey,
+  narrow,
+}: React.ComponentProps<typeof CTACell>) => (
+  <div className="p48 d-flex fd-column gap16 bg-white">
+    <CTACell
+      title={title}
+      price={price}
+      buttonCaption={buttonCaption}
+      href=""
+      grey={grey}
+      narrow={narrow}
+    />
+  </div>
+);
+
+CTACellStory.storyName = 'CTACell';
+
+export default story;

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

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+
+export type CTACellProps = {
+  title: ReactNode;
+  price?: ReactNode;
+  buttonCaption?: ReactNode;
+  grey?: boolean;
+  narrow?: boolean;
+  href: string;
+};
+import styles from './CTACell.module.scss';
+
+export const CTACell = ({
+  title,
+  price,
+  grey,
+  narrow,
+  href,
+  buttonCaption,
+}: CTACellProps) => {
+  return (
+    <div className="wmn3 ta-center">
+      <p className="p-h3">
+        {title}
+        {price && <span className="tc-purple-500"> {price}</span>}
+      </p>
+      <a
+        className={classNames('mt16', {
+          'p-btn--primary': !grey,
+          'p-btn--secondary-grey': grey,
+          [styles.narrow]: narrow,
+        })}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {buttonCaption}
+      </a>
+    </div>
+  );
+};

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

@@ -0,0 +1,29 @@
+@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;
+  }
+}
+
+.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;
+  }
+}

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

@@ -0,0 +1,88 @@
+import { render, screen } from '../../../../util/testUtils';
+import { TableCell, TableCellProps } from './TableCell';
+
+const openModal = jest.fn();
+
+const setup = ({ isNavigation, ...rest }: TableCellProps = {}) =>
+  render(
+    isNavigation ? (
+      <TableCell {...rest} isNavigation />
+    ) : (
+      <table>
+        <tbody>
+          <tr>
+            <TableCell {...rest} />
+          </tr>
+        </tbody>
+      </table>
+    )
+  );
+
+describe('TableCell', () => {
+  it('renders the component with boolean true', () => {
+    setup({ checkmarkValue: true });
+
+    expect(screen.getByTitle('Yes')).toBeInTheDocument();
+    expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();
+  });
+
+  it('renders the component with boolean false', () => {
+    setup({ checkmarkValue: false });
+
+    expect(screen.getByTitle('No')).toBeInTheDocument();
+    expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();
+  });
+
+  it('renders the component without boolean', () => {
+    setup();
+
+    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', () => {
+    setup({ rating: { type: 'star', value: 2 } });
+
+    expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();
+  });
+
+  it('renders the component without rating', () => {
+    setup();
+
+    expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();
+  });
+
+  it('renders the component with text', () => {
+    setup({ text: 'Sample text' });
+
+    expect(screen.getByText('Sample text')).toBeInTheDocument();
+  });
+
+  it('renders the component without text', () => {
+    setup();
+
+    expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();
+  });
+
+  it('renders the component without info', () => {
+    setup();
+
+    expect(screen.queryByText('View more info')).not.toBeInTheDocument();
+  });
+
+  it('calls openModal when info button is clicked', () => {
+    setup({ modalContent: 'Additional information', openModal });
+
+    // Click info button
+    screen.getByTestId('ds-table-info-button').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,64 @@
+import classNames from 'classnames';
+
+import styles from './TableCell.module.scss';
+import { BaseCell, BaseCellProps } from './BaseCell/BaseCell';
+import { TableCellData } from '../../types';
+import { CTACell } from './CTACell/CTACell';
+import { ButtonCell } from './ButtonCell/ButtonCell';
+
+type PositionalTableCellProps = {
+  isHeader?: boolean;
+  isFirstCellInRow?: boolean;
+  isTopLeftCell?: boolean;
+  isNavigation?: boolean;
+};
+
+export type TableCellProps = TableCellData & PositionalTableCellProps;
+
+const TableCell = ({
+  isFirstCellInRow = false,
+  isHeader = false,
+  isNavigation = false,
+  isTopLeftCell = false,
+  ...cellProps
+}: TableCellProps) => {
+  // prettier-ignore
+  const Tag = isNavigation
+    ? 'div'
+    : isHeader || isFirstCellInRow ? 'th' : 'td';
+
+  // prettier-ignore
+  const thScope = isHeader
+    ? 'col'
+    : isFirstCellInRow ? 'row' : undefined;
+
+  const scope = {
+    scope: thScope,
+  };
+
+  return (
+    <Tag
+      {...scope}
+      className={classNames('bg-white py24 px8', styles.th, {
+        'ta-left': isFirstCellInRow,
+        [styles.fixedCell]: isFirstCellInRow,
+        pl32: isFirstCellInRow,
+      })}
+    >
+      {!cellProps.type && (
+        <BaseCell
+          {...cellProps}
+          fontVariant={
+            isTopLeftCell
+              ? 'BIG_WITH_UNDERLINE'
+              : cellProps.fontVariant ?? 'NORMAL'
+          }
+        />
+      )}
+      {cellProps.type === 'CTA' && <CTACell {...cellProps} />}
+      {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}
+    </Tag>
+  );
+};
+
+export { TableCell };