@popsure/dirty-swan 0.33.5 → 0.35.0

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/input/currency/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { formatInput, reverseFormatInput } from './format';
-import Input, { InputProps } from '..';
+import { Input, InputProps } from '..';
 
 const CurrencyInput = ({
   value,

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

@@ -1,4 +1,4 @@
-import Input, { InputProps } from '..';
+import { Input, InputProps } from '..';
 
 import { formatIban } from './formatIban';
 

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

@@ -5,16 +5,16 @@ import generateId from '../../util/generateId';
 import styles from './style.module.scss';
 
 // Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.
-export type InputProps = {
+export type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
+ Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {
   error?: string;
   prefix?: string;
   label?: string;
   id?: string;
   hideLabel?: boolean;
-} & Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
-  Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>>;
+};
 
-export default React.forwardRef(
+export const Input = React.forwardRef(
   (
     {
       className,

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

@@ -0,0 +1,48 @@
+
+import { ChangeEvent, useState } from 'react';
+import { Input, InputProps } from '.';
+import sharedConfig from './stories/config';
+
+const story = {
+  title: 'JSX/Inputs/Input',
+  component: Input,
+  argTypes: sharedConfig,
+  parameters: {
+    componentSubtitle: 'The default input component is used to gather informations from the user.'
+  }
+};
+
+export const InputStory = ({ 
+  onChange,
+  className,
+  placeholder,
+  value,
+  label,
+  hideLabel,
+  prefix,
+  error
+}: InputProps) => {
+  const [newValue, setValue] = useState(value);
+
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+    onChange?.(event);
+  }
+
+  return (
+    <Input 
+      onChange={handleOnChange}
+      value={newValue}
+      className={className}
+      placeholder={placeholder}
+      label={label}
+      hideLabel={hideLabel}
+      prefix={prefix}
+      error={error}
+    />
+  );
+};
+
+InputStory.storyName = 'Input';
+
+export default story;

package/src/lib/components/input/stories/config.ts

@@ -0,0 +1,56 @@
+const sharedConfig = {
+  value: {
+    defaultValue: '',
+    description: 'Current input value.',
+    control: { type: 'text' }
+  },
+  className: {
+    description: 'Wrapper classNames for custom styling',
+    defaultValue: '',
+    control: { type: 'text' }
+  },
+  placeholder: {
+    description: 'Placeholder for DirtySwan Input component',
+    defaultValue: 'Placeholder',
+    control: { type: 'text' }
+  },
+  label: {
+    description: 'Label of the Input component',
+    defaultValue: 'Input Label',
+    control: { type: 'text' }
+  },
+  hideLabel: {
+    description: 'Whether or not a label should be hidden.. This is needed for accessibility purposes and a label should always be provided',
+    defaultValue: false,
+    control: { type: 'boolean' }
+  },
+  prefix: {
+    description: 'A prefix that can be displayed on the left of the input. Specially useful for currencies.',
+    defaultValue: '£',
+    control: { type: 'text' }
+  },
+  id: {
+    description: 'Unique ID identifier of the input. Relevant for accessibility.',
+    defaultValue: '1234567890',
+    control: { type: 'text' }
+  },
+  error: {
+    description: 'Error message that will also make input show on error state.',
+    defaultValue: '',
+    control: { type: 'text' },
+    table: {
+      type: { 
+        summary: 'string | boolean'
+      },
+    },
+  },
+  onChange: {
+    description: 'Function that is called when value of current input changes',
+    action: true,
+    table: {
+      category: "Callbacks",
+    },
+  },
+} 
+
+export default sharedConfig;

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

@@ -1,7 +1,7 @@
 import { DateSelector } from './components/dateSelector';
 import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
-import Input from './components/input';
+import { Input } from './components/input';
 import { 
   MultiDropzone,
   FileType,
@@ -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,
 };
 

package/src/lib/scss/public/colors/default.scss

@@ -1,7 +1,7 @@
 // TODO: Reference colors
 $ds-primary-25: #fcfcff !default;
 $ds-primary-50: #f7f7ff !default;
-$ds-primary-100: #e6e5ff !default;
+$ds-primary-100: #ebebff !default;
 $ds-primary-300: #b1b0f5 !default;
 $ds-primary-500: #8e8cee !default;
 $ds-primary-700: #6160a2 !default;
@@ -9,7 +9,7 @@ $ds-primary-900: #2e2e4c !default;
 
 $ds-purple-25: #fcfcff;
 $ds-purple-50: #f7f7ff;
-$ds-purple-100: #e6e5ff;
+$ds-purple-100: #ebebff;
 $ds-purple-300: #b1b0f5;
 $ds-purple-500: #8e8cee;
 $ds-purple-700: #6160a2;

package/src/lib/scss/public/demo.tsx

@@ -24,7 +24,7 @@ const colors = [
   {
     name: 'Primary 100',
     code: 'primary-100',
-    hex: '#e6e5ff',
+    hex: '#ebebff',
   },
   {
     name: 'Primary 300',

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

@@ -1,47 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import CardButton from '.';
-
-<Meta title="JSX/Cards/Card Button" />
-
-# Card Button
-
-| attribute   | unit                     | description                                    | default value | required                            |
-| ----------- | ------------------------ | ---------------------------------------------- | ------------- | ----------------------------------- |
-| title       | string                   | Title text that needs to be displayed          | n/a           | true                                |
-| description | string / ReactNode (JSX) | Description text that is displayed under title | n/a           | true                                |
-| disabled    | boolean                  | Disabled state of the button                   | false         | false                               |
-| className   | string                   | Class name for most top parent element         | n/a           | false                               |
-| onClick     | function                 | Function that runs on click of the button      | n/a           | true (false if href prop exists)    |
-| href        | string                   | Redirect URL on click of the button            | n/a           | true (false if onClick prop exists) |
-
-<Preview>
-  <>
-    <h4 className="p-h4">Normal state</h4>
-    <br />
-    <CardButton
-      title="Name"
-      description="Seungha Kong"
-      onClick={() => console.log('This is a button component')}
-    />
-    <br />
-    <br />
-    <h4 className="p-h4">Long description</h4>
-    <br />
-    <CardButton
-      title="Risky Sports"
-      description="Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,"
-      onClick={() => console.log('This is a button component')}
-    />
-    <br />
-    <br />
-    <h4 className="p-h4">Disabled state</h4>
-    <br />
-    <CardButton
-      title="Address"
-      description="Lohmühlenstraße 65 10557 Berlin"
-      onClick={() => console.log('This is a button component')}
-      disabled
-    />
-  </>
-</Preview>

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

@@ -1,103 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import CardWithLeftIcon from '.';
-import { featherLogo } from '../icons';
-
-<Meta title="JSX/Cards/Card with left icon" />
-
-# Card with left icon
-
-| attribute  | unit                                                                                 | description                                       | default value | required |
-| ---------- | ------------------------------------------------------------------------------------ | ------------------------------------------------- | ------------- | -------- |
-| title      | string                                                                               | The title text that needs to be displayed         | n/a           | true     |
-| cardSize  | [Card Size (xs,s,m,b)](?path=/story/jsx-cards-intro--page#card-size-xsmall-small-medium-big) | Size of the card                                 | medium        | false    |
-| leftIcon   | [Icon](?path=/story/jsx-cards-intro--page#icon)                                      | Icon displayed on the left hand side of the card  | n/a           | false    |
-| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)                                      | Icon displayed on the right hand side 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    |
-| className  | string                                                                               | Class name for most top parent element         | 'n/a'           | false    |
-
-<Preview>
-  <>
-    <h4 className="p-h4">Extra small card</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="xsmall"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4">Small card</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="small"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">Medium card</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="medium"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">Big card</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="big"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">Muted</h4>
-    <CardWithLeftIcon
-      state="muted"
-      title="Lorem ipsum"
-      cardSize="big"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">No left icon and right icon</h4>
-    <CardWithLeftIcon title="Lorem ipsum" cardSize="big" className="wmx6 mt8">
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-    <h4 className="p-h4 mt24">No dropshadow</h4>
-    <CardWithLeftIcon
-      title="Lorem ipsum"
-      cardSize="medium"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      leftIcon={featherLogo}
-      dropshadow={false}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithLeftIcon>
-  </>
-</Preview>

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

@@ -1,105 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import CardWithTopIcon from '.';
-import { featherLogo } from '../icons';
-
-<Meta title="JSX/Cards/Card with top icon" />
-
-# Card with top icon
-
-| attribute  | unit                                                                                      | description                                      | default value | required |
-| ---------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------- | -------- |
-| title      | string                                                                                    | The title text that needs to be displayed        | n/a           | true     |
-| cardSize   | [Card Size (s,m,b)](?path=/story/jsx-cards-intro--page#card-size-xsmall-small-medium-big) | Size of the card                                 | medium        | false    |
-| topIcon    | [Icon](?path=/story/jsx-cards-intro--page#icon)                                           | Icon displayed on the top of the card            | n/a           | true     |
-| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)                                           | Icon displayed on the right of the title         | 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">Small card</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      cardSize="small"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      topIcon={featherLogo}
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">Medium card</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      cardSize="medium"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      topIcon={featherLogo}
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">Big card</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      cardSize="big"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      topIcon={featherLogo}
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">Muted</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      className="wmx6 mt8"
-      rightIcon="arrow"
-      topIcon={featherLogo}
-      state="muted"
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">No right icon</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      topIcon={featherLogo}
-      cardSize="small"
-      className="wmx6 mt8"
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-    <h4 className="p-h4 mt24">No dropshadow</h4>
-    <CardWithTopIcon
-      title="Lorem ipsum"
-      topIcon={featherLogo}
-      cardSize="small"
-      className="wmx6 mt8"
-      dropshadow={false}
-    >
-      <p className="p-p mt16 tc-grey-600">
-        Praesent euismod porta odio at tempus.{' '}
-        <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-        eros at, rhoncus imperdiet nunc
-      </p>
-    </CardWithTopIcon>
-  </>
-</Preview>