@popsure/dirty-swan 0.33.4 → 0.33.5
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.
- package/dist/cjs/index.js +10 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/dateSelector/index.d.ts +11 -11
- package/dist/cjs/lib/components/dateSelector/index.stories.d.ts +65 -0
- package/dist/cjs/lib/components/multiDropzone/index.d.ts +4 -4
- package/dist/cjs/lib/components/multiDropzone/index.stories.d.ts +72 -0
- package/dist/cjs/lib/index.d.ts +2 -2
- package/dist/cjs/lib/util/images/index.d.ts +7 -0
- package/dist/esm/components/dateSelector/index.js +6 -2179
- package/dist/esm/components/dateSelector/index.js.map +1 -1
- package/dist/esm/components/dateSelector/index.stories.js +92 -0
- package/dist/esm/components/dateSelector/index.stories.js.map +1 -0
- package/dist/esm/components/dateSelector/index.test.js +1 -1
- package/dist/esm/components/dateSelector/index.test.js.map +1 -1
- package/dist/esm/components/input/checkbox/index.stories.js +1 -1
- package/dist/esm/components/multiDropzone/index.js +3 -3
- package/dist/esm/components/multiDropzone/index.js.map +1 -1
- package/dist/esm/components/multiDropzone/index.stories.js +147 -0
- package/dist/esm/components/multiDropzone/index.stories.js.map +1 -0
- package/dist/esm/components/multiDropzone/index.test.js +2 -2
- package/dist/esm/components/multiDropzone/index.test.js.map +1 -1
- package/dist/esm/{index-e81a1766.js → index-31224f74.js} +8 -1
- package/dist/esm/index-31224f74.js.map +1 -0
- package/dist/esm/index-639cf8b3.js +2179 -0
- package/dist/esm/index-639cf8b3.js.map +1 -0
- package/dist/esm/index.js +3 -3
- package/dist/esm/lib/components/dateSelector/index.d.ts +11 -11
- package/dist/esm/lib/components/dateSelector/index.stories.d.ts +65 -0
- package/dist/esm/lib/components/multiDropzone/index.d.ts +4 -4
- package/dist/esm/lib/components/multiDropzone/index.stories.d.ts +72 -0
- package/dist/esm/lib/index.d.ts +2 -2
- package/dist/esm/lib/util/images/index.d.ts +7 -0
- package/dist/esm/util/images/index.stories.js +1 -1
- package/package.json +1 -1
- package/src/App.tsx +1 -1
- package/src/lib/components/dateSelector/index.stories.tsx +104 -0
- package/src/lib/components/dateSelector/index.test.tsx +2 -2
- package/src/lib/components/dateSelector/index.tsx +14 -14
- package/src/lib/components/multiDropzone/index.stories.tsx +228 -0
- package/src/lib/components/multiDropzone/index.test.tsx +1 -1
- package/src/lib/components/multiDropzone/index.tsx +6 -6
- package/src/lib/index.tsx +3 -2
- package/src/lib/util/images/index.ts +7 -0
- package/dist/esm/index-e81a1766.js.map +0 -1
- package/src/lib/components/dateSelector/index.stories.mdx +0 -106
- package/src/lib/components/multiDropzone/index.stories.mdx +0 -187
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index-e81a1766.js","sources":["../../../src/lib/util/images/index.ts"],"sourcesContent":["const basePath = 'https://assets.cdn.feather-insurance.com/assets/images';\n\nconst images = {\n aid: `${basePath}/aid.svg`,\n bed: `${basePath}/bed.svg`,\n bigDog: `${basePath}/bigDog.svg`,\n verticalIcons: {\n dogLiability: `${basePath}/dogLiabilityIcon.png`,\n dogLiability2x: `${basePath}/dogLiabilityIcon2x.png`,\n dogLiability3x: `${basePath}/dogLiabilityIcon3x.png`,\n },\n brokenAquarium: `${basePath}/brokenAquarium.svg`,\n brokenGlass: `${basePath}/brokenGlass.svg`,\n damagedLaptop: `${basePath}/damagedLaptop.svg`,\n moneyIncome: `${basePath}/moneyIncome.svg`,\n washingMachine: `${basePath}/washingMachine.svg`,\n} as const;\n\nexport { images };\n"],"names":[],"mappings":"AAAA,IAAM,QAAQ,GAAG,wDAAwD,CAAC;IAEpE,MAAM,GAAG;IACb,GAAG,EAAK,QAAQ,aAAU;IAC1B,GAAG,EAAK,QAAQ,aAAU;IAC1B,MAAM,EAAK,QAAQ,gBAAa;IAChC,aAAa,EAAE;QACb,YAAY,EAAK,QAAQ,0BAAuB;QAChD,cAAc,EAAK,QAAQ,4BAAyB;QACpD,cAAc,EAAK,QAAQ,4BAAyB;KACrD;IACD,cAAc,EAAK,QAAQ,wBAAqB;IAChD,WAAW,EAAK,QAAQ,qBAAkB;IAC1C,aAAa,EAAK,QAAQ,uBAAoB;IAC9C,WAAW,EAAK,QAAQ,qBAAkB;IAC1C,cAAc,EAAK,QAAQ,wBAAqB;;;;;"}
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import { Meta, Preview } from '@storybook/addon-docs/blocks';
|
|
3
|
-
|
|
4
|
-
import DateSelector from '.';
|
|
5
|
-
import de from 'dayjs/locale/de';
|
|
6
|
-
|
|
7
|
-
<Meta title="JSX/Date selector" component={DateSelector} />
|
|
8
|
-
|
|
9
|
-
# Date selector
|
|
10
|
-
|
|
11
|
-
Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.
|
|
12
|
-
|
|
13
|
-
<Preview>
|
|
14
|
-
<iframe
|
|
15
|
-
width="100%"
|
|
16
|
-
height="450"
|
|
17
|
-
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"
|
|
18
|
-
allowFullScreen
|
|
19
|
-
></iframe>
|
|
20
|
-
</Preview>
|
|
21
|
-
|
|
22
|
-
## Default example
|
|
23
|
-
|
|
24
|
-
### Without calendar
|
|
25
|
-
|
|
26
|
-
export const DateSelectorWithoutCalendarStory = () => {
|
|
27
|
-
const [date, setDate] = useState('');
|
|
28
|
-
return (
|
|
29
|
-
<>
|
|
30
|
-
<DateSelector
|
|
31
|
-
value={date}
|
|
32
|
-
className="mt24"
|
|
33
|
-
yearBoundaries={{ min: 2020, max: 2022 }}
|
|
34
|
-
onChange={(date) => {
|
|
35
|
-
setDate(date);
|
|
36
|
-
}}
|
|
37
|
-
/>
|
|
38
|
-
</>
|
|
39
|
-
);
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
<DateSelectorWithoutCalendarStory />
|
|
43
|
-
|
|
44
|
-
### With calendar
|
|
45
|
-
|
|
46
|
-
export const DateSelectorWithCalendarStory = () => {
|
|
47
|
-
const [date, setDate] = useState('');
|
|
48
|
-
return (
|
|
49
|
-
<div style={{ paddingBottom: '120px' }}>
|
|
50
|
-
<DateSelector
|
|
51
|
-
value={date}
|
|
52
|
-
className="mt24"
|
|
53
|
-
yearBoundaries={{ min: 2020, max: 2022 }}
|
|
54
|
-
onChange={(date) => {
|
|
55
|
-
setDate(date);
|
|
56
|
-
}}
|
|
57
|
-
displayCalendar={true}
|
|
58
|
-
/>
|
|
59
|
-
</div>
|
|
60
|
-
);
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
<DateSelectorWithCalendarStory />
|
|
64
|
-
|
|
65
|
-
### Localization
|
|
66
|
-
|
|
67
|
-
| attribute | unit | description | default value | required |
|
|
68
|
-
| -------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------- | -------- |
|
|
69
|
-
| placeholders | `{ day?: string; month: string?; year?: string; }` | Placeholder text | undefined | false |
|
|
70
|
-
| dayjsLocale | `ILocale` | Imported [Day.js locale Object](https://day.js.org/docs/en/customization/customization) | undefined | false |
|
|
71
|
-
| firstDayOfWeek | number | Index of the first day of the week (0 = Sunday, 1 = Monday, etc.) | 0 | false |
|
|
72
|
-
|
|
73
|
-
The `dayjsLocale` and `firstDayOfWeek` properties are used to localize the calendar of the `DateSelector`, whereas
|
|
74
|
-
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.
|
|
75
|
-
|
|
76
|
-
Additional locales can be imported from dayjs like
|
|
77
|
-
`import de from 'dayjs/locale/de';` and then passed on to the component:
|
|
78
|
-
`<DateSelector ... dayjsLocale={de} />`
|
|
79
|
-
|
|
80
|
-
[List of all supported locales](https://github.com/iamkun/dayjs/tree/dev/src/locale)
|
|
81
|
-
|
|
82
|
-
export const DateSelectorWithCalendarLocalizedStory = () => {
|
|
83
|
-
const [date, setDate] = useState('');
|
|
84
|
-
return (
|
|
85
|
-
<div style={{ paddingBottom: '120px' }}>
|
|
86
|
-
<DateSelector
|
|
87
|
-
value={date}
|
|
88
|
-
className="mt24"
|
|
89
|
-
yearBoundaries={{ min: 2020, max: 2022 }}
|
|
90
|
-
onChange={(date) => {
|
|
91
|
-
setDate(date);
|
|
92
|
-
}}
|
|
93
|
-
displayCalendar={true}
|
|
94
|
-
placeholders={{
|
|
95
|
-
day: 'Tag',
|
|
96
|
-
month: 'Monat',
|
|
97
|
-
year: 'Jahr',
|
|
98
|
-
}}
|
|
99
|
-
dayjsLocale={de}
|
|
100
|
-
firstDayOfWeek={1}
|
|
101
|
-
/>
|
|
102
|
-
</div>
|
|
103
|
-
);
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
<DateSelectorWithCalendarLocalizedStory />
|
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
import { Meta, Preview } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
import MultiDropzone from '.';
|
|
4
|
-
|
|
5
|
-
<Meta title="JSX/MultiDropzone" component={MultiDropzone} />
|
|
6
|
-
|
|
7
|
-
# MultiDropzone
|
|
8
|
-
|
|
9
|
-
MultiDropzone component allows upload of multiple documents / files.
|
|
10
|
-
|
|
11
|
-
## Examples
|
|
12
|
-
|
|
13
|
-
### Idle state
|
|
14
|
-
|
|
15
|
-
<Preview>
|
|
16
|
-
<MultiDropzone
|
|
17
|
-
uploadedFiles={[]}
|
|
18
|
-
onFileSelect={() => {}}
|
|
19
|
-
uploading={false}
|
|
20
|
-
onRemoveFile={() => {}}
|
|
21
|
-
/>
|
|
22
|
-
</Preview>
|
|
23
|
-
|
|
24
|
-
### Uploading state
|
|
25
|
-
|
|
26
|
-
<Preview>
|
|
27
|
-
<MultiDropzone
|
|
28
|
-
uploadedFiles={[
|
|
29
|
-
{
|
|
30
|
-
id: '123',
|
|
31
|
-
type: 'pdf',
|
|
32
|
-
progress: '72',
|
|
33
|
-
name: 'test_file_name.pdf',
|
|
34
|
-
token: 'abc',
|
|
35
|
-
previewUrl: 'http://getpopsure.com/test_file_name.pdf',
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
id: '124',
|
|
39
|
-
type: 'pdf',
|
|
40
|
-
progress: '72',
|
|
41
|
-
name: 'test_file_name.pdf',
|
|
42
|
-
token: 'abc',
|
|
43
|
-
previewUrl: 'http://getpopsure.com/test_file_name.pdf',
|
|
44
|
-
showLoadingSpinner: true,
|
|
45
|
-
showProgressBar: false,
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
id: '125',
|
|
49
|
-
type: 'pdf',
|
|
50
|
-
progress: '72',
|
|
51
|
-
name: 'test_file_name.pdf',
|
|
52
|
-
token: 'abc',
|
|
53
|
-
previewUrl: 'http://getpopsure.com/test_file_name.pdf',
|
|
54
|
-
showLoadingSpinner: true,
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
id: '456',
|
|
58
|
-
type: 'pdf',
|
|
59
|
-
progress: '100',
|
|
60
|
-
name: 'test_file_name2.pdf',
|
|
61
|
-
token: 'def',
|
|
62
|
-
previewUrl: 'http://getpopsure.com/test_file_name2.pdf',
|
|
63
|
-
},
|
|
64
|
-
]}
|
|
65
|
-
onFileSelect={() => {}}
|
|
66
|
-
uploading={true}
|
|
67
|
-
onRemoveFile={() => {}}
|
|
68
|
-
/>
|
|
69
|
-
</Preview>
|
|
70
|
-
|
|
71
|
-
### Uploaded state
|
|
72
|
-
|
|
73
|
-
<Preview>
|
|
74
|
-
<MultiDropzone
|
|
75
|
-
uploadedFiles={[
|
|
76
|
-
{
|
|
77
|
-
id: '123',
|
|
78
|
-
type: 'pdf',
|
|
79
|
-
progress: '100',
|
|
80
|
-
name: 'test_file_name.pdf',
|
|
81
|
-
token: 'abc',
|
|
82
|
-
previewUrl: 'http://getpopsure.com/test_file_name.pdf',
|
|
83
|
-
},
|
|
84
|
-
]}
|
|
85
|
-
onFileSelect={() => {}}
|
|
86
|
-
uploading={false}
|
|
87
|
-
onRemoveFile={() => {}}
|
|
88
|
-
/>
|
|
89
|
-
</Preview>
|
|
90
|
-
|
|
91
|
-
### Condensed view
|
|
92
|
-
|
|
93
|
-
<Preview>
|
|
94
|
-
<MultiDropzone
|
|
95
|
-
uploadedFiles={[
|
|
96
|
-
{
|
|
97
|
-
id: '123',
|
|
98
|
-
type: 'pdf',
|
|
99
|
-
progress: '100',
|
|
100
|
-
name: 'test_file_name.pdf',
|
|
101
|
-
token: 'abc',
|
|
102
|
-
previewUrl: 'http://getpopsure.com/test_file_name.pdf',
|
|
103
|
-
},
|
|
104
|
-
]}
|
|
105
|
-
onFileSelect={() => {}}
|
|
106
|
-
uploading={false}
|
|
107
|
-
onRemoveFile={() => {}}
|
|
108
|
-
isCondensed
|
|
109
|
-
/>
|
|
110
|
-
</Preview>
|
|
111
|
-
|
|
112
|
-
### Error state
|
|
113
|
-
|
|
114
|
-
<Preview>
|
|
115
|
-
<MultiDropzone
|
|
116
|
-
uploadedFiles={[
|
|
117
|
-
{
|
|
118
|
-
id: '123',
|
|
119
|
-
type: 'pdf',
|
|
120
|
-
progress: '0',
|
|
121
|
-
name: 'test_file_name.pdf',
|
|
122
|
-
token: 'abc',
|
|
123
|
-
previewUrl: 'http://getpopsure.com/test_file_name.pdf',
|
|
124
|
-
error: 'File is too big!',
|
|
125
|
-
},
|
|
126
|
-
]}
|
|
127
|
-
onFileSelect={() => {}}
|
|
128
|
-
uploading={false}
|
|
129
|
-
onRemoveFile={() => {}}
|
|
130
|
-
/>
|
|
131
|
-
</Preview>
|
|
132
|
-
|
|
133
|
-
### Accepting only images
|
|
134
|
-
|
|
135
|
-
<Preview>
|
|
136
|
-
<MultiDropzone
|
|
137
|
-
accept="image"
|
|
138
|
-
isCondensed
|
|
139
|
-
uploadedFiles={[]}
|
|
140
|
-
onFileSelect={() => {}}
|
|
141
|
-
uploading={false}
|
|
142
|
-
onRemoveFile={() => {}}
|
|
143
|
-
/>
|
|
144
|
-
</Preview>
|
|
145
|
-
|
|
146
|
-
### Accepting only documents
|
|
147
|
-
|
|
148
|
-
<Preview>
|
|
149
|
-
<MultiDropzone
|
|
150
|
-
accept="document"
|
|
151
|
-
isCondensed
|
|
152
|
-
uploadedFiles={[]}
|
|
153
|
-
onFileSelect={() => {}}
|
|
154
|
-
uploading={false}
|
|
155
|
-
onRemoveFile={() => {}}
|
|
156
|
-
/>
|
|
157
|
-
</Preview>
|
|
158
|
-
|
|
159
|
-
### Limiting file size to 2MB
|
|
160
|
-
|
|
161
|
-
<Preview>
|
|
162
|
-
<MultiDropzone
|
|
163
|
-
isCondensed
|
|
164
|
-
uploadedFiles={[]}
|
|
165
|
-
onFileSelect={() => {}}
|
|
166
|
-
uploading={false}
|
|
167
|
-
onRemoveFile={() => {}}
|
|
168
|
-
maxSize={2096000}
|
|
169
|
-
/>
|
|
170
|
-
</Preview>
|
|
171
|
-
|
|
172
|
-
### i18n support
|
|
173
|
-
|
|
174
|
-
<Preview>
|
|
175
|
-
<MultiDropzone
|
|
176
|
-
uploadedFiles={[]}
|
|
177
|
-
onFileSelect={() => {}}
|
|
178
|
-
uploading={false}
|
|
179
|
-
onRemoveFile={() => {}}
|
|
180
|
-
textOverrides={{
|
|
181
|
-
instructionsText: 'Datei auswählen oder per Drag & Drop platzieren',
|
|
182
|
-
supportsTextShort: 'Unterstützt werden',
|
|
183
|
-
currentlyUploadingText:
|
|
184
|
-
'Bitte warten während die Datei hochgeladen wird...'
|
|
185
|
-
}}
|
|
186
|
-
/>
|
|
187
|
-
</Preview>
|