@popsure/dirty-swan 0.34.0 → 0.35.0

package/dist/esm/index.d.ts

@@ -1,2 +1,2 @@
-export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, Checkbox, images } from './lib';
+export { DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, IbanInput, CurrencyInput, BottomModal, RegularModal, BottomOrRegularModal, CardWithTopLeftIcon, CardWithLeftIcon, CardWithTopIcon, InfoCard, CardButton, Button, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, DownloadButton, Markdown, Checkbox, Link, InformationBox, images } from './lib';
 export type { DownloadStatus, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, } from './lib';

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export { AutocompleteAddress } from './components/autocompleteAddress/index.js';
 export { Input } from './components/input/index.js';
 export { MultiDropzone } from './components/multiDropzone/index.js';
 export { DownloadButton } from './components/downloadButton/index.js';
+export { InformationBox } from './components/informationBox/index.js';
 export { default as IbanInput } from './components/input/iban/index.js';
 export { default as CurrencyInput } from './components/input/currency/index.js';
 export { Checkbox } from './components/input/checkbox/index.js';
@@ -19,6 +20,7 @@ export { default as AutoSuggestInput } from './components/input/autoSuggestInput
 export { ComparisonTable } from './components/comparisonTable/index.js';
 export { SegmentedControl } from './components/segmentedControl/index.js';
 export { Markdown } from './components/markdown/index.js';
+export { Link } from './components/link/index.js';
 export { i as images } from './index-31224f74.js';
 export { default as TableRating } from './components/comparisonTable/components/TableRating/index.js';
 export { default as TableTrueFalse } from './components/comparisonTable/components/TableTrueFalse.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,6 +1,7 @@
 import { Option } from '../../models/autoSuggestInput';
-declare const _default: ({ value, onRemove, }: {
+declare const _default: ({ className, value, onRemove, }: {
     value: Option;
     onRemove: (value: Option) => void;
+    className?: string | undefined;
 }) => JSX.Element;
 export default _default;

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+declare type Variant = 'warning' | 'error' | 'success' | 'information' | 'neutral';
+export interface InformationBoxProps {
+    className?: string;
+    variant?: Variant;
+    title?: string;
+    children: ReactNode;
+    showIcon?: boolean;
+    size?: 'default' | 'small';
+}
+declare const InformationBox: ({ className, variant, title, children, showIcon, size }: InformationBoxProps) => JSX.Element;
+export { InformationBox };

package/dist/esm/lib/components/informationBox/index.stories.d.ts

@@ -0,0 +1,35 @@
+import { InformationBoxProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ className, variant, title, children, showIcon, size }: InformationBoxProps) => JSX.Element;
+    argTypes: {
+        children: {
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+            description: string;
+        };
+        title: {
+            defaultValue: string;
+            description: string;
+        };
+        showIcon: {
+            defaultValue: boolean;
+            description: string;
+        };
+        size: {
+            defaultValue: string;
+            description: string;
+        };
+        variant: {
+            defaultValue: string;
+            description: string;
+        };
+    };
+};
+export declare const InformationBoxStory: {
+    ({ children, showIcon, title, size, variant, }: InformationBoxProps): JSX.Element;
+    storyName: string;
+};
+export default story;

package/dist/esm/lib/components/informationBox/index.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export declare type LinkProps = JSX.IntrinsicElements['a'];
+export declare const Link: ({ children, className, ...rest }: LinkProps) => JSX.Element;

package/dist/esm/lib/components/link/index.stories.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { LinkProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ children, className, ...rest }: import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => JSX.Element;
+    argTypes: {
+        children: {
+            control: string;
+            defaultValue: string;
+            description: string;
+        };
+        href: {
+            control: string;
+            defaultValue: string;
+            description: string;
+        };
+    };
+    parameters: {
+        componentSubtitle: string;
+    };
+};
+export declare const LinkStory: {
+    ({ children, href, ...rest }: LinkProps): JSX.Element;
+    storyName: string;
+};
+export default story;

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

@@ -4,6 +4,7 @@ import { AutocompleteAddress } from './components/autocompleteAddress';
 import { Input } from './components/input';
 import { MultiDropzone, FileType, MultiDropzoneProps, UploadedFile, 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 { Checkbox } from './components/input/checkbox';
@@ -16,7 +17,8 @@ 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, 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 type { FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus };
 export type { DownloadStatus } from './models/download';

package/dist/esm/util/testUtils/customRender.js

@@ -1,5 +1,5 @@
 import '../../tslib.es6-5bc94358.js';
-export { c as customRender } from '../../customRender-4157fcff.js';
+export { c as customRender } from '../../customRender-20b5f7ec.js';
 import 'react';
 import 'react-dom';
 import '../../_commonjsHelpers-e7f67fd8.js';

package/package.json

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

package/src/index.tsx

@@ -31,6 +31,8 @@ export {
   DownloadButton,
   Markdown,
   Checkbox,
+  Link,
+  InformationBox,
   images
 } from './lib';
 

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

@@ -4,13 +4,15 @@ import removeButtonHighlightedIcon from './icons/remove-button-highlighted.svg';
 import { Option } from '../../models/autoSuggestInput';
 
 export default ({
+  className,
   value,
   onRemove,
 }: {
   value: Option;
   onRemove: (value: Option) => void;
+  className?: string;
 }) => (
-  <div className={`p-p mr8 mb8 d-flex ${styles['chip']}`}>
+  <div className={`p-p mr8 mb8 d-flex ${className} ${styles['chip']}`}>
     {value.leftIcon && (
       <img
         className={`mr8 ${styles['chip-image']}`}

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

@@ -0,0 +1,51 @@
+import { InformationBox, InformationBoxProps } from '.';
+
+const story = {
+  title: 'JSX/InformationBox',
+  component: InformationBox,
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+      defaultValue: 'It seems that you already have an account with us! Sign in now',
+      description: 'Content that is displayed inside the information box',
+    },
+    title: {
+      defaultValue: 'Log in to your account',
+      description: 'Title of the information box',
+    },
+    showIcon: {
+      defaultValue: false,
+      description: 'Whether or not to show the info icon',
+    },
+    size: {
+      defaultValue: 'default',
+      description: 'Size to display the component',
+    },
+    variant: {
+      defaultValue: 'information',
+      description: 'Variant that defines the style of the InformationBox',
+    },
+  }
+};
+
+export const InformationBoxStory = ({
+  children,
+  showIcon,
+  title,
+  size,
+  variant,
+}: InformationBoxProps) => (
+  <div className='wmx6'>
+    <InformationBox
+      children={children}
+      showIcon={showIcon}
+      title={title}
+      size={size}
+      variant={variant}
+    />
+  </div>
+);
+
+InformationBoxStory.storyName = "InformationBox";
+
+export default story;

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

@@ -0,0 +1,55 @@
+import { render, screen } from '../../util/testUtils';
+
+import { InformationBox } from '.';
+
+describe('InformationBox component', () => {
+  it('Should render title', async () => {
+    render(
+      <InformationBox title={'Title'}>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+  });
+
+  it('Should not render title when title prop is not passed', async () => {
+    render(
+      <InformationBox>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.queryByTestId('information-box-title')).not.toBeInTheDocument();
+  });
+  
+  it('Should render content', async () => {
+    render(
+      <InformationBox>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+  
+  it('Should show icon when showIcon is true', async () => {
+    render(
+      <InformationBox showIcon>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.getByTestId('information-box-icon')).toBeInTheDocument();
+  });
+  
+  it('Should not show icon when showIcon is false', async () => {
+    render(
+      <InformationBox showIcon={false}>
+        Content
+      </InformationBox>
+    )
+
+    expect(screen.queryByTestId('information-box-icon')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import classNames from 'classnames';
+import styles from './style.module.scss';
+
+type Variant = 'warning' | 'error' | 'success' | 'information' | 'neutral';
+
+export interface InformationBoxProps {
+  className?: string;
+  variant?: Variant;
+  title?: string;
+  children: ReactNode;
+  showIcon?: boolean;
+  size?: 'default' | 'small';
+}
+
+const InformationBox = ({
+  className = '',
+  variant = 'information',
+  title,
+  children,
+  showIcon,
+  size = 'default'
+}: InformationBoxProps) => (
+  <div
+    className={classNames(
+      className, 
+      'p16 br8 color-black', 
+      styles.informationBox,
+      styles[`informationBox--${variant}`]
+    )}
+    role="alert"
+  >
+    <div className='d-flex'>
+      {showIcon && 
+        <span
+          data-testid="information-box-icon"
+          className={classNames(
+            styles.icon,
+            styles[`icon--${variant}`],
+            'mr8'
+          )}
+        />
+      }
+      <div>
+        {title && (
+          <h4 
+            data-testid="information-box-title"
+            className={classNames(
+              size === 'default'? 'p-h4' : 'p-h5',
+              'mb8'
+            )}
+          >
+            {title}
+          </h4>
+        )}
+
+        <p className={size === 'default' ? 'p-p' : 'p-p--small'}>
+          {children}
+        </p>
+      </div>
+    </div>
+  </div>
+);
+
+export { InformationBox };

package/src/lib/components/informationBox/info.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+  <g clip-path="url(#a)">
+    <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10ZM12 16v-4"/>
+    <circle cx="12" cy="8" r="1" fill="#000"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h24v24H0z"/>
+    </clipPath>
+  </defs>
+  </svg>

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

@@ -0,0 +1,62 @@
+
+@use "../../scss/public/colors" as *;
+
+.informationBox {
+  border: 1px solid;
+
+  &--information {
+    background-color: $ds-blue-100;
+    border-color: $ds-blue-500;
+  }
+
+  &--error {
+    background-color: $ds-red-100;
+    border-color: $ds-red-500;
+  }
+
+  &--warning {
+    background-color: $ds-yellow-100;
+    border-color: $ds-yellow-500;
+  }
+
+  &--success {
+    background-color: $ds-green-100;
+    border-color: $ds-green-500;
+  }
+
+  &--neutral {
+    background-color: $ds-white;
+    border-color: $ds-white;
+  }
+}
+
+.icon {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+
+  mask-image: url('./info.svg');
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+
+  &--information {
+    background-color: $ds-blue-500;
+  }
+
+  &--error {
+    background-color: $ds-red-500;
+  }
+
+  &--warning {
+    background-color: $ds-yellow-500;
+  }
+
+  &--success {
+    background-color: $ds-green-500;
+  }
+
+  &--neutral {
+    background-color: $ds-primary-500;
+  }
+}

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

@@ -4,6 +4,7 @@ import { Option } from '../../../models/autoSuggestInput';
 import Chip from '../../chip';
 import AutoSuggestInput from '../autoSuggestInput';
 import styles from './style.module.scss';
+import classNames from 'classnames';
 
 export default ({
   options,
@@ -24,27 +25,37 @@ export default ({
 }) => {
   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,6 +10,7 @@ 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 { Checkbox } from './components/input/checkbox';
@@ -40,6 +41,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 +74,8 @@ export {
   SegmentedControl,
   Markdown,
   Checkbox,
+  Link,
+  InformationBox,
   images,
 };