From 88d01fe73b453565c7f3276c4e8c636e1c4fd0e0 Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Thu, 6 Jun 2024 10:46:56 +0200 Subject: [PATCH 01/18] feat(CoverageTable): [EPIC-137] Add hideScrollBarsMobile prop --- .../comparisonTable/index.stories.mdx | 31 ++++++++++--------- src/lib/components/comparisonTable/index.tsx | 3 ++ .../comparisonTable/style.module.scss | 16 ++++++++++ 3 files changed, 36 insertions(+), 14 deletions(-) diff --git a/src/lib/components/comparisonTable/index.stories.mdx b/src/lib/components/comparisonTable/index.stories.mdx index f967bb23..8ff87051 100644 --- a/src/lib/components/comparisonTable/index.stories.mdx +++ b/src/lib/components/comparisonTable/index.stories.mdx @@ -33,6 +33,7 @@ The Comparison Table component provides an easy way to compare vast amounts of i | data | array | The title text that needs to be displayed | n/a | true | | hideDetails | boolean | Hide table groups that do not have the `default` attribute | false | false | | hideScrollBars | boolean | Hide scroll bars | false | false | +| hideScrollBarsMobile | boolean | Hide scroll bars on mobile only | false | false | | collapsibleSections | boolean | Make table groups with a label collapsible | false | false | | cellWidth | number | Width of a table content cell | 256px | false | | firstColumnWidth | number | Width of the first column of the table | 288px | false | @@ -76,9 +77,7 @@ export const ComparisonTableWithData = () => { key: 'name', label: 'Films', render: (value) => ( - {}}> - {value} - + {}}>{value} ), }, { @@ -91,15 +90,18 @@ export const ComparisonTableWithData = () => { key: 'imdb', label: 'IMDB rating', render: (value) => ( - {}}> - {value} - + {}}>{value} ), }, { id: 3, key: 'rating', - label: {}} />, + label: ( + {}} + /> + ), render: (value) => ( {}}> @@ -322,9 +324,7 @@ export const ComparisonTableWithData = () => { key: 'name', label: 'Films', render: (value) => ( - {}}> - {value} - + {}}>{value} ), }, { @@ -337,15 +337,18 @@ export const ComparisonTableWithData = () => { key: 'imdb', label: 'IMDB rating', render: (value) => ( - {}}> - {value} - + {}}>{value} ), }, { id: 3, key: 'rating', - label: {}} />, + label: ( + {}} + /> + ), render: (value) => ( {}}> diff --git a/src/lib/components/comparisonTable/index.tsx b/src/lib/components/comparisonTable/index.tsx index 6244ffd1..0e71ba51 100644 --- a/src/lib/components/comparisonTable/index.tsx +++ b/src/lib/components/comparisonTable/index.tsx @@ -48,6 +48,7 @@ export interface ComparisonTableProps { data: Array; hideDetails?: boolean; hideScrollBars?: boolean; + hideScrollBarsMobile?: boolean; collapsibleSections?: boolean; cellWidth?: number; firstColumnWidth?: number; @@ -68,6 +69,7 @@ const ComparisonTable = ( hideDetails, styles, hideScrollBars, + hideScrollBarsMobile, collapsibleSections, cellWidth, firstColumnWidth, @@ -109,6 +111,7 @@ const ComparisonTable = ( id={headerId} className={classNames(baseStyles.container, { [baseStyles.noScrollBars]: hideScrollBars, + [baseStyles.noScrollBarsMobile]: hideScrollBarsMobile, })} >
diff --git a/src/lib/components/comparisonTable/style.module.scss b/src/lib/components/comparisonTable/style.module.scss index 4367cf6f..0d8a5b39 100644 --- a/src/lib/components/comparisonTable/style.module.scss +++ b/src/lib/components/comparisonTable/style.module.scss @@ -26,6 +26,22 @@ scroll-snap-type: unset; } +.noScrollBarsMobile { + @include p-size-tablet { + // Disable the scrollbar in all browsers + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* Internet Explorer 10+ */ + &::-webkit-scrollbar { + /* WebKit */ + width: 0; + height: 0; + } + + // Disable snapping since it's not needed without scrollbars + scroll-snap-type: unset; + } +} + .overflow-container { width: max-content; min-width: 100%; From eaa47ad8af61991bfbd267ac71c7c7fa2b2cce7a Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Thu, 6 Jun 2024 10:56:17 +0200 Subject: [PATCH 02/18] feat(CoverageTable): [EPIC-137] Add detail button captions --- .../comparisonTable/index.stories.mdx | 26 ++++++++++--------- src/lib/components/comparisonTable/index.tsx | 6 ++++- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/lib/components/comparisonTable/index.stories.mdx b/src/lib/components/comparisonTable/index.stories.mdx index 8ff87051..4efa26b1 100644 --- a/src/lib/components/comparisonTable/index.stories.mdx +++ b/src/lib/components/comparisonTable/index.stories.mdx @@ -27,18 +27,20 @@ The Comparison Table component provides an easy way to compare vast amounts of i ## Arguments -| attribute | unit | description | default value | required | -| --------------------- | ------------------- | ---------------------------------------------------------- | ------------- | -------- | -| headers | [Header[]](#header) | The structure of the table | n/a | true | -| data | array | The title text that needs to be displayed | n/a | true | -| hideDetails | boolean | Hide table groups that do not have the `default` attribute | false | false | -| hideScrollBars | boolean | Hide scroll bars | false | false | -| hideScrollBarsMobile | boolean | Hide scroll bars on mobile only | false | false | -| collapsibleSections | boolean | Make table groups with a label collapsible | false | false | -| cellWidth | number | Width of a table content cell | 256px | false | -| firstColumnWidth | number | Width of the first column of the table | 288px | false | -| stickyHeaderTopOffset | number | Y-offset of the sticky header row | 0px | false | -| growContent | boolean | Makes the content area grow to fill the available space | false | false | +| attribute | unit | description | default value | required | +| --------------------- | ------------------- | ---------------------------------------------------------- | -------------- | -------- | +| headers | [Header[]](#header) | The structure of the table | n/a | true | +| data | array | The title text that needs to be displayed | n/a | true | +| hideDetails | boolean | Hide table groups that do not have the `default` attribute | false | false | +| hideDetailsCaption | string | Caption of the button to hide the details | 'Hide details' | false | +| showDetailsCaption | string | Caption of the button to show the details | 'Show details' | false | +| hideScrollBars | boolean | Hide scroll bars | false | false | +| hideScrollBarsMobile | boolean | Hide scroll bars on mobile only | false | false | +| collapsibleSections | boolean | Make table groups with a label collapsible | false | false | +| cellWidth | number | Width of a table content cell | 256px | false | +| firstColumnWidth | number | Width of the first column of the table | 288px | false | +| stickyHeaderTopOffset | number | Y-offset of the sticky header row | 0px | false | +| growContent | boolean | Makes the content area grow to fill the available space | false | false | ## Types diff --git a/src/lib/components/comparisonTable/index.tsx b/src/lib/components/comparisonTable/index.tsx index 0e71ba51..0a722d37 100644 --- a/src/lib/components/comparisonTable/index.tsx +++ b/src/lib/components/comparisonTable/index.tsx @@ -47,6 +47,8 @@ export interface ComparisonTableProps { headers: Array>; data: Array; hideDetails?: boolean; + hideDetailsCaption?: string; + showDetailsCaption?: string; hideScrollBars?: boolean; hideScrollBarsMobile?: boolean; collapsibleSections?: boolean; @@ -67,6 +69,8 @@ const ComparisonTable = ( headers, data, hideDetails, + hideDetailsCaption = 'Hide details', + showDetailsCaption = 'Show details', styles, hideScrollBars, hideScrollBarsMobile, @@ -246,7 +250,7 @@ const ComparisonTable = ( onClick={toggleMoreRows} type="button" > - {showMore ? 'Hide details' : 'Show details'} + {showMore ? hideDetailsCaption : showDetailsCaption} From 17a039de117e59ae654c204e113e56407e8f543c Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Thu, 6 Jun 2024 11:13:07 +0200 Subject: [PATCH 03/18] fix(CoverageTable): [EPIC-137] Truly disable TableArrows --- .../comparisonTable/components/TableArrows/index.tsx | 2 ++ .../components/TableArrows/style.module.scss | 6 ++++++ 2 files changed, 8 insertions(+) diff --git a/src/lib/components/comparisonTable/components/TableArrows/index.tsx b/src/lib/components/comparisonTable/components/TableArrows/index.tsx index 0ef9ed91..164db9d2 100644 --- a/src/lib/components/comparisonTable/components/TableArrows/index.tsx +++ b/src/lib/components/comparisonTable/components/TableArrows/index.tsx @@ -27,6 +27,7 @@ const TableArrows = (props: TableArrowsProps) => { [styles.active]: active.left, } )} + disabled={!active.left} > @@ -40,6 +41,7 @@ const TableArrows = (props: TableArrowsProps) => { [styles.active]: active.right, } )} + disabled={!active.right} > diff --git a/src/lib/components/comparisonTable/components/TableArrows/style.module.scss b/src/lib/components/comparisonTable/components/TableArrows/style.module.scss index bfba794d..b8109831 100644 --- a/src/lib/components/comparisonTable/components/TableArrows/style.module.scss +++ b/src/lib/components/comparisonTable/components/TableArrows/style.module.scss @@ -42,6 +42,12 @@ background-color: $ds-grey-200; cursor: not-allowed; } + &:disabled { + opacity: 1; + &:hover { + background-color: $ds-grey-200; + } + } } .active { From b2e13b4c13833875098ad865077907a7ab624daa Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Thu, 6 Jun 2024 11:16:40 +0200 Subject: [PATCH 04/18] feat(CoverageTable): [EPIC-137] Expose onSelectionChanged callback --- .../hooks/useComparisonTable.ts | 11 ++++++- .../comparisonTable/index.stories.mdx | 29 ++++++++++--------- src/lib/components/comparisonTable/index.tsx | 4 ++- 3 files changed, 28 insertions(+), 16 deletions(-) diff --git a/src/lib/components/comparisonTable/hooks/useComparisonTable.ts b/src/lib/components/comparisonTable/hooks/useComparisonTable.ts index 00397733..f474cf2b 100644 --- a/src/lib/components/comparisonTable/hooks/useComparisonTable.ts +++ b/src/lib/components/comparisonTable/hooks/useComparisonTable.ts @@ -4,7 +4,11 @@ import { useCallback, useEffect, useRef, useState } from 'react'; import { ArrowValues } from '../components/TableArrows'; import generateId from '../../../util/generateId'; -export const useComparisonTable = () => { +export const useComparisonTable = ({ + onSelectionChanged, +}: { + onSelectionChanged?: (selectedIndex: number) => void; +}) => { const [showMore, setShowMore] = useState(false); const [headerWidth, setHeaderWidth] = useState(1400); const [headerId, setHeaderId] = useState(''); @@ -138,6 +142,11 @@ export const useComparisonTable = () => { setHeaderId(generateId()); }, []); + useEffect(() => { + onSelectionChanged?.(selectedTabIndex); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [selectedTabIndex]); + return { headerWidth, headerId, diff --git a/src/lib/components/comparisonTable/index.stories.mdx b/src/lib/components/comparisonTable/index.stories.mdx index 4efa26b1..f38fec11 100644 --- a/src/lib/components/comparisonTable/index.stories.mdx +++ b/src/lib/components/comparisonTable/index.stories.mdx @@ -27,20 +27,21 @@ The Comparison Table component provides an easy way to compare vast amounts of i ## Arguments -| attribute | unit | description | default value | required | -| --------------------- | ------------------- | ---------------------------------------------------------- | -------------- | -------- | -| headers | [Header[]](#header) | The structure of the table | n/a | true | -| data | array | The title text that needs to be displayed | n/a | true | -| hideDetails | boolean | Hide table groups that do not have the `default` attribute | false | false | -| hideDetailsCaption | string | Caption of the button to hide the details | 'Hide details' | false | -| showDetailsCaption | string | Caption of the button to show the details | 'Show details' | false | -| hideScrollBars | boolean | Hide scroll bars | false | false | -| hideScrollBarsMobile | boolean | Hide scroll bars on mobile only | false | false | -| collapsibleSections | boolean | Make table groups with a label collapsible | false | false | -| cellWidth | number | Width of a table content cell | 256px | false | -| firstColumnWidth | number | Width of the first column of the table | 288px | false | -| stickyHeaderTopOffset | number | Y-offset of the sticky header row | 0px | false | -| growContent | boolean | Makes the content area grow to fill the available space | false | false | +| attribute | unit | description | default value | required | +| --------------------- | ------------------- | ------------------------------------------------------------------- | -------------- | -------- | +| headers | [Header[]](#header) | The structure of the table | n/a | true | +| data | array | The title text that needs to be displayed | n/a | true | +| hideDetails | boolean | Hide table groups that do not have the `default` attribute | false | false | +| hideDetailsCaption | string | Caption of the button to hide the details | 'Hide details' | false | +| showDetailsCaption | string | Caption of the button to show the details | 'Show details' | false | +| hideScrollBars | boolean | Hide scroll bars | false | false | +| hideScrollBarsMobile | boolean | Hide scroll bars on mobile only | false | false | +| collapsibleSections | boolean | Make table groups with a label collapsible | false | false | +| cellWidth | number | Width of a table content cell | 256px | false | +| firstColumnWidth | number | Width of the first column of the table | 288px | false | +| stickyHeaderTopOffset | number | Y-offset of the sticky header row | 0px | false | +| growContent | boolean | Makes the content area grow to fill the available space | false | false | +| onSelectionChanged | (number) => void | Callback to be called when the selected tab index changes on mobile | n/a | false | ## Types diff --git a/src/lib/components/comparisonTable/index.tsx b/src/lib/components/comparisonTable/index.tsx index 0a722d37..07cc9ded 100644 --- a/src/lib/components/comparisonTable/index.tsx +++ b/src/lib/components/comparisonTable/index.tsx @@ -60,6 +60,7 @@ export interface ComparisonTableProps { header?: string; container?: string; }; + onSelectionChanged?: (selectedIndex: number) => void; } const ComparisonTable = ( @@ -79,6 +80,7 @@ const ComparisonTable = ( firstColumnWidth, stickyHeaderTopOffset, growContent, + onSelectionChanged, } = props; const { @@ -92,7 +94,7 @@ const ComparisonTable = ( toggleMoreRows, showMore, headerId, - } = useComparisonTable(); + } = useComparisonTable({ onSelectionChanged }); const cssVariablesStyle = { '--tableWidth': `${headerWidth}px`, From 2823c359b36eab22319b1c19b17e0a651678e636 Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Thu, 6 Jun 2024 14:42:57 +0200 Subject: [PATCH 05/18] chore(CoverageTable): [EPIC-137] Replace underline links with TableInfoButton --- .../components/TableButton/index.tsx | 18 +++++------ .../components/TableButton/style.module.scss | 31 +++++-------------- .../components/TableInfoButton/index.tsx | 1 + .../components/TableRowHeader/index.tsx | 25 +++++++++------ 4 files changed, 33 insertions(+), 42 deletions(-) diff --git a/src/lib/components/comparisonTable/components/TableButton/index.tsx b/src/lib/components/comparisonTable/components/TableButton/index.tsx index 740a1e02..11b9bfcd 100644 --- a/src/lib/components/comparisonTable/components/TableButton/index.tsx +++ b/src/lib/components/comparisonTable/components/TableButton/index.tsx @@ -1,5 +1,6 @@ import { ReactNode } from 'react'; import styles from './style.module.scss'; +import TableInfoButton from '../TableInfoButton'; interface Props { children: ReactNode; @@ -12,15 +13,14 @@ const TableButton: React.FC = ({ onClick, className = '', }) => ( - +
+ {children} + +
); export default TableButton; diff --git a/src/lib/components/comparisonTable/components/TableButton/style.module.scss b/src/lib/components/comparisonTable/components/TableButton/style.module.scss index d5d404aa..678c7f7b 100644 --- a/src/lib/components/comparisonTable/components/TableButton/style.module.scss +++ b/src/lib/components/comparisonTable/components/TableButton/style.module.scss @@ -1,26 +1,9 @@ -@use "../../../../scss/public/colors" as *; - -.button { - background-color: transparent; - color: $ds-grey-700; - cursor: pointer; - margin: 2px 0; - padding: 2px; - transition: color 0.3s ease; - - span { - border-bottom: 2px dashed $ds-grey-600; - display: inline; - transition: border-color 0.3s ease; - } +.wrapper { + position: relative; +} - &:hover, - &:focus { - color: $ds-primary-500; - outline-color: $ds-primary-500; - - span { - border-color: $ds-primary-500; - } - } +.infoButton { + position: absolute; + right: -32px; + top: 0; } diff --git a/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx b/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx index 746671dd..b79140e6 100644 --- a/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx +++ b/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx @@ -11,6 +11,7 @@ const TableInfoButton = ({
+ ); }; diff --git a/src/lib/components/comparisonTable/index.stories.mdx b/src/lib/components/comparisonTable/index.stories.mdx index 5ad0d0be..b4207b10 100644 --- a/src/lib/components/comparisonTable/index.stories.mdx +++ b/src/lib/components/comparisonTable/index.stories.mdx @@ -70,12 +70,17 @@ export interface Header { ### ClassNameOverrides +Note that if the component uses custom css such as media queries etc. for certain properties, the override must also use +custom css (and not just Dirty Swan classes) or else it won't to able override the existing rules. + ```typescript export interface ClassNameOverrides { header?: string; container?: string; cell?: string; headerCell?: string; + collapsibleSection?: string; + section?: string; } ``` diff --git a/src/lib/components/comparisonTable/index.tsx b/src/lib/components/comparisonTable/index.tsx index 80fe4736..a029b75d 100644 --- a/src/lib/components/comparisonTable/index.tsx +++ b/src/lib/components/comparisonTable/index.tsx @@ -65,6 +65,8 @@ export interface ClassNameOverrides { container?: string; cell?: string; headerCell?: string; + collapsibleSection?: string; + section?: string; } const ComparisonTable = ( @@ -180,7 +182,10 @@ const ComparisonTable = ( {headerGroup.label && collapsibleSections ? ( ( ) : ( -
+
(
- + )} ); diff --git a/src/lib/components/comparisonTable/style.module.scss b/src/lib/components/comparisonTable/style.module.scss index 0d8a5b39..a64edc95 100644 --- a/src/lib/components/comparisonTable/style.module.scss +++ b/src/lib/components/comparisonTable/style.module.scss @@ -42,6 +42,14 @@ } } +.section { + margin-top: 48px; + + @include p-size-tablet { + margin-top: 72px; + } +} + .overflow-container { width: max-content; min-width: 100%; @@ -60,16 +68,10 @@ background-color: $ds-grey-100; border-radius: 8px; - margin-top: 48px; - & > h4 { padding: 24px; display: inline-block; } - - @include p-size-tablet { - margin-top: 72px; - } } .sticky { From e86bb46e93f253782aa19d705cf5eb61495908a1 Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Fri, 7 Jun 2024 09:49:36 +0200 Subject: [PATCH 08/18] fix(CoverageTable): [EPIC-137] Increase text contrast --- .../components/comparisonTable/components/Row/style.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/comparisonTable/components/Row/style.module.scss b/src/lib/components/comparisonTable/components/Row/style.module.scss index c1241e51..9c2cdc41 100644 --- a/src/lib/components/comparisonTable/components/Row/style.module.scss +++ b/src/lib/components/comparisonTable/components/Row/style.module.scss @@ -33,7 +33,7 @@ $cell-min-width: var(--cellWidth, 256px); padding: 16px; - color: $ds-grey-700; + color: $ds-grey-900; width: 50vw; max-width: calc(var(--tableWidth) / 2); From bfd7c004f2fd899e7629e6c2d7151bf0e916e679 Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Fri, 7 Jun 2024 09:56:14 +0200 Subject: [PATCH 09/18] chore(CoverageTable): [EPIC-137] Adjust default spacing --- src/lib/components/comparisonTable/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/components/comparisonTable/index.tsx b/src/lib/components/comparisonTable/index.tsx index a029b75d..e2e4297b 100644 --- a/src/lib/components/comparisonTable/index.tsx +++ b/src/lib/components/comparisonTable/index.tsx @@ -183,7 +183,7 @@ const ComparisonTable = ( {headerGroup.label && collapsibleSections ? ( (
(
Date: Fri, 7 Jun 2024 10:04:55 +0200 Subject: [PATCH 10/18] fix(CoverageTable): [EPIC-137] Fix first section spacing --- src/lib/components/comparisonTable/style.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/comparisonTable/style.module.scss b/src/lib/components/comparisonTable/style.module.scss index a64edc95..4894feae 100644 --- a/src/lib/components/comparisonTable/style.module.scss +++ b/src/lib/components/comparisonTable/style.module.scss @@ -42,7 +42,7 @@ } } -.section { +.section + .section { margin-top: 48px; @include p-size-tablet { From eab842d1ec0d35201a4878a9f847198921d8b2a3 Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Fri, 7 Jun 2024 11:55:32 +0200 Subject: [PATCH 11/18] fix(CoverageTable): [EPIC-137] Fix scroll bar hiding --- src/lib/components/comparisonTable/index.tsx | 16 ++++++------ .../comparisonTable/style.module.scss | 25 ++++++++----------- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/src/lib/components/comparisonTable/index.tsx b/src/lib/components/comparisonTable/index.tsx index e2e4297b..3938f3d6 100644 --- a/src/lib/components/comparisonTable/index.tsx +++ b/src/lib/components/comparisonTable/index.tsx @@ -116,18 +116,18 @@ const ComparisonTable = ( return ( -
+
-
+
Date: Fri, 7 Jun 2024 11:55:53 +0200 Subject: [PATCH 12/18] chore(CoverageTable): [EPIC-137] Adjust default sizes --- .../components/Row/style.module.scss | 20 +++++++++++++------ .../comparisonTable/index.stories.mdx | 4 ++-- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/lib/components/comparisonTable/components/Row/style.module.scss b/src/lib/components/comparisonTable/components/Row/style.module.scss index 9c2cdc41..0a92c71e 100644 --- a/src/lib/components/comparisonTable/components/Row/style.module.scss +++ b/src/lib/components/comparisonTable/components/Row/style.module.scss @@ -1,7 +1,7 @@ @use "../../../../scss/public/colors" as *; @use "../../../../scss/public/grid" as *; -$cell-min-width: var(--cellWidth, 256px); +$cell-min-width: var(--cellWidth, 211px); // 195 + 16px .header { position: relative; @@ -31,7 +31,11 @@ $cell-min-width: var(--cellWidth, 256px); line-height: 24px; - padding: 16px; + padding: 16px 0; + + &:first-child { + padding: 16px 0 16px 16px; + } color: $ds-grey-900; @@ -55,19 +59,23 @@ $cell-min-width: var(--cellWidth, 256px); @include p-size-tablet { flex: 1 0 $cell-min-width; width: $cell-min-width; - padding: 24px; + &:first-child { + padding: 24px 0 24px 24px; + } + + padding: 24px 0; &:last-child { - padding: 24px 8px 24px 24px; + padding: 24px 24px 24px 0; } } } h4.cell { - // Set the max width of the first column to the supplied firstColumnWidth (or 288px if not specified) but only + // Set the max width of the first column to the supplied firstColumnWidth (or 212px if not specified) but only // if this value does not exceed half of the table's width. // This is to ensure that the first column is at most as wide as half the table, which will be the case on mobile where only the first column and one other are shown. - max-width: min(var(--firstColumnWidth, 288px), calc(var(--tableWidth) / 2)); + max-width: min(var(--firstColumnWidth, 212px), calc(var(--tableWidth) / 2)); } .title { diff --git a/src/lib/components/comparisonTable/index.stories.mdx b/src/lib/components/comparisonTable/index.stories.mdx index b4207b10..05ce5469 100644 --- a/src/lib/components/comparisonTable/index.stories.mdx +++ b/src/lib/components/comparisonTable/index.stories.mdx @@ -37,8 +37,8 @@ The Comparison Table component provides an easy way to compare vast amounts of i | hideScrollBars | boolean | Hide scroll bars | false | false | | hideScrollBarsMobile | boolean | Hide scroll bars on mobile only | false | false | | collapsibleSections | boolean | Make table groups with a label collapsible | false | false | -| cellWidth | number | Width of a table content cell | 256px | false | -| firstColumnWidth | number | Width of the first column of the table | 288px | false | +| cellWidth | number | Width of a table content cell | 211px | false | +| firstColumnWidth | number | Width of the first column of the table | 212px | false | | stickyHeaderTopOffset | number | Y-offset of the sticky header row | 0px | false | | growContent | boolean | Makes the content area grow to fill the available space | false | false | | onSelectionChanged | (number) => void | Callback to be called when the selected tab index changes on mobile | n/a | false | From 74798b7d0a175d3ca86f19dedfdc1db4354df0a0 Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Fri, 7 Jun 2024 12:51:35 +0200 Subject: [PATCH 13/18] fix(CoverageTable): [EPIC-137] Fix addons card --- .../comparisonTable/components/Row/style.module.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/lib/components/comparisonTable/components/Row/style.module.scss b/src/lib/components/comparisonTable/components/Row/style.module.scss index 0a92c71e..3ab631ef 100644 --- a/src/lib/components/comparisonTable/components/Row/style.module.scss +++ b/src/lib/components/comparisonTable/components/Row/style.module.scss @@ -64,10 +64,6 @@ $cell-min-width: var(--cellWidth, 211px); // 195 + 16px } padding: 24px 0; - - &:last-child { - padding: 24px 24px 24px 0; - } } } @@ -124,7 +120,7 @@ h4.cell { h4.addon { border-right: none; max-width: calc(100vw - 64px); - width: 100vw; + width: 100&; @include p-size-desktop { max-width: 976px; From 2cc98cf6de51609c965a1ca3e4aa5d80dae409c7 Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Fri, 7 Jun 2024 12:55:05 +0200 Subject: [PATCH 14/18] fix(CoverageTable): [EPIC-137] Accordion overflow --- .../components/AccordionItem/AccordionItem.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss b/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss index a03fe61d..0986e810 100644 --- a/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss +++ b/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss @@ -2,6 +2,7 @@ .container { width: var(--growContent, min-content); + max-width: 100%; margin-left: auto; margin-right: auto; } From e767393e490b0a05d3d2c950fd5e1522e60d9c6f Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Fri, 7 Jun 2024 13:31:08 +0200 Subject: [PATCH 15/18] fix(CoverageTable): [EPIC-137] Adjust cell padding --- .../comparisonTable/components/Row/style.module.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/components/comparisonTable/components/Row/style.module.scss b/src/lib/components/comparisonTable/components/Row/style.module.scss index 3ab631ef..d48346b4 100644 --- a/src/lib/components/comparisonTable/components/Row/style.module.scss +++ b/src/lib/components/comparisonTable/components/Row/style.module.scss @@ -31,10 +31,10 @@ $cell-min-width: var(--cellWidth, 211px); // 195 + 16px line-height: 24px; - padding: 16px 0; + padding: 16px 8px; &:first-child { - padding: 16px 0 16px 16px; + padding: 16px 8px 16px 16px; } color: $ds-grey-900; @@ -60,10 +60,10 @@ $cell-min-width: var(--cellWidth, 211px); // 195 + 16px flex: 1 0 $cell-min-width; width: $cell-min-width; &:first-child { - padding: 24px 0 24px 24px; + padding: 24px 8px 24px 24px; } - padding: 24px 0; + padding: 24px 8px; } } From d0bb189a926d855573445b7ef959f413aed08a61 Mon Sep 17 00:00:00 2001 From: Kim Kwanka Date: Fri, 7 Jun 2024 14:08:01 +0200 Subject: [PATCH 16/18] test(CoverageTable): [EPIC-137] Fix tests --- .../components/TableButton/index.test.tsx | 15 ++++--- .../components/TableInfoButton/index.tsx | 2 +- .../components/TableRowHeader/index.test.tsx | 40 +++++++++---------- 3 files changed, 26 insertions(+), 31 deletions(-) diff --git a/src/lib/components/comparisonTable/components/TableButton/index.test.tsx b/src/lib/components/comparisonTable/components/TableButton/index.test.tsx index 6138caec..998daae0 100644 --- a/src/lib/components/comparisonTable/components/TableButton/index.test.tsx +++ b/src/lib/components/comparisonTable/components/TableButton/index.test.tsx @@ -5,23 +5,22 @@ import TableButton from '.'; const mockOnClick = jest.fn(); -const buttonContent = "Table Button label"; +const buttonContent = 'Table Button label'; -const setup = () => render( - {buttonContent} -); +const setup = () => + render({buttonContent}); describe('TableButton component', () => { - it("should render button content", () => { + it('should render button content', () => { const { getByText } = setup(); expect(getByText(buttonContent)).toBeInTheDocument(); }); - it("should call onClick", async () => { - const { getByText, user } = setup(); + it('should call onClick', async () => { + const { getByTestId, user } = setup(); - await user.click(getByText(buttonContent)); + await user.click(getByTestId('ds-table-info-button')); expect(mockOnClick).toHaveBeenCalled(); }); diff --git a/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx b/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx index b79140e6..79e51b24 100644 --- a/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx +++ b/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx @@ -11,7 +11,7 @@ const TableInfoButton = ({