@popsure/dirty-swan 0.26.9 → 0.26.12

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import ArrowIcon from './Arrow';
+import { ActiveTableArrows } from '../../hooks/useActiveTableArrows';
+
+import styles from './style.module.scss';
+
+export type ArrowValues = 'prev' | 'next';
+
+interface TableArrowsProps {
+  onClick: (value: ArrowValues) => void;
+  active: ActiveTableArrows;
+}
+
+const TableArrows = (props: TableArrowsProps) => {
+  const { active, onClick } = props;
+  const handleButtonClick = (value: ArrowValues) => () => onClick(value);
+
+  return (
+    <div className={`mt24 ${styles.container}`}>
+      <button
+        onClick={handleButtonClick('prev')}
+        className={classNames(
+          `p-btn--secondary d-flex`,
+          styles.prev,
+          styles.arrow,
+          {
+            [styles.active]: active.left,
+          }
+        )}
+      >
+        <ArrowIcon />
+      </button>
+      <button
+        onClick={handleButtonClick('next')}
+        className={classNames(
+          `p-btn--secondary d-flex`,
+          styles.next,
+          styles.arrow,
+          {
+            [styles.active]: active.right,
+          }
+        )}
+      >
+        <ArrowIcon />
+      </button>
+    </div>
+  );
+};
+
+export default TableArrows;

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

@@ -0,0 +1,53 @@
+@use "../../../../scss/public/colors" as *;
+@use "../../../../scss/public/grid" as *;
+
+.container {
+  position: absolute;
+  width: 100vw;
+  padding: 0 16px;
+  justify-content: space-between;
+  z-index: 1;
+  display: flex;
+  @include p-size-tablet {
+    display: none;
+  }
+}
+
+.next {
+  transform: rotate(-90deg);
+}
+
+.prev {
+  transform: rotate(90deg);
+}
+
+.arrow {
+  width: 32px;
+  height: 32px;
+
+  padding: 0;
+
+  border-radius: 50%;
+  background-color: $ds-grey-200;
+
+  justify-content: center;
+  align-items: center;
+
+  stroke: $ds-primary-100;
+
+  &:hover,
+  &:focus {
+    background-color: $ds-grey-200;
+    cursor: not-allowed;
+  }
+}
+
+.active {
+  stroke: $ds-primary-500;
+
+  &:hover,
+  &:focus {
+    background-color: $ds-grey-200;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,37 @@
+import styles from './style.module.scss';
+
+const TableInfoButton = ({
+  onClick,
+  className = '',
+}: {
+  onClick: () => void;
+  className?: string;
+}) => (
+  <span
+    role="button"
+    className={`p-btn--secondary ${styles.button} ${className}`}
+    onClick={onClick}
+  >
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 2.66667C5.94991 2.66667 2.66667 5.94991 2.66667 10C2.66667 14.0501 5.94991 17.3333 10 17.3333C14.0501 17.3333 17.3333 14.0501 17.3333 10C17.3333 5.94991 14.0501 2.66667 10 2.66667ZM0.666667 10C0.666667 4.84534 4.84534 0.666667 10 0.666667C15.1547 0.666667 19.3333 4.84534 19.3333 10C19.3333 15.1547 15.1547 19.3333 10 19.3333C4.84534 19.3333 0.666667 15.1547 0.666667 10Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 9C10.5523 9 11 9.44772 11 10V13.3333C11 13.8856 10.5523 14.3333 10 14.3333C9.44772 14.3333 9 13.8856 9 13.3333V10C9 9.44772 9.44772 9 10 9Z"
+      />
+      <path d="M10.8333 6.66667C10.8333 7.1269 10.4602 7.5 10 7.5C9.53976 7.5 9.16667 7.1269 9.16667 6.66667C9.16667 6.20643 9.53976 5.83333 10 5.83333C10.4602 5.83333 10.8333 6.20643 10.8333 6.66667Z" />
+    </svg>
+  </span>
+);
+
+export default TableInfoButton;

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

@@ -0,0 +1,30 @@
+@use "../../../../scss/public/colors" as *;
+
+.button {
+  padding: 0;
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  vertical-align: bottom;
+
+  width: 24px;
+  height: 24px;
+
+  transition: all 0.3s ease;
+
+  &:hover,
+  &:focus {
+    background-color: $ds-primary-50;
+
+    svg {
+      fill: $ds-primary-300;
+    }
+  }
+
+  svg {
+    fill: $ds-primary-100;
+    transition: all 0.3s ease;
+  }
+}

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

@@ -0,0 +1,13 @@
+const StarIcon = ({ className }: { className: string }) => (
+  <svg
+    width="12"
+    height="12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path d="M5.933.004a.73.73 0 01.756.468L7.891 3.67l3.407.16c.677.03.954.886.422 1.306l-2.66 2.145.899 3.296c.17.647-.545 1.166-1.105.8l-2.85-1.872-2.858 1.873c-.561.368-1.28-.152-1.107-.801l.9-3.296L.278 5.136C-.253 4.716.024 3.86.7 3.831l3.407-.161L5.322.472a.73.73 0 01.61-.468z" />
+  </svg>
+);
+
+export default StarIcon;

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

@@ -0,0 +1,17 @@
+const ZapIcon = ({ className }: { className: string }) => (
+  <svg
+    width="12"
+    height="12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.492 1.124A1 1 0 005.732.36l-5 6A1 1 0 001.5 8h3.367l-.36 2.876a1 1 0 001.761.764l5-6A1 1 0 0010.5 4H7.133l.36-2.876z"
+    />
+  </svg>
+);
+
+export default ZapIcon;

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 />;
+```