@popsure/dirty-swan 0.26.10 → 0.26.13

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

@@ -0,0 +1,91 @@
+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: '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>
+
+### 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>

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

@@ -0,0 +1,99 @@
+import React, { useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
+import classnames from 'classnames';
+
+import styles from './style.module.scss';
+import icons from './icons/index'; // TODO: inline all of the svgs
+import UploadFileCell from './UploadFileCell';
+
+export type UploadStatus = 'UPLOADING' | 'COMPLETE' | 'ERROR';
+
+export type FileType =
+  | 'heic'
+  | 'bmp'
+  | 'jpeg'
+  | 'jpg'
+  | 'png'
+  | 'doc'
+  | 'docx'
+  | 'pdf';
+
+const getUploadStatus = (progress: number, error?: string): UploadStatus => {
+  if (error) {
+    return 'ERROR';
+  }
+
+  if (progress < 100) {
+    return 'UPLOADING';
+  }
+
+  return 'COMPLETE';
+};
+
+export interface UploadedFile {
+  id: string;
+  name: string;
+  type: FileType | string;
+  previewUrl?: string;
+  progress: number;
+  error?: string;
+}
+
+interface Props {
+  onFileSelect: (file: File) => void;
+  uploadedFiles: UploadedFile[];
+  uploading: boolean;
+  onRemoveFile: (id: string) => void;
+}
+
+export default ({
+  uploadedFiles,
+  onFileSelect,
+  uploading,
+  onRemoveFile,
+}: Props) => {
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      onFileSelect(acceptedFiles[0]);
+    },
+    [onFileSelect]
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
+
+  return (
+    <div className={`w100 ${styles.container}`}>
+      <div
+        className={classnames(`w100 ta-center ${styles['upload-container']}`, {
+          [styles['upload-container-disabled']]: uploading,
+        })}
+        {...getRootProps()}
+      >
+        <input {...getInputProps()} />
+        <img src={icons.uploadIcon} alt="" />
+        <div className="p-h4 mt8">
+          {uploading
+            ? 'Please wait while uploading file...'
+            : 'Choose file or drag & drop'}
+        </div>
+        <div className="p-p--small tc-grey-500">Supports JPEG, PNG, PDF</div>
+      </div>
+      {uploadedFiles.length > 0 && (
+        <div className={`w100 mt16`}>
+          {uploadedFiles.map((file) => {
+            const uploadStatus = getUploadStatus(file.progress, file.error);
+            return (
+              <UploadFileCell
+                uploadStatus={uploadStatus}
+                file={file}
+                key={file.id}
+                onRemoveFile={onRemoveFile}
+                uploading={uploading}
+              />
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,32 @@
+@use "../../scss/public/grid" as *;
+
+.container {
+  background-color: white;
+  padding: 24px;
+  box-shadow: 0px 2px 3px rgba(38, 38, 46, 0.04);
+  border-radius: 8px;
+
+  @include p-size-mobile {
+    padding: 16px;
+  }
+}
+
+.upload-container {
+  border: 1px dashed var(--ds-primary-500);
+  padding: 32px 0;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.upload-container:focus {
+  outline: none;
+}
+
+.upload-container:hover {
+  background-color: var(--ds-primary-100);
+  transition: 0.5s ease;
+}
+
+.upload-container-disabled {
+  pointer-events: none;
+}

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

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import SegmentedControl from '.';
+
+<Meta title="JSX/SegmentedControl" />
+
+# SegmentedControl
+
+A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.
+
+| attribute     | unit                                              | description                                          | default value | required |
+| ------------- | ------------------------------------------------- | ---------------------------------------------------- | ------------- | -------- |
+| values        | string[] OR { title: string; subtitle: string;}[] | Array containing the text that needs to be displayed | n/a           | true     |
+| selectedIndex | number                                            | The currently selected index                         | n/a           | true     |
+| onChange      | (newSelectedIndex: number) => void;               | Callback when the select index changes               | n/a           | true     |
+
+export const SegmentedControlStory = () => {
+  const [selectedFirstIndex, setSelectedFirstIndex] = useState(0);
+  const [selectedSecondIndex, setSelectedSecondIndex] = useState(0);
+  return (
+    <Preview>
+      <>
+        <h1 className="p-h1">Single lined SegmentedControl</h1>
+        <SegmentedControl
+          className="mt8"
+          values={['Earth', 'Sun', 'Moon']}
+          selectedIndex={selectedFirstIndex}
+          onChange={(newIndex) => setSelectedFirstIndex(newIndex)}
+        />
+        <h1 className="p-h1 mt24">SegmentedControl with subtitle</h1>
+        <SegmentedControl
+          className="mt8"
+          values={[
+            { title: 'Basic', subtitle: '€288,65' },
+            { title: 'Premium', subtitle: '€288,65' },
+          ]}
+          selectedIndex={selectedSecondIndex}
+          onChange={(newIndex) => setSelectedSecondIndex(newIndex)}
+        />
+      </>
+    </Preview>
+  );
+};
+
+<SegmentedControlStory />

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

@@ -0,0 +1,105 @@
+import { useEffect, useRef, useState } from 'react';
+import styles from './style.module.scss';
+
+interface TitleWithSubtitle {
+  title: string;
+  subtitle: string;
+}
+
+const SegmentedControl = ({
+  className = '',
+  values,
+  selectedIndex,
+  onChange,
+}: {
+  className?: string;
+  values: Array<TitleWithSubtitle> | Array<string>;
+  selectedIndex: number;
+  onChange: (selectedIndex: number) => void;
+}) => {
+  const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =
+    useState<{
+      left: number;
+      width: number;
+    }>({ left: 0, width: 0 });
+  const chipContainer = useRef<HTMLDivElement | null>(null);
+  const height = typeof values[0] === 'string' ? 48 : 66;
+
+  useEffect(() => {
+    const selectedChip = chipContainer.current?.children[
+      selectedIndex
+    ] as HTMLDivElement;
+    const left = selectedChip.offsetLeft;
+    const width = selectedChip.offsetWidth;
+    setSelectedChipBackgroundWidthLeft({ left, width });
+  }, [selectedIndex]);
+
+  return (
+    <div className={className}>
+      <div className={styles['background-container']}>
+        <div
+          ref={chipContainer}
+          className={styles['chip-container']}
+          style={{ height: `${height}px` }}
+        >
+          {values.map((value: TitleWithSubtitle | string, index: number) => {
+            return (
+              <div
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    onChange(index);
+                  }
+                }}
+                onClick={() => {
+                  onChange(index);
+                }}
+                className={styles.chip}
+              >
+                {typeof value === 'string' ? (
+                  <div
+                    className={`p-h4 ta-center ${
+                      selectedIndex === index ? '' : 'tc-primary-500'
+                    }`}
+                  >
+                    {value}
+                  </div>
+                ) : (
+                  <>
+                    <div
+                      className={`p-h4 ta-center ${
+                        selectedIndex === index ? '' : 'tc-primary-500'
+                      }`}
+                    >
+                      {value.title}
+                    </div>
+                    <div
+                      className={`p-p--small ta-center ${
+                        selectedIndex === index
+                          ? 'tc-grey-500'
+                          : 'tc-primary-500'
+                      }`}
+                    >
+                      {value.subtitle}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+        <div
+          className={styles['select-chip-background']}
+          style={{
+            width: `${selectedChipBackgroundWidthLeft.width}px`,
+            height: `${height - 16}px`,
+            left: `${selectedChipBackgroundWidthLeft.left}px`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SegmentedControl;

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

@@ -0,0 +1,36 @@
+.background-container {
+  position: relative;
+  display: inline-block;
+
+  background-color: var(--ds-primary-100);
+  border-radius: 8px;
+
+  padding: 0 8px;
+}
+
+.chip-container {
+  display: flex;
+  align-items: center;
+}
+
+.chip {
+  cursor: pointer;
+
+  z-index: 2;
+
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.select-chip-background {
+  position: absolute;
+
+  background-color: white;
+  border-radius: 8px;
+
+  top: 8px;
+
+  z-index: 1;
+
+  transition: width 0.3s, left 0.3s;
+}

package/src/lib/components/signaturePad/img/reset.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4V10H7" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M3.51 14.9999C4.15839 16.8403 5.38734 18.4201 7.01166 19.5013C8.63598 20.5825 10.5677 21.1065 12.5157 20.9944C14.4637 20.8823 16.3226 20.1401 17.8121 18.8797C19.3017 17.6193 20.3413 15.9089 20.7742 14.0063C21.2072 12.1037 21.0101 10.1119 20.2126 8.33105C19.4152 6.55019 18.0605 5.07674 16.3528 4.13271C14.6451 3.18868 12.6769 2.82521 10.7447 3.09707C8.81245 3.36892 7.02091 4.26137 5.64 5.63995L1 9.99995" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>

package/src/lib/components/signaturePad/img/sign.svg

@@ -0,0 +1,3 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7 3.70001C13.3 4.00001 13.5 5.10001 14.1 6.20001C14.7 7.30001 14.9 9.20001 14.6 10.5C14.1 12.3 15.3 14.4 19.3 19.7C22.2 23.4 25.6 28 26.9 29.8L29.2 33L23 39.7C19.7 43.4 17.1 46.9 17.4 47.6C17.7 48.3 17.2 49.4 16.4 50C14.8 51.4 14.5 54 16.1 54C17.5 54 23.6 49.5 29 44.4L33.5 40.1L41 51.3C49.2 63.6 53.7 69 55.8 69C56.6 69 56.8 68.5 56.4 67.7C56 67.1 57.8 68.9 60.5 71.8C63.1 74.7 65.5 76.9 65.7 76.6C65.9 76.4 65.2 74.4 64.1 72.1C62.9 69.9 62 67.2 62 66.2C62 63.3 54.5 47.6 48.9 39C46.2 34.8 44 31 44 30.6C44 30.2 46.2 27.3 48.9 24.2C54.3 17.9 59 11.2 59 9.80001C59 9.30001 57.7 9.10001 56 9.50001C54.2 9.90001 50.5 12.7 46.4 17.1C42.7 20.9 39.4 24 39.1 24C38.8 24 36.3 20.7 33.6 16.8C30.9 12.9 27.9 9.50001 27 9.30001C26 9.00001 24.3 7.60001 23.2 6.10001C21.7 4.10001 20.3 3.30001 17.7 3.20001C15.8 3.10001 14 3.30001 13.7 3.70001Z" fill="#8E8CEE"/>
+</svg>

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

@@ -0,0 +1,17 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import Signaturepad from '.';
+
+<Meta title="JSX/Signaturepad" component={Signaturepad} />
+
+# Signature pad
+
+Signature pad are user interface elements which allow user sign any legal document.
+
+## Examples
+
+### Default example
+
+<Preview>
+  <Signaturepad onChange={() => {}} />
+</Preview>

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

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+
+import SignaturePad from 'signature_pad';
+
+import styles from './style.module.scss';
+
+import sign from './img/sign.svg';
+import reset from './img/reset.svg';
+
+interface Props {
+  onChange: (base64signature: string) => void;
+}
+
+interface State {
+  hasContent: boolean;
+}
+
+class Signature extends Component<Props, State> {
+  private canvasRef: React.RefObject<HTMLCanvasElement>;
+  private canvas: any;
+  private signaturePad: any;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasContent: false,
+    };
+    this.canvasRef = React.createRef();
+    this.notifyOnChange = this.notifyOnChange.bind(this);
+    this.resizeCanvas = this.resizeCanvas.bind(this);
+    this.clear = this.clear.bind(this);
+  }
+
+  public componentDidMount() {
+    this.canvas = this.canvasRef.current;
+    this.signaturePad = new SignaturePad(this.canvas, {
+      onEnd: this.notifyOnChange,
+    });
+    this.resizeCanvas();
+  }
+
+  public render() {
+    const { hasContent } = this.state;
+
+    return (
+      <>
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `.${styles.reset}::before { 
+              -webkit-mask-image: url("${reset}");
+              mask-image: url("${reset}");
+           }`,
+          }}
+        />
+        <div className={styles.container}>
+          <canvas className={styles.canvas} ref={this.canvasRef} />
+          <div className={styles.separator} />
+          <div
+            className={styles.sign}
+            style={{
+              WebkitMaskImage: `url("${sign}")`,
+              maskImage: `url("${sign}")`,
+            }}
+          />
+          <button
+            className={styles.reset}
+            onClick={this.clear}
+            disabled={!hasContent}
+          >
+            Reset
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  private notifyOnChange() {
+    const { onChange } = this.props;
+    onChange(this.signaturePad.isEmpty() ? '' : this.signaturePad.toDataURL());
+    this.setState({ hasContent: !this.signaturePad.isEmpty() });
+  }
+
+  private resizeCanvas() {
+    const ratio = Math.max(window.devicePixelRatio || 1, 1);
+    this.canvas.width = this.canvas.offsetWidth * ratio;
+    this.canvas.height = this.canvas.offsetHeight * ratio;
+    this.canvas.getContext('2d').scale(ratio, ratio);
+  }
+
+  private clear() {
+    this.signaturePad.clear();
+    this.notifyOnChange();
+  }
+}
+
+export default Signature;

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

@@ -0,0 +1,90 @@
+.container {
+  position: relative;
+  background-color: var(--ds-grey-200);
+  border-radius: 8px;
+  height: 272px;
+}
+
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.separator {
+  position: absolute;
+
+  height: 2px;
+
+  right: 112px;
+  left: 72px;
+  bottom: 32px;
+
+  background-color: var(--ds-grey-300);
+
+  border-radius: 1px;
+}
+
+.reset {
+  display: flex;
+  position: absolute;
+
+  right: 16px;
+  bottom: 32px;
+
+  color: var(--ds-primary-500);
+  cursor: pointer;
+
+  border: none;
+  text-decoration: none;
+  font-size: 16px;
+  line-height: 24px;
+
+  background-color: transparent;
+
+  &:hover {
+    color: var(--ds-primary-700);
+  }
+
+  &:before {
+    content: '';
+
+    display: inline-block;
+
+    height: 24px;
+    width: 24px;
+
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: currentColor;
+
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-background-color: currentColor;
+
+    margin-right: 4px;
+  }
+
+  &[disabled] {
+    color: var(--ds-grey-500);
+  }
+}
+
+.sign {
+  position: absolute;
+
+  bottom: 32px;
+  left: 16px;
+
+  height: 24px;
+  width: 24px;
+
+  mask-size: 24px 24px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+
+  -webkit-mask-size: 24px 24px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+
+  background-color: var(--ds-grey-500);
+}

package/src/lib/index.tsx

@@ -0,0 +1,71 @@
+import DateSelector from './components/dateSelector';
+import Dropzone from './components/dropzone';
+import SignaturePad from './components/signaturePad';
+import AutocompleteAddress from './components/autocompleteAddress';
+import Input from './components/input';
+import MultiDropzone from './components/multiDropzone';
+import DownloadRing from './components/downloadRing';
+import DownloadButton from './components/downloadButton';
+import IbanInput from './components/input/iban';
+import CurrencyInput from './components/input/currency';
+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 Chip from './components/chip';
+import AutoSuggestInput from './components/input/autoSuggestInput';
+import {
+  ComparisonTable,
+  TableRating,
+  TableTrueFalse,
+  TableRowHeader,
+  TableInfoButton,
+  TableHeader,
+} from './components/comparisonTable';
+import SegmentedControl from './components/segmentedControl';
+
+export {
+  DateSelector,
+  Dropzone,
+  SignaturePad,
+  AutocompleteAddress,
+  Input,
+  MultiDropzone,
+  DownloadRing,
+  DownloadButton,
+  IbanInput,
+  BottomModal,
+  RegularModal,
+  BottomOrRegularModal,
+  CardWithTopLeftIcon,
+  CardWithLeftIcon,
+  CardWithTopIcon,
+  InfoCard,
+  CardButton,
+  Button,
+  CurrencyInput,
+  AutoSuggestMultiSelect,
+  Chip,
+  AutoSuggestInput,
+  ComparisonTable,
+  TableRating,
+  TableTrueFalse,
+  TableRowHeader,
+  TableInfoButton,
+  SegmentedControl,
+};
+
+export type { TableHeader };
+
+export type { DownloadRingDownloadStatus } from './models/downloadRing';
+export type { DownloadStatus } from './models/download'