@popsure/dirty-swan 0.34.0 → 0.36.0

package/src/lib/components/input/autoSuggestMultiSelect/index.stories.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { AutoSuggestMultiSelect, AutoSuggestMultiSelectProps } from '.';
+import { Option } from '../../../models/autoSuggestInput';
+import featherLogo from '../../cards/icons/feather-logo.svg';
+
+const story = {
+  title: 'JSX/Inputs/AutoSuggestMultiSelect',
+  subtitle: 'sgsg',
+  component: AutoSuggestMultiSelect,
+  argTypes: {
+    options: {
+      description: 'List of all options available to search from',
+      defaultValue: [
+        { value: 'feather', leftIcon: featherLogo },
+        { value: 'feather2', leftIcon: featherLogo },
+        {
+          value: 'feather3',
+          leftIcon: featherLogo,
+        },
+        {
+          value: 'dirtyswan',
+          leftIcon: featherLogo,
+        },
+        {
+          value: 'test value',
+          leftIcon: featherLogo,
+        },
+      ],
+      table: {
+        type: { 
+          summary: 'Option[]'
+        },
+      },
+    },
+    selectedValues: {
+      description: 'List of all selected values',
+      defaultValue: [
+        { value: 'feather', leftIcon: featherLogo },
+        { value: 'feather2', leftIcon: featherLogo },
+      ],
+      table: {
+        type: { 
+          summary: 'Option[]'
+        },
+      },
+    },
+    placeholder: {
+      defaultValue: 'Placeholder',
+      description: 'Placeholder for DirtySwan Input component'
+    },
+    chipsListClassName: {
+      defaultValue: '',
+      description: 'Class name for the most parent element of the Chip component',
+      control: { type: 'text' }
+    },
+    multiSelectClassName: {
+      defaultValue: '',
+      description: 'Class name for the most parent element of the AutoSuggestInput component',
+      control: { type: 'text' }
+    },
+    wrapText: {
+      defaultValue: false,
+      description: 'Wether or not wrap the entries in the dropdown or hide overflown text',
+    },
+    setValues: {
+      description: 'Function that runs when selecting values',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+  },
+  parameters: {
+    componentSubtitle: 'AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components',
+    docs: {
+      description: {
+        component: `This component allows quick search via the input field to find an option for selection.
+        \nUpon selecting an option, the option is displayed above the input field as a chip.
+        \nThe chip can be removed by clicking on the X button. Multi options can be selected as well.
+        \nProp \`setValues\` function must be provided to keep track of removed and added option selections.`
+      },
+    },
+    customTypes: {
+      Option: `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
+}`
+    }
+  },
+};
+
+export const AutoSuggestMultiSelectStory = ({
+  options,
+  selectedValues,
+  setValues,
+  placeholder,
+  chipsListClassName,
+  multiSelectClassName,
+  wrapText,
+}: AutoSuggestMultiSelectProps) => {
+  const [values, setSelectedValues] = useState(selectedValues);
+
+  const handleSetValues = (options: Option[]) => {
+    setValues(options);
+    setSelectedValues(options);
+  }
+
+  return (
+    <div style={{ minHeight: '240px' }}>
+      <AutoSuggestMultiSelect
+       options={options}
+       selectedValues={values}
+       setValues={handleSetValues}
+       placeholder={placeholder}
+       chipsListClassName={chipsListClassName}
+       multiSelectClassName={multiSelectClassName}
+       wrapText={wrapText}
+      />
+    </div>
+  );
+};
+
+AutoSuggestMultiSelectStory.storyName = "AutoSuggestMultiSelect";
+
+export default story;

package/src/lib/components/input/autoSuggestMultiSelect/index.tsx

@@ -2,18 +2,11 @@ import { useState } from 'react';
 
 import { Option } from '../../../models/autoSuggestInput';
 import Chip from '../../chip';
-import AutoSuggestInput from '../autoSuggestInput';
+import { AutoSuggestInput } from '../autoSuggestInput';
 import styles from './style.module.scss';
+import classNames from 'classnames';
 
-export default ({
-  options,
-  selectedValues,
-  setValues,
-  placeholder,
-  chipsListClassName,
-  multiSelectClassName,
-  wrapText,
-}: {
+export interface AutoSuggestMultiSelectProps {
   options: Option[];
   selectedValues?: Option[];
   setValues: (values: Option[]) => void;
@@ -21,30 +14,50 @@ export default ({
   chipsListClassName?: string;
   multiSelectClassName?: string;
   wrapText?: boolean;
-}) => {
+}
+
+export const AutoSuggestMultiSelect = ({
+  options,
+  selectedValues,
+  setValues,
+  placeholder,
+  chipsListClassName,
+  multiSelectClassName,
+  wrapText,
+}: AutoSuggestMultiSelectProps) => {
   const [suggestions, setSuggestions] = useState<Option[]>([]);
   const [currentOption, setCurrentOption] = useState('');
+  const hasChips = Boolean(selectedValues && selectedValues.length > 0);
 
   return (
     <>
-      {selectedValues && selectedValues.length > 0 && (
-        <div
-          className={`mb8 ${styles['chip-container']} ${chipsListClassName}`}
-        >
-          {selectedValues.map((value, index) => (
-            <Chip
-              key={`${value.value}-${index}`}
-              value={value}
-              onRemove={(value: Option) => {
-                const newValues = [...selectedValues].filter(
-                  (selectedValue) => selectedValue.value !== value.value
-                );
-                setValues(newValues);
-              }}
-            />
-          ))}
-        </div>
-      )}
+      <div
+        className={classNames(
+          styles['chip-container'],
+          chipsListClassName,
+          {
+            [styles.appearIn]: hasChips
+          },
+        )}
+      >
+        {selectedValues && hasChips && (
+          <>
+            {selectedValues.map((value, index) => (
+              <Chip
+                key={`${value.value}-${index}`}
+                className="mb16"
+                value={value}
+                onRemove={(value: Option) => {
+                  const newValues = [...selectedValues].filter(
+                    (selectedValue) => selectedValue.value !== value.value
+                  );
+                  setValues(newValues);
+                }}
+              />
+            ))}
+          </>
+        )}
+      </div>
       <AutoSuggestInput
         className={multiSelectClassName}
         placeholder={placeholder}

package/src/lib/components/input/autoSuggestMultiSelect/style.module.scss

@@ -1,4 +1,10 @@
 .chip-container {
   display: flex;
   flex-wrap: wrap;
+  max-height: 10px;
+  transition: 0.7s ease-in;
+}
+
+.appearIn {
+  max-height: 300px;
 }

package/src/lib/components/link/index.stories.tsx

@@ -0,0 +1,29 @@
+import { Link, LinkProps } from '.';
+
+const story = {
+  title: 'JSX/Link',
+  component: Link,
+  argTypes: {
+    children: {
+      control: 'text',
+      defaultValue: 'Click here to go to Feather Insurance',
+      description: 'Content that is displayed as clickable inside the link',
+    },
+    href: {
+      control: 'text',
+      defaultValue: 'https://feather-insurance.com',
+      description: 'Specifies the URL of the page the link goes to',
+    },
+  },
+  parameters: {
+    componentSubtitle: 'Links are a styled helper component for anchor (<a />) tags.',
+  },
+};
+
+export const LinkStory = ({ children, href, ...rest }: LinkProps) => (
+  <Link href={href} {...rest}>{children}</Link>
+);
+
+LinkStory.storyName = "Link";
+
+export default story;

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

@@ -0,0 +1,9 @@
+import classnames from 'classnames';
+
+export type LinkProps = JSX.IntrinsicElements['a'];
+
+export const Link = ({ children, className, ...rest }: LinkProps) => (
+  <a className={classnames(className, 'p-a c-pointer')} {...rest}>
+    {children}
+  </a>
+);

package/src/lib/index.tsx

@@ -10,8 +10,10 @@ import {
   UploadStatus
 } from './components/multiDropzone';
 import { DownloadButton } from './components/downloadButton';
+import { InformationBox } from './components/informationBox';
 import IbanInput from './components/input/iban';
 import CurrencyInput from './components/input/currency';
+import { Badge } from './components/badge';
 import { Checkbox } from './components/input/checkbox';
 import {
   BottomModal,
@@ -26,9 +28,9 @@ import {
   CardButton,
 } from './components/cards';
 import Button from './components/button';
-import AutoSuggestMultiSelect from './components/input/autoSuggestMultiSelect';
+import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
 import Chip from './components/chip';
-import AutoSuggestInput from './components/input/autoSuggestInput';
+import { AutoSuggestInput } from './components/input/autoSuggestInput';
 import {
   ComparisonTable,
   TableRating,
@@ -40,6 +42,7 @@ import {
 } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
 import { Markdown } from './components/markdown';
+import { Link } from './components/link';
 import { images } from './util/images';
 
 export {
@@ -72,6 +75,9 @@ export {
   SegmentedControl,
   Markdown,
   Checkbox,
+  Link,
+  InformationBox,
+  Badge,
   images,
 };
 

package/dist/esm/index-47663d39.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-47663d39.js","sources":["../../src/lib/components/cards/icons/arrow-right.svg","../../src/lib/components/cards/icons/feather-logo.svg","../../src/lib/components/cards/icons/info.svg","../../src/lib/components/cards/icons/chevron-right.svg","../../../src/lib/components/cards/icons/index.ts","../../../src/lib/components/cards/cardButton/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012H19%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%205L19%2012L12%2019%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22mask0%22%20mask-type%3D%22alpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%223%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2228%22%3E%3Cpath%20d%3D%22M23.8761%200C14.4485%204.03927%205.77595%2019.2529%203.53731%2026.0756C3.04003%2027.5912%202.60201%2029.2504%204.03812%2026.6043C4.89889%2025.0183%207.02902%2022.7858%2011.8864%2021.9848C15.7724%2021.344%2017.3995%2020.5116%2019.8916%2017.6795C18.7427%2018.0914%2017.2587%2018.9525%2014.0909%2017.9656C18.4837%2018.3512%2021.5108%2015.748%2022.6934%2012.044C19.7931%2013.3599%2017.3385%2012.4392%2016.6956%2012.1007C20.6519%2012.2002%2023.9887%209.68393%2024.7913%205.49304C25.2591%203.05005%2024.5097%200.800979%2023.8761%200Z%22%20fill%3D%22%236160A2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0%29%22%3E%3Cpath%20d%3D%22M21.1875%201.45451C12.8431%206.88225%205.56109%2019.9077%203.53731%2026.0756C3.04003%2027.5912%202.60201%2029.2504%204.03812%2026.6043C4.89889%2025.0183%207.02902%2022.7858%2011.8864%2021.9848C15.1146%2021.4525%2016.784%2020.7879%2018.6853%2018.9545C19.0219%2018.63%2019.1998%2017.9565%2018.7553%2018.1015C18.24%2018.2696%2017.709%2017.5612%2018.205%2017.3425C19.7521%2016.6603%2020.976%2015.4887%2021.8303%2014.0102C22.2446%2013.2932%2020.7231%2012.6796%2019.8955%2012.7075C18.8859%2012.7415%2019.6982%2011.6399%2020.6391%2011.2723C21.8973%2010.7807%2023.0427%2010.0842%2023.7916%209.26859C24.7617%208.21223%2024.48%207.11878%2024.7913%205.49304C24.969%204.56516%2024.971%203.66526%2024.8706%202.86204C24.6464%201.06951%2022.7019%200.469502%2021.1875%201.45451Z%22%20fill%3D%22%236160A2%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M30.4837%205.72996C30.4837%2014.8734%2023.1695%2022.4039%2014.0022%2022.4039C4.83493%2022.4039%20-2.47925%2014.8734%20-2.47925%205.72996C-2.47925%20-3.4135%204.83493%20-10.944%2014.0022%20-10.944C23.1695%20-10.944%2030.4837%20-3.4135%2030.4837%205.72996ZM14.0022%2018.0289C20.6884%2018.0289%2026.1087%2012.5225%2026.1087%205.72996C26.1087%20-1.06259%2020.6884%20-6.56903%2014.0022%20-6.56903C7.316%20-6.56903%201.89575%20-1.06259%201.89575%205.72996C1.89575%2012.5225%207.316%2018.0289%2014.0022%2018.0289Z%22%20fill%3D%22%2390DF9B%22%2F%3E%3Cpath%20d%3D%22M26.1087%205.72995C26.1087%2012.5225%2020.6884%2018.0289%2014.0022%2018.0289C7.316%2018.0289%201.89575%2012.5225%201.89575%205.72995C1.89575%20-1.06259%207.316%20-6.56903%2014.0022%20-6.56903C20.6884%20-6.56903%2026.1087%20-1.06259%2026.1087%205.72995Z%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Cpath%20d%3D%22M10%2018.3334C14.6024%2018.3334%2018.3334%2014.6024%2018.3334%2010C18.3334%205.39765%2014.6024%201.66669%2010%201.66669C5.39765%201.66669%201.66669%205.39765%201.66669%2010C1.66669%2014.6024%205.39765%2018.3334%2010%2018.3334Z%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2013.3333V10%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226.66665%22%20r%3D%220.833333%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2018L15%2012L9%206%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import arrowRightImage from './arrow-right.svg';\nimport featherLogoImage from './feather-logo.svg';\nimport infoImage from './info.svg';\nimport chevronRightImage from './chevron-right.svg';\n\nexport interface Icon {\n  src: string;\n  alt: string;\n}\n\nexport interface IconSize {\n  width: number;\n  height: number;\n}\n\nconst arrowRight: Icon = {\n  src: arrowRightImage,\n  alt: 'arrow pointing right',\n};\n\nconst featherLogo: Icon = {\n  src: featherLogoImage,\n  alt: 'feather logo',\n};\n\nconst info: Icon = {\n  src: infoImage,\n  alt: 'circle with the letter i inside for information',\n};\n\nconst chevronRight: Icon = {\n  src: chevronRightImage,\n  alt: 'chevron facing right',\n};\n\nexport { arrowRight, featherLogo, info, chevronRight };\n","import { FormEvent, createElement, ReactNode } from 'react';\n\nimport styles from './style.module.scss';\nimport { chevronRight } from '../icons';\n\n\ntype ActionProps =\n  | { href: string; onClick?: (e: FormEvent) => void }\n  | { href?: string; onClick: (e: FormEvent) => void };\n\nexport type CardButtonProps = {\n  title: string;\n  description: string | ReactNode;\n  disabled?: boolean;\n  className?: string;\n} & ActionProps;\n\nconst CardContent = ({\n  title,\n  description,\n}: {\n  title: string;\n  description: string | ReactNode;\n}) => (\n  <>\n    <div>\n      <div className=\"p-p--small\">{title}</div>\n      {typeof description === 'string' ? (\n        <div className=\"tc-primary-500 p-p\">{description}</div>\n      ) : (\n        description\n      )}\n    </div>\n    <img {...chevronRight} alt=\"Expander icon\" />\n  </>\n);\n\nexport const CardButton = ({\n  title,\n  description,\n  disabled = false,\n  onClick,\n  href,\n  className,\n}: CardButtonProps) => {\n  const component = href ? 'a' : 'button';\n  return (\n    <>\n      {createElement(component, {\n        className: `c-pointer ta-left w100 ${styles.container} ${\n          className ?? ''\n        }\n        `,\n        children: <CardContent title={title} description={description} />,\n        disabled,\n        ...(component === 'a' ? { href } : { onClick }),\n      })}\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAAA,sBAAe;;ACAf,uBAAe;;ACAf,gBAAe;;ACAf,wBAAe;;ICeT,UAAU,GAAS;IACvB,GAAG,EAAE,eAAe;IACpB,GAAG,EAAE,sBAAsB;EAC3B;IAEI,WAAW,GAAS;IACxB,GAAG,EAAE,gBAAgB;IACrB,GAAG,EAAE,cAAc;EACnB;IAEI,IAAI,GAAS;IACjB,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,iDAAiD;EACtD;AAEF,IAAM,YAAY,GAAS;IACzB,GAAG,EAAE,iBAAiB;IACtB,GAAG,EAAE,sBAAsB;CAC5B;;AChBD,IAAM,WAAW,GAAG,UAAC,EAMpB;QALC,KAAK,WAAA,EACL,WAAW,iBAAA;IAIP,QACJA,4BACEA,yBACEC,sBAAK,SAAS,EAAC,YAAY,gBAAE,KAAK,YAAO;oBACxC,OAAO,WAAW,KAAK,QAAQ,IAC9BA,sBAAK,SAAS,EAAC,oBAAoB,gBAAE,WAAW,YAAO,KAEvD,WAAW,CACZ,YACG;YACNA,wBAAS,YAAY,IAAE,GAAG,EAAC,eAAe,YAAG,YAC5C;AAXC,CAYL,CAAC;IAEW,UAAU,GAAG,UAAC,EAOT;QANhB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,SAAS,eAAA;IAET,IAAM,SAAS,GAAG,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IACxC,QACEA,0BACG,aAAa,CAAC,SAAS,aACtB,SAAS,EAAE,4BAA0B,MAAM,CAAC,SAAS,UACnD,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,gBAEhB,EACD,QAAQ,EAAEA,IAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,WAAI,EACjE,QAAQ,UAAA,KACJ,SAAS,KAAK,GAAG,GAAG,EAAE,IAAI,MAAA,EAAE,GAAG,EAAE,OAAO,SAAA,EAAE,GAC9C,WACD,EACH;AACJ;;;;"}

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

@@ -1,138 +0,0 @@
-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    |
-| inputProps                   | InputHTMLAttributes  | Pass through arbitrary props to the input.                                    | n/a           | 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([])}
-    />
-  );
-};
-```

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

@@ -1,115 +0,0 @@
-import { useState } from 'react';
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import AutoSuggestMultiSelect from '.';
-import featherLogo from '../../cards/icons/feather-logo.svg';
-
-<Meta title="JSX/Inputs/AutoSuggestMultiSelect" />
-
-## AutoSuggestMultiSelect
-
-AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components.
-
-This component allows quick search via the input field to find an option for selection.
-
-Upon selecting an option, the option is displayed above the input field as a chip.
-
-The chip can be removed by clicking on the X button. Multi options can be selected as well.
-
-Prop `setValues` function must be provided to keep track of removed and added option selections.
-
-## 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 |
-| -------------------- | -------- | ------------------------------------------------------------------------ | ------------- | -------- |
-| options              | Option[] | List of all options available to search from                             | n/a           | true     |
-| selectedValues       | Option[] | List of all selected values                                              | n/a           | true     |
-| setValues            | function | Function that runs when selecting values                                 | n/a           | true     |
-| placeholder          | string   | Placeholder for DirtySwan Input component                                | n/a           | true     |
-| chipsListClassName   | string   | Class name for the most parent element of the Chip component             | undefined     | false    |
-| multiSelectClassName | string   | Class name for the most parent element of the AutoSuggestInput component | 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 AutoSuggestMultiSelectStory = () => {
-  const [selectedValues, setSelectedValues] = useState([]);
-  const [suggestions, setSuggestions] = useState([]);
-  const [currentOption, setCurrentOption] = 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 (
-    <AutoSuggestMultiSelect
-      options={options}
-      selectedValues={selectedValues}
-      setValues={setSelectedValues}
-      placeholder="Placeholder"
-      chipsListClassName="wmx7"
-      multiSelectClassName="wmx5"
-    />
-  );
-};
-
-<AutoSuggestMultiSelectStory />
-
-```typescript
-import React, { useState } from 'react';
-import { AutoSuggestMultiSelect } from '@popsure/dirty-swan';
-
-export default () => {
-  const [selectedValues, setSelectedValues] = useState([]);
-  const [suggestions, setSuggestions] = useState([]);
-  const [currentOption, setCurrentOption] = 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 (
-    <AutoSuggestMultiSelect
-      options={options}
-      selectedValues={selectedValues}
-      setValues={setSelectedValues}
-      placeholder="Placeholder"
-      chipsListClassName="wmx7"
-      multiSelectClassName="wmx5"
-    />
-  );
-};
-```

package/src/lib/scss/private/components/badge.stories.mdx

@@ -1,43 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-<Meta title="CSS/Components/Badge" />
-
-# Badges
-
-Badges are label used for flags.
-
-## Active
-
-<Preview>
-  <div className="p-badge--active">Active badge</div>
-</Preview>
-
-## Pending
-
-<Preview>
-  <div className="p-badge--pending">Pending badge</div>
-</Preview>
-
-## Inactive
-
-<Preview>
-  <div className="p-badge--inactive">Inactive badge</div>
-</Preview>
-
-## Danger
-
-<Preview>
-  <div className="p-badge--danger">Danger badge</div>
-</Preview>
-
-## Info
-
-<Preview>
-  <div className="p-badge--info">Info badge</div>
-</Preview>
-
-## Default
-
-<Preview>
-  <div className="p-badge--default">Default badge</div>
-</Preview>