@popsure/dirty-swan 20.0.11 → 27.0.2

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

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+
+import StarIcon from './StarIcon';
+import ZapIcon from './ZapIcon';
+
+import styles from './style.module.scss';
+
+type RatingTypes = 'star' | 'zap';
+
+interface TableRatingProps {
+  type: RatingTypes;
+  rating: number;
+}
+
+const getRatingIcon = (type: RatingTypes) => {
+  const iconDictionary = {
+    zap: ZapIcon,
+    star: StarIcon,
+  };
+
+  return iconDictionary[type] || iconDictionary['star'];
+};
+
+const VALID_VALUES = [1, 2, 3];
+
+const TableRating = (props: TableRatingProps) => {
+  const { rating, type } = props;
+  const SelectedIcon = getRatingIcon(type);
+
+  return (
+    <div>
+      {VALID_VALUES.map((value) => (
+        <SelectedIcon
+          key={value}
+          className={classNames(
+            styles.icon,
+            value <= rating ? styles.filled : styles.empty
+          )}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default TableRating;

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

@@ -0,0 +1,13 @@
+@use "../../../../scss/public/colors" as *;
+
+.icon {
+  margin-right: 4px;
+}
+
+.filled {
+  fill: $ds-primary-500;
+}
+
+.empty {
+  fill: $ds-grey-200;
+}

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import TableInfoButton from '../TableInfoButton';
+
+import styles from './style.module.scss';
+
+const TableRowHeader = (props: {
+  label: string;
+  icon?: string;
+  subtitle?: string;
+  onClickInfo?: () => void;
+}) => {
+  const { icon, label, subtitle, onClickInfo } = props;
+  return (
+    <div className="d-flex">
+      <span className={`mr8 ${styles.icon}`}>{icon}</span>
+      <div>
+        <p className="p-p d-inline">
+          <span
+            className={classNames({
+              mr8: onClickInfo,
+            })}
+          >
+            {label}
+          </span>
+          {onClickInfo && <TableInfoButton onClick={onClickInfo} />}
+        </p>
+        {subtitle && <p className="p-p--small tc-grey-500">{subtitle}</p>}
+      </div>
+    </div>
+  );
+};
+
+export default TableRowHeader;

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

@@ -0,0 +1,3 @@
+.icon {
+  min-width: 20px;
+}

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

@@ -0,0 +1,40 @@
+const TableTrueFalse = ({
+  value,
+  className = '',
+}: {
+  value: boolean;
+  className?: string;
+}) => {
+  if (value) {
+    return (
+      <svg
+        width="18"
+        height="13"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+      >
+        <path
+          d="M15.667 1.833L6.5 11 2.333 6.833"
+          stroke="#8E8CEE"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.707 1.707A1 1 0 0010.293.293L6 4.586 1.707.293A1 1 0 00.293 1.707L4.586 6 .293 10.293a1 1 0 101.414 1.414L6 7.414l4.293 4.293a1 1 0 001.414-1.414L7.414 6l4.293-4.293z"
+        fill="#D2D2D8"
+      />
+    </svg>
+  );
+};
+
+export default TableTrueFalse;

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

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef, useState } from 'react';
+import debounce from 'lodash.debounce';
+
+export interface ActiveTableArrows {
+  left: boolean;
+  right: boolean;
+}
+
+export const useActiveTableArrows = (): {
+  activeArrows: ActiveTableArrows;
+  contentContainerRef: React.Ref<HTMLDivElement>;
+  contentWrapperRef: React.Ref<HTMLDivElement>;
+} => {
+  const [activeArrows, setActiveArrows] = useState<ActiveTableArrows>({
+    left: false,
+    right: true,
+  });
+  const contentContainerRef = useRef<HTMLDivElement | null>(null);
+  const contentWrapperRef = useRef<HTMLDivElement | null>(null);
+
+  const handleTableScroll = (e: Event) => {
+    const width = window.innerWidth;
+
+    if (
+      e.target === contentWrapperRef.current &&
+      contentContainerRef.current &&
+      contentContainerRef.current
+    ) {
+      const left =
+        contentContainerRef.current.getBoundingClientRect().left * -1;
+
+      setActiveArrows({
+        left: left > 0,
+        right:
+          left + width <
+          contentContainerRef.current.getBoundingClientRect().width,
+      });
+    }
+  };
+
+  const debouncedTableScroll = debounce(handleTableScroll, 150);
+
+  useEffect(() => {
+    contentWrapperRef.current?.addEventListener(
+      'scroll',
+      debouncedTableScroll,
+      {
+        passive: true,
+      }
+    );
+
+    return contentWrapperRef.current?.removeEventListener(
+      'scroll',
+      handleTableScroll
+    );
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    activeArrows,
+    contentContainerRef,
+    contentWrapperRef,
+  };
+};

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

@@ -0,0 +1,254 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import { ComparisonTable, TableRating, TableTrueFalse } from '.';
+
+<Meta title="JSX/Comparison Table" component={ComparisonTable} />
+
+# Comparison Table
+
+The Comparison Table component provides an easy way to compare vast amounts of information in a fast and easy way.
+
+<Preview>
+  <iframe
+    width="100%"
+    height="450"
+    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D2025%253A12194"
+    allowFullScreen
+  />
+</Preview>
+
+## 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    |
+
+## Types
+
+### Cell
+
+```typescript
+export interface CellBaseProps<T> {
+  label?: React.ReactNode;
+  render?: (value: any, element: T) => React.ReactNode;
+  key: Extract<keyof T, string>;
+  addonId?: string | number;
+}
+```
+
+### Header
+
+```typescript
+export interface Header<T> {
+  id: number;
+  label?: React.ReactNode;
+  cells: Array<Cell<T>>;
+  default?: boolean;
+}
+```
+
+## Default example
+
+export const ComparisonTableWithData = () => {
+  const headers = [
+    {
+      id: 1,
+      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',
+            }),
+        },
+      ],
+    },
+  ];
+  const data = [
+    {
+      id: 1,
+      name: 'Pulp Fiction',
+      country: 'United States',
+      year: '1994',
+      rating: 3,
+      imdb: 8.9,
+      recommended: 3,
+      familyFriendly: false,
+      boxOffice: 213928762,
+    },
+    {
+      id: 2,
+      name: 'Parasite',
+      country: 'South Korea',
+      year: '2019',
+      rating: 2,
+      imdb: 8.6,
+      recommended: 3,
+      familyFriendly: false,
+      boxOffice: 355475245,
+    },
+    {
+      id: 3,
+      name: 'Spirited Away',
+      country: 'Japan',
+      year: '2001',
+      rating: 3,
+      imdb: 8.6,
+      recommended: 3,
+      familyFriendly: true,
+      boxOffice: 258908054,
+    },
+  ];
+  return <ComparisonTable data={data} headers={headers} />;
+};
+
+<ComparisonTableWithData />
+
+```typescript jsx
+import ComparisonTable, {
+  TableRating,
+  TableTrueFalse,
+  TableHeader,
+} from '@popsure/dirty-swan';
+
+interface TableData {
+  id: number;
+  name: string;
+  country: string;
+  year: string;
+  rating: number;
+  imdb: number;
+  recommended: number;
+  familyFriendly: boolean;
+  boxOffice: number;
+}
+
+export const ComparisonTableWithData = () => {
+  const headers: Array<TableHeader<TableData>> = [
+    {
+      id: 1,
+      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',
+            }),
+        },
+      ],
+    },
+  ];
+  const data: Array<TableData> = [
+    {
+      id: 1,
+      name: 'Pulp Fiction',
+      country: 'United States',
+      year: '1994',
+      rating: 3,
+      imdb: 8.9,
+      recommended: 3,
+      familyFriendly: false,
+      boxOffice: 213928762,
+    },
+    {
+      id: 2,
+      name: 'Parasite',
+      country: 'South Korea',
+      year: '2019',
+      rating: 2,
+      imdb: 8.6,
+      recommended: 3,
+      familyFriendly: false,
+      boxOffice: 355475245,
+    },
+    {
+      id: 3,
+      name: 'Spirited Away',
+      country: 'Japan',
+      year: '2001',
+      rating: 3,
+      imdb: 8.6,
+      recommended: 3,
+      familyFriendly: true,
+      boxOffice: 258908054,
+    },
+  ];
+  return <ComparisonTable data={data} headers={headers} />;
+};
+
+<ComparisonTableWithData />;
+```

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

@@ -0,0 +1,211 @@
+import React, { useRef, useState } from 'react';
+import { ScrollSync, ScrollSyncPane } from 'react-scroll-sync';
+import classNames from 'classnames';
+
+import Row from './components/Row';
+import TableArrows, { ArrowValues } from './components/TableArrows';
+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 baseStyles from './style.module.scss';
+
+export interface CellBaseProps<T> {
+  /** Used to display the row's title */
+  label?: React.ReactNode;
+  /**
+   *
+   * @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
+}
+
+interface CellWithId<T> extends CellBaseProps<T> {
+  /** Used when adding component add-ons */
+  addonId: string | number;
+}
+
+export type Cell<T> =
+  | ({ key: Extract<keyof T, string> } & CellBaseProps<T>)
+  | ({ key?: undefined } & CellWithId<T>);
+
+export interface TableHeader<T> {
+  /** Required unique id number for each table group */
+  id: number;
+  /** Used to display a table group subheader */
+  label?: React.ReactNode;
+  cells: Array<Cell<T>>;
+  default?: boolean;
+}
+
+export interface ComparisonTableProps<T> {
+  headers: Array<TableHeader<T>>;
+  data: Array<T>;
+  hideDetails?: boolean;
+  styles?: {
+    header?: string;
+    container?: string;
+  };
+}
+
+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 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 toggleMoreRows = async () => {
+    if (showMore && headerContainer && contentWrapper) {
+      window.scroll(
+        0,
+        window.scrollY +
+          (contentWrapper.getBoundingClientRect().y -
+            headerContainer.getBoundingClientRect().bottom)
+      );
+    }
+    setShowMore(!showMore);
+  };
+
+  return (
+    <ScrollSync>
+      <div>
+        <div className={classNames(baseStyles.header, styles?.header)}>
+          <ScrollSyncPane>
+            <div className={baseStyles.container} ref={headerContainerRef}>
+              <div className={classNames(baseStyles['overflow-container'])}>
+                <div className={baseStyles['group-container']}>
+                  <TableArrows
+                    onClick={handleArrowsClick}
+                    active={activeArrows}
+                  />
+                  <Row<T>
+                    key="table-header-row"
+                    rowId="table-header-row"
+                    cell={headers[0].cells[0]}
+                    data={data}
+                    isRowHeader
+                  />
+                </div>
+              </div>
+            </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>
+                          )
+                        }
+
+                        {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;
+
+                          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}
+                      >
+                        {showMore ? 'Hide details' : 'Show details'}
+                        <Chevron
+                          className={
+                            showMore ? '' : baseStyles['icon-inverted']
+                          }
+                        />
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </ScrollSyncPane>
+      </div>
+    </ScrollSync>
+  );
+};
+
+export {
+  ComparisonTable,
+  TableRating,
+  TableTrueFalse,
+  TableRowHeader,
+  TableInfoButton,
+};