@popsure/dirty-swan 0.27.14 → 0.27.16

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

@@ -19,11 +19,17 @@ 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    |
+| 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    |
 
 ## Types
 
@@ -55,6 +61,105 @@ export const ComparisonTableWithData = () => {
   const headers = [
     {
       id: 1,
+      default: true,
+      cells: [
+        {
+          id: 1,
+          key: 'name',
+          label: 'Films',
+        },
+        {
+          id: 2,
+          key: 'country',
+          label: 'Country',
+        },
+        {
+          id: 4,
+          key: 'imdb',
+          label: 'IMDB rating',
+        },
+        {
+          id: 3,
+          key: 'rating',
+          label: 'Our rating',
+          render: (value) => <TableRating type="star" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'recommended',
+          label: 'Recommended',
+          render: (value) => <TableRating type="zap" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'familyFriendly',
+          label: 'Family friendly',
+          render: (value) => <TableTrueFalse value={value} />,
+        },
+        {
+          id: 6,
+          key: 'boxOffice',
+          label: 'Box office',
+          render: (value) =>
+            value.toLocaleString('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }),
+        },
+      ],
+    },
+    {
+      id: 2,
+      label: 'SUBSECTION',
+      cells: [
+        {
+          id: 1,
+          key: 'name',
+          label: 'Films',
+        },
+        {
+          id: 2,
+          key: 'country',
+          label: 'Country',
+        },
+        {
+          id: 4,
+          key: 'imdb',
+          label: 'IMDB rating',
+        },
+        {
+          id: 3,
+          key: 'rating',
+          label: 'Our rating',
+          render: (value) => <TableRating type="star" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'recommended',
+          label: 'Recommended',
+          render: (value) => <TableRating type="zap" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'familyFriendly',
+          label: 'Family friendly',
+          render: (value) => <TableTrueFalse value={value} />,
+        },
+        {
+          id: 6,
+          key: 'boxOffice',
+          label: 'Box office',
+          render: (value) =>
+            value.toLocaleString('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }),
+        },
+      ],
+    },
+    {
+      id: 3,
+      label: 'SUBSECTION 2',
       cells: [
         {
           id: 1,
@@ -137,7 +242,14 @@ export const ComparisonTableWithData = () => {
       boxOffice: 258908054,
     },
   ];
-  return <ComparisonTable data={data} headers={headers} />;
+  return (
+    <ComparisonTable
+      data={data}
+      headers={headers}
+      collapsibleSections
+      hideDetails
+    />
+  );
 };
 
 <ComparisonTableWithData />
@@ -162,9 +274,108 @@ interface TableData {
 }
 
 export const ComparisonTableWithData = () => {
-  const headers: Array<TableHeader<TableData>> = [
+  const headers = [
     {
       id: 1,
+      default: true,
+      cells: [
+        {
+          id: 1,
+          key: 'name',
+          label: 'Films',
+        },
+        {
+          id: 2,
+          key: 'country',
+          label: 'Country',
+        },
+        {
+          id: 4,
+          key: 'imdb',
+          label: 'IMDB rating',
+        },
+        {
+          id: 3,
+          key: 'rating',
+          label: 'Our rating',
+          render: (value) => <TableRating type="star" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'recommended',
+          label: 'Recommended',
+          render: (value) => <TableRating type="zap" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'familyFriendly',
+          label: 'Family friendly',
+          render: (value) => <TableTrueFalse value={value} />,
+        },
+        {
+          id: 6,
+          key: 'boxOffice',
+          label: 'Box office',
+          render: (value) =>
+            value.toLocaleString('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }),
+        },
+      ],
+    },
+    {
+      id: 2,
+      label: 'SUBSECTION',
+      cells: [
+        {
+          id: 1,
+          key: 'name',
+          label: 'Films',
+        },
+        {
+          id: 2,
+          key: 'country',
+          label: 'Country',
+        },
+        {
+          id: 4,
+          key: 'imdb',
+          label: 'IMDB rating',
+        },
+        {
+          id: 3,
+          key: 'rating',
+          label: 'Our rating',
+          render: (value) => <TableRating type="star" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'recommended',
+          label: 'Recommended',
+          render: (value) => <TableRating type="zap" rating={value} />,
+        },
+        {
+          id: 5,
+          key: 'familyFriendly',
+          label: 'Family friendly',
+          render: (value) => <TableTrueFalse value={value} />,
+        },
+        {
+          id: 6,
+          key: 'boxOffice',
+          label: 'Box office',
+          render: (value) =>
+            value.toLocaleString('de-DE', {
+              style: 'currency',
+              currency: 'EUR',
+            }),
+        },
+      ],
+    },
+    {
+      id: 3,
+      label: 'SUBSECTION 2',
       cells: [
         {
           id: 1,
@@ -247,7 +458,14 @@ export const ComparisonTableWithData = () => {
       boxOffice: 258908054,
     },
   ];
-  return <ComparisonTable data={data} headers={headers} />;
+  return (
+    <ComparisonTable
+      data={data}
+      headers={headers}
+      collapsibleSections
+      hideDetails
+    />
+  );
 };
 
 <ComparisonTableWithData />;

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,123 @@ 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}
-                            />
-                          );
-                        })}
-                      </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}
+                return (
+                  <>
+                    {headerGroup.label && collapsibleSections ? (
+                      <AccordionItem
+                        className="mt8"
+                        label={headerGroup.label}
+                        headerClassName="p24 br8"
+                        isOpen={selectedSection === String(headerGroup.label)}
+                        onOpen={() =>
+                          setSelectedSection(String(headerGroup.label))
+                        }
+                        onClose={() => setSelectedSection('')}
+                        key={String(headerGroup.label)}
                       >
-                        {showMore ? 'Hide details' : 'Show details'}
-                        <Chevron
-                          className={
-                            showMore ? '' : baseStyles['icon-inverted']
-                          }
-                        />
-                      </button>
-                    </div>
-                  </div>
-                )}
+                        <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>
+                    ) : (
+                      <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>
+                    )}
+                  </>
+                );
+              })}
+          {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 +253,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/dateSelector/datepicker.scss

@@ -160,14 +160,8 @@
 }
 
 .DayPicker-Day {
-  display: table-cell;
-  padding: 0.5em;
-  border-radius: 50%;
-  vertical-align: middle;
-  text-align: center;
-  cursor: pointer;
-
-  font: normal 16px Lato;
+  min-width: 40px;
+  height: 40px;
 }
 
 .DayPicker-WeekNumber {