@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.
Files changed (46) hide show
  1. package/dist/cjs/index.js +10 -3
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/lib/components/dateSelector/index.d.ts +11 -11
  4. package/dist/cjs/lib/components/dateSelector/index.stories.d.ts +65 -0
  5. package/dist/cjs/lib/components/multiDropzone/index.d.ts +4 -4
  6. package/dist/cjs/lib/components/multiDropzone/index.stories.d.ts +72 -0
  7. package/dist/cjs/lib/index.d.ts +2 -2
  8. package/dist/cjs/lib/util/images/index.d.ts +7 -0
  9. package/dist/esm/components/dateSelector/index.js +6 -2179
  10. package/dist/esm/components/dateSelector/index.js.map +1 -1
  11. package/dist/esm/components/dateSelector/index.stories.js +92 -0
  12. package/dist/esm/components/dateSelector/index.stories.js.map +1 -0
  13. package/dist/esm/components/dateSelector/index.test.js +1 -1
  14. package/dist/esm/components/dateSelector/index.test.js.map +1 -1
  15. package/dist/esm/components/input/checkbox/index.stories.js +1 -1
  16. package/dist/esm/components/multiDropzone/index.js +3 -3
  17. package/dist/esm/components/multiDropzone/index.js.map +1 -1
  18. package/dist/esm/components/multiDropzone/index.stories.js +147 -0
  19. package/dist/esm/components/multiDropzone/index.stories.js.map +1 -0
  20. package/dist/esm/components/multiDropzone/index.test.js +2 -2
  21. package/dist/esm/components/multiDropzone/index.test.js.map +1 -1
  22. package/dist/esm/{index-e81a1766.js → index-31224f74.js} +8 -1
  23. package/dist/esm/index-31224f74.js.map +1 -0
  24. package/dist/esm/index-639cf8b3.js +2179 -0
  25. package/dist/esm/index-639cf8b3.js.map +1 -0
  26. package/dist/esm/index.js +3 -3
  27. package/dist/esm/lib/components/dateSelector/index.d.ts +11 -11
  28. package/dist/esm/lib/components/dateSelector/index.stories.d.ts +65 -0
  29. package/dist/esm/lib/components/multiDropzone/index.d.ts +4 -4
  30. package/dist/esm/lib/components/multiDropzone/index.stories.d.ts +72 -0
  31. package/dist/esm/lib/index.d.ts +2 -2
  32. package/dist/esm/lib/util/images/index.d.ts +7 -0
  33. package/dist/esm/util/images/index.stories.js +1 -1
  34. package/package.json +1 -1
  35. package/src/App.tsx +1 -1
  36. package/src/lib/components/dateSelector/index.stories.tsx +104 -0
  37. package/src/lib/components/dateSelector/index.test.tsx +2 -2
  38. package/src/lib/components/dateSelector/index.tsx +14 -14
  39. package/src/lib/components/multiDropzone/index.stories.tsx +228 -0
  40. package/src/lib/components/multiDropzone/index.test.tsx +1 -1
  41. package/src/lib/components/multiDropzone/index.tsx +6 -6
  42. package/src/lib/index.tsx +3 -2
  43. package/src/lib/util/images/index.ts +7 -0
  44. package/dist/esm/index-e81a1766.js.map +0 -1
  45. package/src/lib/components/dateSelector/index.stories.mdx +0 -106
  46. 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>