@popsure/dirty-swan 0.35.0 → 0.36.1

package/dist/esm/lib/components/input/autoSuggestInput/index.stories.d.ts

@@ -0,0 +1,84 @@
+import { AutoSuggestInputProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ currentOption, suggestions, handleSuggestionSelected, onChange, handleSuggestionFetchRequest, handleSuggestionClearRequest, placeholder, className, wrapText, inputProps }: AutoSuggestInputProps) => JSX.Element;
+    argTypes: {
+        suggestions: {
+            description: string;
+            defaultValue: {
+                value: string;
+                leftIcon: string;
+            }[];
+        };
+        currentOption: {
+            defaultValue: string;
+            description: string;
+        };
+        placeholder: {
+            defaultValue: string;
+            description: string;
+        };
+        className: {
+            defaultValue: string;
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        wrapText: {
+            defaultValue: boolean;
+            description: string;
+        };
+        inputProps: {
+            defaultValue: {};
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        handleSuggestionSelected: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        onChange: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        handleSuggestionFetchRequest: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        handleSuggestionClearRequest: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+        customTypes: {
+            Option: string;
+        };
+    };
+};
+export declare const AutoSuggestInputStory: {
+    ({ currentOption, suggestions, handleSuggestionSelected, onChange, handleSuggestionFetchRequest, handleSuggestionClearRequest, placeholder, className, wrapText, inputProps, }: AutoSuggestInputProps): JSX.Element;
+    storyName: string;
+};
+export default story;

package/dist/esm/lib/components/input/autoSuggestMultiSelect/index.d.ts

@@ -1,11 +1,11 @@
 import { Option } from '../../../models/autoSuggestInput';
-declare const _default: ({ options, selectedValues, setValues, placeholder, chipsListClassName, multiSelectClassName, wrapText, }: {
+export interface AutoSuggestMultiSelectProps {
     options: Option[];
-    selectedValues?: Option[] | undefined;
+    selectedValues?: Option[];
     setValues: (values: Option[]) => void;
     placeholder: string;
-    chipsListClassName?: string | undefined;
-    multiSelectClassName?: string | undefined;
-    wrapText?: boolean | undefined;
-}) => JSX.Element;
-export default _default;
+    chipsListClassName?: string;
+    multiSelectClassName?: string;
+    wrapText?: boolean;
+}
+export declare const AutoSuggestMultiSelect: ({ options, selectedValues, setValues, placeholder, chipsListClassName, multiSelectClassName, wrapText, }: AutoSuggestMultiSelectProps) => JSX.Element;

package/dist/esm/lib/components/input/autoSuggestMultiSelect/index.stories.d.ts

@@ -0,0 +1,77 @@
+import { AutoSuggestMultiSelectProps } from '.';
+declare const story: {
+    title: string;
+    subtitle: string;
+    component: ({ options, selectedValues, setValues, placeholder, chipsListClassName, multiSelectClassName, wrapText, }: AutoSuggestMultiSelectProps) => JSX.Element;
+    argTypes: {
+        options: {
+            description: string;
+            defaultValue: {
+                value: string;
+                leftIcon: string;
+            }[];
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        selectedValues: {
+            description: string;
+            defaultValue: {
+                value: string;
+                leftIcon: string;
+            }[];
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            defaultValue: string;
+            description: string;
+        };
+        chipsListClassName: {
+            defaultValue: string;
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        multiSelectClassName: {
+            defaultValue: string;
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        wrapText: {
+            defaultValue: boolean;
+            description: string;
+        };
+        setValues: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        customTypes: {
+            Option: string;
+        };
+    };
+};
+export declare const AutoSuggestMultiSelectStory: {
+    ({ options, selectedValues, setValues, placeholder, chipsListClassName, multiSelectClassName, wrapText, }: AutoSuggestMultiSelectProps): JSX.Element;
+    storyName: string;
+};
+export default story;

package/dist/esm/lib/index.d.ts

@@ -7,18 +7,19 @@ 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, RegularModal, BottomOrRegularModal } from './components/modal';
 import { CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, 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, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, TableHeader } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
 import { Markdown } from './components/markdown';
 import { Link } from './components/link';
 import { images } from './util/images';
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, Link, InformationBox, images, };
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Markdown, Checkbox, Link, InformationBox, Badge, images, };
 export type { FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus };
 export type { DownloadStatus } from './models/download';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.35.0",
+  "version": "0.36.1",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/index.tsx

@@ -33,6 +33,7 @@ export {
   Checkbox,
   Link,
   InformationBox,
+  Badge,
   images
 } from './lib';
 

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

@@ -0,0 +1,45 @@
+import { Badge, BadgeProps } from '.';
+
+const story = {
+  title: 'JSX/Badge',
+  component: Badge,
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+      defaultValue: 'Value',
+      description: 'Content that is displayed inside the badge',
+    },
+    className: {
+      defaultValue: '',
+      description: 'Class name for the most parent element',
+      control: { type: 'text' }
+    },
+    size: {
+      defaultValue: 'medium',
+      description: 'Define the size of the badge',
+    },
+    variant: {
+      defaultValue: 'information',
+      description: 'Variant that defines the style of the Badge',
+    },
+  }
+};
+ 
+export const BadgeStory = ({
+  children,
+  className,
+  size,
+  variant,
+}: BadgeProps) => (
+  <Badge
+    className={className}
+    size={size}
+    variant={variant}
+  >
+    {children}
+  </Badge>
+);
+
+BadgeStory.storyName = "Badge";
+
+export default story;

package/src/lib/components/badge/index.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '../../util/testUtils';
+
+import { Badge } from '.';
+
+describe('Badge component', () => {
+  it('Should render content', async () => {
+    render(<Badge>Content</Badge>);
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import classNames from 'classnames';
+import styles from './style.module.scss';
+
+type Variant = 
+ | 'warning'
+ | 'error'
+ | 'success'
+ | 'information'
+ | 'neutral'
+ | 'neutral200'
+ | 'neutral300'
+ | 'primary'
+ | 'primary900';
+
+export interface BadgeProps {
+  className?: string;
+  variant?: Variant;
+  size?: 'small' | 'medium' | 'large';
+  children: ReactNode;
+}
+
+const getVariantClassNames = (variant: Variant) => ({
+  information: 'bg-blue-100',
+  neutral: 'bg-white',
+  neutral200: 'bg-grey-200',
+  neutral300: 'bg-grey-300',
+  warning: 'bg-yellow-100',
+  error: 'bg-red-100',
+  success: 'bg-green-100',
+  primary: 'bg-purple-100',
+  primary900: 'bg-purple-900 tc-white',
+}[variant])
+
+const Badge = ({
+  className = '',
+  size = 'medium',
+  variant = 'information',
+  children,
+}: BadgeProps) => (
+  <div
+    className={classNames(
+      className, 
+      'px16 br8 d-inline-block ai-center fw-bold p-p', 
+      { 'p-p--small': size === 'small' },
+      styles[`badge--${size}`],
+      getVariantClassNames(variant)
+    )}
+  >
+    {children}
+  </div>
+);
+
+export { Badge };

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

@@ -0,0 +1,13 @@
+
+.badge {
+  &--small,
+  &--medium {
+    padding-bottom: 6px;
+    padding-top: 6px;
+  }
+ 
+  &--large {
+    padding-bottom: 8px;
+    padding-top: 8px;
+  }
+}

package/src/lib/components/cards/cardWithLeftIcon/index.stories.tsx

@@ -9,6 +9,10 @@ const story = {
       defaultValue: 'Lorem Ipsum',
       description: 'Title text that needs to be displayed',
     },
+    subtitle: {
+      defaultValue: 'Lorem Ipsum dolorem',
+      description: 'Subitle text that needs to be displayed',
+    },
     children: {
       type: 'text',
       defaultValue: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
@@ -25,6 +29,13 @@ const story = {
       },
       description: 'Icon displayed on the left of the card.',
     },
+    leftIconSize: {
+      defaultValue: {
+        width: 48,
+        height: 48
+      },
+      description: 'Size of the left icon',
+    },
     rightIcon: {
       defaultValue: {
         src: images.washingMachine,
@@ -51,11 +62,13 @@ const story = {
 
 export const CardWithLeftIconStory = ({
   title,
+  subtitle,
   dropshadow,
   children,
   className,
   cardSize,
   leftIcon,
+  leftIconSize,
   rightIcon,
   state,
 }: CardWithLeftIconProps) => {
@@ -66,8 +79,10 @@ export const CardWithLeftIconStory = ({
       dropshadow={dropshadow}
       state={state}
       leftIcon={leftIcon}
+      leftIconSize={leftIconSize}
       rightIcon={rightIcon}
       title={title}
+      subtitle={subtitle}
     >
       {children}
     </CardWithLeftIcon>

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

@@ -1,5 +1,5 @@
 import { associatedClassForCardState, CardProps, headingForCardSize } from '..';
-import { Icon, arrowRight } from '../icons';
+import { Icon, IconSize, arrowRight } from '../icons';
 
 import styles from './style.module.scss';
 
@@ -30,21 +30,26 @@ const cardTextStyleFromCardSize = (
   }
 };
 
-export type CardWithLeftIconProps = CardProps & {
+export type CardWithLeftIconProps = Omit<CardProps, 'title'> & {
   cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
   leftIcon?: Icon;
   rightIcon?: 'arrow' | Icon;
+  leftIconSize?: IconSize;
+  title?: string;
+  subtitle?: string;
 }
 
 export const CardWithLeftIcon = ({
   className = '',
   title,
+  subtitle,
   cardSize = 'medium',
   children,
   leftIcon,
   rightIcon,
   state = 'actionable',
   dropshadow = true,
+  leftIconSize,
   ...props
 }: CardWithLeftIconProps) => {
   const cardStyle = `d-flex ai-center ${className} ${associatedClassForCardState(
@@ -62,8 +67,8 @@ export const CardWithLeftIcon = ({
     <div className={cardStyle} {...props}>
       {leftIcon && (
         <img
-          width="48px"
-          height="48px"
+          width={`${leftIconSize?.width || 48}px`}
+          height={`${leftIconSize?.height || 48}px`}
           className={iconStyle}
           src={leftIcon.src}
           alt={leftIcon.alt}
@@ -71,7 +76,16 @@ export const CardWithLeftIcon = ({
       )}
       <div>
         <div className="d-flex">
-          <div className={headingStyle}>{title}</div>
+          {(title || subtitle) && (
+            <div>
+              {title && (
+                <div className={headingStyle}>{title}</div>
+              )}
+              {subtitle && (
+                <div className={`tc-grey-500 ${headingStyle}`}>{subtitle}</div>
+              )}
+            </div>
+          )}
           {rightIcon && (
             <img
               className="ml-auto"

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

@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { AutoSuggestInput, AutoSuggestInputProps } from '.';
+import { Option } from '../../../models/autoSuggestInput';
+import featherLogo from '../../cards/icons/feather-logo.svg';
+
+const story = {
+  title: 'JSX/Inputs/AutoSuggestInput',
+  component: AutoSuggestInput,
+  argTypes: {
+    suggestions: {
+      description: 'List of suggestions that should be displayed to the respective input',
+      defaultValue: [
+        { value: 'feather', leftIcon: featherLogo },
+        { value: 'feather2', leftIcon: featherLogo },
+        {
+          value: 'feather3',
+          leftIcon: featherLogo,
+        },
+        {
+          value: 'dirtyswan',
+          leftIcon: featherLogo,
+        },
+        {
+          value: 'test value',
+          leftIcon: featherLogo,
+        },
+      ]
+    },
+    currentOption: {
+      defaultValue: 'feather',
+      description: 'Current input of the component by user',
+    },
+    placeholder: {
+      defaultValue: 'Placeholder',
+      description: 'Placeholder for DirtySwan Input component'
+    },
+    className: {
+      defaultValue: '',
+      description: 'Class name for the most parent element',
+      control: { type: 'text' }
+    },
+    wrapText: {
+      defaultValue: false,
+      description: 'Wether or not wrap the entries in the dropdown or hide overflown text',
+    },
+    inputProps: {
+      defaultValue: {},
+      description: 'Pass through arbitrary props to the input.',
+      control: { type: 'object' },
+      table: {
+        type: { 
+          summary: 'InputHTMLAttributes'
+        },
+      },
+    },
+    handleSuggestionSelected: {
+      description: 'Function that runs when a suggestion is selected from the dropdown',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    onChange: {
+      description: 'Function that is called when value of current input changes',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    handleSuggestionFetchRequest: {
+      description: 'Function that allows control of which suggestions should be displayed',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    handleSuggestionClearRequest: {
+      description: 'Function that runs when suggestions are cleared (eg. input removal, selecting suggestion)',
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+  },
+  parameters: {
+    componentSubtitle: 'This component allows quick search via the input field to find an option for selection',
+    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 AutoSuggestInputStory = ({
+  currentOption = '', 
+  suggestions,
+  handleSuggestionSelected,
+  onChange,
+  handleSuggestionFetchRequest,
+  handleSuggestionClearRequest,
+  placeholder,
+  className,
+  wrapText,
+  inputProps,
+}: AutoSuggestInputProps) => {
+  
+  const [selectedValues, setSelectedValues] = useState<Option[]>([]);
+  const [selectedOption, setSelectedOption] = useState(currentOption);
+  const [options, setOptions] = useState([]);
+
+  const handleSelected = (value: Option) => {
+    handleSuggestionSelected(value);
+
+    const newSelectedOptions = [...selectedValues, value];
+    setSelectedValues(newSelectedOptions);
+    setSelectedOption(value.value);
+  };
+
+  const handleFetchRequest = (value: Option) => {
+    handleSuggestionFetchRequest(value);
+
+    const filteredOptions = options.filter((option: Option) =>
+      option.value.toLowerCase().startsWith(option.value.toLowerCase())
+    );
+    setSelectedValues(filteredOptions);
+  };
+
+  const handleClearSuggestions = () => {
+    handleSuggestionClearRequest();
+
+    setOptions([]);
+  };
+
+  const handleOnChange = (value: string) => {
+    onChange(value);
+
+    setSelectedOption(value);
+  };
+
+  return (
+    <div style={{ minHeight: '300px' }}>
+      <AutoSuggestInput
+        currentOption={selectedOption}
+        suggestions={suggestions}
+        handleSuggestionSelected={handleSelected}
+        onChange={handleOnChange}
+        handleSuggestionFetchRequest={handleFetchRequest}
+        handleSuggestionClearRequest={handleClearSuggestions}
+        placeholder={placeholder}
+        className={className}
+        wrapText={wrapText}
+        inputProps={inputProps}
+      />
+    </div>
+  );
+};
+
+AutoSuggestInputStory.storyName = "AutoSuggestInput";
+
+export default story;

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

@@ -5,18 +5,7 @@ import styles from './style.module.scss';
 import { Option } from '../../../models/autoSuggestInput';
 import { Input, InputProps } from '../index';
 
-export default ({
-  currentOption,
-  suggestions,
-  handleSuggestionSelected,
-  onChange,
-  handleSuggestionFetchRequest,
-  handleSuggestionClearRequest,
-  placeholder,
-  className,
-  wrapText,
-  inputProps
-}: {
+export interface AutoSuggestInputProps {
   currentOption: string;
   suggestions: Option[];
   handleSuggestionSelected: (value: Option) => void;
@@ -27,7 +16,20 @@ export default ({
   className?: string;
   wrapText?: boolean;
   inputProps?: Omit<RenderInputComponentProps, 'value' | 'onChange'>;
-}) => {
+}
+
+export const AutoSuggestInput = ({
+  currentOption,
+  suggestions,
+  handleSuggestionSelected,
+  onChange,
+  handleSuggestionFetchRequest,
+  handleSuggestionClearRequest,
+  placeholder,
+  className,
+  wrapText,
+  inputProps
+}: AutoSuggestInputProps) => {
   const renderSuggestion = (suggestion: Option) => (
     <div className={`${styles['suggestion-option']}`}>
       {suggestion.leftIcon && (