@popsure/dirty-swan 0.28.0-beta.4 → 0.28.0

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

@@ -1,16 +1,15 @@
-import React, { useRef, useState } from 'react';
-import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
 import classNames from 'classnames';
+import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
 
+import { AccordionItem } from './components/AccordionItem';
+import Chevron from './components/Chevron';
 import Row from './components/Row';
-import TableArrows, { ArrowValues } from './components/TableArrows';
+import TableArrows from './components/TableArrows';
+import TableInfoButton from './components/TableInfoButton';
 import TableRating from './components/TableRating';
-import TableTrueFalse from './components/TableTrueFalse';
 import TableRowHeader from './components/TableRowHeader';
-import TableInfoButton from './components/TableInfoButton';
-import Chevron from './components/Chevron';
-import { useActiveTableArrows } from './hooks/useActiveTableArrows';
-
+import TableTrueFalse from './components/TableTrueFalse';
+import { useComparisonTable } from './hooks/useComparisonTable';
 import baseStyles from './style.module.scss';
 
 export interface CellBaseProps<T> {
@@ -21,7 +20,7 @@ export interface CellBaseProps<T> {
    * @param value The current data value
    * @param element The complete data object
    */
-  render?: (value: any, element: T) => React.ReactNode; //TODO: add typing to value param
+  render?: (value: any, element: T) => React.ReactNode; // TODO: add typing to value param
 }
 
 interface CellWithId<T> extends CellBaseProps<T> {
@@ -46,6 +45,12 @@ export interface ComparisonTableProps<T> {
   headers: Array<TableHeader<T>>;
   data: Array<T>;
   hideDetails?: boolean;
+  hideScrollBars?: boolean;
+  collapsibleSections?: boolean;
+  cellWidth?: number;
+  firstColumnWidth?: number;
+  stickyHeaderTopOffset?: number;
+  growContent?: boolean;
   styles?: {
     header?: string;
     container?: string;
@@ -55,57 +60,62 @@ export interface ComparisonTableProps<T> {
 const ComparisonTable = <T extends { id: number }>(
   props: ComparisonTableProps<T>
 ) => {
-  const { headers, data, hideDetails, styles } = props;
-  const [showMore, setShowMore] = useState<boolean>(false);
-  const headerContainerRef = useRef<HTMLDivElement | null>(null);
-  const { activeArrows, contentContainerRef, contentWrapperRef } =
-    useActiveTableArrows();
-
-  /** narrow types */
-  const headerContainer = headerContainerRef
-    ? headerContainerRef.current
-    : null;
-  const contentWrapper =
-    typeof contentWrapperRef === 'object' && contentWrapperRef
-      ? contentWrapperRef.current
-      : null;
+  const {
+    headers,
+    data,
+    hideDetails,
+    styles,
+    hideScrollBars,
+    collapsibleSections,
+    cellWidth,
+    firstColumnWidth,
+    stickyHeaderTopOffset,
+    growContent,
+  } = props;
 
-  const handleArrowsClick = (value: ArrowValues) => {
-    if (headerContainerRef.current) {
-      headerContainerRef.current.scroll({
-        top: 0,
-        left:
-          value === 'next'
-            ? headerContainerRef.current.scrollLeft + window.innerWidth
-            : headerContainerRef.current.scrollLeft - window.innerWidth,
-        behavior: 'smooth',
-      });
-    }
-  };
+  const {
+    headerWidth,
+    contentContainerRef,
+    selectedSection,
+    setSelectedSection,
+    selectedTabIndex,
+    scrollContainerCallbackRef,
+    handleArrowsClick,
+    toggleMoreRows,
+    showMore,
+  } = useComparisonTable();
 
-  const toggleMoreRows = async () => {
-    if (showMore && headerContainer && contentWrapper) {
-      window.scroll(
-        0,
-        window.scrollY +
-          (contentWrapper.getBoundingClientRect().y -
-            headerContainer.getBoundingClientRect().bottom)
-      );
-    }
-    setShowMore(!showMore);
-  };
+  const cssVariablesStyle = {
+    '--tableWidth': `${headerWidth}px`,
+    ...(cellWidth ? { '--cellWidth': `${cellWidth}px` } : {}),
+    ...(firstColumnWidth
+      ? { '--firstColumnWidth': `${firstColumnWidth}px` }
+      : {}),
+    ...(stickyHeaderTopOffset
+      ? { '--stickyHeaderTopOffset': `${stickyHeaderTopOffset}px` }
+      : {}),
+    ...(growContent ? { '--growContent': '100%' } : {}),
+  } as React.CSSProperties;
 
   return (
     <ScrollSync>
-      <div>
+      <div style={cssVariablesStyle}>
         <div className={classNames(baseStyles.header, styles?.header)}>
           <ScrollSyncPane>
-            <div className={baseStyles.container} ref={headerContainerRef}>
+            <div
+              className={classNames(baseStyles.container, {
+                [baseStyles.noScrollBars]: hideScrollBars,
+              })}
+              ref={scrollContainerCallbackRef}
+            >
               <div className={classNames(baseStyles['overflow-container'])}>
                 <div className={baseStyles['group-container']}>
                   <TableArrows
                     onClick={handleArrowsClick}
-                    active={activeArrows}
+                    active={{
+                      left: selectedTabIndex > 0,
+                      right: selectedTabIndex < data.length - 1,
+                    }}
                   />
                   <Row<T>
                     key="table-header-row"
@@ -119,84 +129,127 @@ const ComparisonTable = <T extends { id: number }>(
             </div>
           </ScrollSyncPane>
         </div>
-        <ScrollSyncPane>
-          <div
-            className={classNames(baseStyles.container, styles?.container)}
-            ref={contentWrapperRef}
-          >
-            <div
-              className={classNames(baseStyles['overflow-container'])}
-              ref={contentContainerRef}
-            >
-              <div className={baseStyles['group-container']}>
-                {Array.isArray(headers) &&
-                  headers
-                    .filter(
-                      (headerGroup) =>
-                        !hideDetails || showMore || headerGroup.default
-                    )
-                    .map((headerGroup, headerGroupIndex) => (
-                      <div key={headerGroup.id}>
-                        {
-                          /**
-                           * Print a table subheader if the `label` value is present
-                           */
-                          headerGroup.label && (
-                            <div className={baseStyles['group-title']}>
-                              <h4 className={`p-h4 ${baseStyles.sticky}`}>
-                                {headerGroup.label}
-                              </h4>
-                            </div>
-                          )
-                        }
+        <div ref={contentContainerRef}>
+          {Array.isArray(headers) &&
+            headers
+              .filter(
+                (headerGroup) => !hideDetails || showMore || headerGroup.default
+              )
+              .map((headerGroup, headerGroupIndex) => {
+                const content = headerGroup.cells?.map((cell, index) => {
+                  const rowId = `${headerGroup.id}-${
+                    cell.key ?? 'addon'
+                  }-${index}`;
 
-                        {headerGroup.cells?.map((cell, index) => {
-                          const rowId = `${headerGroup.id}-${
-                            cell.key ?? 'addon'
-                          }-${index}`;
+                  /** Do not render the first row */
+                  if (index === 0 && headerGroupIndex === 0) return null;
 
-                          /** Do not render the first row */
-                          if (index === 0 && headerGroupIndex === 0)
-                            return null;
+                  return (
+                    <Row<T> key={rowId} rowId={rowId} cell={cell} data={data} />
+                  );
+                });
 
-                          return (
-                            <Row<T>
-                              key={rowId}
-                              rowId={rowId}
-                              cell={cell}
-                              data={data}
-                            />
-                          );
-                        })}
+                const idString = `headerGroup-${headerGroup.id}`;
+
+                return (
+                  <>
+                    {headerGroup.label && collapsibleSections ? (
+                      <AccordionItem
+                        className="mt8"
+                        label={headerGroup.label}
+                        headerClassName="p24 br8"
+                        isOpen={selectedSection === idString}
+                        onOpen={() => setSelectedSection(idString)}
+                        onClose={() => setSelectedSection('')}
+                        key={idString}
+                      >
+                        <ScrollSyncPane>
+                          <div
+                            className={classNames(
+                              baseStyles.container,
+                              styles?.container,
+                              {
+                                [baseStyles.noScrollBars]: hideScrollBars,
+                              }
+                            )}
+                          >
+                            <div
+                              className={classNames(
+                                baseStyles['overflow-container']
+                              )}
+                            >
+                              <div className={baseStyles['group-container']}>
+                                {content}
+                              </div>
+                            </div>
+                          </div>
+                        </ScrollSyncPane>
+                      </AccordionItem>
+                    ) : (
+                      <div key={idString}>
+                        <ScrollSyncPane>
+                          <div
+                            className={classNames(
+                              baseStyles.container,
+                              styles?.container,
+                              {
+                                [baseStyles.noScrollBars]: hideScrollBars,
+                              }
+                            )}
+                          >
+                            <div
+                              className={classNames(
+                                baseStyles['overflow-container']
+                              )}
+                            >
+                              <div className={baseStyles['group-container']}>
+                                {
+                                  /**
+                                   * Print a table subheader if the `label` value is present
+                                   */
+                                  headerGroup.label && !collapsibleSections && (
+                                    <div className={baseStyles['group-title']}>
+                                      <h4
+                                        className={`p-h4 ${baseStyles.sticky}`}
+                                      >
+                                        {headerGroup.label}
+                                      </h4>
+                                    </div>
+                                  )
+                                }
+                                {content}
+                              </div>
+                            </div>
+                          </div>
+                        </ScrollSyncPane>
                       </div>
-                    ))}
-                {hideDetails && (
-                  <div
-                    className={classNames(
-                      baseStyles['show-details-container'],
-                      baseStyles.sticky,
-                      'mt48'
                     )}
-                  >
-                    <div>
-                      <button
-                        className={`w100 d-flex p-a p-h4 c-pointer ${baseStyles['show-details-button']}`}
-                        onClick={toggleMoreRows}
-                      >
-                        {showMore ? 'Hide details' : 'Show details'}
-                        <Chevron
-                          className={
-                            showMore ? '' : baseStyles['icon-inverted']
-                          }
-                        />
-                      </button>
-                    </div>
-                  </div>
-                )}
+                  </>
+                );
+              })}
+          {hideDetails && (
+            <div
+              className={classNames(
+                baseStyles['show-details-container'],
+                baseStyles.sticky,
+                'mt48'
+              )}
+            >
+              <div>
+                <button
+                  className={`w100 d-flex p-a p-h4 c-pointer ${baseStyles['show-details-button']}`}
+                  onClick={toggleMoreRows}
+                  type="button"
+                >
+                  {showMore ? 'Hide details' : 'Show details'}
+                  <Chevron
+                    className={showMore ? '' : baseStyles['icon-inverted']}
+                  />
+                </button>
               </div>
             </div>
-          </div>
-        </ScrollSyncPane>
+          )}
+        </div>
       </div>
     </ScrollSync>
   );
@@ -204,8 +257,8 @@ const ComparisonTable = <T extends { id: number }>(
 
 export {
   ComparisonTable,
+  TableInfoButton,
   TableRating,
-  TableTrueFalse,
   TableRowHeader,
-  TableInfoButton,
+  TableTrueFalse,
 };

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

@@ -12,6 +12,20 @@
   }
 }
 
+.noScrollBars {
+  // 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%;
@@ -20,9 +34,8 @@
 .group-container {
   display: flex;
   flex-flow: column;
-  width: max-content;
+  width: var(--growContent, max-content);
   margin: auto;
-  min-width: calc(56rem + 48px);
 }
 
 .group-title {
@@ -58,7 +71,7 @@
 
 .header {
   position: sticky;
-  top: 0;
+  top: var(--stickyHeaderTopOffset, 0);
   z-index: 2;
   background-color: white;
 
@@ -74,9 +87,6 @@
 
 .show-details-container {
   width: 100%;
-  max-width: calc(100vw - 24px);
-
-  padding-left: 16px;
 
   border: none;
 }

package/src/lib/components/input/autoSuggestInput/style.module.scss

@@ -9,6 +9,10 @@
   }
 }
 
+.suggestionsContainer {
+  position: relative;
+}
+
 .suggestionsList {
   position: absolute;
 
@@ -18,7 +22,6 @@
   border: 1px solid var(--ds-primary-500);
 
   width: 100%;
-  max-width: 364px;
   height: fit-content;
   max-height: 216px;
 

package/src/lib/components/input/currency/index.stories.mdx

@@ -21,5 +21,13 @@ The following will be done:
     <CurrencyInput className="wmx5 mt8" />
     <h4 className="p-h4 mt24">Filled</h4>
     <CurrencyInput className="wmx5 mt8" value={1234567.32} />
+    <h4 className="p-h4 mt24">With placeholder</h4>
+    <CurrencyInput className="wmx5 mt8" placeholder="Amount" />
+    <h4 className="p-h4 mt24">With label</h4>
+    <CurrencyInput className="wmx5 mt8" label="Amount" placeholder="100" />
+    <h4 className="p-h4 mt24">With label and no placeholder</h4>
+    <CurrencyInput className="wmx5 mt8" label="Amount" />
+    <h4 className="p-h4 mt24">With placeholder and no label</h4>
+    <CurrencyInput className="wmx5 mt8" hideLabel label="Amount" placeholder="0" />
   </>
 </Preview>

package/src/lib/components/input/currency/index.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { render } from '../../../util/testUtils';
 
 import CurrencyInput from '.';
 
@@ -12,45 +12,45 @@ const setup = () => {
 };
 
 describe('Currency input component', () => {
-  it('Should correctly space thousands separators', () => {
-    const { input } = setup();
-    fireEvent.change(input, { target: { value: '1234567' } });
+  it('Should correctly space thousands separators', async () => {
+    const { input, user } = setup();
+    await user.type(input, '1234567');
     expect(input.value).toBe('1 234 567');
   });
 
-  it('Should remove non numerical values', () => {
-    const { input } = setup();
-    fireEvent.change(input, { target: { value: '123asdf4567' } });
+  it('Should remove non numerical values', async () => {
+    const { input, user } = setup();
+    await user.type(input, '123asdf4567');
     expect(input.value).toBe('1 234 567');
   });
 
-  it('Should remove non numerical values', () => {
-    const { input } = setup();
-    fireEvent.change(input, { target: { value: '123asdf4567' } });
+  it('Should remove non numerical values', async () => {
+    const { input, user } = setup();
+    await user.type(input, '123asdf4567');
     expect(input.value).toBe('1 234 567');
   });
 
-  it('Should allow decimal separator', () => {
-    const { input } = setup();
-    fireEvent.change(input, { target: { value: '1234567.34' } });
+  it('Should allow decimal separator', async () => {
+    const { input, user } = setup();
+    await user.type(input, '1234567.34');
     expect(input.value).toBe('1 234 567.34');
   });
 
-  it('Should replace comma decimal seprator with a dot', () => {
-    const { input } = setup();
-    fireEvent.change(input, { target: { value: '1234567,34' } });
+  it('Should replace comma decimal seprator with a dot', async () => {
+    const { input, user } = setup();
+    await user.type(input, '1234567,34');
     expect(input.value).toBe('1 234 567.34');
   });
 
-  it('Should only allow one decimal separator', () => {
-    const { input } = setup();
-    fireEvent.change(input, { target: { value: '1234567..34' } });
+  it('Should only allow one decimal separator', async () => {
+    const { input, user } = setup();
+    await user.type(input, '1234567..34');
     expect(input.value).toBe('1 234 567.34');
   });
 
-  it('Should only allow one decimal separator after a sequence of number', () => {
-    const { input } = setup();
-    fireEvent.change(input, { target: { value: '1234567..34.4' } });
+  it('Should only allow one decimal separator after a sequence of number', async () => {
+    const { input, user } = setup();
+    await user.type(input, '1234567..34.4');
     expect(input.value).toBe('1 234 567.34');
   });
 });

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

@@ -62,5 +62,47 @@ You are looking at the JSX definition of the Input component, if you want you ca
       prefix="€"
       error="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac hendrerit justo. Nunc nibh ex, vulputate ac leo id, feugiat rhoncus purus."
     />
+    <h1 className="p-h1 mt32">With label</h1>
+    <h4 className="p-h4 mt24">Empty</h4>
+    <Input className="wmx5 mt8" label="Email" />
+    <h4 className="p-h4 mt24">With placeholder</h4>
+    <Input
+      className="wmx5 mt8"
+      label="Email"
+      placeholder="email@feather-insurance.com"
+    />
+    <h4 className="p-h4 mt24">Filled</h4>
+    <Input
+      className="wmx5 mt8"
+      value="email@feather-insurance.com"
+      label="Email"
+      placeholder="email@feather-insurance.com"
+    />
+    <h4 className="p-h4 mt24">Disabled</h4>
+    <Input
+      className="wmx5 mt8"
+      label="Email"
+      placeholder="email@feather-insurance.com"
+      disabled
+    />
+    <h4 className="p-h4 mt24">Error</h4>
+    <Input
+      className="wmx5 mt8"
+      label="Email"
+      value="invalid.email@feather-insurance.com"
+      placeholder="email@feather-insurance.com"
+      error="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    />
+    <h4 className="p-h4 mt24">With prefix</h4>
+    <Input className="wmx5 mt8" label="Amount" value="100" prefix="€" />
+    <h4 className="p-h4 mt24">With label hidden</h4>
+    <Input
+      className="wmx5 mt8"
+      label="Amount"
+      value="100"
+      prefix="€"
+      hideLabel
+      onChange={() => {}}
+    />
   </>
 </Preview>