@popsure/dirty-swan 0.66.22 → 0.66.24

package/dist/esm/components/table/components/TableCell/TableCell.js

@@ -27,8 +27,8 @@ import '../../../icon/icons/ChevronRight.js';
 import '../../../icon/icons/CircleSelected.js';
 import '../../../icon/icons/CircleUnselected.js';
 
-var css_248z = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_navigationTitle__2FiRB {\n  padding-left: 0;\n}\n\n.TableCell-module_headerCell__aVTIn {\n  vertical-align: top;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
-var styles = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","navigationTitle":"TableCell-module_navigationTitle__2FiRB","headerCell":"TableCell-module_headerCell__aVTIn","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
+var css_248z = ".TableCell-module_th__2rjCU {\n  vertical-align: middle;\n  scroll-snap-align: end;\n  width: 50%;\n  padding: 28px 24px;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_th__2rjCU {\n    width: auto;\n    scroll-snap-align: unset;\n  }\n}\n.TableCell-module_thNavigation__qZ2sY {\n  width: 100%;\n}\n@media (min-width: 34rem) {\n  .TableCell-module_thNavigation__qZ2sY {\n    width: auto;\n  }\n}\n\n.TableCell-module_navigationTitle__2FiRB {\n  padding-left: 0;\n}\n\n.TableCell-module_headerCell__aVTIn {\n  vertical-align: top;\n}\n\n.TableCell-module_subtitleCell__1DzfG {\n  vertical-align: middle;\n}\n\n.TableCell-module_fixedCell__cL3-m {\n  position: sticky;\n  left: 0;\n  z-index: 2;\n  padding-left: 0;\n}\n\n.TableCell-module_selectedColumnTop__1GcJz {\n  border-radius: 16px 16px 0 0;\n}\n\n.TableCell-module_selectedColumnBottom__qiMke {\n  border-radius: 0 0 16px 16px;\n}\n\n.TableCell-module_fixedCard__2LO8s {\n  position: sticky;\n  left: 0;\n  right: 0;\n  z-index: 2;\n  width: 100%;\n}";
+var styles = {"th":"TableCell-module_th__2rjCU","thNavigation":"TableCell-module_thNavigation__qZ2sY","navigationTitle":"TableCell-module_navigationTitle__2FiRB","headerCell":"TableCell-module_headerCell__aVTIn","subtitleCell":"TableCell-module_subtitleCell__1DzfG","fixedCell":"TableCell-module_fixedCell__cL3-m","selectedColumnTop":"TableCell-module_selectedColumnTop__1GcJz","selectedColumnBottom":"TableCell-module_selectedColumnBottom__qiMke","fixedCard":"TableCell-module_fixedCard__2LO8s"};
 styleInject(css_248z);
 
 var TableCell = React__default.memo(function (_a) {
@@ -50,15 +50,14 @@ var TableCell = React__default.memo(function (_a) {
                 'ta-left': isFirstCellInRow
             },
             _b[styles.headerCell] = isHeader,
+            _b[styles.subtitleCell] = !cellProps.type && cellProps.fontVariant === 'SUBTITLE',
             _b[styles.thNavigation] = isNavigation,
             _b[styles.navigationTitle] = isNavigation && isTopLeftCell,
             _b[styles.fixedCell] = isFirstCellInRow && colSpan < 1,
             _b[styles.fixedCard] = cellProps.type === 'CARD',
             _b[styles.selectedColumnTop] = selectedColumnPosition === 'top',
             _b[styles.selectedColumnBottom] = selectedColumnPosition === 'bottom',
-            _b)), colSpan: isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan, children: [!cellProps.type && (jsx(BaseCell, __assign({}, cellProps, { fontVariant: isTopLeftCell
-                    ? 'TITLE'
-                    : (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : 'NORMAL' }))), cellProps.type === 'CTA' && (jsx(CTACell, __assign({}, cellProps, { centered: isNavigation }))), cellProps.type === 'BUTTON' && jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsx(CardCell, __assign({}, cellProps))] })));
+            _b)), colSpan: isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan, children: [!cellProps.type && (jsx(BaseCell, __assign({}, cellProps, { fontVariant: (_c = cellProps.fontVariant) !== null && _c !== void 0 ? _c : (isTopLeftCell ? 'TITLE' : 'NORMAL') }))), cellProps.type === 'CTA' && (jsx(CTACell, __assign({}, cellProps, { centered: isNavigation }))), cellProps.type === 'BUTTON' && jsx(ButtonCell, __assign({}, cellProps)), cellProps.type === 'CARD' && jsx(CardCell, __assign({}, cellProps))] })));
 });
 
 export { TableCell };

package/dist/esm/components/table/components/TableCell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { CardCell } from './CardCell/CardCell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\nimport React from 'react';\n\ntype ExtraTableCellProps = {\n  isHeader?: boolean;\n  isFirstCellInRow?: boolean;\n  isTopLeftCell?: boolean;\n  isNavigation?: boolean;\n  isSelectedColumn?: boolean;\n  selectedColumnPosition?: 'top' | 'bottom' | 'middle';\n  imageComponent?: (args: any) => JSX.Element;\n  isBelowDesktop?: boolean;\n};\n\nexport type TableCellProps = TableCellData & ExtraTableCellProps;\n\nconst TableCell = React.memo(\n  ({\n    isFirstCellInRow = false,\n    isHeader = false,\n    isNavigation = false,\n    isSelectedColumn = false,\n    selectedColumnPosition,\n    isTopLeftCell = false,\n    colSpan = 0,\n    isBelowDesktop,\n    ...cellProps\n  }: TableCellProps) => {\n    // prettier-ignore\n    const Tag = isNavigation\n    ? 'div'\n    : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n    // prettier-ignore\n    const thScope = isHeader\n    ? 'col'\n    : isFirstCellInRow ? 'row' : undefined;\n\n    const scope = {\n      scope: thScope,\n    };\n\n    return (\n      <Tag\n        {...scope}\n        className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {\n          'ta-left': isFirstCellInRow,\n          [styles.headerCell]: isHeader,\n          [styles.thNavigation]: isNavigation,\n          [styles.navigationTitle]: isNavigation && isTopLeftCell,\n          [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,\n          [styles.fixedCard]: cellProps.type === 'CARD',\n          [styles.selectedColumnTop]: selectedColumnPosition === 'top',\n          [styles.selectedColumnBottom]: selectedColumnPosition === 'bottom',\n        })}\n        colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}\n      >\n        {!cellProps.type && (\n          <BaseCell\n            {...cellProps}\n            fontVariant={\n              isTopLeftCell\n                ? 'TITLE'\n                : cellProps.fontVariant ?? 'NORMAL'\n            }\n          />\n        )}\n        {cellProps.type === 'CTA' && (\n          <CTACell {...cellProps} centered={isNavigation} />\n        )}\n        {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n        {cellProps.type === 'CARD' && <CardCell {...cellProps} />}\n      </Tag>\n    );\n  }\n);\n\nexport { TableCell };\n"],"names":["React","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"TableCell.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './TableCell.module.scss';\nimport { BaseCell } from './BaseCell/BaseCell';\nimport { TableCellData } from '../../types';\nimport { CTACell } from './CTACell/CTACell';\nimport { CardCell } from './CardCell/CardCell';\nimport { ButtonCell } from './ButtonCell/ButtonCell';\nimport React from 'react';\n\ntype ExtraTableCellProps = {\n  isHeader?: boolean;\n  isFirstCellInRow?: boolean;\n  isTopLeftCell?: boolean;\n  isNavigation?: boolean;\n  isSelectedColumn?: boolean;\n  selectedColumnPosition?: 'top' | 'bottom' | 'middle';\n  imageComponent?: (args: any) => JSX.Element;\n  isBelowDesktop?: boolean;\n};\n\nexport type TableCellProps = TableCellData & ExtraTableCellProps;\n\nconst TableCell = React.memo(\n  ({\n    isFirstCellInRow = false,\n    isHeader = false,\n    isNavigation = false,\n    isSelectedColumn = false,\n    selectedColumnPosition,\n    isTopLeftCell = false,\n    colSpan = 0,\n    isBelowDesktop,\n    ...cellProps\n  }: TableCellProps) => {\n    // prettier-ignore\n    const Tag = isNavigation\n    ? 'div'\n    : isHeader || isFirstCellInRow ? 'th' : 'td';\n\n    // prettier-ignore\n    const thScope = isHeader\n    ? 'col'\n    : isFirstCellInRow ? 'row' : undefined;\n\n    const scope = {\n      scope: thScope,\n    };\n\n    return (\n      <Tag\n        {...scope}\n        className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {\n          'ta-left': isFirstCellInRow,\n          [styles.headerCell]: isHeader,\n          [styles.subtitleCell]:\n            !cellProps.type && cellProps.fontVariant === 'SUBTITLE',\n          [styles.thNavigation]: isNavigation,\n          [styles.navigationTitle]: isNavigation && isTopLeftCell,\n          [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,\n          [styles.fixedCard]: cellProps.type === 'CARD',\n          [styles.selectedColumnTop]: selectedColumnPosition === 'top',\n          [styles.selectedColumnBottom]: selectedColumnPosition === 'bottom',\n        })}\n        colSpan={isBelowDesktop && cellProps.type === 'CARD' ? 2 : colSpan}\n      >\n        {!cellProps.type && (\n          <BaseCell\n            {...cellProps}\n            fontVariant={\n              cellProps.fontVariant ?? (isTopLeftCell ? 'TITLE' : 'NORMAL')\n            }\n          />\n        )}\n        {cellProps.type === 'CTA' && (\n          <CTACell {...cellProps} centered={isNavigation} />\n        )}\n        {cellProps.type === 'BUTTON' && <ButtonCell {...cellProps} />}\n        {cellProps.type === 'CARD' && <CardCell {...cellProps} />}\n      </Tag>\n    );\n  }\n);\n\nexport { TableCell };\n"],"names":["React","_jsxs","_jsx"],"mappings":"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"}

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

@@ -86,5 +86,19 @@ describe('TableCell', function () {
             title: '',
         });
     });
+    it('renders the top left cell as a title by default', function () {
+        setup({ isTopLeftCell: true, text: 'Choose a plan' });
+        expect(screen.getByText('Choose a plan')).toHaveClass('p-h2');
+    });
+    it('lets fontVariant override the top left cell title', function () {
+        setup({
+            isTopLeftCell: true,
+            fontVariant: 'SUBTITLE',
+            text: 'Choose a plan',
+        });
+        var cellText = screen.getByText('Choose a plan');
+        expect(cellText).toHaveClass('p-h4');
+        expect(cellText).not.toHaveClass('p-h2');
+    });
 });
 //# sourceMappingURL=TableCell.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.test.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableCell, TableCellProps } from './TableCell';\n\nconst openModal = jest.fn();\n\nconst setup = ({ isNavigation, ...rest }: TableCellProps = {}) =>\n  render(\n    isNavigation ? (\n      <TableCell {...rest} isNavigation />\n    ) : (\n      <table>\n        <tbody>\n          <tr>\n            <TableCell {...rest} />\n          </tr>\n        </tbody>\n      </table>\n    )\n  );\n\ndescribe('TableCell', () => {\n  it('renders the component with boolean true', () => {\n    setup({ checkmarkValue: true });\n\n    expect(screen.getByTitle('Yes')).toBeInTheDocument();\n    expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();\n  });\n\n  it('renders the component with boolean false', () => {\n    setup({ checkmarkValue: false });\n\n    expect(screen.getByTitle('No')).toBeInTheDocument();\n    expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();\n  });\n\n  it('renders the component without boolean', () => {\n    setup();\n\n    expect(screen.queryByTitle('Yes')).not.toBeInTheDocument();\n    expect(screen.queryByTitle('No')).not.toBeInTheDocument();\n    expect(\n      screen.queryByTestId('table-cell-boolean-yes')\n    ).not.toBeInTheDocument();\n    expect(\n      screen.queryByTestId('table-cell-boolean-no')\n    ).not.toBeInTheDocument();\n  });\n\n  it('renders the component with rating', () => {\n    setup({ rating: { type: 'star', value: 2 } });\n\n    expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();\n  });\n\n  it('renders the component without rating', () => {\n    setup();\n\n    expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();\n  });\n\n  it('renders the component with text', () => {\n    setup({ text: 'Sample text' });\n\n    expect(screen.getByText('Sample text')).toBeInTheDocument();\n  });\n\n  it('renders the component without text', () => {\n    setup();\n\n    expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();\n  });\n\n  it('renders the component without info', () => {\n    setup();\n\n    expect(screen.queryByText('View more info')).not.toBeInTheDocument();\n  });\n\n  it('calls openModal when info button is clicked', () => {\n    setup({ modalContent: 'Additional information', openModal });\n\n    // Click info button\n    screen.getByTestId('ds-table-info-button').click();\n\n    // Assert openModal is called with info prop\n    expect(openModal).toHaveBeenCalledWith({\n      body: 'Additional information',\n      title: '',\n    });\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}
+{"version":3,"file":"TableCell.test.js","sources":["../../../../../../../src/lib/components/table/components/TableCell/TableCell.test.tsx"],"sourcesContent":["import { render, screen } from '../../../../util/testUtils';\nimport { TableCell, TableCellProps } from './TableCell';\n\nconst openModal = jest.fn();\n\nconst setup = ({ isNavigation, ...rest }: TableCellProps = {}) =>\n  render(\n    isNavigation ? (\n      <TableCell {...rest} isNavigation />\n    ) : (\n      <table>\n        <tbody>\n          <tr>\n            <TableCell {...rest} />\n          </tr>\n        </tbody>\n      </table>\n    )\n  );\n\ndescribe('TableCell', () => {\n  it('renders the component with boolean true', () => {\n    setup({ checkmarkValue: true });\n\n    expect(screen.getByTitle('Yes')).toBeInTheDocument();\n    expect(screen.getByTestId('table-cell-boolean-yes')).toBeInTheDocument();\n  });\n\n  it('renders the component with boolean false', () => {\n    setup({ checkmarkValue: false });\n\n    expect(screen.getByTitle('No')).toBeInTheDocument();\n    expect(screen.getByTestId('table-cell-boolean-no')).toBeInTheDocument();\n  });\n\n  it('renders the component without boolean', () => {\n    setup();\n\n    expect(screen.queryByTitle('Yes')).not.toBeInTheDocument();\n    expect(screen.queryByTitle('No')).not.toBeInTheDocument();\n    expect(\n      screen.queryByTestId('table-cell-boolean-yes')\n    ).not.toBeInTheDocument();\n    expect(\n      screen.queryByTestId('table-cell-boolean-no')\n    ).not.toBeInTheDocument();\n  });\n\n  it('renders the component with rating', () => {\n    setup({ rating: { type: 'star', value: 2 } });\n\n    expect(screen.getByTitle('2 out of 3')).toBeInTheDocument();\n  });\n\n  it('renders the component without rating', () => {\n    setup();\n\n    expect(screen.queryByTestId('table-cell-rating')).not.toBeInTheDocument();\n  });\n\n  it('renders the component with text', () => {\n    setup({ text: 'Sample text' });\n\n    expect(screen.getByText('Sample text')).toBeInTheDocument();\n  });\n\n  it('renders the component without text', () => {\n    setup();\n\n    expect(screen.queryByTestId('table-cell-text')).not.toBeInTheDocument();\n  });\n\n  it('renders the component without info', () => {\n    setup();\n\n    expect(screen.queryByText('View more info')).not.toBeInTheDocument();\n  });\n\n  it('calls openModal when info button is clicked', () => {\n    setup({ modalContent: 'Additional information', openModal });\n\n    // Click info button\n    screen.getByTestId('ds-table-info-button').click();\n\n    // Assert openModal is called with info prop\n    expect(openModal).toHaveBeenCalledWith({\n      body: 'Additional information',\n      title: '',\n    });\n  });\n\n  it('renders the top left cell as a title by default', () => {\n    setup({ isTopLeftCell: true, text: 'Choose a plan' });\n\n    expect(screen.getByText('Choose a plan')).toHaveClass('p-h2');\n  });\n\n  it('lets fontVariant override the top left cell title', () => {\n    setup({\n      isTopLeftCell: true,\n      fontVariant: 'SUBTITLE',\n      text: 'Choose a plan',\n    });\n\n    const cellText = screen.getByText('Choose a plan');\n    expect(cellText).toHaveClass('p-h4');\n    expect(cellText).not.toHaveClass('p-h2');\n  });\n});\n"],"names":["render","_jsx"],"mappings":"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"}

package/dist/esm/components/table/components/TableContents/Collapsible.js

@@ -8,6 +8,18 @@ var css_248z = ".Collapsible-module_collapsible__2wWKs {\n  display: flow-root;\
 var styles = {"collapsible":"Collapsible-module_collapsible__2wWKs"};
 styleInject(css_248z);
 
+var measureHeight = function (element) {
+    var height = 0;
+    for (var _i = 0, _a = Array.from(element.children); _i < _a.length; _i++) {
+        var child = _a[_i];
+        var childStyles = getComputedStyle(child);
+        height +=
+            child.getBoundingClientRect().height +
+                (parseFloat(childStyles.marginTop) || 0) +
+                (parseFloat(childStyles.marginBottom) || 0);
+    }
+    return Math.ceil(height);
+};
 var Collapsible = function (_a) {
     var _b;
     var children = _a.children, isExpanded = _a.isExpanded, onTransitionEnd = _a.onTransitionEnd;
@@ -16,24 +28,23 @@ var Collapsible = function (_a) {
     var containerRef = useRef(null);
     useEffect(function () {
         if (!observerRef.current) {
-            observerRef.current = new ResizeObserver(function (entries) {
-                entries.forEach(function (entry) {
-                    var scrollheight = entry.target.scrollHeight;
-                    setHeight(scrollheight);
-                });
+            observerRef.current = new ResizeObserver(function () {
+                if (containerRef.current) {
+                    setHeight(measureHeight(containerRef.current));
+                }
             });
         }
         if (containerRef.current) {
             observerRef.current.observe(containerRef.current);
-            var scrollheight = containerRef.current.scrollHeight;
-            setHeight(scrollheight);
+            Array.from(containerRef.current.children).forEach(function (child) {
+                var _a;
+                (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.observe(child);
+            });
+            setHeight(measureHeight(containerRef.current));
         }
         return function () {
-            var _a, _b;
-            if (containerRef.current) {
-                (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(containerRef.current);
-            }
-            (_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.disconnect();
+            var _a;
+            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
         };
     }, [containerRef.current]);
     return (jsx("div", { className: classNames(styles.collapsible, (_b = {},

package/dist/esm/components/table/components/TableContents/Collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/Collapsible.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport styles from './Collapsible.module.scss';\nimport classNames from 'classnames';\ninterface CollapsibleProps {\n  children: ReactNode;\n  isExpanded?: boolean;\n  onTransitionEnd?: () => void;\n}\n\nexport const Collapsible = ({ children, isExpanded, onTransitionEnd }: CollapsibleProps) => {\n  const [height, setHeight] = useState<number | undefined>();\n\n  const observerRef = useRef<ResizeObserver | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!observerRef.current) {\n      observerRef.current = new ResizeObserver((entries) => {\n        entries.forEach((entry) => {\n          const scrollheight = entry.target.scrollHeight;\n\n          setHeight(scrollheight);\n        });\n      });\n    }\n    if (containerRef.current) {\n      observerRef.current.observe(containerRef.current);\n      const scrollheight = containerRef.current.scrollHeight;\n      setHeight(scrollheight);\n    }\n\n    return () => {\n      if (containerRef.current) {\n        observerRef.current?.unobserve(containerRef.current);\n      }\n      observerRef.current?.disconnect();\n    };\n  }, [containerRef.current]);\n\n  return (\n    <div\n      className={classNames(styles.collapsible, {\n        [styles.hideDelayed]: !isExpanded,\n      })}\n      ref={containerRef}\n      style={{\n        maxHeight: isExpanded ? height : '0px',\n      }}\n      onTransitionEnd={isExpanded ? onTransitionEnd : undefined}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AASO,IAAM,WAAW,GAAG,UAAC,EAA2D,EAAA;;AAAzD,IAAA,IAAA,QAAQ,cAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,eAAe,GAAA,EAAA,CAAA,eAAA;IAC3D,IAAA,EAAA,GAAsB,QAAQ,EAAsB,EAAnD,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAkC;AAE1D,IAAA,IAAM,WAAW,GAAG,MAAM,CAAwB,IAAI,CAAC;AACvD,IAAA,IAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;AAExD,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;AACxB,YAAA,WAAW,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,UAAC,OAAO,EAAA;AAC/C,gBAAA,OAAO,CAAC,OAAO,CAAC,UAAC,KAAK,EAAA;AACpB,oBAAA,IAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY;oBAE9C,SAAS,CAAC,YAAY,CAAC;AACzB,gBAAA,CAAC,CAAC;AACJ,YAAA,CAAC,CAAC;QACJ;AACA,QAAA,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AACjD,YAAA,IAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY;YACtD,SAAS,CAAC,YAAY,CAAC;QACzB;QAEA,OAAO,YAAA;;AACL,YAAA,IAAI,YAAY,CAAC,OAAO,EAAE;gBACxB,CAAA,EAAA,GAAA,WAAW,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,CAAC,YAAY,CAAC,OAAO,CAAC;YACtD;AACA,YAAA,CAAA,EAAA,GAAA,WAAW,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,EAAE;AACnC,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1B,QACEA,aACE,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AACtC,YAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAA,GAAG,CAAC,UAAU;AACjC,YAAA,EAAA,EAAA,EACF,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;YACL,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK;AACvC,SAAA,EACD,eAAe,EAAE,UAAU,GAAG,eAAe,GAAG,SAAS,EAAA,QAAA,EAExD,QAAQ,EAAA,CACL;AAEV;;;;"}
+{"version":3,"file":"Collapsible.js","sources":["../../../../../../../src/lib/components/table/components/TableContents/Collapsible.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport styles from './Collapsible.module.scss';\nimport classNames from 'classnames';\ninterface CollapsibleProps {\n  children: ReactNode;\n  isExpanded?: boolean;\n  onTransitionEnd?: () => void;\n}\n\nconst measureHeight = (element: Element) => {\n  let height = 0;\n\n  for (const child of Array.from(element.children)) {\n    const childStyles = getComputedStyle(child);\n\n    height +=\n      child.getBoundingClientRect().height +\n      (parseFloat(childStyles.marginTop) || 0) +\n      (parseFloat(childStyles.marginBottom) || 0);\n  }\n\n  return Math.ceil(height);\n};\n\nexport const Collapsible = ({ children, isExpanded, onTransitionEnd }: CollapsibleProps) => {\n  const [height, setHeight] = useState<number | undefined>();\n\n  const observerRef = useRef<ResizeObserver | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    if (!observerRef.current) {\n      observerRef.current = new ResizeObserver(() => {\n        if (containerRef.current) {\n          setHeight(measureHeight(containerRef.current));\n        }\n      });\n    }\n    if (containerRef.current) {\n      observerRef.current.observe(containerRef.current);\n      Array.from(containerRef.current.children).forEach((child) => {\n        observerRef.current?.observe(child);\n      });\n      setHeight(measureHeight(containerRef.current));\n    }\n\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, [containerRef.current]);\n\n  return (\n    <div\n      className={classNames(styles.collapsible, {\n        [styles.hideDelayed]: !isExpanded,\n      })}\n      ref={containerRef}\n      style={{\n        maxHeight: isExpanded ? height : '0px',\n      }}\n      onTransitionEnd={isExpanded ? onTransitionEnd : undefined}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;AASA,IAAM,aAAa,GAAG,UAAC,OAAgB,EAAA;IACrC,IAAI,MAAM,GAAG,CAAC;AAEd,IAAA,KAAoB,UAA4B,EAA5B,EAAA,GAAA,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAA5B,EAAA,GAAA,EAAA,CAAA,MAA4B,EAA5B,EAAA,EAA4B,EAAE;AAA7C,QAAA,IAAM,KAAK,GAAA,EAAA,CAAA,EAAA,CAAA;AACd,QAAA,IAAM,WAAW,GAAG,gBAAgB,CAAC,KAAK,CAAC;QAE3C,MAAM;AACJ,YAAA,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM;iBACnC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;iBACvC,UAAU,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/C;AAEA,IAAA,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;AAC1B,CAAC;AAEM,IAAM,WAAW,GAAG,UAAC,EAA2D,EAAA;;AAAzD,IAAA,IAAA,QAAQ,cAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,eAAe,GAAA,EAAA,CAAA,eAAA;IAC3D,IAAA,EAAA,GAAsB,QAAQ,EAAsB,EAAnD,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAAkC;AAE1D,IAAA,IAAM,WAAW,GAAG,MAAM,CAAwB,IAAI,CAAC;AACvD,IAAA,IAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC;AAExD,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;AACxB,YAAA,WAAW,CAAC,OAAO,GAAG,IAAI,cAAc,CAAC,YAAA;AACvC,gBAAA,IAAI,YAAY,CAAC,OAAO,EAAE;oBACxB,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;gBAChD;AACF,YAAA,CAAC,CAAC;QACJ;AACA,QAAA,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AACjD,YAAA,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAC,KAAK,EAAA;;gBACtD,CAAA,EAAA,GAAA,WAAW,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,OAAO,CAAC,KAAK,CAAC;AACrC,YAAA,CAAC,CAAC;YACF,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAChD;QAEA,OAAO,YAAA;;AACL,YAAA,CAAA,EAAA,GAAA,WAAW,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,UAAU,EAAE;AACnC,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1B,QACEA,aACE,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,WAAW,GAAA,EAAA,GAAA,EAAA;AACtC,YAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAA,GAAG,CAAC,UAAU;AACjC,YAAA,EAAA,EAAA,EACF,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;YACL,SAAS,EAAE,UAAU,GAAG,MAAM,GAAG,KAAK;AACvC,SAAA,EACD,eAAe,EAAE,UAAU,GAAG,eAAe,GAAG,SAAS,EAAA,QAAA,EAExD,QAAQ,EAAA,CACL;AAEV;;;;"}

package/dist/esm/lib/components/table/Table.stories.d.ts

@@ -95,6 +95,10 @@ export declare const TwoPlanQuote: {
     render: () => JSX.Element;
     name: string;
 };
+export declare const PlanDetailsQuote: {
+    render: () => JSX.Element;
+    name: string;
+};
 export declare const ThreePlanQuoteWebsite: {
     render: () => JSX.Element;
     name: string;

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ModalFunction } from '../../../types';
-export type FontVariant = 'NORMAL' | 'TITLE' | 'PRICE';
+export type FontVariant = 'NORMAL' | 'TITLE' | 'SUBTITLE' | 'PRICE';
 export type Alignment = 'center' | 'left' | 'right';
 export type BaseCellProps = {
     align?: Alignment;

package/package.json

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

package/src/lib/components/segmentedControl/index.tsx

@@ -45,6 +45,8 @@ const SegmentedControl = ({
           style={{ height: `${height}px` }}
         >
           {values.map((value: TitleWithSubtitle | string, index: number) => {
+            const selectedColor = selectedIndex === index ? 'tc-white' : 'tc-neutral-900';
+
             return (
               <div
                 role="button"
@@ -62,27 +64,19 @@ const SegmentedControl = ({
               >
                 {typeof value === 'string' ? (
                   <div
-                    className={`p-h4 ta-center ${
-                      selectedIndex === index ? '' : 'tc-purple-600'
-                    }`}
+                    className={`p-h4 ta-center ${selectedColor} ${styles['text-color']}`}
                   >
                     {value}
                   </div>
                 ) : (
                   <>
                     <div
-                      className={`p-h4 ta-center ${
-                        selectedIndex === index ? '' : 'tc-purple-600'
-                      }`}
+                      className={`p-h4 ta-center ${selectedColor} ${styles['text-color']}`}
                     >
                       {value.title}
                     </div>
                     <div
-                      className={`p-p--small ta-center ${
-                        selectedIndex === index
-                          ? 'tc-neutral-600'
-                          : 'tc-purple-600'
-                      }`}
+                      className={`p-p--small ta-center ${selectedColor} ${styles['text-color']}`}
                     >
                       {value.subtitle}
                     </div>

package/src/lib/components/segmentedControl/style.module.scss

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-block;
 
-  background-color: var(--ds-purple-100);
+  background-color: var(--ds-orange-50);
   border-radius: 8px;
 
   padding: 0 8px;
@@ -22,7 +22,7 @@
   padding-right: 16px;
 
   &:focus {
-    outline-color: var(--ds-purple-600);
+    outline-color: var(--ds-primary-900);
     outline-offset: 2px;
   }
 }
@@ -30,7 +30,7 @@
 .select-chip-background {
   position: absolute;
 
-  background-color: white;
+  background-color: var(--ds-neutral-900);
   border-radius: 8px;
 
   top: 8px;
@@ -39,3 +39,7 @@
 
   transition: width 0.3s, left 0.3s;
 }
+
+.text-color {
+  transition: color 0.15s ease-in;
+}

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

@@ -830,6 +830,164 @@ export const TwoPlanQuote = {
   name: 'Two Plan Quote',
 };
 
+const getPlanDetailsData = (
+  selectedPlan: number,
+  setSelectedPlan: (plan: number) => void
+): TableData => [
+  {
+    rows: [
+      [
+        { text: 'Choose plan', fontVariant: 'SUBTITLE' },
+        {
+          type: 'BUTTON',
+          buttonCaption: 'Basic',
+          price: '€99/mo',
+          isSelected: selectedPlan === 1,
+          onClick: () => setSelectedPlan(1),
+        },
+        {
+          type: 'BUTTON',
+          buttonCaption: 'Advanced',
+          price: '€150/mo',
+          isSelected: selectedPlan === 2,
+          onClick: () => setSelectedPlan(2),
+        },
+      ],
+      [
+        {
+          text: "General doctors' visits",
+          modalContent: 'Visits to general practitioners are covered in full.',
+        },
+        { text: 'Up to €2 million' },
+        { text: 'Up to €2 million' },
+      ],
+      [
+        {
+          text: 'Specialists',
+          modalContent: 'Specialist visits are covered with a referral.',
+        },
+        { text: '4 visits per year' },
+        { text: 'Unlimited visits' },
+      ],
+      [
+        { text: 'Documents (not in a safe)' },
+        { text: '20% of the insured sum', description: 'max €3,000' },
+        { text: '30% of the insured sum', description: 'max €5,000' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Theft, fraud and robberies',
+    },
+    rows: [
+      [
+        { text: 'Burglary and vandalism' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+      [
+        { text: 'Valuables in bank safe deposits' },
+        { text: '5% of the insured sum' },
+        { text: '30% of the insured sum' },
+      ],
+      [
+        { text: 'Credit card misuse', description: 'E.g. after a robbery' },
+        { checkmarkValue: false },
+        { text: '€1,500', description: 'with a €150 deductible' },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Damage protection',
+    },
+    rows: [
+      [
+        { text: 'Weather damage', description: 'Rain, storm, hail or snow' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+      [
+        {
+          text: 'Weather damage due to negligence',
+          description: 'E.g. belongings damaged due to windows left open',
+        },
+        { checkmarkValue: false },
+        { text: '€5,000', description: 'with a €500 deductible' },
+      ],
+      [
+        { text: 'Rainwater pipe leaks (within building)' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Loss & replacement',
+    },
+    rows: [
+      [
+        { text: 'Luggage while travelling' },
+        { text: 'Up to €2,000' },
+        { text: 'Up to €5,000' },
+      ],
+      [
+        { text: 'Keys and locks', modalContent: 'Replacement of home keys and locks after theft.' },
+        { checkmarkValue: true },
+        { checkmarkValue: true },
+      ],
+    ],
+  },
+  {
+    section: {
+      title: 'Accommodation & relocation costs',
+    },
+    rows: [
+      [
+        { text: 'Hotel costs', description: 'If your home is uninhabitable' },
+        { text: 'Up to 100 days' },
+        { text: 'Up to 200 days' },
+      ],
+      [
+        { text: 'Relocation costs' },
+        { checkmarkValue: false },
+        { checkmarkValue: true },
+      ],
+    ],
+  },
+];
+
+const PlanDetailsQuoteStory = () => {
+  const [selectedPlan, setSelectedPlan] = useState(1);
+
+  return (
+    <div style={{ maxWidth: 900 }}>
+      <p className="p-p tc-neutral-500 mb16">
+        Plan details table from the Sign-Ups designs: SUBTITLE top left cell,
+        plan selection buttons, selected column highlight, collapsible sections,
+        checkmarks, values with descriptions, and info modals.
+      </p>
+      <Table
+        tableData={getPlanDetailsData(selectedPlan, setSelectedPlan)}
+        title="Plan details"
+        collapsibleSections
+        showSelectedColumn
+        activeSection={selectedPlan}
+        onSelectionChanged={setSelectedPlan}
+        mobileNavigationMode="tabs"
+      />
+    </div>
+  );
+};
+
+export const PlanDetailsQuote = {
+  render: () => <PlanDetailsQuoteStory />,
+
+  name: 'Plan Details - Quote',
+};
+
 const threePlanWebsiteData: TableData = [
   {
     rows: [

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

@@ -11,7 +11,7 @@ import { MiniProgressBar } from './MiniProgressBar/MiniProgressBar';
 import { TableInfoButton } from '../../../../comparisonTable';
 import { ModalFunction } from '../../../types';
 
-export type FontVariant = 'NORMAL' | 'TITLE' | 'PRICE';
+export type FontVariant = 'NORMAL' | 'TITLE' | 'SUBTITLE' | 'PRICE';
 
 const progressLookup: Record<string, number> = {
   '30%': 1,
@@ -157,6 +157,15 @@ export const BaseCell = ({
               </h2>
             )}
 
+            {text && fontVariant === 'SUBTITLE' && (
+              <h2
+                aria-hidden
+                className="tc-grey-800 p-h4"
+              >
+                {text}
+              </h2>
+            )}
+
             {modalContent && openModal && (
               <span className="ml8">
                 <TableInfoButton

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

@@ -31,6 +31,10 @@
   vertical-align: top;
 }
 
+.subtitleCell {
+  vertical-align: middle;
+}
+
 .fixedCell {
   position: sticky;
   left: 0;

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

@@ -88,4 +88,22 @@ describe('TableCell', () => {
       title: '',
     });
   });
+
+  it('renders the top left cell as a title by default', () => {
+    setup({ isTopLeftCell: true, text: 'Choose a plan' });
+
+    expect(screen.getByText('Choose a plan')).toHaveClass('p-h2');
+  });
+
+  it('lets fontVariant override the top left cell title', () => {
+    setup({
+      isTopLeftCell: true,
+      fontVariant: 'SUBTITLE',
+      text: 'Choose a plan',
+    });
+
+    const cellText = screen.getByText('Choose a plan');
+    expect(cellText).toHaveClass('p-h4');
+    expect(cellText).not.toHaveClass('p-h2');
+  });
 });

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

@@ -53,6 +53,8 @@ const TableCell = React.memo(
         className={classNames(isSelectedColumn ? 'bg-orange-50' : 'bg-white', styles.th, {
           'ta-left': isFirstCellInRow,
           [styles.headerCell]: isHeader,
+          [styles.subtitleCell]:
+            !cellProps.type && cellProps.fontVariant === 'SUBTITLE',
           [styles.thNavigation]: isNavigation,
           [styles.navigationTitle]: isNavigation && isTopLeftCell,
           [styles.fixedCell]: isFirstCellInRow && colSpan < 1 ,
@@ -66,9 +68,7 @@ const TableCell = React.memo(
           <BaseCell
             {...cellProps}
             fontVariant={
-              isTopLeftCell
-                ? 'TITLE'
-                : cellProps.fontVariant ?? 'NORMAL'
+              cellProps.fontVariant ?? (isTopLeftCell ? 'TITLE' : 'NORMAL')
             }
           />
         )}

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

@@ -7,6 +7,21 @@ interface CollapsibleProps {
   onTransitionEnd?: () => void;
 }
 
+const measureHeight = (element: Element) => {
+  let height = 0;
+
+  for (const child of Array.from(element.children)) {
+    const childStyles = getComputedStyle(child);
+
+    height +=
+      child.getBoundingClientRect().height +
+      (parseFloat(childStyles.marginTop) || 0) +
+      (parseFloat(childStyles.marginBottom) || 0);
+  }
+
+  return Math.ceil(height);
+};
+
 export const Collapsible = ({ children, isExpanded, onTransitionEnd }: CollapsibleProps) => {
   const [height, setHeight] = useState<number | undefined>();
 
@@ -15,24 +30,21 @@ export const Collapsible = ({ children, isExpanded, onTransitionEnd }: Collapsib
 
   useEffect(() => {
     if (!observerRef.current) {
-      observerRef.current = new ResizeObserver((entries) => {
-        entries.forEach((entry) => {
-          const scrollheight = entry.target.scrollHeight;
-
-          setHeight(scrollheight);
-        });
+      observerRef.current = new ResizeObserver(() => {
+        if (containerRef.current) {
+          setHeight(measureHeight(containerRef.current));
+        }
       });
     }
     if (containerRef.current) {
       observerRef.current.observe(containerRef.current);
-      const scrollheight = containerRef.current.scrollHeight;
-      setHeight(scrollheight);
+      Array.from(containerRef.current.children).forEach((child) => {
+        observerRef.current?.observe(child);
+      });
+      setHeight(measureHeight(containerRef.current));
     }
 
     return () => {
-      if (containerRef.current) {
-        observerRef.current?.unobserve(containerRef.current);
-      }
       observerRef.current?.disconnect();
     };
   }, [containerRef.current]);