@popsure/dirty-swan 0.33.4 → 0.34.0

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

@@ -1,101 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import CardWithTopLeftIcon from '.';
-import { featherLogo } from '../icons';
-
-<Meta title="JSX/Cards/Card with top left icon" />
-
-# Card with top 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    |
-| topIcon    | [Icon](?path=/story/jsx-cards-intro--page#icon)                                   | Icon displayed on the left of the title          | n/a           | false    |
-| 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">Extra small card</h4>
-    <CardWithTopLeftIcon
-      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
-    </CardWithTopLeftIcon>
-    <h4 className="p-h4 mt24">Small card</h4>
-    <CardWithTopLeftIcon
-      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
-    </CardWithTopLeftIcon>
-    <h4 className="p-h4 mt24">Medium card</h4>
-    <CardWithTopLeftIcon
-      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
-    </CardWithTopLeftIcon>
-    <h4 className="p-h4 mt24">Big card</h4>
-    <CardWithTopLeftIcon
-      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
-    </CardWithTopLeftIcon>
-    <h4 className="p-h4 mt24">Muted</h4>
-    <CardWithTopLeftIcon
-      title="Lorem ipsum"
-      state="muted"
-      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
-    </CardWithTopLeftIcon>
-    <h4 className="p-h4 mt24">No right icon or left icon</h4>
-    <CardWithTopLeftIcon title="Lorem ipsum" className="wmx6 mt8">
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </CardWithTopLeftIcon>
-    <h4 className="p-h4">No dropshadow</h4>
-    <CardWithTopLeftIcon
-      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
-    </CardWithTopLeftIcon>
-  </>
-</Preview>

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

@@ -1,61 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import InfoCard from '.';
-import { featherLogo } from '../icons';
-
-<Meta title="JSX/Cards/Info card" />
-
-# Info card
-
-| attribute  | unit                                                        | description                                                     | default value | required |
-| ---------- | ----------------------------------------------------------- | --------------------------------------------------------------- | ------------- | -------- |
-| title      | string                                                      | The title text that needs to be displayed                       | n/a           | true     |
-| topIcon    | [Icon](?path=/story/jsx-cards-intro--page#icon)             | Icon displayed on the top of the card, inside the purple circle | n/a           | true     |
-| rightIcon  | [Icon](?path=/story/jsx-cards-intro--page#icon)             | Icon displayed on the top right corner 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    |
-
-<Preview>
-  <>
-    <h4 className="p-h4">With right icon</h4>
-    <InfoCard
-      className="wmx6 mt8"
-      title="Lorem ipsum"
-      rightIcon="info"
-      topIcon={featherLogo}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </InfoCard>
-    <h4 className="p-h4 mt24">Without right icon</h4>
-    <InfoCard className="wmx6 mt8" title="Lorem ipsum" topIcon={featherLogo}>
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </InfoCard>
-    <h4 className="p-h4 mt24">Muted</h4>
-    <InfoCard
-      className="wmx6 mt8"
-      title="Lorem ipsum"
-      topIcon={featherLogo}
-      state="muted"
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </InfoCard>
-    <h4 className="p-h4">No dropshadow</h4>
-    <InfoCard
-      className="wmx6 mt8"
-      title="Lorem ipsum"
-      rightIcon="info"
-      topIcon={featherLogo}
-      dropshadow={false}
-    >
-      Praesent euismod porta odio at tempus.{' '}
-      <span className="fw-bold">Aenean urna massa</span>, facilisis malesuada
-      eros at, rhoncus imperdiet nunc
-    </InfoCard>
-  </>
-</Preview>

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

@@ -1,106 +0,0 @@
-import { useState } from 'react';
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import DateSelector from '.';
-import de from 'dayjs/locale/de';
-
-<Meta title="JSX/Date selector" component={DateSelector} />
-
-# Date selector
-
-Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.
-
-<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-Design-System%3Fnode-id%3D293%253A169"
-    allowFullScreen
-  ></iframe>
-</Preview>
-
-## Default example
-
-### Without calendar
-
-export const DateSelectorWithoutCalendarStory = () => {
-  const [date, setDate] = useState('');
-  return (
-    <>
-      <DateSelector
-        value={date}
-        className="mt24"
-        yearBoundaries={{ min: 2020, max: 2022 }}
-        onChange={(date) => {
-          setDate(date);
-        }}
-      />
-    </>
-  );
-};
-
-<DateSelectorWithoutCalendarStory />
-
-### With calendar
-
-export const DateSelectorWithCalendarStory = () => {
-  const [date, setDate] = useState('');
-  return (
-    <div style={{ paddingBottom: '120px' }}>
-      <DateSelector
-        value={date}
-        className="mt24"
-        yearBoundaries={{ min: 2020, max: 2022 }}
-        onChange={(date) => {
-          setDate(date);
-        }}
-        displayCalendar={true}
-      />
-    </div>
-  );
-};
-
-<DateSelectorWithCalendarStory />
-
-### Localization
-
-| attribute      | unit                                               | description                                                                             | default value | required |
-| -------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------- | -------- |
-| placeholders   | `{ day?: string; month: string?; year?: string; }` | Placeholder text                                                                        | undefined     | false    |
-| dayjsLocale    | `ILocale`                                          | Imported [Day.js locale Object](https://day.js.org/docs/en/customization/customization) | undefined     | false    |
-| firstDayOfWeek | number                                             | Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)                       | 0             | false    |
-
-The `dayjsLocale` and `firstDayOfWeek` properties are used to localize the calendar of the `DateSelector`, whereas
-the `placeholders` object can be used to change the text of the different dropdowns. If no `dayjsLocale` is supplied, the default locale 'en' will be used for the DateSelector.
-
-Additional locales can be imported from dayjs like
-`import de from 'dayjs/locale/de';` and then passed on to the component:
-`<DateSelector ... dayjsLocale={de} />`
-
-[List of all supported locales](https://github.com/iamkun/dayjs/tree/dev/src/locale)
-
-export const DateSelectorWithCalendarLocalizedStory = () => {
-  const [date, setDate] = useState('');
-  return (
-    <div style={{ paddingBottom: '120px' }}>
-      <DateSelector
-        value={date}
-        className="mt24"
-        yearBoundaries={{ min: 2020, max: 2022 }}
-        onChange={(date) => {
-          setDate(date);
-        }}
-        displayCalendar={true}
-        placeholders={{
-          day: 'Tag',
-          month: 'Monat',
-          year: 'Jahr',
-        }}
-        dayjsLocale={de}
-        firstDayOfWeek={1}
-      />
-    </div>
-  );
-};
-
-<DateSelectorWithCalendarLocalizedStory />

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

@@ -1,108 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import Input from '.';
-
-<Meta title="JSX/Inputs/Input" />
-
-## Input
-
-The default input component is used to gather informations from the user.
-
-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>
-  <>
-    <h1 className="p-h1">Without placeholder</h1>
-    <h4 className="p-h4 mt24">Empty</h4>
-    <Input className="wmx5 mt8" />
-    <h4 className="p-h4 mt24">Filled</h4>
-    <Input className="wmx5 mt8" value="Lorem ipsum" />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Input className="wmx5 mt8" value="Lorem ipsum" disabled={true} />
-    <h4 className="p-h4 mt24">Error</h4>
-    <Input
-      className="wmx5 mt8"
-      value="Lorem ipsum"
-      error="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    />
-    <h1 className="p-h1 mt32">With placeholder</h1>
-    <h4 className="p-h4 mt24">Empty</h4>
-    <Input className="wmx5 mt8" placeholder="Email" />
-    <h4 className="p-h4 mt24">Filled</h4>
-    <Input
-      className="wmx5 mt8"
-      value="jane.doe@feather-insurance.com"
-      placeholder="Email"
-    />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Input className="wmx5 mt8" placeholder="Email" disabled />
-    <h4 className="p-h4 mt24">Error</h4>
-    <Input
-      className="wmx5 mt8"
-      value="jane.doe@feather-insurance.com"
-      placeholder="Email"
-      error="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    />
-    <h1 className="p-h1 mt32">With prefix</h1>
-    <h4 className="p-h4 mt24">Empty</h4>
-    <Input className="wmx5 mt8" prefix="€" />
-    <h4 className="p-h4 mt24">Filled</h4>
-    <Input className="wmx5 mt8" value="100" prefix="€" />
-    <h4 className="p-h4 mt24">Empty with placeholder</h4>
-    <Input className="wmx5 mt8" placeholder="amount" prefix="€" />
-    <h4 className="p-h4 mt24">Filled with placeholder</h4>
-    <Input className="wmx5 mt8" placeholder="amount" value="100" prefix="€" />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Input className="wmx5 mt8" placeholder="amount" disabled prefix="€" />
-    <h4 className="p-h4 mt24">Error</h4>
-    <Input
-      className="wmx5 mt8"
-      placeholder="amount"
-      value="100"
-      prefix="€"
-      error="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac hendrerit justo. Nunc nibh ex, vulputate ac leo id, feugiat rhoncus purus."
-    />
-    <h1 className="p-h1 mt32">With label</h1>
-    <h4 className="p-h4 mt24">Empty</h4>
-    <Input className="wmx5 mt8" label="Email" />
-    <h4 className="p-h4 mt24">With placeholder</h4>
-    <Input
-      className="wmx5 mt8"
-      label="Email"
-      placeholder="email@feather-insurance.com"
-    />
-    <h4 className="p-h4 mt24">Filled</h4>
-    <Input
-      className="wmx5 mt8"
-      value="email@feather-insurance.com"
-      label="Email"
-      placeholder="email@feather-insurance.com"
-    />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Input
-      className="wmx5 mt8"
-      label="Email"
-      placeholder="email@feather-insurance.com"
-      disabled
-    />
-    <h4 className="p-h4 mt24">Error</h4>
-    <Input
-      className="wmx5 mt8"
-      label="Email"
-      value="invalid.email@feather-insurance.com"
-      placeholder="email@feather-insurance.com"
-      error="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-    />
-    <h4 className="p-h4 mt24">With prefix</h4>
-    <Input className="wmx5 mt8" label="Amount" value="100" prefix="€" />
-    <h4 className="p-h4 mt24">With label hidden</h4>
-    <Input
-      className="wmx5 mt8"
-      label="Amount"
-      value="100"
-      prefix="€"
-      hideLabel
-      onChange={() => {}}
-    />
-  </>
-</Preview>

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

@@ -1,187 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import MultiDropzone from '.';
-
-<Meta title="JSX/MultiDropzone" component={MultiDropzone} />
-
-# MultiDropzone
-
-MultiDropzone component allows upload of multiple documents / files.
-
-## Examples
-
-### Idle state
-
-<Preview>
-  <MultiDropzone
-    uploadedFiles={[]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-  />
-</Preview>
-
-### Uploading state
-
-<Preview>
-  <MultiDropzone
-    uploadedFiles={[
-      {
-        id: '123',
-        type: 'pdf',
-        progress: '72',
-        name: 'test_file_name.pdf',
-        token: 'abc',
-        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
-      },
-      {
-        id: '124',
-        type: 'pdf',
-        progress: '72',
-        name: 'test_file_name.pdf',
-        token: 'abc',
-        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
-        showLoadingSpinner: true,
-        showProgressBar: false,
-      },
-      {
-        id: '125',
-        type: 'pdf',
-        progress: '72',
-        name: 'test_file_name.pdf',
-        token: 'abc',
-        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
-        showLoadingSpinner: true,
-      },
-      {
-        id: '456',
-        type: 'pdf',
-        progress: '100',
-        name: 'test_file_name2.pdf',
-        token: 'def',
-        previewUrl: 'http://getpopsure.com/test_file_name2.pdf',
-      },
-    ]}
-    onFileSelect={() => {}}
-    uploading={true}
-    onRemoveFile={() => {}}
-  />
-</Preview>
-
-### Uploaded state
-
-<Preview>
-  <MultiDropzone
-    uploadedFiles={[
-      {
-        id: '123',
-        type: 'pdf',
-        progress: '100',
-        name: 'test_file_name.pdf',
-        token: 'abc',
-        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
-      },
-    ]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-  />
-</Preview>
-
-### Condensed view
-
-<Preview>
-  <MultiDropzone
-    uploadedFiles={[
-      {
-        id: '123',
-        type: 'pdf',
-        progress: '100',
-        name: 'test_file_name.pdf',
-        token: 'abc',
-        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
-      },
-    ]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-    isCondensed
-  />
-</Preview>
-
-### Error state
-
-<Preview>
-  <MultiDropzone
-    uploadedFiles={[
-      {
-        id: '123',
-        type: 'pdf',
-        progress: '0',
-        name: 'test_file_name.pdf',
-        token: 'abc',
-        previewUrl: 'http://getpopsure.com/test_file_name.pdf',
-        error: 'File is too big!',
-      },
-    ]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-  />
-</Preview>
-
-### Accepting only images
-
-<Preview>
-  <MultiDropzone
-    accept="image"
-    isCondensed
-    uploadedFiles={[]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-  />
-</Preview>
-
-### Accepting only documents
-
-<Preview>
-  <MultiDropzone
-    accept="document"
-    isCondensed
-    uploadedFiles={[]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-  />
-</Preview>
-
-### Limiting file size to 2MB
-
-<Preview>
-  <MultiDropzone
-    isCondensed
-    uploadedFiles={[]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-    maxSize={2096000}
-  />
-</Preview>
-
-### i18n support
-
-<Preview>
-  <MultiDropzone
-    uploadedFiles={[]}
-    onFileSelect={() => {}}
-    uploading={false}
-    onRemoveFile={() => {}}
-    textOverrides={{
-      instructionsText: 'Datei auswählen oder per Drag & Drop platzieren',
-      supportsTextShort: 'Unterstützt werden',
-      currentlyUploadingText:
-        'Bitte warten während die Datei hochgeladen wird...'
-    }}
-  />
-</Preview>