@popsure/dirty-swan 0.26.10 → 0.26.11

package/src/lib/components/cards/infoCard/style.module.scss

@@ -0,0 +1,53 @@
+@use "../../../scss/public/grid" as *;
+
+@keyframes appear-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.root-container {
+  position: relative;
+  padding-top: 40px;
+
+  &:hover {
+    .right-icon {
+      visibility: visible;
+
+      animation-name: appear-in;
+      animation-duration: 0.3s;
+      animation-fill-mode: both;
+    }
+  }
+}
+
+.top-icon {
+  position: absolute;
+
+  left: 50%;
+  transform: translateX(-50%) translateY(-40px);
+
+  &--muted {
+    opacity: 0.25;
+  }
+}
+
+.right-icon {
+  visibility: hidden;
+  position: absolute;
+  top: 64px;
+  right: 24px;
+}
+
+.container {
+  padding: 0 24px 24px 24px;
+  height: 100%;
+
+  @include p-size-mobile {
+    height: fit-content;
+  }
+}

package/src/lib/components/chip/icons/remove-button-highlighted.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4L4 12" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M4 4L12 12" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/components/chip/icons/remove-button.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4167 4L4.41666 12" stroke="#B1B0F5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M4.41666 4L12.4167 12" stroke="#B1B0F5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

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

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import Chip from '.';
+import featherLogo from '../cards/icons/feather-logo.svg';
+
+<Meta title="JSX/Chip" />
+
+# Chip
+
+Chip component displays text and image (optional) of given values.
+
+The X button in the right calls the prop `onRemove` function to keep track of removed selected values.
+
+<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%3D245%253A42"
+    allowFullScreen
+  ></iframe>
+</Preview>
+
+## Example
+
+export const ChipStory = () => {
+  const values = [
+    { value: 'feather', leftIcon: featherLogo },
+    { value: 'feather2', leftIcon: featherLogo },
+    {
+      value: 'feather3',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'dirtyswan',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'test value',
+      leftIcon: featherLogo,
+    },
+  ];
+  const [selectedValues, setSelectedValues] = useState(values);
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+      {selectedValues.map((value) => (
+        <Chip
+          value={value}
+          onRemove={(value) => {
+            const newValues = [...selectedValues].filter(
+              (selectedValue) => selectedValue.value !== value.value
+            );
+            setSelectedValues(newValues);
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+<ChipStory />
+
+```typescript
+import React, { useState } from 'react';
+import { Chip } from '@popsure/dirty-swan';
+
+export default () => {
+  const values = [
+    { value: 'feather', leftIcon: featherLogo },
+    { value: 'feather2', leftIcon: featherLogo },
+    {
+      value: 'feather3',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'dirtyswan',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'test value',
+      leftIcon: featherLogo,
+    },
+  ];
+  const [selectedValues, setSelectedValues] = useState(values);
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+      {selectedValues.map((value) => (
+        <Chip
+          value={value}
+          onRemove={(value) => {
+            const newValues = [...selectedValues].filter(
+              (selectedValue) => selectedValue.value !== value.value
+            );
+            setSelectedValues(newValues);
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+```

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

@@ -0,0 +1,38 @@
+import styles from './style.module.scss';
+import removeButtonIcon from './icons/remove-button.svg';
+import removeButtonHighlightedIcon from './icons/remove-button-highlighted.svg';
+import { Option } from '../../models/autoSuggestInput';
+
+export default ({
+  value,
+  onRemove,
+}: {
+  value: Option;
+  onRemove: (value: Option) => void;
+}) => (
+  <div className={`p-p mr8 mb8 d-flex ${styles['chip']}`}>
+    {value.leftIcon && (
+      <img
+        className={`mr8 ${styles['chip-image']}`}
+        src={value.leftIcon}
+        alt={value.value}
+      />
+    )}
+    <div className="mr8">{value.value}</div>
+    <div
+      className={`c-pointer ${styles['chip-button-container']}`}
+      onClick={() => onRemove(value)}
+    >
+      <img
+        className={styles['chip-remove-button-highlighted']}
+        src={removeButtonHighlightedIcon}
+        alt="removal x button highlighted"
+      />
+      <img
+        className={styles['chip-remove-button']}
+        src={removeButtonIcon}
+        alt="removal x button"
+      />
+    </div>
+  </div>
+);

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

@@ -0,0 +1,54 @@
+.chip {
+  background: var(--ds-primary-100);
+
+  border: 2px solid var(--ds-primary-100);
+  border-radius: 8px;
+
+  padding: 4px 8px;
+  width: fit-content;
+  width: -moz-fit-content;
+
+  display: flex;
+  align-items: center;
+
+  animation-name: appearInAnimation;
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+}
+
+.chip:hover {
+  transition: 0.2s ease-in;
+  border: 2px solid var(--ds-primary-500);
+}
+
+.chip-image {
+  width: 24px;
+  height: 14px;
+}
+
+.chip-button-container {
+  width: 16px;
+  height: 16px;
+
+  position: relative;
+}
+
+.chip-remove-button,
+.chip-remove-button-highlighted {
+  position: absolute;
+}
+
+.chip-remove-button:hover {
+  opacity: 0;
+}
+
+@keyframes appearInAnimation {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+
+  to {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,19 @@
+const Chevron = ({ className }: { className?: string }) => (
+  <svg
+    width="20"
+    height="20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M15 12.5l-5-5-5 5"
+      stroke="#8E8CEE"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Chevron;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { Cell } from '../../index';
+
+import styles from './style.module.scss';
+
+interface RowProps<T> {
+  cell: Cell<T>;
+  data: Array<T>;
+  isRowHeader?: boolean;
+  rowId: string;
+}
+
+const Row = <T extends { id: number }>(props: RowProps<T>) => {
+  const { cell, data, isRowHeader, rowId } = props;
+
+  return (
+    <div
+      key={rowId}
+      className={`
+        d-flex
+        w-100
+        ${isRowHeader ? styles.header : ''}
+      `}
+    >
+      <h4
+        className={`
+          wmx4
+          ${styles.cell}
+          ${styles.sticky}
+          ${isRowHeader ? `p-h2 p--serif ${styles.title}` : ''}
+          ${typeof cell.key === 'undefined' ? styles.addon : ''}
+        `}
+      >
+        {cell.label}
+      </h4>
+
+      {Array.isArray(data) &&
+        data.map((item) => {
+          /**
+           * Do not render a cell if
+           * the data source object doesn't have the current key
+           */
+          if (typeof cell.key === 'undefined') return null;
+          if (typeof item[cell.key] === 'undefined') return null;
+
+          return (
+            <div
+              className={`ta-center ${styles.cell}`}
+              key={`${rowId}-${item.id}`}
+            >
+              {
+                /**
+                 * Return a function if `render` option is present
+                 * else print the current data source value
+                 */
+                typeof cell.render === 'function'
+                  ? cell.render(item[cell.key], item)
+                  : `${item[cell.key]}`
+              }
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+export default React.memo(Row) as typeof Row;

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

@@ -0,0 +1,114 @@
+@use "../../../../scss/public/colors" as *;
+@use "../../../../scss/public/grid" as *;
+
+$cell-min-width: 256px;
+
+.header {
+  position: relative;
+
+  & > div {
+    width: 100vw;
+
+    &:nth-child(n + 3) {
+      margin: 0;
+    }
+
+    @include p-size-tablet {
+      width: $cell-min-width;
+      scroll-snap-align: unset;
+    }
+  }
+}
+
+.cell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  scroll-snap-align: end;
+
+  line-height: 24px;
+
+  padding: 16px;
+
+  color: $ds-grey-700;
+
+  width: 50vw;
+
+  &:first-child {
+    background-color: white;
+    /** Add scroll snap to every column except the first one */
+    scroll-snap-align: unset;
+  }
+
+  &:nth-child(n + 3) {
+    margin-left: 50vw;
+
+    @include p-size-tablet {
+      margin-left: unset;
+    }
+  }
+
+  @include p-size-tablet {
+    flex: 1 0 $cell-min-width;
+    width: $cell-min-width;
+    padding: 24px;
+
+    &:last-child {
+      padding: 24px 8px 24px 24px;
+    }
+  }
+}
+
+.title {
+  position: relative;
+  color: $ds-grey-900;
+
+  display: none;
+
+  &:after {
+    content: '';
+    display: block;
+
+    position: absolute;
+    top: calc(
+      50% + 16px
+    ); // Display bottom border at the same distance regardless of cell height
+
+    height: 4px;
+    width: 100%;
+    max-width: 140px;
+
+    background-color: $ds-primary-500;
+  }
+
+  @include p-size-tablet {
+    display: flex;
+  }
+}
+
+.sticky {
+  position: sticky;
+  justify-content: flex-start;
+  z-index: 1;
+
+  top: 0;
+  left: 0;
+
+  width: 50vw;
+
+  @include p-size-tablet {
+    border-right: 1px solid $ds-grey-100;
+    flex: 1 0 288px;
+  }
+}
+
+.addon {
+  width: 100%;
+  border-right: none;
+  max-width: 100vw;
+
+  @include p-size-desktop {
+    max-width: 944px;
+  }
+}

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

@@ -0,0 +1,19 @@
+const ArrowIcon = ({ className }: { className?: string }) => (
+  <svg
+    width="14"
+    height="8"
+    viewBox="0 0 14 8"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M1 1.00003L7 7.00003L13 1.00003"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default ArrowIcon;

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;