@popsure/dirty-swan 0.54.3 → 0.54.4

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

@@ -5,58 +5,58 @@ const story = {
   component: ButtonCell,
   argTypes: {},
   args: {
+    buttonCaption: 'Premium',
+    price: '€277/mo',
     isSelected: false,
-    content: 'Premium',
-    subContent: '€277/mo',
     disabled: false,
   },
 };
 
 export const ButtonCellStory = ({
   isSelected,
-  content,
-  subContent,
+  buttonCaption,
+  price,
   disabled,
 }: React.ComponentProps<typeof ButtonCell>) => (
   <div className="p48 d-flex fd-column gap16 bg-white">
     <ButtonCell
-      content={content}
-      subContent={subContent}
+      buttonCaption={buttonCaption}
+      price={price}
       isSelected={isSelected}
       disabled={disabled}
       onClick={() => {}}
     />
 
     <ButtonCell
-      content={content}
-      subContent={subContent}
+      buttonCaption={buttonCaption}
+      price={price}
       isSelected
       disabled={disabled}
       onClick={() => {}}
     />
 
     <ButtonCell
-      content={content}
-      subContent={subContent}
+      buttonCaption={buttonCaption}
+      price={price}
       disabled
       onClick={() => {}}
     />
 
     <ButtonCell
-      content={content}
+      buttonCaption={buttonCaption}
       isSelected={isSelected}
       disabled={disabled}
       onClick={() => {}}
     />
 
     <ButtonCell
-      content={content}
+      buttonCaption={buttonCaption}
       isSelected
       disabled={disabled}
       onClick={() => {}}
     />
 
-    <ButtonCell content={content} disabled onClick={() => {}} />
+    <ButtonCell buttonCaption={buttonCaption} disabled onClick={() => {}} />
   </div>
 );
 

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

@@ -5,18 +5,18 @@ import { Button } from '../../../../button';
 import { ReactNode } from 'react';
 
 export type ButtonCellProps = {
-  content?: ReactNode;
+  buttonCaption: ReactNode;
   disabled?: boolean;
   isSelected?: boolean;
   onClick: () => void;
-  subContent?: ReactNode;
+  price?: ReactNode;
 };
 
 export const ButtonCell = ({
   isSelected,
   onClick,
-  content,
-  subContent,
+  buttonCaption,
+  price,
   disabled,
 }: ButtonCellProps) => {
   return (
@@ -24,16 +24,16 @@ export const ButtonCell = ({
       <Button
         className={classNames('w100 wmx5 d-flex fd-column', styles.buttonCell, {
           [styles.selected]: isSelected,
-          [styles.withoutSubContent]: !subContent,
-          [styles.withSubContent]: !!subContent,
+          [styles.withoutPrice]: !price,
+          [styles.withPrice]: !!price,
         })}
         variant="filledWhite"
         type="submit"
         onClick={onClick}
         disabled={disabled}
       >
-        {content}
-        {subContent && <span className="p-p tc-purple-500">{subContent}</span>}
+        {buttonCaption}
+        {price && <span className="p-p tc-purple-500">{price}</span>}
       </Button>
     </div>
   );

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

@@ -5,23 +5,26 @@ const story = {
   component: CTACell,
   argTypes: {},
   args: {
-    content: 'Premium',
-    subContent: '€277',
+    title: 'Premium',
+    price: '€277',
+    buttonCaption: 'Get covered',
     grey: false,
     narrow: false,
   },
 };
 
 export const CTACellStory = ({
-  content,
-  subContent,
+  title,
+  price,
+  buttonCaption,
   grey,
   narrow,
 }: React.ComponentProps<typeof CTACell>) => (
   <div className="p48 d-flex fd-column gap16 bg-white">
     <CTACell
-      content={content}
-      subContent={subContent}
+      title={title}
+      price={price}
+      buttonCaption={buttonCaption}
       href=""
       grey={grey}
       narrow={narrow}

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

@@ -2,8 +2,9 @@ import classNames from 'classnames';
 import { ReactNode } from 'react';
 
 export type CTACellProps = {
-  content?: ReactNode;
-  subContent?: ReactNode;
+  title: ReactNode;
+  price?: ReactNode;
+  buttonCaption?: ReactNode;
   grey?: boolean;
   narrow?: boolean;
   href: string;
@@ -11,17 +12,18 @@ export type CTACellProps = {
 import styles from './CTACell.module.scss';
 
 export const CTACell = ({
-  content,
-  subContent,
+  title,
+  price,
   grey,
   narrow,
   href,
+  buttonCaption,
 }: CTACellProps) => {
   return (
     <div className="wmn3 ta-center">
       <p className="p-h3">
-        {content}
-        {subContent && <span className="tc-purple-500"> {subContent}</span>}
+        {title}
+        {price && <span className="tc-purple-500"> {price}</span>}
       </p>
       <a
         className={classNames('mt16', {
@@ -33,7 +35,7 @@ export const CTACell = ({
         target="_blank"
         rel="noopener noreferrer"
       >
-        Get covered
+        {buttonCaption}
       </a>
     </div>
   );

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

@@ -3,17 +3,18 @@ import { TableCell, TableCellProps } from './TableCell';
 
 const openModal = jest.fn();
 
-const setup = ({ isNavigation, ...rest }: TableCellProps = {}) => render(
-  isNavigation 
-    ? <TableCell {...rest} isNavigation />
-    : (
+const setup = ({ isNavigation, ...rest }: TableCellProps = {}) =>
+  render(
+    isNavigation ? (
+      <TableCell {...rest} isNavigation />
+    ) : (
       <table>
         <tbody>
           <tr>
             <TableCell {...rest} />
           </tr>
         </tbody>
-      </table>  
+      </table>
     )
   );
 
@@ -58,7 +59,7 @@ describe('TableCell', () => {
   });
 
   it('renders the component with text', () => {
-    setup({ content: "Sample text" });
+    setup({ text: 'Sample text' });
 
     expect(screen.getByText('Sample text')).toBeInTheDocument();
   });
@@ -76,7 +77,7 @@ describe('TableCell', () => {
   });
 
   it('calls openModal when info button is clicked', () => {
-    setup({ modalContent: "Additional information", openModal });
+    setup({ modalContent: 'Additional information', openModal });
 
     // Click info button
     screen.getByTestId('ds-table-info-button').click();

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

@@ -48,7 +48,11 @@ const TableCell = ({
       {!cellProps.type && (
         <BaseCell
           {...cellProps}
-          contentFontVariant={isTopLeftCell ? 'BIG_WITH_UNDERLINE' : 'NORMAL'}
+          fontVariant={
+            isTopLeftCell
+              ? 'BIG_WITH_UNDERLINE'
+              : cellProps.fontVariant ?? 'NORMAL'
+          }
         />
       )}
       {cellProps.type === 'CTA' && <CTACell {...cellProps} />}

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

@@ -4,8 +4,8 @@ import { TableContents, TableContentsProps } from './TableContents';
 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: TableContentsProps['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

@@ -2,8 +2,8 @@ import { render, screen } from '../../../../util/testUtils';
 import { TableSection, TableSectionProps } from './TableSection';
 
 const tableCellRows: TableSectionProps['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' }],
+  [{ 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';

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

@@ -2,9 +2,13 @@ import classNames from 'classnames';
 
 import styles from './TableSection.module.scss';
 import { TableCell, TableCellProps } from '../TableCell/TableCell';
-import React, { ReactNode, useCallback } from 'react';
-import { ModalData, ModalFunction, TableCellRowData } from '../../types';
-import { Alignment } from '../TableCell/BaseCell/BaseCell';
+import { ReactNode, useCallback } from 'react';
+import {
+  isBaseCell,
+  ModalData,
+  ModalFunction,
+  TableCellRowData,
+} from '../../types';
 
 export interface TableSectionProps {
   className?: string;
@@ -25,22 +29,32 @@ const TableSection = ({
 }: TableSectionProps) => {
   const headerRow = tableCellRows?.[0];
 
-  const getColumnContentByKey = useCallback(
-    (key: number) => tableCellRows?.[0]?.[key]?.content || '',
-    [tableCellRows]
-  );
-
-  const handleOpenModal = ({
-    cellIndex,
-    body,
-    title,
-  }: ModalData & {
-    cellIndex: number;
-  }) =>
-    openModal?.({
-      body,
-      title: title || getColumnContentByKey(cellIndex),
-    });
+  const getModalTitleFromColumnHeader = (cellIndex: number) => {
+    const firstCellInColumn = tableCellRows?.[0]?.[cellIndex];
+    let titleFromColumn;
+
+    switch (firstCellInColumn.type) {
+      case 'BUTTON':
+        titleFromColumn = firstCellInColumn.buttonCaption;
+        break;
+      case 'CTA':
+        titleFromColumn = firstCellInColumn.title;
+        break;
+      case undefined:
+        titleFromColumn = firstCellInColumn.text || '';
+        break;
+    }
+
+    return titleFromColumn;
+  };
+
+  const getModalTitleFromRowHeader = (currentRow: TableCellRowData) => {
+    const firstCellInRow = currentRow?.[0];
+    const titleFromRow =
+      (isBaseCell(firstCellInRow) && firstCellInRow.text) || '';
+
+    return titleFromRow;
+  };
 
   return (
     <table
@@ -52,35 +66,26 @@ const TableSection = ({
       {headerRow && (
         <thead className={hideHeader ? 'sr-only' : ''}>
           <tr>
-            {headerRow.map((tableCellProps, cellIndex) => {
+            {headerRow.map((tableCellData, cellIndex) => {
               const isFirstCellInRow = cellIndex === 0;
 
-              const isBaseCell = !tableCellProps.type;
-
-              let openModal;
-              let align: Alignment = 'left';
-
-              if (isBaseCell) {
-                openModal = (body: ReactNode) =>
-                  handleOpenModal({
-                    cellIndex,
-                    body,
-                    title: tableCellProps?.content,
-                  });
-                align = isFirstCellInRow ? 'left' : 'center';
-              }
-
               return (
                 <TableCell
                   key={cellIndex}
                   isHeader
                   isFirstCellInRow={isFirstCellInRow}
                   isTopLeftCell={isFirstCellInRow}
-                  {...tableCellProps}
-                  {...(isBaseCell
+                  {...tableCellData}
+                  {...(isBaseCell(tableCellData)
                     ? {
-                        openModal,
-                        align,
+                        openModal: (body: ReactNode) =>
+                          openModal?.({
+                            body,
+                            title:
+                              tableCellData.text ||
+                              getModalTitleFromColumnHeader(cellIndex),
+                          }),
+                        align: isFirstCellInRow ? 'left' : 'center',
                       }
                     : {})}
                 />
@@ -97,40 +102,34 @@ const TableSection = ({
           return (
             rowIndex > 0 && (
               <tr key={rowIndex} className={styles.tr}>
-                {row.map((tableCellProps, cellIndex) => {
+                {row.map((tableCellData, cellIndex) => {
                   const key = `${rowIndex}-${cellIndex}`;
                   const isFirstCellInRow = cellIndex === 0;
 
-                  const onCelInfoClick = (body: ReactNode) =>
-                    handleOpenModal({
-                      cellIndex,
-                      body,
-                      title: isFirstCellInRow
-                        ? tableCellProps.content
-                        : undefined,
-                    });
-
-                  let openModal;
-                  let align: Alignment = 'left';
-
-                  const isBaseCell = !tableCellProps.type;
-
-                  if (isBaseCell) {
-                    openModal = onCelInfoClick;
-                    align = isFirstCellInRow ? 'left' : 'center';
-                  }
-
                   return (
                     <TableCell
-                      {...(isBaseCell
+                      isFirstCellInRow={isFirstCellInRow}
+                      key={key}
+                      {...tableCellData}
+                      {...(isBaseCell(tableCellData)
                         ? {
-                            openModal,
-                            align,
+                            openModal: (body: ReactNode) => {
+                              const titleFromRow =
+                                getModalTitleFromRowHeader(row);
+                              const titleFromColumnOrRow =
+                                getModalTitleFromColumnHeader(cellIndex) ||
+                                getModalTitleFromRowHeader(row);
+
+                              return openModal?.({
+                                body,
+                                title: isFirstCellInRow
+                                  ? titleFromRow
+                                  : titleFromColumnOrRow,
+                              });
+                            },
+                            align: isFirstCellInRow ? 'left' : 'center',
                           }
                         : {})}
-                      isFirstCellInRow={isFirstCellInRow}
-                      key={key}
-                      {...tableCellProps}
                     />
                   );
                 })}

package/src/lib/components/table/types.ts

@@ -3,10 +3,17 @@ import { BaseCellProps } from './components/TableCell/BaseCell/BaseCell';
 import { CTACellProps } from './components/TableCell/CTACell/CTACell';
 import { ButtonCellProps } from './components/TableCell/ButtonCell/ButtonCell';
 
-export type TableCellData =
-  | (BaseCellProps & { type?: undefined })
-  | (CTACellProps & { type: 'CTA' })
-  | (ButtonCellProps & { type: 'BUTTON' });
+type BaseCellData = BaseCellProps & { type?: undefined; cellId?: string };
+type CTACellData = CTACellProps & { type: 'CTA'; cellId?: string };
+type ButtonCellData = ButtonCellProps & { type: 'BUTTON'; cellId?: string };
+
+export type TableCellData = BaseCellData | CTACellData | ButtonCellData;
+
+export const isBaseCell = (
+  tableCellData: TableCellData
+): tableCellData is BaseCellData => {
+  return !tableCellData.type;
+};
 
 export type TableSectionType = {
   title?: string;