@popsure/dirty-swan 0.48.1 → 0.49.2

package/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,9 +31,13 @@ $cell-min-width: var(--cellWidth, 256px);
 
   line-height: 24px;
 
-  padding: 16px;
+  padding: 16px 8px;
 
-  color: $ds-grey-700;
+  &:first-child {
+    padding: 16px 8px 16px 16px;
+  }
+
+  color: $ds-grey-900;
 
   width: 50vw;
   max-width: calc(var(--tableWidth) / 2);
@@ -55,19 +59,19 @@ $cell-min-width: var(--cellWidth, 256px);
   @include p-size-tablet {
     flex: 1 0 $cell-min-width;
     width: $cell-min-width;
-    padding: 24px;
-
-    &:last-child {
+    &:first-child {
       padding: 24px 8px 24px 24px;
     }
+
+    padding: 24px 8px;
   }
 }
 
 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 {
@@ -116,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;

package/src/lib/components/comparisonTable/components/TableArrows/index.tsx

@@ -25,6 +25,7 @@ const TableArrows = (props: TableArrowsProps) => {
           styles.arrow,
           {
             [styles.active]: active.left,
+            [styles.noPointerEvents]: !active.left,
           }
         )}
       >
@@ -38,6 +39,7 @@ const TableArrows = (props: TableArrowsProps) => {
           styles.arrow,
           {
             [styles.active]: active.right,
+            [styles.noPointerEvents]: !active.right,
           }
         )}
       >

package/src/lib/components/comparisonTable/components/TableArrows/style.module.scss

@@ -53,3 +53,7 @@
     cursor: pointer;
   }
 }
+
+.noPointerEvents {
+  pointer-events: none;
+}

package/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(
-  <TableButton onClick={mockOnClick}>{buttonContent}</TableButton>
-);
+const setup = () =>
+  render(<TableButton onClick={mockOnClick}>{buttonContent}</TableButton>);
 
 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();
   });

package/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<Props> = ({
   onClick,
   className = '',
 }) => (
-  <button
-    className={`${styles.button} ${className}`}
-    data-testid="ds-table-button"
-    onClick={onClick}
-  >
-    <span>
-      {children}
-    </span>
-  </button>
+  <div className={styles.wrapper}>
+    {children}
+    <TableInfoButton
+      className={`${styles.infoButton} ${className}`}
+      data-testid="ds-table-button"
+      onClick={onClick}
+    />
+  </div>
 );
 
 export default TableButton;

package/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;
 }

package/src/lib/components/comparisonTable/components/TableInfoButton/index.tsx

@@ -11,6 +11,7 @@ const TableInfoButton = ({
   <button
     className={`p-btn--secondary ${styles.button} ${className}`}
     type="button"
+    data-testid="ds-table-info-button"
     onClick={onClick}
   >
     <Info size={20} />

package/src/lib/components/comparisonTable/components/TableRowHeader/index.test.tsx

@@ -5,62 +5,58 @@ import TableRowHeader, { TableRowHeaderProps } from '.';
 
 const mockOnClick = jest.fn();
 
-const label = "Table label";
-const subtitle = "Subtitle label";
-const icon = "🎉";
-const buttonTestId = "ds-table-button";
-
-const setup = (props: Partial<TableRowHeaderProps> = {}) => render(
-  <TableRowHeader 
-    label={label} 
-    {...props}
-  />
-);
+const label = 'Table label';
+const subtitle = 'Subtitle label';
+const icon = '🎉';
+const buttonTestId = 'ds-table-info-button';
+
+const setup = (props: Partial<TableRowHeaderProps> = {}) =>
+  render(<TableRowHeader label={label} {...props} />);
 
 describe('TableRowHeader component', () => {
-  it("should render label", () => {
+  it('should render label', () => {
     const { getByText } = setup();
 
     expect(getByText(label)).toBeInTheDocument();
   });
 
-  it("should not render subtitle", () => {
+  it('should not render subtitle', () => {
     const { queryByText } = setup();
 
     expect(queryByText(subtitle)).not.toBeInTheDocument();
   });
 
-  it("should render subtitle", () => {
+  it('should render subtitle', () => {
     const { getByText } = setup({ subtitle });
 
     expect(getByText(subtitle)).toBeInTheDocument();
   });
 
-  it("should not render icon", () => {
+  it('should not render icon', () => {
     const { queryByText } = setup();
 
     expect(queryByText(icon)).not.toBeInTheDocument();
   });
 
-  it("should render icon", () => {
+  it('should render icon', () => {
     const { getByText } = setup({ icon });
 
     expect(getByText(icon)).toBeInTheDocument();
   });
 
-  it("should not render button if onClickInfo is not defined", () => {
+  it('should not render button if onClickInfo is not defined', () => {
     const { queryByTestId } = setup();
 
     expect(queryByTestId(buttonTestId)).not.toBeInTheDocument();
   });
 
-  it("should render button if onClickInfo is defined", () => {
+  it('should render button if onClickInfo is defined', () => {
     const { getByTestId } = setup({ onClickInfo: mockOnClick });
 
     expect(getByTestId(buttonTestId)).toBeInTheDocument();
   });
 
-  it("should not call onClickInfo if not defined", async () => {
+  it('should not call onClickInfo if not defined', async () => {
     const { getByText, user } = setup();
 
     await user.click(getByText(label));
@@ -68,10 +64,10 @@ describe('TableRowHeader component', () => {
     expect(mockOnClick).not.toHaveBeenCalled();
   });
 
-  it("should call onClickInfo if defined", async () => {
-    const { getByText, user } = setup({ onClickInfo: mockOnClick });
+  it('should call onClickInfo if defined', async () => {
+    const { getByTestId, user } = setup({ onClickInfo: mockOnClick });
 
-    await user.click(getByText(label));
+    await user.click(getByTestId('ds-table-info-button'));
 
     expect(mockOnClick).toHaveBeenCalled();
   });

package/src/lib/components/comparisonTable/components/TableRowHeader/index.tsx

@@ -1,5 +1,6 @@
-import TableButton from '../TableButton';
+import classNames from 'classnames';
 import styles from './style.module.scss';
+import TableInfoButton from '../TableInfoButton';
 
 interface TableRowHeaderProps {
   label: string;
@@ -8,18 +9,24 @@ interface TableRowHeaderProps {
   onClickInfo?: () => void;
 }
 
-const TableRowHeader = ({ icon, label, subtitle, onClickInfo }: TableRowHeaderProps) => (
+const TableRowHeader = ({
+  icon,
+  label,
+  subtitle,
+  onClickInfo,
+}: TableRowHeaderProps) => (
   <div className="d-flex">
     {icon && <span className={`mr8 ${styles.icon}`}>{icon}</span>}
     <div>
       <p className="p-p d-inline">
-        {!onClickInfo ? (
-          <span>{label}</span>
-        ) : (
-          <TableButton className="mr8 ta-left" onClick={onClickInfo}>
-            {label}
-          </TableButton>
-        )}
+        <span
+          className={classNames({
+            mr8: onClickInfo,
+          })}
+        >
+          {label}
+        </span>
+        {onClickInfo && <TableInfoButton onClick={onClickInfo} />}
       </p>
       {subtitle && <p className="p-p--small tc-grey-500">{subtitle}</p>}
     </div>

package/src/lib/components/comparisonTable/hooks/useComparisonTable.ts

@@ -2,12 +2,14 @@ import debounce from 'lodash.debounce';
 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<boolean>(false);
   const [headerWidth, setHeaderWidth] = useState(1400);
-  const [headerId, setHeaderId] = useState('');
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
   const [selectedSection, setSelectedSection] = useState('');
 
@@ -123,24 +125,12 @@ export const useComparisonTable = () => {
   };
 
   useEffect(() => {
-    if (headerRef.current) {
-      return;
-    }
-
-    const headerById = document.getElementById(headerId);
-
-    if (headerById) {
-      scrollContainerCallbackRef(headerById);
-    }
-  }, [headerId, scrollContainerCallbackRef]);
-
-  useEffect(() => {
-    setHeaderId(generateId());
-  }, []);
+    onSelectionChanged?.(selectedTabIndex);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTabIndex]);
 
   return {
     headerWidth,
-    headerId,
     contentContainerRef,
     selectedSection,
     setSelectedSection,

package/src/lib/components/comparisonTable/index.stories.mdx

@@ -27,17 +27,22 @@ 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    |
-| 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                                       | 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    |
+| classNameOverrides    | [ClassNameOverrides](#classnameoverrides) | "className" props to be passed down to various internal components  | n/a            | false    |
 
 ## Types
 
@@ -63,6 +68,23 @@ export interface Header<T> {
 }
 ```
 
+### 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;
+  hideDetailsButton?: string;
+}
+```
+
 ## Default example
 
 export const ComparisonTableWithData = () => {
@@ -76,9 +98,7 @@ export const ComparisonTableWithData = () => {
           key: 'name',
           label: 'Films',
           render: (value) => (
-            <TableButton onClick={() => {}}>
-              {value}
-            </TableButton>
+            <TableButton onClick={() => {}}>{value}</TableButton>
           ),
         },
         {
@@ -91,15 +111,18 @@ export const ComparisonTableWithData = () => {
           key: 'imdb',
           label: 'IMDB rating',
           render: (value) => (
-            <TableButton onClick={() => {}}>
-              {value}
-            </TableButton>
+            <TableButton onClick={() => {}}>{value}</TableButton>
           ),
         },
         {
           id: 3,
           key: 'rating',
-          label: <TableRowHeader label="Our rating of movies found online on IMDB lists" onClickInfo={() => {}} />,
+          label: (
+            <TableRowHeader
+              label="Our rating of movies found online on IMDB lists"
+              onClickInfo={() => {}}
+            />
+          ),
           render: (value) => (
             <TableButton onClick={() => {}}>
               <TableRating type="star" rating={value} />
@@ -286,6 +309,9 @@ export const ComparisonTableWithData = () => {
       headers={headers}
       collapsibleSections
       hideDetails
+      classNameOverrides={{
+        hideDetailsButton: 'p-container wmx6',
+      }}
     />
   );
 };
@@ -322,9 +348,7 @@ export const ComparisonTableWithData = () => {
           key: 'name',
           label: 'Films',
           render: (value) => (
-            <TableButton onClick={() => {}}>
-              {value}
-            </TableButton>
+            <TableButton onClick={() => {}}>{value}</TableButton>
           ),
         },
         {
@@ -337,15 +361,18 @@ export const ComparisonTableWithData = () => {
           key: 'imdb',
           label: 'IMDB rating',
           render: (value) => (
-            <TableButton onClick={() => {}}>
-              {value}
-            </TableButton>
+            <TableButton onClick={() => {}}>{value}</TableButton>
           ),
         },
         {
           id: 3,
           key: 'rating',
-          label: <TableRowHeader label="Our rating of movies found online on IMDB lists" onClickInfo={() => {}} />,
+          label: (
+            <TableRowHeader
+              label="Our rating of movies found online on IMDB lists"
+              onClickInfo={() => {}}
+            />
+          ),
           render: (value) => (
             <TableButton onClick={() => {}}>
               <TableRating type="star" rating={value} />
@@ -532,6 +559,9 @@ export const ComparisonTableWithData = () => {
       headers={headers}
       collapsibleSections
       hideDetails
+      classNameOverrides={{
+        hideDetailsButton: 'p-container wmx6',
+      }}
     />
   );
 };