@popsure/dirty-swan 0.54.2 → 0.54.4

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

@@ -1,17 +1,6 @@
 @use '../../../../scss/public/colors' as *;
 @use '../../../../scss/public/grid' as *;
 
-.button {
-  min-height: initial;
-  height: initial;
-  width: initial;
-  padding: 0;
-}
-
-.icon {
-  margin: 2px;
-}
-
 .th {
   vertical-align: middle;
   scroll-snap-align: end;
@@ -23,15 +12,6 @@
   }
 }
 
-.thRow {
-  position: sticky;
-  top: 0;
-}
-
-.thCol {
-  text-align: left;
-}
-
 .fixedCell {
   position: sticky;
   left: 0;
@@ -47,26 +27,3 @@
     background-color: $ds-grey-200;
   }
 }
-
-.topLeftCell {
-  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/TableCell.test.tsx

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

@@ -1,50 +1,26 @@
-import { 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';
+import { BaseCell, BaseCellProps } from './BaseCell/BaseCell';
+import { TableCellData } from '../../types';
+import { CTACell } from './CTACell/CTACell';
+import { ButtonCell } from './ButtonCell/ButtonCell';
 
-interface BaseTableCellProps {
-  align?: 'center' | 'left' | 'right';
-  checkmarkValue?: boolean;
-  content?: ReactNode;
-  modalContent?: ReactNode;
-  openModal?: (modalContent: ReactNode) => void;
-  subContent?: ReactNode;
-  rating?: {
-    value: number;
-    type: 'zap' | 'star';
-  };
-}
-
-interface PositionalTableCellProps {
+type PositionalTableCellProps = {
   isHeader?: boolean;
   isFirstCellInRow?: boolean;
   isTopLeftCell?: boolean;
   isNavigation?: boolean;
-}
+};
 
-export type TableCellProps = BaseTableCellProps & PositionalTableCellProps;
+export type TableCellProps = TableCellData & PositionalTableCellProps;
 
 const TableCell = ({
-  align = 'center',
-  checkmarkValue,
-  content = '',
   isFirstCellInRow = false,
   isHeader = false,
   isNavigation = false,
   isTopLeftCell = false,
-  modalContent = '',
-  openModal,
-  rating,
-  subContent = '',
+  ...cellProps
 }: TableCellProps) => {
   // prettier-ignore
   const Tag = isNavigation
@@ -60,15 +36,6 @@ const TableCell = ({
     scope: thScope,
   };
 
-  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 (
     <Tag
       {...scope}
@@ -78,87 +45,18 @@ const TableCell = ({
         pl32: isFirstCellInRow,
       })}
     >
-      <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>
-          )}
-
-          {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 && !isTopLeftCell && (
-            <div className="p-p" data-testid="table-cell-content">
-              {content}
-            </div>
-          )}
-
-          {content && isTopLeftCell && (
-            <div
-              aria-hidden
-              className={classNames(
-                'tc-grey-800 p-h2 p--serif',
-                styles.topLeftCell
-              )}
-            >
-              {content}
-            </div>
-          )}
-
-          {modalContent && openModal && (
-            <Button
-              className={styles.button}
-              hideLabel
-              leftIcon={<InfoIcon size={20} />}
-              onClick={() => openModal(modalContent)}
-              type="button"
-              variant="textColor"
-            >
-              View more info
-            </Button>
-          )}
-        </div>
-
-        {subContent && (
-          <div
-            className={classNames(
-              'd-flex p-p--small tc-grey-500',
-              alignClassName
-            )}
-          >
-            {subContent}
-          </div>
-        )}
-      </div>
+      {!cellProps.type && (
+        <BaseCell
+          {...cellProps}
+          fontVariant={
+            isTopLeftCell
+              ? 'BIG_WITH_UNDERLINE'
+              : cellProps.fontVariant ?? 'NORMAL'
+          }
+        />
+      )}
+      {cellProps.type === 'CTA' && <CTACell {...cellProps} />}
+      {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}
     </Tag>
   );
 };

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

@@ -1,11 +1,11 @@
 import { render, screen } from '../../../../util/testUtils';
-import { TableContents, TableSectionProps } from './TableContents';
+import { TableContents, TableContentsProps } from './TableContents';
 
-const mockData: TableSectionProps['tableData'] = [
+const mockData: TableContentsProps['tableData'] = [
   {
     rows: [
-      [{ content: 'Item 1.1.1' }, { content: 'Item 1.1.2' }],
-      [{ content: 'Item 1.2.1' }, { content: 'Item 1.2.2' }],
+      [{ text: 'Item 1.1.1' }, { text: 'Item 1.1.2' }],
+      [{ text: 'Item 1.2.1' }, { text: 'Item 1.2.2' }],
     ],
   },
   {
@@ -13,8 +13,8 @@ const mockData: TableSectionProps['tableData'] = [
       title: 'Section 2',
     },
     rows: [
-      [{ content: 'Item 2.1.1' }, { content: 'Item 2.1.2' }],
-      [{ content: 'Item 2.2.1' }, { content: 'Item 2.2.2' }],
+      [{ text: 'Item 2.1.1' }, { text: 'Item 2.1.2' }],
+      [{ text: 'Item 2.2.1' }, { text: 'Item 2.2.2' }],
     ],
   },
 ];

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

@@ -1,16 +1,16 @@
 import { render, screen } from '../../../../util/testUtils';
-import { TableSection, TableContentProps } from './TableSection';
+import { TableSection, TableSectionProps } from './TableSection';
 
-const tableCellRows: TableContentProps['tableCellRows'] = [
-  [{ content: 'Cell 1.1' }, { content: 'Cell 1.2' }, { content: 'Cell 1.3' }],
-  [{ content: 'Cell 2.1' }, { content: 'Cell 2.2' }, { content: 'Cell 2.3' }],
+const tableCellRows: TableSectionProps['tableCellRows'] = [
+  [{ text: 'Cell 1.1' }, { text: 'Cell 1.2' }, { text: 'Cell 1.3' }],
+  [{ text: 'Cell 2.1' }, { text: 'Cell 2.2' }, { text: 'Cell 2.3' }],
 ];
 
 const mockTitle = 'Test Table';
 
 const mockOpenModal = jest.fn();
 
-const defaultProps: TableContentProps = {
+const defaultProps: TableSectionProps = {
   tableCellRows,
   title: mockTitle,
   openModal: mockOpenModal,