@popsure/dirty-swan 0.27.13 → 0.27.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/index.d.ts +2 -2
  2. package/dist/index.js +5462 -5523
  3. package/dist/index.js.map +1 -1
  4. package/dist/lib/components/button/index.d.ts +1 -1
  5. package/dist/lib/components/comparisonTable/components/AccordionItem/AccordionItem.d.ts +11 -0
  6. package/dist/lib/components/comparisonTable/components/AccordionItem/index.d.ts +1 -0
  7. package/dist/lib/components/comparisonTable/components/Row/index.d.ts +1 -1
  8. package/dist/lib/components/comparisonTable/components/TableArrows/index.d.ts +4 -2
  9. package/dist/lib/components/comparisonTable/hooks/useComparisonTable.d.ts +14 -0
  10. package/dist/lib/components/comparisonTable/index.d.ts +10 -4
  11. package/dist/lib/components/input/index.d.ts +1 -1
  12. package/dist/lib/index.d.ts +1 -4
  13. package/package.json +2 -1
  14. package/src/App.tsx +0 -8
  15. package/src/index.tsx +1 -7
  16. package/src/lib/components/cards/cardWithTopIcon/index.stories.mdx +8 -8
  17. package/src/lib/components/cards/cardWithTopIcon/index.tsx +1 -5
  18. package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss +44 -0
  19. package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx +73 -0
  20. package/src/lib/components/comparisonTable/components/AccordionItem/index.tsx +1 -0
  21. package/src/lib/components/comparisonTable/components/Row/index.tsx +1 -3
  22. package/src/lib/components/comparisonTable/components/Row/style.module.scss +11 -2
  23. package/src/lib/components/comparisonTable/components/TableArrows/index.tsx +1 -3
  24. package/src/lib/components/comparisonTable/components/TableArrows/style.module.scss +1 -1
  25. package/src/lib/components/comparisonTable/hooks/useComparisonTable.ts +124 -0
  26. package/src/lib/components/comparisonTable/index.stories.mdx +226 -8
  27. package/src/lib/components/comparisonTable/index.tsx +172 -123
  28. package/src/lib/components/comparisonTable/style.module.scss +16 -6
  29. package/src/lib/components/dateSelector/datepicker.scss +2 -8
  30. package/src/lib/components/dateSelector/index.tsx +2 -0
  31. package/src/lib/index.tsx +0 -5
  32. package/dist/lib/components/comparisonTable/hooks/useActiveTableArrows.d.ts +0 -10
  33. package/dist/lib/components/downloadRing/icons/check-outside-circle.d.ts +0 -3
  34. package/dist/lib/components/downloadRing/icons/download-cloud.d.ts +0 -3
  35. package/dist/lib/components/downloadRing/index.d.ts +0 -8
  36. package/dist/lib/components/dropzone/images/error.d.ts +0 -3
  37. package/dist/lib/components/dropzone/images/file.d.ts +0 -3
  38. package/dist/lib/components/dropzone/images/upload-complete.d.ts +0 -3
  39. package/dist/lib/components/dropzone/images/upload.d.ts +0 -3
  40. package/dist/lib/components/dropzone/index.d.ts +0 -11
  41. package/dist/lib/models/downloadRing/index.d.ts +0 -1
  42. package/src/lib/components/comparisonTable/hooks/useActiveTableArrows.ts +0 -63
  43. package/src/lib/components/downloadRing/icons/check-outside-circle.tsx +0 -26
  44. package/src/lib/components/downloadRing/icons/download-cloud.tsx +0 -18
  45. package/src/lib/components/downloadRing/icons/style.module.scss +0 -7
  46. package/src/lib/components/downloadRing/index.stories.mdx +0 -35
  47. package/src/lib/components/downloadRing/index.tsx +0 -79
  48. package/src/lib/components/downloadRing/style.module.scss +0 -66
  49. package/src/lib/components/dropzone/images/error.tsx +0 -18
  50. package/src/lib/components/dropzone/images/file.tsx +0 -26
  51. package/src/lib/components/dropzone/images/style.module.scss +0 -7
  52. package/src/lib/components/dropzone/images/upload-complete.tsx +0 -24
  53. package/src/lib/components/dropzone/images/upload.tsx +0 -18
  54. package/src/lib/components/dropzone/index.stories.mdx +0 -44
  55. package/src/lib/components/dropzone/index.tsx +0 -152
  56. package/src/lib/components/dropzone/style.module.scss +0 -90
  57. package/src/lib/models/downloadRing/index.ts +0 -6
@@ -156,6 +156,8 @@ const DateSelector = ({
156
156
  } else {
157
157
  setDate(newValue);
158
158
  }
159
+
160
+ setOpenCalendar(false);
159
161
  };
160
162
 
161
163
  return (
package/src/lib/index.tsx CHANGED
@@ -1,10 +1,8 @@
1
1
  import DateSelector from './components/dateSelector';
2
- import Dropzone from './components/dropzone';
3
2
  import SignaturePad from './components/signaturePad';
4
3
  import AutocompleteAddress from './components/autocompleteAddress';
5
4
  import Input from './components/input';
6
5
  import MultiDropzone from './components/multiDropzone';
7
- import DownloadRing from './components/downloadRing';
8
6
  import DownloadButton from './components/downloadButton';
9
7
  import IbanInput from './components/input/iban';
10
8
  import CurrencyInput from './components/input/currency';
@@ -37,12 +35,10 @@ import Markdown from './components/markdown';
37
35
 
38
36
  export {
39
37
  DateSelector,
40
- Dropzone,
41
38
  SignaturePad,
42
39
  AutocompleteAddress,
43
40
  Input,
44
41
  MultiDropzone,
45
- DownloadRing,
46
42
  DownloadButton,
47
43
  IbanInput,
48
44
  BottomModal,
@@ -69,5 +65,4 @@ export {
69
65
 
70
66
  export type { TableHeader };
71
67
 
72
- export type { DownloadRingDownloadStatus } from './models/downloadRing';
73
68
  export type { DownloadStatus } from './models/download';
@@ -1,10 +0,0 @@
1
- import React from 'react';
2
- export interface ActiveTableArrows {
3
- left: boolean;
4
- right: boolean;
5
- }
6
- export declare const useActiveTableArrows: () => {
7
- activeArrows: ActiveTableArrows;
8
- contentContainerRef: React.Ref<HTMLDivElement>;
9
- contentWrapperRef: React.Ref<HTMLDivElement>;
10
- };
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: () => JSX.Element;
3
- export default _default;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: () => JSX.Element;
3
- export default _default;
@@ -1,8 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Status = 'INITIAL' | 'GENERATING' | 'DOWNLOADING' | 'COMPLETED' | 'FAILED';
3
- declare const _default: ({ progress, status, handleClick, }: {
4
- progress: number;
5
- status: Status;
6
- handleClick: () => void;
7
- }) => JSX.Element;
8
- export default _default;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: () => JSX.Element;
3
- export default _default;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: () => JSX.Element;
3
- export default _default;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: () => JSX.Element;
3
- export default _default;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: () => JSX.Element;
3
- export default _default;
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function truncateStringTail(aString: string, length: number): string;
3
- declare const _default: ({ className, uploading, progress, error, uploadedFileUrl, onSelectedFile, }: {
4
- className?: string | undefined;
5
- uploading: boolean;
6
- progress?: number | undefined;
7
- error?: string | undefined;
8
- uploadedFileUrl?: string | undefined;
9
- onSelectedFile: (file: File) => void;
10
- }) => JSX.Element;
11
- export default _default;
@@ -1 +0,0 @@
1
- export declare type DownloadRingDownloadStatus = 'INITIAL' | 'GENERATING' | 'DOWNLOADING' | 'COMPLETED' | 'FAILED';
@@ -1,63 +0,0 @@
1
- import React, { useEffect, useRef, useState } from 'react';
2
- import debounce from 'lodash.debounce';
3
-
4
- export interface ActiveTableArrows {
5
- left: boolean;
6
- right: boolean;
7
- }
8
-
9
- export const useActiveTableArrows = (): {
10
- activeArrows: ActiveTableArrows;
11
- contentContainerRef: React.Ref<HTMLDivElement>;
12
- contentWrapperRef: React.Ref<HTMLDivElement>;
13
- } => {
14
- const [activeArrows, setActiveArrows] = useState<ActiveTableArrows>({
15
- left: false,
16
- right: true,
17
- });
18
- const contentContainerRef = useRef<HTMLDivElement | null>(null);
19
- const contentWrapperRef = useRef<HTMLDivElement | null>(null);
20
-
21
- const handleTableScroll = (e: Event) => {
22
- const width = window.innerWidth;
23
-
24
- if (
25
- e.target === contentWrapperRef.current &&
26
- contentContainerRef.current &&
27
- contentContainerRef.current
28
- ) {
29
- const left =
30
- contentContainerRef.current.getBoundingClientRect().left * -1;
31
-
32
- setActiveArrows({
33
- left: left > 0,
34
- right:
35
- left + width <
36
- contentContainerRef.current.getBoundingClientRect().width,
37
- });
38
- }
39
- };
40
-
41
- const debouncedTableScroll = debounce(handleTableScroll, 150);
42
-
43
- useEffect(() => {
44
- contentWrapperRef.current?.addEventListener(
45
- 'scroll',
46
- debouncedTableScroll,
47
- {
48
- passive: true,
49
- }
50
- );
51
-
52
- return contentWrapperRef.current?.removeEventListener(
53
- 'scroll',
54
- handleTableScroll
55
- );
56
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
57
-
58
- return {
59
- activeArrows,
60
- contentContainerRef,
61
- contentWrapperRef,
62
- };
63
- };
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
-
3
- export default () => (
4
- <svg
5
- width="63"
6
- height="63"
7
- viewBox="0 0 63 63"
8
- fill="none"
9
- xmlns="http://www.w3.org/2000/svg"
10
- >
11
- <path
12
- d="M57.75 29.0849V31.4999C57.7468 37.1605 55.9138 42.6684 52.5245 47.2022C49.1352 51.7359 44.3711 55.0526 38.9428 56.6576C33.5145 58.2626 27.7128 58.0699 22.403 56.1082C17.0932 54.1465 12.5597 50.5209 9.47877 45.7722C6.39782 41.0235 4.93445 35.4061 5.3069 29.7577C5.67935 24.1094 7.86767 18.7327 11.5455 14.4297C15.2233 10.1267 20.1936 7.12777 25.715 5.88027C31.2364 4.63278 37.0132 5.20352 42.1838 7.50739"
13
- stroke="#90DF9B"
14
- strokeWidth="5"
15
- strokeLinecap="round"
16
- strokeLinejoin="round"
17
- />
18
- <path
19
- d="M57.75 10.5L31.5 36.7762L23.625 28.9012"
20
- stroke="#90DF9B"
21
- strokeWidth="5"
22
- strokeLinecap="round"
23
- strokeLinejoin="round"
24
- />
25
- </svg>
26
- );
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
-
3
- import styles from './style.module.scss';
4
-
5
- export default () => (
6
- <svg
7
- width="81"
8
- height="60"
9
- viewBox="0 0 81 60"
10
- fill="none"
11
- xmlns="http://www.w3.org/2000/svg"
12
- >
13
- <path
14
- className={styles['fill-primary-500']}
15
- d="M40.5003 0.52832C34.2609 0.52832 27.9875 2.90796 23.2303 7.66515C19.6924 11.203 17.5477 15.5917 16.6382 20.1682C7.40644 21.9591 0.40332 30.0216 0.40332 39.7537C0.40332 50.7951 9.41033 59.8022 20.4518 59.8022H51.4253C51.7718 59.8071 52.1159 59.7431 52.4374 59.6139C52.759 59.4846 53.0517 59.2928 53.2985 59.0495C53.5452 58.8062 53.7412 58.5163 53.8749 58.1965C54.0087 57.8768 54.0776 57.5337 54.0776 57.1872C54.0776 56.8406 54.0087 56.4975 53.8749 56.1778C53.7412 55.8581 53.5452 55.5682 53.2985 55.3249C53.0517 55.0816 52.759 54.8897 52.4374 54.7605C52.1159 54.6313 51.7718 54.5673 51.4253 54.5722H20.4518C12.237 54.5722 5.63336 47.9686 5.63336 39.7537C5.63336 31.9959 11.5333 25.6757 19.0898 24.9897C19.6825 24.9319 20.2376 24.6737 20.6636 24.2577C21.0895 23.8416 21.3608 23.2926 21.4325 22.7015C21.9136 18.5566 23.7477 14.5297 26.9349 11.3425C30.688 7.58956 35.5857 5.75836 40.5003 5.75836C45.415 5.75836 50.2818 7.58568 54.0385 11.3425C58.3797 15.6837 60.2168 21.5819 59.541 27.2233C59.4947 27.5909 59.5271 27.964 59.6359 28.3181C59.7447 28.6722 59.9274 28.9991 60.1721 29.2773C60.4168 29.5554 60.7177 29.7784 61.055 29.9315C61.3923 30.0845 61.7583 30.1642 62.1287 30.1652H63.1639C69.9698 30.1652 75.3673 35.5627 75.3673 42.3687C75.3673 49.1747 69.9698 54.5722 63.1639 54.5722H50.9604C50.6139 54.5673 50.2699 54.6313 49.9483 54.7605C49.6267 54.8897 49.334 55.0816 49.0873 55.3249C48.8405 55.5682 48.6445 55.8581 48.5108 56.1778C48.377 56.4975 48.3081 56.8406 48.3081 57.1872C48.3081 57.5337 48.377 57.8768 48.5108 58.1965C48.6445 58.5163 48.8405 58.8062 49.0873 59.0495C49.334 59.2928 49.6267 59.4846 49.9483 59.6139C50.2699 59.7431 50.6139 59.8071 50.9604 59.8022H63.1639C72.7768 59.8022 80.5973 51.9816 80.5973 42.3687C80.5973 33.2962 73.6081 25.9105 64.7438 25.0986C64.7847 18.7886 62.5435 12.4655 57.7431 7.66515C52.99 2.91184 46.7398 0.52832 40.5003 0.52832ZM40.5003 48.1024C39.6285 48.1024 39.1674 47.8218 38.7298 47.4214L29.1414 38.7047C28.0342 37.6771 28.0536 36.0095 28.9778 35C29.9022 33.9906 31.6684 33.9175 32.6825 34.8366L37.8853 39.5763V22.0877C37.8853 20.6435 39.0559 19.4727 40.5003 19.4727C41.9449 19.4727 43.1153 20.6435 43.1153 22.0877V39.5763L48.3182 34.8366C49.3324 33.9175 51.0451 34.0421 52.0228 35C53.053 36.0095 52.8643 37.7756 51.8593 38.7047L42.2709 47.4214C41.7528 47.8957 41.3722 48.1024 40.5003 48.1024Z"
16
- />
17
- </svg>
18
- );
@@ -1,7 +0,0 @@
1
- .stroke-primary-500 {
2
- stroke: var(--ds-primary-500);
3
- }
4
-
5
- .fill-primary-500 {
6
- fill: var(--ds-primary-500);
7
- }
@@ -1,35 +0,0 @@
1
- import { Meta, Preview } from '@storybook/addon-docs/blocks';
2
-
3
- import DownloadRing from '.';
4
-
5
- <Meta title="JSX/DownloadRing" component={DownloadRing} />
6
-
7
- # DownloadRing
8
-
9
- DownloadRing component displays progress and status of downloading files.
10
-
11
- ## Examples
12
-
13
- ### Idle state
14
-
15
- <Preview>
16
- <DownloadRing progress={0} status="INITIAL" handleClick={() => {}} />
17
- </Preview>
18
-
19
- ### Downloading state
20
-
21
- <Preview>
22
- <DownloadRing progress={74} status="DOWNLOADING" handleClick={() => {}} />
23
- </Preview>
24
-
25
- ### Download complete state
26
-
27
- <Preview>
28
- <DownloadRing progress={100} status="COMPLETED" handleClick={() => {}} />
29
- </Preview>
30
-
31
- ### Error state
32
-
33
- <Preview>
34
- <DownloadRing progress={100} status="FAILED" handleClick={() => {}} />
35
- </Preview>
@@ -1,79 +0,0 @@
1
- import React from 'react';
2
- import classnames from 'classnames';
3
-
4
- import CheckOutsideCircleIcon from './icons/check-outside-circle';
5
- import DownloadCloudIcon from './icons/download-cloud';
6
-
7
- import styles from './style.module.scss';
8
-
9
- const RADIUS = 140;
10
- const STROKE = 4;
11
-
12
- type Status = 'INITIAL' | 'GENERATING' | 'DOWNLOADING' | 'COMPLETED' | 'FAILED';
13
-
14
- const mappingStatus: { [k in Status]: string } = {
15
- INITIAL: 'Click to download documents',
16
- GENERATING: 'Generating documents...',
17
- DOWNLOADING: 'Downloading documents...',
18
- COMPLETED: 'Done!',
19
- FAILED: 'Download failed. Click again to retry.',
20
- };
21
-
22
- export default ({
23
- progress,
24
- status,
25
- handleClick,
26
- }: {
27
- progress: number;
28
- status: Status;
29
- handleClick: () => void;
30
- }) => {
31
- const normalizedRadius = RADIUS - STROKE * 2;
32
- const circumference = normalizedRadius * 2 * Math.PI;
33
- const strokeDashoffset = circumference - (progress / 100) * circumference;
34
-
35
- return (
36
- <div className={`w100 ${styles.container}`}>
37
- <button
38
- className={styles.button}
39
- type="button"
40
- onClick={handleClick}
41
- data-cy="download-documents-button"
42
- >
43
- <svg height={RADIUS * 2} width={RADIUS * 2}>
44
- <circle
45
- className={classnames(`${styles['inner-circle']}`, {
46
- [styles['inner-circle-hover']]: progress === 0,
47
- })}
48
- strokeWidth={STROKE}
49
- strokeDasharray={circumference + ' ' + circumference}
50
- r={normalizedRadius}
51
- cx={RADIUS}
52
- cy={RADIUS}
53
- />
54
- <circle
55
- className={
56
- status === 'COMPLETED'
57
- ? styles['overlay-circle-completed']
58
- : styles['overlay-circle']
59
- }
60
- strokeWidth={STROKE}
61
- strokeDasharray={circumference + ' ' + circumference}
62
- style={{ strokeDashoffset }}
63
- r={normalizedRadius}
64
- cx={RADIUS}
65
- cy={RADIUS}
66
- />
67
- </svg>
68
- <div className={`ws2 ${styles['text-container']}`}>
69
- {status === 'COMPLETED' ? (
70
- <CheckOutsideCircleIcon />
71
- ) : (
72
- <DownloadCloudIcon />
73
- )}
74
- <div className="p-p mt8">{mappingStatus[status]}</div>
75
- </div>
76
- </button>
77
- </div>
78
- );
79
- };
@@ -1,66 +0,0 @@
1
- @use "../../scss/public/grid" as *;
2
-
3
- .container {
4
- position: relative;
5
- display: flex;
6
- justify-content: center;
7
- }
8
-
9
- .button {
10
- background-color: transparent;
11
- border: none;
12
- cursor: pointer;
13
- }
14
-
15
- .button:hover {
16
- .inner-circle-hover {
17
- animation: borderBlink 1.3s ease-in-out infinite;
18
- }
19
- }
20
-
21
- .button:focus {
22
- outline: none;
23
- }
24
-
25
- circle {
26
- transition: stroke-dashoffset 0.35s;
27
- transform: rotate(-90deg);
28
- transform-origin: 50% 50%;
29
-
30
- position: absolute;
31
- }
32
-
33
- .overlay-circle {
34
- z-index: 1;
35
- stroke: var(--ds-primary-500);
36
- fill: transparent;
37
- }
38
-
39
- .overlay-circle-completed {
40
- z-index: 1;
41
- stroke: #90df9b;
42
- fill: rgba(144, 223, 155, 0.1);
43
- }
44
-
45
- .inner-circle {
46
- z-index: 0;
47
- stroke: var(--ds-primary-100);
48
- fill: transparent;
49
- }
50
-
51
- .text-container {
52
- position: absolute;
53
- top: 50%;
54
- left: 50%;
55
- transform: translate(-50%, -50%);
56
- }
57
-
58
- @keyframes borderBlink {
59
- from,
60
- to {
61
- stroke: var(--ds-primary-100);
62
- }
63
- 50% {
64
- stroke: var(--ds-primary-500);
65
- }
66
- }
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
-
3
- export default () => (
4
- <svg
5
- width="90"
6
- height="66"
7
- viewBox="0 0 90 66"
8
- fill="none"
9
- xmlns="http://www.w3.org/2000/svg"
10
- >
11
- <path
12
- fill-rule="evenodd"
13
- clip-rule="evenodd"
14
- d="M45 0C37.9976 0 30.9572 2.64966 25.6182 7.94665C21.6477 11.8859 19.2407 16.7726 18.2201 21.8685C7.85944 23.8626 0 32.8399 0 43.6762C0 55.9706 10.1084 65.9997 22.5 65.9997H56.656C56.6837 66.0001 56.7114 66.0001 56.7391 65.9997H57.2609C57.2886 66.0001 57.3163 66.0001 57.344 65.9997H70.4348C81.2231 65.9997 90 57.2917 90 46.5881C90 36.486 82.1561 28.2623 72.2079 27.3583C72.2539 20.3322 69.7386 13.2916 64.3512 7.94665C59.0169 2.65398 52.0024 0 45 0ZM57.2609 60.1762H56.7391C56.7114 60.1758 56.6838 60.1758 56.6561 60.1762H22.5C13.2807 60.1762 5.86957 52.8233 5.86957 43.6762C5.86957 35.0382 12.4909 28.0009 20.9715 27.237C21.6366 27.1727 22.2596 26.8852 22.7377 26.4219C23.2157 25.9587 23.5201 25.3474 23.6005 24.6892C24.1405 20.074 26.1989 15.5901 29.7758 12.0413C33.9878 7.86248 39.4844 5.8235 45 5.8235C50.5156 5.8235 55.9776 7.85816 60.1936 12.0413C65.0657 16.8751 67.1274 23.4426 66.3689 29.7241C66.317 30.1333 66.3533 30.5488 66.4754 30.9431C66.5975 31.3373 66.8026 31.7014 67.0772 32.0111C67.3518 32.3208 67.6895 32.5691 68.0681 32.7395C68.4466 32.91 68.8574 32.9987 69.2731 32.9998H70.4348C78.0729 32.9998 84.1304 39.0097 84.1304 46.5881C84.1304 54.1663 78.0729 60.1762 70.4348 60.1762H57.3439C57.3162 60.1758 57.2886 60.1758 57.2609 60.1762ZM32.7678 30.7678C31.7915 29.7915 31.7915 28.2085 32.7678 27.2322C33.7441 26.2559 35.327 26.2559 36.3033 27.2322L44.0355 34.9645L52.2322 26.7678C53.2085 25.7915 54.7915 25.7915 55.7678 26.7678C56.7441 27.7441 56.7441 29.327 55.7678 30.3033L47.5711 38.5L55.3952 46.3241C56.3715 47.3004 56.3715 48.8833 55.3952 49.8596C54.4189 50.836 52.836 50.836 51.8596 49.8596L44.0355 42.0355L36.6759 49.3952C35.6996 50.3715 34.1167 50.3715 33.1404 49.3952C32.164 48.4189 32.164 46.836 33.1404 45.8596L40.5 38.5L32.7678 30.7678Z"
15
- fill="#E55566"
16
- />
17
- </svg>
18
- );
@@ -1,26 +0,0 @@
1
- import React from 'react';
2
-
3
- import styles from './style.module.scss';
4
-
5
- export default () => (
6
- <svg
7
- width="60"
8
- height="72"
9
- viewBox="0 0 60 72"
10
- fill="none"
11
- xmlns="http://www.w3.org/2000/svg"
12
- >
13
- <path
14
- className={styles['stroke-primary-500']}
15
- d="M50.5975 69H8.94969C7.37173 69 5.8584 68.3679 4.74262 67.2426C3.62684 66.1174 3 64.5913 3 63V21L20.8491 3H50.5975C52.1754 3 53.6888 3.63214 54.8045 4.75736C55.9203 5.88258 56.5472 7.4087 56.5472 9V63C56.5472 64.5913 55.9203 66.1174 54.8045 67.2426C53.6888 68.3679 52.1754 69 50.5975 69Z"
16
- strokeWidth="5"
17
- strokeLinejoin="round"
18
- />
19
- <path
20
- className={styles['stroke-primary-500']}
21
- d="M20.434 3V15.4528C20.434 17.1042 19.8217 18.6879 18.7319 19.8556C17.642 21.0233 16.1639 21.6792 14.6226 21.6792H3"
22
- strokeWidth="5"
23
- strokeLinejoin="round"
24
- />
25
- </svg>
26
- );
@@ -1,7 +0,0 @@
1
- .stroke-primary-500 {
2
- stroke: var(--ds-primary-500);
3
- }
4
-
5
- .fill-primary-500 {
6
- fill: var(--ds-primary-500);
7
- }
@@ -1,24 +0,0 @@
1
- import React from 'react';
2
-
3
- import styles from './style.module.scss';
4
-
5
- export default () => (
6
- <svg
7
- width="90"
8
- height="66"
9
- viewBox="0 0 90 66"
10
- fill="none"
11
- xmlns="http://www.w3.org/2000/svg"
12
- >
13
- <path
14
- className={styles['fill-primary-500']}
15
- d="M45 0C37.9976 0 30.9572 2.64966 25.6182 7.94665C21.6477 11.8859 19.2407 16.7726 18.2201 21.8685C7.85944 23.8626 0 32.8399 0 43.6762C0 55.9706 10.1084 65.9997 22.5 65.9997H57.2609C57.6498 66.0052 58.0359 65.9339 58.3968 65.79C58.7576 65.6461 59.0861 65.4325 59.3631 65.1616C59.64 64.8907 59.8599 64.5678 60.01 64.2119C60.1602 63.8559 60.2375 63.4738 60.2375 63.088C60.2375 62.7021 60.1602 62.3201 60.01 61.9641C59.8599 61.6081 59.64 61.2853 59.3631 61.0143C59.0861 60.7434 58.7576 60.5298 58.3968 60.3859C58.0359 60.242 57.6498 60.1708 57.2609 60.1762H22.5C13.2807 60.1762 5.86957 52.8233 5.86957 43.6762C5.86957 35.0382 12.4909 28.0009 20.9715 27.237C21.6366 27.1727 22.2596 26.8852 22.7377 26.4219C23.2157 25.9587 23.5201 25.3474 23.6005 24.6892C24.1405 20.074 26.1989 15.5901 29.7758 12.0413C33.9878 7.86248 39.4844 5.8235 45 5.8235C50.5156 5.8235 55.9776 7.85816 60.1936 12.0413C65.0657 16.8751 67.1274 23.4426 66.3689 29.7241C66.317 30.1333 66.3533 30.5488 66.4754 30.9431C66.5975 31.3373 66.8026 31.7014 67.0772 32.0111C67.3518 32.3208 67.6895 32.5691 68.0681 32.7395C68.4466 32.91 68.8574 32.9987 69.2731 32.9998H70.4348C78.0729 32.9998 84.1304 39.0097 84.1304 46.5881C84.1304 54.1663 78.0729 60.1762 70.4348 60.1762H56.7391C56.3502 60.1708 55.9641 60.242 55.6032 60.3859C55.2424 60.5298 54.9139 60.7434 54.6369 61.0143C54.36 61.2853 54.1401 61.6081 53.99 61.9641C53.8398 62.3201 53.7626 62.7021 53.7626 63.088C53.7626 63.4738 53.8398 63.8559 53.99 64.2119C54.1401 64.5678 54.36 64.8907 54.6369 65.1616C54.9139 65.4325 55.2424 65.6461 55.6032 65.79C55.9641 65.9339 56.3502 66.0052 56.7391 65.9997H70.4348C81.2231 65.9997 90 57.2917 90 46.5881C90 36.486 82.1561 28.2623 72.2079 27.3583C72.2539 20.3322 69.7386 13.2916 64.3512 7.94665C59.0169 2.65398 52.0024 0 45 0Z"
16
- />
17
- <path
18
- className={styles['fill-primary-500']}
19
- fill-rule="evenodd"
20
- clip-rule="evenodd"
21
- d="M59.7678 28.0107C60.7441 28.9793 60.7441 30.5498 59.7678 31.5185L38.2043 52.9127C37.8144 53.2995 37.1856 53.2995 36.7957 52.9127L26.7322 42.9282C25.7559 41.9595 25.7559 40.3891 26.7322 39.4204C27.7085 38.4518 29.2915 38.4518 30.2678 39.4204L37.5 46.5959L56.2322 28.0107C57.2085 27.042 58.7915 27.042 59.7678 28.0107Z"
22
- />
23
- </svg>
24
- );
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
-
3
- import styles from './style.module.scss';
4
-
5
- export default () => (
6
- <svg
7
- width="90"
8
- height="73"
9
- viewBox="0 0 90 73"
10
- fill="none"
11
- xmlns="http://www.w3.org/2000/svg"
12
- >
13
- <path
14
- className={styles['fill-primary-500']}
15
- d="M45 0C37.9976 0 30.9572 2.67062 25.6182 8.00951C21.6477 11.9799 19.2407 16.9053 18.2201 22.0414C7.85945 24.0513 0 33.0997 0 44.0217C0 56.4134 10.1084 66.5218 22.5 66.5218H33.2609C33.6498 66.5273 34.0359 66.4555 34.3968 66.3104C34.7576 66.1654 35.0861 65.9501 35.3631 65.677C35.64 65.404 35.8599 65.0786 36.01 64.7198C36.1602 64.361 36.2375 63.9759 36.2375 63.587C36.2375 63.1981 36.1602 62.813 36.01 62.4542C35.8599 62.0954 35.64 61.7701 35.3631 61.497C35.0861 61.2239 34.7576 61.0086 34.3968 60.8636C34.0359 60.7186 33.6498 60.6467 33.2609 60.6522H22.5C13.2807 60.6522 5.86957 53.2412 5.86957 44.0217C5.86957 35.3154 12.4909 28.2224 20.9715 27.4524C21.6366 27.3876 22.2596 27.0978 22.7377 26.6309C23.2157 26.164 23.5201 25.5479 23.6005 24.8845C24.1405 20.2328 26.1989 15.7134 29.7758 12.1365C33.9878 7.92468 39.4844 5.86957 45 5.86957C50.5156 5.86957 55.9776 7.92032 60.1936 12.1365C65.0657 17.0086 67.1274 23.628 66.3689 29.9592C66.317 30.3717 66.3533 30.7905 66.4754 31.1879C66.5975 31.5852 66.8026 31.9522 67.0772 32.2643C67.3518 32.5765 67.6895 32.8267 68.0681 32.9985C68.4466 33.1703 68.8574 33.2597 69.2731 33.2609H70.4348C78.0729 33.2609 84.1304 39.3183 84.1304 46.9566C84.1304 54.5947 78.0729 60.6522 70.4348 60.6522H56.7391C56.3502 60.6467 55.9641 60.7186 55.6032 60.8636C55.2424 61.0086 54.9139 61.2239 54.6369 61.497C54.36 61.7701 54.1401 62.0954 53.99 62.4542C53.8398 62.813 53.7626 63.1981 53.7626 63.587C53.7626 63.9759 53.8398 64.361 53.99 64.7198C54.1401 65.0786 54.36 65.404 54.6369 65.677C54.9139 65.9501 55.2424 66.1654 55.6032 66.3104C55.9641 66.4555 56.3502 66.5273 56.7391 66.5218H70.4348C81.2231 66.5218 90 57.7449 90 46.9566C90 36.7746 82.1561 28.4859 72.2079 27.5747C72.2539 20.4931 69.7385 13.3968 64.3512 8.00951C59.0169 2.67498 52.0024 0 45 0ZM45 33.2609C44.0215 33.2609 43.5041 33.5757 43.013 34.0251L32.2521 43.8077C31.0095 44.9609 31.0313 46.8324 32.0686 47.9654C33.1059 49.0983 35.0881 49.1803 36.2262 48.1488L42.0652 42.8295V69.4566C42.0652 71.0774 43.3789 72.3914 45 72.3914C46.6212 72.3914 47.9348 71.0774 47.9348 69.4566V42.8295L53.7738 48.1488C54.912 49.1803 56.8342 49.0405 57.9314 47.9654C59.0876 46.8324 58.8758 44.8505 57.7479 43.8077L46.987 34.0251C46.4057 33.4929 45.9785 33.2609 45 33.2609Z"
16
- />
17
- </svg>
18
- );
@@ -1,44 +0,0 @@
1
- import { Meta, Preview } from '@storybook/addon-docs/blocks';
2
-
3
- import Dropzone from '.';
4
-
5
- <Meta title="JSX/Dropzone" component={Dropzone} />
6
-
7
- # Dropzone
8
-
9
- Date selector are user interface elements which allow user to select and upload a file.
10
-
11
- ## Examples
12
-
13
- ### Idle state
14
-
15
- <Preview>
16
- <Dropzone uploading={false} onSelectedFile={() => {}} />
17
- </Preview>
18
-
19
- ### Uploading state
20
-
21
- <Preview>
22
- <Dropzone uploading={true} progress={30} onSelectedFile={() => {}} />
23
- </Preview>
24
-
25
- ### Error state
26
-
27
- <Preview>
28
- <Dropzone
29
- uploading={true}
30
- progress={30}
31
- error="Something went wront"
32
- onSelectedFile={() => {}}
33
- />
34
- </Preview>
35
-
36
- ### Uploaded state
37
-
38
- <Preview>
39
- <Dropzone
40
- uploading={false}
41
- uploadedFileUrl="http://getpopsure.com/my-file.png"
42
- onSelectedFile={() => {}}
43
- />
44
- </Preview>