@popsure/dirty-swan 0.26.10 → 0.26.11

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

@@ -0,0 +1,66 @@
+@use "../../scss/public/grid" as *;
+
+.container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.button:hover {
+  .inner-circle-hover {
+    animation: borderBlink 1.3s ease-in-out infinite;
+  }
+}
+
+.button:focus {
+  outline: none;
+}
+
+circle {
+  transition: stroke-dashoffset 0.35s;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+
+  position: absolute;
+}
+
+.overlay-circle {
+  z-index: 1;
+  stroke: var(--ds-primary-500);
+  fill: transparent;
+}
+
+.overlay-circle-completed {
+  z-index: 1;
+  stroke: #90df9b;
+  fill: rgba(144, 223, 155, 0.1);
+}
+
+.inner-circle {
+  z-index: 0;
+  stroke: var(--ds-primary-100);
+  fill: transparent;
+}
+
+.text-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes borderBlink {
+  from,
+  to {
+    stroke: var(--ds-primary-100);
+  }
+  50% {
+    stroke: var(--ds-primary-500);
+  }
+}

package/src/lib/components/dropzone/images/error.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default () => (
+  <svg
+    width="90"
+    height="66"
+    viewBox="0 0 90 66"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M45 0C37.9976 0 30.9572 2.64966 25.6182 7.94665C21.6477 11.8859 19.2407 16.7726 18.2201 21.8685C7.85944 23.8626 0 32.8399 0 43.6762C0 55.9706 10.1084 65.9997 22.5 65.9997H56.656C56.6837 66.0001 56.7114 66.0001 56.7391 65.9997H57.2609C57.2886 66.0001 57.3163 66.0001 57.344 65.9997H70.4348C81.2231 65.9997 90 57.2917 90 46.5881C90 36.486 82.1561 28.2623 72.2079 27.3583C72.2539 20.3322 69.7386 13.2916 64.3512 7.94665C59.0169 2.65398 52.0024 0 45 0ZM57.2609 60.1762H56.7391C56.7114 60.1758 56.6838 60.1758 56.6561 60.1762H22.5C13.2807 60.1762 5.86957 52.8233 5.86957 43.6762C5.86957 35.0382 12.4909 28.0009 20.9715 27.237C21.6366 27.1727 22.2596 26.8852 22.7377 26.4219C23.2157 25.9587 23.5201 25.3474 23.6005 24.6892C24.1405 20.074 26.1989 15.5901 29.7758 12.0413C33.9878 7.86248 39.4844 5.8235 45 5.8235C50.5156 5.8235 55.9776 7.85816 60.1936 12.0413C65.0657 16.8751 67.1274 23.4426 66.3689 29.7241C66.317 30.1333 66.3533 30.5488 66.4754 30.9431C66.5975 31.3373 66.8026 31.7014 67.0772 32.0111C67.3518 32.3208 67.6895 32.5691 68.0681 32.7395C68.4466 32.91 68.8574 32.9987 69.2731 32.9998H70.4348C78.0729 32.9998 84.1304 39.0097 84.1304 46.5881C84.1304 54.1663 78.0729 60.1762 70.4348 60.1762H57.3439C57.3162 60.1758 57.2886 60.1758 57.2609 60.1762ZM32.7678 30.7678C31.7915 29.7915 31.7915 28.2085 32.7678 27.2322C33.7441 26.2559 35.327 26.2559 36.3033 27.2322L44.0355 34.9645L52.2322 26.7678C53.2085 25.7915 54.7915 25.7915 55.7678 26.7678C56.7441 27.7441 56.7441 29.327 55.7678 30.3033L47.5711 38.5L55.3952 46.3241C56.3715 47.3004 56.3715 48.8833 55.3952 49.8596C54.4189 50.836 52.836 50.836 51.8596 49.8596L44.0355 42.0355L36.6759 49.3952C35.6996 50.3715 34.1167 50.3715 33.1404 49.3952C32.164 48.4189 32.164 46.836 33.1404 45.8596L40.5 38.5L32.7678 30.7678Z"
+      fill="#E55566"
+    />
+  </svg>
+);

package/src/lib/components/dropzone/images/file.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import styles from './style.module.scss';
+
+export default () => (
+  <svg
+    width="60"
+    height="72"
+    viewBox="0 0 60 72"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      className={styles['stroke-primary-500']}
+      d="M50.5975 69H8.94969C7.37173 69 5.8584 68.3679 4.74262 67.2426C3.62684 66.1174 3 64.5913 3 63V21L20.8491 3H50.5975C52.1754 3 53.6888 3.63214 54.8045 4.75736C55.9203 5.88258 56.5472 7.4087 56.5472 9V63C56.5472 64.5913 55.9203 66.1174 54.8045 67.2426C53.6888 68.3679 52.1754 69 50.5975 69Z"
+      strokeWidth="5"
+      strokeLinejoin="round"
+    />
+    <path
+      className={styles['stroke-primary-500']}
+      d="M20.434 3V15.4528C20.434 17.1042 19.8217 18.6879 18.7319 19.8556C17.642 21.0233 16.1639 21.6792 14.6226 21.6792H3"
+      strokeWidth="5"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/lib/components/dropzone/images/style.module.scss

@@ -0,0 +1,7 @@
+.stroke-primary-500 {
+  stroke: var(--ds-primary-500);
+}
+
+.fill-primary-500 {
+  fill: var(--ds-primary-500);
+}

package/src/lib/components/dropzone/images/upload-complete.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import styles from './style.module.scss';
+
+export default () => (
+  <svg
+    width="90"
+    height="66"
+    viewBox="0 0 90 66"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      className={styles['fill-primary-500']}
+      d="M45 0C37.9976 0 30.9572 2.64966 25.6182 7.94665C21.6477 11.8859 19.2407 16.7726 18.2201 21.8685C7.85944 23.8626 0 32.8399 0 43.6762C0 55.9706 10.1084 65.9997 22.5 65.9997H57.2609C57.6498 66.0052 58.0359 65.9339 58.3968 65.79C58.7576 65.6461 59.0861 65.4325 59.3631 65.1616C59.64 64.8907 59.8599 64.5678 60.01 64.2119C60.1602 63.8559 60.2375 63.4738 60.2375 63.088C60.2375 62.7021 60.1602 62.3201 60.01 61.9641C59.8599 61.6081 59.64 61.2853 59.3631 61.0143C59.0861 60.7434 58.7576 60.5298 58.3968 60.3859C58.0359 60.242 57.6498 60.1708 57.2609 60.1762H22.5C13.2807 60.1762 5.86957 52.8233 5.86957 43.6762C5.86957 35.0382 12.4909 28.0009 20.9715 27.237C21.6366 27.1727 22.2596 26.8852 22.7377 26.4219C23.2157 25.9587 23.5201 25.3474 23.6005 24.6892C24.1405 20.074 26.1989 15.5901 29.7758 12.0413C33.9878 7.86248 39.4844 5.8235 45 5.8235C50.5156 5.8235 55.9776 7.85816 60.1936 12.0413C65.0657 16.8751 67.1274 23.4426 66.3689 29.7241C66.317 30.1333 66.3533 30.5488 66.4754 30.9431C66.5975 31.3373 66.8026 31.7014 67.0772 32.0111C67.3518 32.3208 67.6895 32.5691 68.0681 32.7395C68.4466 32.91 68.8574 32.9987 69.2731 32.9998H70.4348C78.0729 32.9998 84.1304 39.0097 84.1304 46.5881C84.1304 54.1663 78.0729 60.1762 70.4348 60.1762H56.7391C56.3502 60.1708 55.9641 60.242 55.6032 60.3859C55.2424 60.5298 54.9139 60.7434 54.6369 61.0143C54.36 61.2853 54.1401 61.6081 53.99 61.9641C53.8398 62.3201 53.7626 62.7021 53.7626 63.088C53.7626 63.4738 53.8398 63.8559 53.99 64.2119C54.1401 64.5678 54.36 64.8907 54.6369 65.1616C54.9139 65.4325 55.2424 65.6461 55.6032 65.79C55.9641 65.9339 56.3502 66.0052 56.7391 65.9997H70.4348C81.2231 65.9997 90 57.2917 90 46.5881C90 36.486 82.1561 28.2623 72.2079 27.3583C72.2539 20.3322 69.7386 13.2916 64.3512 7.94665C59.0169 2.65398 52.0024 0 45 0Z"
+    />
+    <path
+      className={styles['fill-primary-500']}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M59.7678 28.0107C60.7441 28.9793 60.7441 30.5498 59.7678 31.5185L38.2043 52.9127C37.8144 53.2995 37.1856 53.2995 36.7957 52.9127L26.7322 42.9282C25.7559 41.9595 25.7559 40.3891 26.7322 39.4204C27.7085 38.4518 29.2915 38.4518 30.2678 39.4204L37.5 46.5959L56.2322 28.0107C57.2085 27.042 58.7915 27.042 59.7678 28.0107Z"
+    />
+  </svg>
+);

package/src/lib/components/dropzone/images/upload.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import styles from './style.module.scss';
+
+export default () => (
+  <svg
+    width="90"
+    height="73"
+    viewBox="0 0 90 73"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      className={styles['fill-primary-500']}
+      d="M45 0C37.9976 0 30.9572 2.67062 25.6182 8.00951C21.6477 11.9799 19.2407 16.9053 18.2201 22.0414C7.85945 24.0513 0 33.0997 0 44.0217C0 56.4134 10.1084 66.5218 22.5 66.5218H33.2609C33.6498 66.5273 34.0359 66.4555 34.3968 66.3104C34.7576 66.1654 35.0861 65.9501 35.3631 65.677C35.64 65.404 35.8599 65.0786 36.01 64.7198C36.1602 64.361 36.2375 63.9759 36.2375 63.587C36.2375 63.1981 36.1602 62.813 36.01 62.4542C35.8599 62.0954 35.64 61.7701 35.3631 61.497C35.0861 61.2239 34.7576 61.0086 34.3968 60.8636C34.0359 60.7186 33.6498 60.6467 33.2609 60.6522H22.5C13.2807 60.6522 5.86957 53.2412 5.86957 44.0217C5.86957 35.3154 12.4909 28.2224 20.9715 27.4524C21.6366 27.3876 22.2596 27.0978 22.7377 26.6309C23.2157 26.164 23.5201 25.5479 23.6005 24.8845C24.1405 20.2328 26.1989 15.7134 29.7758 12.1365C33.9878 7.92468 39.4844 5.86957 45 5.86957C50.5156 5.86957 55.9776 7.92032 60.1936 12.1365C65.0657 17.0086 67.1274 23.628 66.3689 29.9592C66.317 30.3717 66.3533 30.7905 66.4754 31.1879C66.5975 31.5852 66.8026 31.9522 67.0772 32.2643C67.3518 32.5765 67.6895 32.8267 68.0681 32.9985C68.4466 33.1703 68.8574 33.2597 69.2731 33.2609H70.4348C78.0729 33.2609 84.1304 39.3183 84.1304 46.9566C84.1304 54.5947 78.0729 60.6522 70.4348 60.6522H56.7391C56.3502 60.6467 55.9641 60.7186 55.6032 60.8636C55.2424 61.0086 54.9139 61.2239 54.6369 61.497C54.36 61.7701 54.1401 62.0954 53.99 62.4542C53.8398 62.813 53.7626 63.1981 53.7626 63.587C53.7626 63.9759 53.8398 64.361 53.99 64.7198C54.1401 65.0786 54.36 65.404 54.6369 65.677C54.9139 65.9501 55.2424 66.1654 55.6032 66.3104C55.9641 66.4555 56.3502 66.5273 56.7391 66.5218H70.4348C81.2231 66.5218 90 57.7449 90 46.9566C90 36.7746 82.1561 28.4859 72.2079 27.5747C72.2539 20.4931 69.7385 13.3968 64.3512 8.00951C59.0169 2.67498 52.0024 0 45 0ZM45 33.2609C44.0215 33.2609 43.5041 33.5757 43.013 34.0251L32.2521 43.8077C31.0095 44.9609 31.0313 46.8324 32.0686 47.9654C33.1059 49.0983 35.0881 49.1803 36.2262 48.1488L42.0652 42.8295V69.4566C42.0652 71.0774 43.3789 72.3914 45 72.3914C46.6212 72.3914 47.9348 71.0774 47.9348 69.4566V42.8295L53.7738 48.1488C54.912 49.1803 56.8342 49.0405 57.9314 47.9654C59.0876 46.8324 58.8758 44.8505 57.7479 43.8077L46.987 34.0251C46.4057 33.4929 45.9785 33.2609 45 33.2609Z"
+    />
+  </svg>
+);

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

@@ -0,0 +1,44 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import Dropzone from '.';
+
+<Meta title="JSX/Dropzone" component={Dropzone} />
+
+# Dropzone
+
+Date selector are user interface elements which allow user to select and upload a file.
+
+## Examples
+
+### Idle state
+
+<Preview>
+  <Dropzone uploading={false} onSelectedFile={() => {}} />
+</Preview>
+
+### Uploading state
+
+<Preview>
+  <Dropzone uploading={true} progress={30} onSelectedFile={() => {}} />
+</Preview>
+
+### Error state
+
+<Preview>
+  <Dropzone
+    uploading={true}
+    progress={30}
+    error="Something went wront"
+    onSelectedFile={() => {}}
+  />
+</Preview>
+
+### Uploaded state
+
+<Preview>
+  <Dropzone
+    uploading={false}
+    uploadedFileUrl="http://getpopsure.com/my-file.png"
+    onSelectedFile={() => {}}
+  />
+</Preview>

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

@@ -0,0 +1,152 @@
+import React, { useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
+
+import styles from './style.module.scss';
+
+import ErrorImage from './images/error';
+import UploadImage from './images/upload';
+import FileImage from './images/file';
+
+export function truncateStringTail(aString: string, length: number) {
+  if (aString.length > length) {
+    const tail = '[...]';
+    const truncatedString = aString.substring(
+      aString.length - length + tail.length,
+      aString.length
+    );
+    return `${tail}${truncatedString}`;
+  }
+
+  return aString;
+}
+
+export default ({
+  className,
+  uploading,
+  progress,
+  error,
+  uploadedFileUrl,
+  onSelectedFile,
+}: {
+  className?: string;
+  uploading: boolean;
+  progress?: number;
+  error?: string;
+  uploadedFileUrl?: string;
+  onSelectedFile: (file: File) => void;
+}) => {
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      onSelectedFile(acceptedFiles[0]);
+    },
+    [onSelectedFile]
+  );
+
+  const uploadedFileName =
+    (uploadedFileUrl &&
+      truncateStringTail(
+        new URL(uploadedFileUrl).pathname.split('/').pop() || '',
+        22
+      )) ||
+    '';
+
+  type State = 'idle' | 'uploading' | 'error' | 'uploaded';
+
+  function stateFromParameters({
+    uploading,
+    progress,
+    error,
+    uploadedFileUrl,
+  }: {
+    uploading: boolean;
+    progress?: number;
+    error?: string;
+    uploadedFileUrl?: string;
+  }): State {
+    if (error) {
+      return 'error';
+    }
+
+    if (uploading && progress) {
+      return 'uploading';
+    }
+
+    if (uploadedFileUrl) {
+      return 'uploaded';
+    }
+
+    return 'idle';
+  }
+
+  const state = stateFromParameters({
+    uploading,
+    progress,
+    error,
+    uploadedFileUrl,
+  });
+
+  const {
+    action,
+    Image,
+    text,
+    containerStyle,
+    textColor,
+  }: {
+    action: string | undefined;
+    Image: React.ComponentType<{}>;
+    text: string;
+    containerStyle: string | undefined;
+    textColor: string;
+  } = {
+    idle: {
+      action: undefined,
+      Image: UploadImage,
+      text: 'Upload document',
+      containerStyle: undefined,
+      textColor: 'tc-primary-500',
+    },
+    uploading: {
+      action: undefined,
+      Image: UploadImage,
+      text: 'Uploading document…',
+      containerStyle: styles['container--uploading'],
+      textColor: 'tc-primary-500',
+    },
+    error: {
+      action: 'Tap to retry',
+      Image: ErrorImage,
+      text: 'Error!',
+      containerStyle: styles['container--error'],
+      textColor: 'tc-red-500',
+    },
+    uploaded: {
+      action: 'Tap to replace',
+      Image: FileImage,
+      text: uploadedFileName,
+      containerStyle: styles['container--uploaded'],
+      textColor: 'tc-primary-500',
+    },
+  }[state];
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
+
+  return (
+    <div
+      className={`${styles.container} ${containerStyle} ${className}`}
+      {...getRootProps()}
+    >
+      <input {...getInputProps()} />
+      <Image />
+      <div className="p-p mt16">{text}</div>
+      {action && <div className={`p-p ${textColor}`}>{action}</div>}
+      {state === 'uploading' && (
+        <div className={styles['progress-container']}>
+          <div
+            className={styles['progress-bar']}
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,90 @@
+.container {
+  cursor: pointer;
+
+  background-color: var(--ds-primary-100);
+
+  border-radius: 8px;
+  border: 1px dashed var(--ds-primary-500);
+
+  height: 226px;
+  width: 100%;
+  max-width: 518px;
+
+  transition: 0.3s background-color, 0.3s border-color;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba($color: var(--ds-primary-500), $alpha: 0.5);
+  }
+
+  &:hover {
+    background-color: var(--ds-primary-300);
+  }
+
+  &--error {
+    border-color: var(--ds-red-300);
+    background-color: var(--ds-red-100);
+
+    &:hover {
+      border-color: var(--ds-red-300);
+      background-color: var(--ds-red-100);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px rgba($color: var(--ds-red-500), $alpha: 0.5);
+    }
+  }
+
+  &--uploading {
+    pointer-events: none;
+  }
+
+  &--uploaded {
+    &:hover {
+      background-color: var(--ds-primary-100);
+    }
+  }
+}
+
+.image {
+  width: 88px;
+}
+
+.progress-container {
+  height: 4px;
+  width: 85%;
+
+  margin-top: 24px;
+
+  border-radius: 2px;
+  background-color: var(--ds-primary-300);
+
+  overflow: hidden;
+
+  & .progress-bar {
+    height: 100%;
+
+    background-color: var(--ds-primary-500);
+    border-radius: 2px;
+
+    transition: width 0.3s;
+  }
+}
+
+.action {
+  color: var(--ds-primary-500);
+
+  &--error {
+    color: var(--ds-red-500);
+  }
+
+  &--uploaded {
+    color: var(--ds-primary-500);
+  }
+}

package/src/lib/components/input/a.stories.mdx

@@ -0,0 +1,28 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+import Input from '.';
+
+<Meta title="JSX/Inputs/Intro" />
+
+# Inputs
+
+Input elements are used to gather information from users.
+
+We have defined a few different input components according to the use case:
+
+- A default [Input](?path=/story/jsx-inputs-input--page) component
+- A [Currency Input](?path=/story/jsx-inputs-currency-input--page) component that is meant to be used for entering amount in Euro
+- An [Iban Input](?path=/story/jsx-inputs-iban-input--page) that is meant to be used when entering banking informations.
+- A [AutoSuggestInput]() component allows quick search via the input field to find an option for selection.
+- The [AutoSuggestMultiSelect]() component is a combination of the `AutoSuggestInput` and `Chip` components, where the selections are displayed above the input.
+
+You are looking at the JSX definition of the Input component, if you want you can use the [css alternative](?path=/story/css-components-input--page)
+
+<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-Pattern-Library%3Fnode-id%3D3%253A240"
+    allowFullScreen
+  ></iframe>
+</Preview>

package/src/lib/components/input/autoSuggestInput/index.stories.mdx

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import { Meta } from '@storybook/addon-docs/blocks';
+
+import AutoSuggestInput from '.';
+import featherLogo from '../../cards/icons/feather-logo.svg';
+
+<Meta title="JSX/Inputs/AutoSuggestInput" />
+
+# AutoSuggestInput
+
+This component allows quick search via the input field to find an option for selection.
+
+## Types
+
+```typescript
+export interface Option {
+  value: string; // value of option to be stored and displayed on UI
+  leftIcon?: string; // image of the provided option to be displayed on UI
+}
+```
+
+## Arguments
+
+| attribute                    | unit     | description                                                                               | default value | required |
+| ---------------------------- | -------- | ----------------------------------------------------------------------------------------- | ------------- | -------- |
+| currentOption                | string   | Current input of the component by user                                                    | n/a           | true     |
+| suggestions                  | Option   | List of suggestions that should be displayed to the respective input                      | n/a           | true     |
+| onChange                     | function | Function that is called when value of current input changes                               | n/a           | true     |
+| handleSuggestionSelected     | function | Functon that runs when a suggestion is selected from the dropdown                         | n/a           | true     |
+| handleSuggestionFetchRequest | function | Function that allows control of which suggestions should be displayed                     | n/a           | true     |
+| handleSuggestionClearRequest | function | Function that runs when suggestions are cleared (eg. input removal, selecting suggestion) | n/a           | true     |
+| placeholder                  | string   | Placeholder for DirtySwan Input component                                                 | n/a           | true     |
+| className                    | string   | Class name for the most parent element                                                    | undefined     | false    |
+| wrapText                     | boolean  | Wether or not wrap the entries in the dropdown or hide overflown text                     | false         | false    |
+
+## Example
+
+Following component has five options to search from: `feather`, `feather2`, `feather3`,`dirtyswan`, `test value`
+
+export const AutoSuggestInputStory = () => {
+  const [selectedValues, setSelectedValues] = useState([]);
+  const [currentOption, setCurrentOption] = useState('');
+  const [suggestions, setSuggestions] = useState([]);
+  const options = [
+    { value: 'feather', leftIcon: featherLogo },
+    { value: 'feather2', leftIcon: featherLogo },
+    {
+      value: 'feather3',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'dirtyswan',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'test value',
+      leftIcon: featherLogo,
+    },
+  ];
+  return (
+    <AutoSuggestInput
+      className="wmx5"
+      placeholder="Placeholder"
+      currentOption={currentOption}
+      suggestions={suggestions}
+      onChange={(value) => {
+        setCurrentOption(value);
+      }}
+      handleSuggestionSelected={(value) => {
+        const newSelectedOptions = [...selectedValues];
+        newSelectedOptions.push(value);
+        setSelectedValues(newSelectedOptions);
+        setCurrentOption(value.value);
+      }}
+      handleSuggestionFetchRequest={({ value }) => {
+        const filteredOptions = options.filter((option) =>
+          option.value.toLowerCase().startsWith(value.toLowerCase())
+        );
+        setSuggestions(filteredOptions);
+      }}
+      handleSuggestionClearRequest={() => setSuggestions([])}
+    />
+  );
+};
+
+<AutoSuggestInputStory />
+
+```typescript
+import React, { useState } from 'react';
+import { AutoSuggestInput } from '@popsure/dirty-swan';
+
+export default () => {
+  const [selectedValues, setSelectedValues] = useState([]);
+  const [currentOption, setCurrentOption] = useState('');
+  const [suggestions, setSuggestions] = useState([]);
+  const options = [
+    { value: 'feather', leftIcon: featherLogo },
+    { value: 'feather2', leftIcon: featherLogo },
+    {
+      value: 'feather3',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'dirtyswan',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'test value',
+      leftIcon: featherLogo,
+    },
+  ];
+  return (
+    <AutoSuggestInput
+      className="wmx5"
+      placeholder="Placeholder"
+      currentOption={currentOption}
+      suggestions={suggestions}
+      onChange={(value) => {
+        setCurrentOption(value);
+      }}
+      handleSuggestionSelected={(value) => {
+        const newSelectedOptions = [...selectedValues];
+        newSelectedOptions.push(value);
+        setSelectedValues(newSelectedOptions);
+        setCurrentOption(value.value);
+      }}
+      handleSuggestionFetchRequest={({ value }) => {
+        const filteredOptions = options.filter((option) =>
+          option.value.toLowerCase().startsWith(value.toLowerCase())
+        );
+        setSuggestions(filteredOptions);
+      }}
+      handleSuggestionClearRequest={() => setSuggestions([])}
+    />
+  );
+};
+```