@popsure/dirty-swan 0.54.3 → 0.54.4

package/dist/esm/components/table/components/TableSection/TableSection.test.js

@@ -1,7 +1,7 @@
 import { a as __assign } from '../../../../tslib.es6-a39f91fc.js';
 import { jsx } from 'react/jsx-runtime';
 import { c as customRender, s as screen } from '../../../../customRender-d03c10b6.js';
-import { TableSection } from './TableSection.js';
+import { T as TableSection } from '../../../../TableSection-f6d0028e.js';
 import 'react';
 import 'react-dom';
 import '../../../../_commonjsHelpers-4730bd53.js';
@@ -25,8 +25,8 @@ import '../TableCell/ButtonCell/ButtonCell.js';
 import '../../../button/index.js';
 
 var 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' }],
 ];
 var mockTitle = 'Test Table';
 var mockOpenModal = jest.fn();

package/dist/esm/components/table/components/TableSection/TableSection.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSection.test.js","sources":["../../../../../../../src/lib/components/table/components/TableSection/TableSection.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableSection, TableSectionProps } from './TableSection';\n\nconst tableCellRows: TableSectionProps['tableCellRows'] = [\n  [{ content: 'Cell 1.1' }, { content: 'Cell 1.2' }, { content: 'Cell 1.3' }],\n  [{ content: 'Cell 2.1' }, { content: 'Cell 2.2' }, { content: 'Cell 2.3' }],\n];\n\nconst mockTitle = 'Test Table';\n\nconst mockOpenModal = jest.fn();\n\nconst defaultProps: TableSectionProps = {\n  tableCellRows,\n  title: mockTitle,\n  openModal: mockOpenModal,\n};\n\ndescribe('TableSection', () => {\n  it('renders the table caption', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText(mockTitle)).toBeInTheDocument();\n  });\n\n  it('renders the table with correct data', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText('Cell 1.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.3')).toBeInTheDocument();\n\n    expect(screen.getByText('Cell 2.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.3')).toBeInTheDocument();\n  });\n\n  it('should render table headers', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const thElements = container.querySelectorAll('th');\n\n    expect(thElements.length).toBe(4);\n    expect(thElements[0]).toHaveTextContent('Cell 1.1');\n    expect(thElements[3]).toHaveTextContent('Cell 2.1');\n  });\n\n  it('should render table data cells', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const tdElements = container.querySelectorAll('td');\n    expect(tdElements.length).toBe(2);\n    expect(tdElements[0]).toHaveTextContent('Cell 2.2');\n    expect(tdElements[1]).toHaveTextContent('Cell 2.3');\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,aAAa,GAAuC;IACxD,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;IAC3E,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;CAC5E,CAAC;AAEF,IAAM,SAAS,GAAG,YAAY,CAAC;AAE/B,IAAM,aAAa,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAEhC,IAAM,YAAY,GAAsB;IACtC,aAAa,eAAA;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,QAAQ,CAAC,cAAc,EAAE;IACvB,EAAE,CAAC,2BAA2B,EAAE;QAC9BA,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,CAAC;QAE3C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KACzD,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE;QACxCD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,CAAC;QAE3C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAEzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC1D,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE;QACxB,IAAA,SAAS,GAAKD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,UAA/C,CAAgD;QAEjE,IAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAEpD,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACrD,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE;QAC3B,IAAA,SAAS,GAAKD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,UAA/C,CAAgD;QAEjE,IAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACrD,CAAC,CAAC;AACL,CAAC,CAAC"}
+{"version":3,"file":"TableSection.test.js","sources":["../../../../../../../src/lib/components/table/components/TableSection/TableSection.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableSection, TableSectionProps } from './TableSection';\n\nconst tableCellRows: TableSectionProps['tableCellRows'] = [\n  [{ text: 'Cell 1.1' }, { text: 'Cell 1.2' }, { text: 'Cell 1.3' }],\n  [{ text: 'Cell 2.1' }, { text: 'Cell 2.2' }, { text: 'Cell 2.3' }],\n];\n\nconst mockTitle = 'Test Table';\n\nconst mockOpenModal = jest.fn();\n\nconst defaultProps: TableSectionProps = {\n  tableCellRows,\n  title: mockTitle,\n  openModal: mockOpenModal,\n};\n\ndescribe('TableSection', () => {\n  it('renders the table caption', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText(mockTitle)).toBeInTheDocument();\n  });\n\n  it('renders the table with correct data', () => {\n    render(<TableSection {...defaultProps} />);\n\n    expect(screen.getByText('Cell 1.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 1.3')).toBeInTheDocument();\n\n    expect(screen.getByText('Cell 2.1')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.2')).toBeInTheDocument();\n    expect(screen.getByText('Cell 2.3')).toBeInTheDocument();\n  });\n\n  it('should render table headers', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const thElements = container.querySelectorAll('th');\n\n    expect(thElements.length).toBe(4);\n    expect(thElements[0]).toHaveTextContent('Cell 1.1');\n    expect(thElements[3]).toHaveTextContent('Cell 2.1');\n  });\n\n  it('should render table data cells', () => {\n    const { container } = render(<TableSection {...defaultProps} />);\n\n    const tdElements = container.querySelectorAll('td');\n    expect(tdElements.length).toBe(2);\n    expect(tdElements[0]).toHaveTextContent('Cell 2.2');\n    expect(tdElements[1]).toHaveTextContent('Cell 2.3');\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,aAAa,GAAuC;IACxD,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;IAClE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;CACnE,CAAC;AAEF,IAAM,SAAS,GAAG,YAAY,CAAC;AAE/B,IAAM,aAAa,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAEhC,IAAM,YAAY,GAAsB;IACtC,aAAa,eAAA;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,aAAa;CACzB,CAAC;AAEF,QAAQ,CAAC,cAAc,EAAE;IACvB,EAAE,CAAC,2BAA2B,EAAE;QAC9BA,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,CAAC;QAE3C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KACzD,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE;QACxCD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,CAAC;QAE3C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAEzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;KAC1D,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE;QACxB,IAAA,SAAS,GAAKD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,UAA/C,CAAgD;QAEjE,IAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAEpD,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACrD,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE;QAC3B,IAAA,SAAS,GAAKD,YAAM,CAACC,IAAC,YAAY,eAAK,YAAY,EAAI,CAAC,UAA/C,CAAgD;QAEjE,IAAM,UAAU,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAClC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;QACpD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACrD,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/esm/index.js

@@ -428,7 +428,7 @@ import './components/table/components/TableCell/CTACell/CTACell.js';
 import './components/table/components/TableCell/ButtonCell/ButtonCell.js';
 import './Collapsible-a355828b.js';
 import './components/table/components/TableContents/TableContents.js';
-import './components/table/components/TableSection/TableSection.js';
+import './TableSection-f6d0028e.js';
 import './useTableNavigation-2899712c.js';
 import './components/table/components/TableControls/TableControls.js';
 import './useScrollSync-b2d28bed.js';

package/dist/esm/lib/components/table/components/TableCell/BaseCell/BaseCell.d.ts

@@ -1,17 +1,17 @@
 import { ReactNode } from 'react';
-export type ContentFontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';
+export type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';
 export type Alignment = 'center' | 'left' | 'right';
 export type BaseCellProps = {
     align?: Alignment;
     checkmarkValue?: boolean;
-    content?: ReactNode;
+    fontVariant?: FontVariant;
+    description?: ReactNode;
     modalContent?: ReactNode;
     openModal?: (modalContent: ReactNode) => void;
-    subContent?: ReactNode;
+    text?: ReactNode;
     rating?: {
         value: number;
         type: 'zap' | 'star';
     };
-    contentFontVariant?: ContentFontVariant;
 };
-export declare const BaseCell: ({ align, checkmarkValue, content, modalContent, openModal, rating, subContent, contentFontVariant, }: BaseCellProps) => JSX.Element;
+export declare const BaseCell: ({ align, checkmarkValue, fontVariant, description, modalContent, openModal, rating, text, }: BaseCellProps) => JSX.Element;

package/dist/esm/lib/components/table/components/TableCell/BaseCell/BaseCell.stories.d.ts

@@ -1,22 +1,22 @@
 import { BaseCell } from './BaseCell';
 declare const story: {
     title: string;
-    component: ({ align, checkmarkValue, content, modalContent, openModal, rating, subContent, contentFontVariant, }: import("./BaseCell").BaseCellProps) => JSX.Element;
+    component: ({ align, checkmarkValue, fontVariant, description, modalContent, openModal, rating, text, }: import("./BaseCell").BaseCellProps) => JSX.Element;
     argTypes: {};
     args: {
+        text: string;
+        description: string;
+        modalContent: string;
+        fontVariant: string;
+        checkmarkValue: undefined;
         rating: {
             value: number;
             type: string;
         };
-        content: string;
-        subContent: string;
-        modalContent: string;
-        checkmarkValue: undefined;
-        contentFontVariant: string;
     };
 };
 export declare const BaseCellStory: {
-    ({ content, subContent, modalContent, checkmarkValue, rating, contentFontVariant, align, }: React.ComponentProps<typeof BaseCell>): JSX.Element;
+    ({ text, description, modalContent, checkmarkValue, rating, fontVariant, align, }: React.ComponentProps<typeof BaseCell>): JSX.Element;
     storyName: string;
 };
 export default story;

package/dist/esm/lib/components/table/components/TableCell/ButtonCell/ButtonCell.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 export type ButtonCellProps = {
-    content?: ReactNode;
+    buttonCaption: ReactNode;
     disabled?: boolean;
     isSelected?: boolean;
     onClick: () => void;
-    subContent?: ReactNode;
+    price?: ReactNode;
 };
-export declare const ButtonCell: ({ isSelected, onClick, content, subContent, disabled, }: ButtonCellProps) => JSX.Element;
+export declare const ButtonCell: ({ isSelected, onClick, buttonCaption, price, disabled, }: ButtonCellProps) => JSX.Element;

package/dist/esm/lib/components/table/components/TableCell/ButtonCell/ButtonCell.stories.d.ts

@@ -1,17 +1,17 @@
 import { ButtonCell } from './ButtonCell';
 declare const story: {
     title: string;
-    component: ({ isSelected, onClick, content, subContent, disabled, }: import("./ButtonCell").ButtonCellProps) => JSX.Element;
+    component: ({ isSelected, onClick, buttonCaption, price, disabled, }: import("./ButtonCell").ButtonCellProps) => JSX.Element;
     argTypes: {};
     args: {
+        buttonCaption: string;
+        price: string;
         isSelected: boolean;
-        content: string;
-        subContent: string;
         disabled: boolean;
     };
 };
 export declare const ButtonCellStory: {
-    ({ isSelected, content, subContent, disabled, }: React.ComponentProps<typeof ButtonCell>): JSX.Element;
+    ({ isSelected, buttonCaption, price, disabled, }: React.ComponentProps<typeof ButtonCell>): JSX.Element;
     storyName: string;
 };
 export default story;

package/dist/esm/lib/components/table/components/TableCell/CTACell/CTACell.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 export type CTACellProps = {
-    content?: ReactNode;
-    subContent?: ReactNode;
+    title: ReactNode;
+    price?: ReactNode;
+    buttonCaption?: ReactNode;
     grey?: boolean;
     narrow?: boolean;
     href: string;
 };
-export declare const CTACell: ({ content, subContent, grey, narrow, href, }: CTACellProps) => JSX.Element;
+export declare const CTACell: ({ title, price, grey, narrow, href, buttonCaption, }: CTACellProps) => JSX.Element;

package/dist/esm/lib/components/table/components/TableCell/CTACell/CTACell.stories.d.ts

@@ -1,17 +1,18 @@
 import { CTACell } from './CTACell';
 declare const story: {
     title: string;
-    component: ({ content, subContent, grey, narrow, href, }: import("./CTACell").CTACellProps) => JSX.Element;
+    component: ({ title, price, grey, narrow, href, buttonCaption, }: import("./CTACell").CTACellProps) => JSX.Element;
     argTypes: {};
     args: {
-        content: string;
-        subContent: string;
+        title: string;
+        price: string;
+        buttonCaption: string;
         grey: boolean;
         narrow: boolean;
     };
 };
 export declare const CTACellStory: {
-    ({ content, subContent, grey, narrow, }: React.ComponentProps<typeof CTACell>): JSX.Element;
+    ({ title, price, buttonCaption, grey, narrow, }: React.ComponentProps<typeof CTACell>): JSX.Element;
     storyName: string;
 };
 export default story;

package/dist/esm/lib/components/table/types.d.ts

@@ -2,13 +2,20 @@ import { ReactNode } from 'react';
 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 BaseCellData = BaseCellProps & {
     type?: undefined;
-}) | (CTACellProps & {
+    cellId?: string;
+};
+type CTACellData = CTACellProps & {
     type: 'CTA';
-}) | (ButtonCellProps & {
+    cellId?: string;
+};
+type ButtonCellData = ButtonCellProps & {
     type: 'BUTTON';
-});
+    cellId?: string;
+};
+export type TableCellData = BaseCellData | CTACellData | ButtonCellData;
+export declare const isBaseCell: (tableCellData: TableCellData) => tableCellData is BaseCellData;
 export type TableSectionType = {
     title?: string;
     icon?: ReactNode;
@@ -24,3 +31,4 @@ export type TableSectionData = {
 };
 export type TableData = TableSectionData[];
 export type ModalFunction = (modalData: ModalData) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.54.3",
+  "version": "0.54.4",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

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

@@ -1,69 +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' },
+        { text: 'Our plans' },
         {
           type: 'CTA',
-          content: 'Standard',
-          subContent: '€234',
+          title: 'Standard',
+          price: '€234',
+          buttonCaption: 'Get covered',
           href: 'http://example.com',
         },
         {
           type: 'CTA',
-          content: 'Plus',
-          subContent: '€344',
+          title: 'Plus',
+          price: '€344',
+          buttonCaption: 'Get covered',
           href: 'http://example.com',
         },
         {
           type: 'CTA',
-          content: 'Premium',
-          subContent: '€556',
+          title: 'Premium',
+          price: '€556',
+          buttonCaption: 'Get covered',
           href: 'http://example.com',
         },
       ],
       [
-        { content: 'Select a plan' },
+        { text: 'Select a plan' },
         {
           type: 'BUTTON',
-          content: 'Standard',
-          subContent: '€234',
+          buttonCaption: 'Standard',
+          price: '€234',
           onClick: () => {},
         },
         {
           type: 'BUTTON',
-          content: 'Plus',
-          subContent: '€344',
+          buttonCaption: 'Plus',
+          price: '€344',
           onClick: () => {},
         },
         {
           type: 'BUTTON',
-          content: 'Premium',
-          subContent: '€556',
+          buttonCaption: 'Premium',
+          price: '€556',
           onClick: () => {},
         },
       ],
       [
         {
-          content: 'Regular vet visits & medication',
-          subContent: 'Annual Only',
+          text: 'Your contribution',
         },
-        { content: 'No', subContent: 'Annual Only' },
-        { content: '50%' },
-        { content: '80%-100%' },
+        {
+          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',
+        },
+      ],
+      [
+        {
+          text: 'Regular vet visits & medication',
+          description: 'Annual Only',
+        },
+        { 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 },
@@ -80,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 } },
@@ -106,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 } },
@@ -216,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' }],
     ],
   },
 ];

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

@@ -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;
@@ -70,17 +70,6 @@ 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 ? (
@@ -92,9 +81,13 @@ const Table = ({
         >
           <TableCell
             {...currentActiveSection}
-            {...(isBaseCell
+            {...(isBaseCell(currentActiveSection)
               ? {
-                  openModal,
+                  openModal: (body: ReactNode) =>
+                    handleOpenModal({
+                      body,
+                      title: currentActiveSection?.text,
+                    }),
                 }
               : {})}
             isNavigation

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

@@ -5,37 +5,37 @@ const story = {
   component: BaseCell,
   argTypes: {},
   args: {
+    text: 'For dogs',
+    description: 'Annual only',
+    modalContent: 'More info',
+    fontVariant: 'NORMAL',
+    checkmarkValue: undefined,
     rating: {
       value: 2,
       type: 'zap',
     },
-    content: 'For dogs',
-    subContent: 'Annual only',
-    modalContent: 'More info',
-    checkmarkValue: undefined,
-    contentFontVariant: 'NORMAL',
   },
 };
 
 export const BaseCellStory = ({
-  content,
-  subContent,
+  text,
+  description,
   modalContent,
   checkmarkValue,
   rating,
-  contentFontVariant,
+  fontVariant,
   align,
 }: React.ComponentProps<typeof BaseCell>) => (
   <div className="p48 d-flex fd-column gap16 bg-white">
     <BaseCell
       align={align}
       checkmarkValue={checkmarkValue}
-      content={content}
-      contentFontVariant={contentFontVariant}
+      fontVariant={fontVariant}
+      description={description}
       modalContent={modalContent}
       openModal={() => {}}
       rating={rating}
-      subContent={subContent}
+      text={text}
     />
   </div>
 );

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

@@ -1,9 +1,7 @@
 import classNames from 'classnames';
-import { Button } from '../../../../button';
 import {
   CheckIcon,
   XIcon,
-  InfoIcon,
   StarFilledIcon,
   ZapFilledIcon,
 } from '../../../../icon';
@@ -12,7 +10,7 @@ import styles from './BaseCell.module.scss';
 import { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';
 import { TableInfoButton } from '../../../../comparisonTable';
 
-export type ContentFontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';
+export type FontVariant = 'NORMAL' | 'BIG_WITH_UNDERLINE' | 'PRICE';
 
 const progressLookup: Record<string, number> = {
   '30%': 1,
@@ -32,26 +30,26 @@ export type Alignment = 'center' | 'left' | 'right';
 export type BaseCellProps = {
   align?: Alignment;
   checkmarkValue?: boolean;
-  content?: ReactNode;
+  fontVariant?: FontVariant;
+  description?: ReactNode;
   modalContent?: ReactNode;
   openModal?: (modalContent: ReactNode) => void;
-  subContent?: ReactNode;
+  text?: ReactNode;
   rating?: {
     value: number;
     type: 'zap' | 'star';
   };
-  contentFontVariant?: ContentFontVariant;
 };
 
 export const BaseCell = ({
   align = 'center',
   checkmarkValue,
-  content = '',
+  fontVariant = 'NORMAL',
+  description = '',
   modalContent = '',
   openModal,
   rating,
-  subContent = '',
-  contentFontVariant = 'NORMAL',
+  text = '',
 }: BaseCellProps) => {
   const alignClassName = {
     center: 'ta-center jc-center ai-center',
@@ -63,7 +61,7 @@ export const BaseCell = ({
   const SelectedIcon = rating?.type === 'zap' ? ZapFilledIcon : StarFilledIcon;
 
   const progressBarValue =
-    typeof content === 'string' ? progressLookup[content] : undefined;
+    typeof text === 'string' ? progressLookup[text] : undefined;
 
   return (
     <div
@@ -113,22 +111,22 @@ export const BaseCell = ({
             </span>
           )}
 
-          {content && contentFontVariant === 'NORMAL' && (
-            <div className="p-p" data-testid="table-cell-content">
-              {content}
+          {text && fontVariant === 'NORMAL' && (
+            <div className="p-p" data-testid="table-cell-text">
+              {text}
             </div>
           )}
 
-          {content && contentFontVariant === 'PRICE' && (
+          {text && fontVariant === 'PRICE' && (
             <div
               className="p-h1 p--serif tc-primary-500"
               data-testid="table-cell-content"
             >
-              {content}
+              {text}
             </div>
           )}
 
-          {content && contentFontVariant === 'BIG_WITH_UNDERLINE' && (
+          {text && fontVariant === 'BIG_WITH_UNDERLINE' && (
             <div
               aria-hidden
               className={classNames(
@@ -136,19 +134,19 @@ export const BaseCell = ({
                 styles.bigWithUnderline
               )}
             >
-              {content}
+              {text}
             </div>
           )}
         </div>
 
-        {subContent && (
+        {description && (
           <div
             className={classNames(
               'd-flex p-p--small tc-grey-500',
               alignClassName
             )}
           >
-            {subContent}
+            {description}
           </div>
         )}
       </div>

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

@@ -28,11 +28,11 @@
   }
 }
 
-.withoutSubContent {
+.withoutPrice {
   height: 64px;
 }
 
-.withSubContent {
+.withPrice {
   height: 75px;
 }