@popsure/dirty-swan 0.33.3 → 0.33.5

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/modal/index.stories.mdx

@@ -1,313 +0,0 @@
-import { useState } from 'react';
-
-import { Meta } from '@storybook/addon-docs/blocks';
-
-import { BottomModal, RegularModal, BottomOrRegularModal } from '.';
-
-<Meta title="JSX/Modals" />
-
-# Modals
-
-Modals are dialog overlays that prevent the user from interacting with the rest of the website until an action is taken or the dialog is dismissed. Modals are purposefully disruptive and should be used thoughtfully and sparingly.
-
-<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%3D283%253A1"
-    allowFullScreen
-  ></iframe>
-</Preview>
-
-| attribute   | unit                  | description                                                                            | default value | required |
-| ----------- | --------------------- | -------------------------------------------------------------------------------------- | ------------- | -------- |
-| title       | string                | The title that needs to be displayed on the modal                                      | n/a           | true     |
-| isOpen      | boolean               | When set to `true`, the modal is displayed. When set to `false` the modal gets removed | n/a           | true     |
-| onClose     | `function () => void` | Callback when the user close the modal                                                 | n/a           | true     |
-| children    | React.jsx             | The content that gets displayed on the modal                                           | n/a           | true     |
-| className   | string                | Any additional className                                                               | n/a           | false    |
-| dismissible | boolean               | When set to `false` prevents the user from closing the modal                           | true          | false    |
-
-export const RegularModalStory = () => {
-  const [display, setDisplay] = useState(false);
-  const toggleOpen = () => setDisplay(!display);
-  return (
-    <>
-      <button
-        className="p-btn--primary wmn2"
-        onClick={toggleOpen}
-      >
-        Regular modal
-      </button>
-      <RegularModal
-        title="Regular modal title"
-        isOpen={display}
-        onClose={toggleOpen}
-      >
-        <div style={{ padding: '0 24px 24px 24px' }}>
-          <p className="p-p">
-            This is a regular modal that is mostly meant to be used on desktop.
-            Need to use it on mobile? Check my friend BottomModal instead! Not
-            sure? Just use BottomOrRegularModal <br /> Do you like this modal?
-            Tell us by answering this short survey!
-          </p>
-          <div className="p-label-container wmx4">
-            <input id="bordered-1" className="p-radio" type="radio" />
-            <label htmlFor="bordered-1" className="p-label p-label--bordered">
-              Yes
-            </label>
-            <input id="bordered-2" className="p-radio" type="radio" />
-            <label
-              htmlFor="bordered-2"
-              className="p-label p-label--bordered mt16"
-            >
-              No
-            </label>
-          </div>
-          <button
-            className="p-btn--primary mt24 wmn3"
-            onClick={() => setDisplay(false)}
-          >
-            Continue
-          </button>
-        </div>
-      </RegularModal>
-    </>
-  );
-};
-
-export const BottomModalStory = () => {
-  const [display, setDisplay] = useState(false);
-  return (
-    <>
-      <button
-        className="p-btn--primary wmn2 d-block"
-        onClick={() => {
-          setDisplay(!display);
-        }}
-      >
-        Bottom modal
-      </button>
-      <BottomModal
-        title="Bottom modal title"
-        isOpen={display}
-        onClose={() => {
-          setDisplay(false);
-        }}
-      >
-        <div style={{ padding: '0 16px 16px 16px' }}>
-          <p className="p-p">
-            This is a bottom modal that is mostly meant to be used on mobile, do
-            you like this modal? Tell us by answering this short survey!
-          </p>
-          <div className="p-label-container wmx4">
-            <input id="bordered-1" className="p-radio" type="radio" />
-            <label htmlFor="bordered-1" className="p-label p-label--bordered">
-              Yes
-            </label>
-            <input id="bordered-2" className="p-radio" type="radio" />
-            <label
-              htmlFor="bordered-2"
-              className="p-label p-label--bordered mt16"
-            >
-              No
-            </label>
-          </div>
-          <button
-            className="p-btn--primary mt24 wmn3"
-            onClick={() => setDisplay(false)}
-          >
-            Continue
-          </button>
-        </div>
-      </BottomModal>
-    </>
-  );
-};
-
-export const NonDismissibleModal = () => {
-  const [display, setDisplay] = useState(false);
-  return (
-    <>
-      <button
-        className="p-btn--primary wmn2"
-        onClick={() => {
-          setDisplay(!display);
-        }}
-      >
-        Open modal
-      </button>
-      <RegularModal
-        title="Non-dismissible modal title"
-        isOpen={display}
-        onClose={() => {
-          setDisplay(false);
-        }}
-        dismissible={false}
-      >
-        <div style={{ padding: '0 24px 24px 24px' }}>
-          <p className="p-p">
-            This modal requires clear user interaction to dismiss it. The close
-            button is hidden, and it cannot be closed using the keyboard nor
-            clicking outside.
-          </p>
-          <button
-            className="p-btn--primary bg-red-500 mt24 wmn3"
-            onClick={() => setDisplay(false)}
-          >
-            Reject
-          </button>
-          <button
-            className="p-btn--primary mt24 wmn3 ml16"
-            onClick={() => setDisplay(false)}
-          >
-            Accept
-          </button>
-        </div>
-      </RegularModal>
-    </>
-  );
-};
-
-## Regular modal
-
-Regular modals are primary meant to be used on Desktop or Tablet environment. The modal will appear in the middle of the screen and the user will be able to dismiss them using the top left "X" icon.
-
-If you want to use it for Mobile only, you should check [Bottom modal](##Bottom-modal) instead.
-
-Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](##Bottom-or-Regular-modal).
-
-<RegularModalStory />
-
-```typescript
-import React, { useState } from 'react';
-import { BottomModal } from '@popsure/dirty-swan';
-
-export default () => {
-  const [display, setDisplay] = useState(false);
-
-  return (
-    <>
-      <button
-        className="p-btn--primary wmn2 d-block"
-        onClick={() => {
-          setDisplay(!display);
-        }}
-      >
-        Bottom modal
-      </button>
-      <BottomModal
-        title="Bottom modal title"
-        isOpen={display}
-        onClose={() => {
-          setDisplay(false);
-        }}
-      >
-        <div style={{ padding: '0 16px 16px 16px' }}>
-          <p className="p-p">
-            This is a bottom modal that is mostly meant to be used on mobile, do
-            you like this modal? Tell us by answering this short survey!
-          </p>
-          <div className="p-label-container wmx4">
-            <input id="bordered-1" className="p-radio" type="radio" />
-            <label htmlFor="bordered-1" className="p-label p-label--bordered">
-              Yes
-            </label>
-            <input id="bordered-2" className="p-radio" type="radio" />
-            <label
-              htmlFor="bordered-2"
-              className="p-label p-label--bordered mt16"
-            >
-              No
-            </label>
-          </div>
-          <button
-            className="p-btn--primary mt24 wmn3"
-            onClick={() => setDisplay(false)}
-          >
-            Continue
-          </button>
-        </div>
-      </BottomModal>
-    </>
-  );
-};
-```
-
-## Bottom modal
-
-Regular modals are primary meant to be used on Mobile environment. The modal will appear from the bottom of the screen and the user will be able to dismiss them using the top left "X" icon.
-
-If you want to use it for Desktop only, you should check [Regular modal](##Regular-modal) instead.
-
-Want to use either Regular Modal or Bottom Modal based on the screen width? You can use [Bottom or Regular modal](##Bottom-or-Regular-modal).
-
-<BottomModalStory />
-
-```typescript
-import React, { useState } from 'react';
-import { BottomModal } from '@popsure/dirty-swan';
-
-export default () => {
-  const [display, setDisplay] = useState(false);
-
-  return (
-    <>
-      <button
-        className="p-btn--primary wmn2 d-block"
-        onClick={() => {
-          setDisplay(!display);
-        }}
-      >
-        Bottom modal
-      </button>
-      <BottomModal
-        title="Bottom modal title"
-        isOpen={display}
-        onClose={() => {
-          setDisplay(false);
-        }}
-      >
-        <div style={{ padding: '0 16px 16px 16px' }}>
-          <p className="p-p">
-            This is a bottom modal that is mostly meant to be used on mobile, do
-            you like this modal? Tell us by answering this short survey!
-          </p>
-          <div className="p-label-container wmx4">
-            <input id="bordered-1" className="p-radio" type="radio" />
-            <label htmlFor="bordered-1" className="p-label p-label--bordered">
-              Yes
-            </label>
-            <input id="bordered-2" className="p-radio" type="radio" />
-            <label
-              htmlFor="bordered-2"
-              className="p-label p-label--bordered mt16"
-            >
-              No
-            </label>
-          </div>
-          <button
-            className="p-btn--primary mt24 wmn3"
-            onClick={() => setDisplay(false)}
-          >
-            Continue
-          </button>
-        </div>
-      </BottomModal>
-    </>
-  );
-};
-```
-
-## Bottom or Regular modal
-
-Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.
-
-## Non-dismissible modal
-
-Setting the `dismissible` prop to false will hide the close button and prevent the user from closing it using the escape key or clicking outside.
-This prop can be useful if we want the user to explicitly interact with the modal options.
-
-**Warning:** a modal with the `dismissible` prop can only be closed by changing the `isOpen` prop to `false`.
-
-<NonDismissibleModal />

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>