@popsure/dirty-swan 0.26.10 → 0.26.13

package/src/lib/components/cards/infoCard/index.stories.mdx

@@ -0,0 +1,61 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import InfoCard from '.';
+import { featherLogo } from '../icons';
+
+<Meta title="JSX/Cards/Info card" />
+
+# Info card
+
+| attribute  | unit                                                        | description                                                     | default value | required |
+| ---------- | ----------------------------------------------------------- | --------------------------------------------------------------- | ------------- | -------- |
+| title      | string                                                      | The title text that needs to be displayed                       | n/a           | true     |
+| topIcon    | [Icon](?path=/story/jsx-cards-intro--page#icon)             | Icon displayed on the top of the card, inside the purple circle | n/a           | true     |
+| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)             | Icon displayed on the top right corner of the card              | n/a           | false    |
+| state      | [Card State](?path=/story/jsx-cards-intro--page#card-state) | State that describe the interation with the card                | actionable    | false    |
+| dropshadow | boolean                                                     | If the card should have a box-shadow or not                     | true          | false    |
+
+<Preview>
+  <>
+    <h4 className="p-h4">With right icon</h4>
+    <InfoCard
+      className="wmx6 mt8"
+      title="Lorem ipsum"
+      rightIcon="info"
+      topIcon={featherLogo}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </InfoCard>
+    <h4 className="p-h4 mt24">Without right icon</h4>
+    <InfoCard className="wmx6 mt8" title="Lorem ipsum" topIcon={featherLogo}>
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </InfoCard>
+    <h4 className="p-h4 mt24">Muted</h4>
+    <InfoCard
+      className="wmx6 mt8"
+      title="Lorem ipsum"
+      topIcon={featherLogo}
+      state="muted"
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </InfoCard>
+    <h4 className="p-h4">No dropshadow</h4>
+    <InfoCard
+      className="wmx6 mt8"
+      title="Lorem ipsum"
+      rightIcon="info"
+      topIcon={featherLogo}
+      dropshadow={false}
+    >
+      Praesent euismod porta odio at tempus.{' '}
+      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
+      eros at, rhoncus imperdiet nunc
+    </InfoCard>
+  </>
+</Preview>

package/src/lib/components/cards/infoCard/index.tsx

@@ -0,0 +1,47 @@
+import { associatedClassForCardState, CardProps } from '..';
+import { Icon, info } from '../icons';
+
+import styles from './style.module.scss';
+
+export default ({
+  className,
+  title,
+  children,
+  topIcon,
+  rightIcon,
+  state = 'actionable',
+  dropshadow = true,
+  ...props
+}: CardProps & {
+  topIcon: Icon;
+  rightIcon?: 'info' | Icon;
+}) => (
+  <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>
+    <img
+      src={topIcon.src}
+      alt={topIcon.alt}
+      className={`${styles['top-icon']} ${
+        state === 'muted' ? styles['top-icon--muted'] : ''
+      } `}
+      width="80px"
+      height="80px"
+    />
+    <div
+      className={`${associatedClassForCardState(state, dropshadow)} ${
+        styles.container
+      }`}
+    >
+      {rightIcon && (
+        <img
+          width="20px"
+          height="20px"
+          className={styles['right-icon']}
+          src={rightIcon === 'info' ? info.src : rightIcon.src}
+          alt={rightIcon === 'info' ? info.alt : rightIcon.alt}
+        />
+      )}
+      <div className="p-h4 ta-center mt64">{title}</div>
+      <p className="p-p mt16 tc-grey-600">{children}</p>
+    </div>
+  </div>
+);

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;
+  }
+}