@popsure/dirty-swan 0.27.4 → 0.27.7

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 (28) hide show
  1. package/dist/index.css +21 -12
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.js +13 -13
  4. package/dist/index.js.map +1 -1
  5. package/dist/lib/components/multiDropzone/index.d.ts +2 -1
  6. package/dist/lib/scss/private/base/style.module.scss +1 -1
  7. package/dist/lib/scss/private/components/_badge.scss +1 -1
  8. package/dist/lib/scss/private/components/_buttons.scss +2 -2
  9. package/dist/lib/scss/private/components/_input.scss +6 -6
  10. package/dist/lib/scss/public/colors/default.scss +4 -2
  11. package/dist/lib/scss/third-party/_google_places.scss +1 -1
  12. package/package.json +1 -1
  13. package/src/lib/components/autocompleteAddress/style.module.scss +1 -1
  14. package/src/lib/components/dateSelector/datepicker.scss +2 -2
  15. package/src/lib/components/input/index.stories.mdx +4 -0
  16. package/src/lib/components/input/style.module.scss +2 -2
  17. package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss +1 -1
  18. package/src/lib/components/multiDropzone/icons/upload.svg +4 -4
  19. package/src/lib/components/multiDropzone/index.stories.mdx +21 -0
  20. package/src/lib/components/multiDropzone/index.tsx +17 -8
  21. package/src/lib/components/multiDropzone/style.module.scss +19 -14
  22. package/src/lib/components/signaturePad/style.module.scss +1 -1
  23. package/src/lib/scss/private/base/style.module.scss +1 -1
  24. package/src/lib/scss/private/components/_badge.scss +1 -1
  25. package/src/lib/scss/private/components/_buttons.scss +2 -2
  26. package/src/lib/scss/private/components/_input.scss +6 -6
  27. package/src/lib/scss/public/colors/default.scss +4 -2
  28. package/src/lib/scss/third-party/_google_places.scss +1 -1
package/dist/lib/components/multiDropzone/index.d.ts CHANGED
@@ -14,6 +14,7 @@ interface Props {
14
14
  uploadedFiles: UploadedFile[];
15
15
  uploading: boolean;
16
16
  onRemoveFile: (id: string) => void;
17
+ isCondensed?: boolean;
17
18
  }
18
- declare const _default: ({ uploadedFiles, onFileSelect, uploading, onRemoveFile, }: Props) => JSX.Element;
19
+ declare const _default: ({ uploadedFiles, onFileSelect, uploading, onRemoveFile, isCondensed, }: Props) => JSX.Element;
19
20
  export default _default;
package/dist/lib/scss/private/base/style.module.scss CHANGED
@@ -35,7 +35,7 @@
35
35
  & > *:nth-child(2) {
36
36
  border-top-right-radius: 8px;
37
37
  border-bottom-right-radius: 8px;
38
- background-color: colors.$ds-grey-300;
38
+ background-color: colors.$ds-grey-400;
39
39
  width: 100%;
40
40
  }
41
41
  }
package/dist/lib/scss/private/components/_badge.scss CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  &--inactive {
28
28
  @extend .p-badge;
29
- background-color: $ds-grey-300;
29
+ background-color: $ds-grey-400;
30
30
  }
31
31
 
32
32
  &--danger {
package/dist/lib/scss/private/components/_buttons.scss CHANGED
@@ -171,7 +171,7 @@
171
171
  color: $ds-grey-500;
172
172
  background-color: transparent;
173
173
 
174
- border: 1px dashed $ds-grey-300;
174
+ border: 1px dashed $ds-grey-400;
175
175
 
176
176
  &:hover {
177
177
  color: $ds-grey-600;
@@ -180,7 +180,7 @@
180
180
 
181
181
  &[disabled] {
182
182
  color: $ds-grey-500;
183
- border-color: $ds-grey-300;
183
+ border-color: $ds-grey-400;
184
184
  opacity: 0.5;
185
185
  }
186
186
 
package/dist/lib/scss/private/components/_input.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  width: 100%;
15
15
 
16
16
  border-radius: 8px;
17
- border: 1px solid $ds-grey-300;
17
+ border: 1px solid $ds-grey-400;
18
18
  background-color: white;
19
19
 
20
20
  color: $ds-grey-900;
@@ -27,7 +27,7 @@
27
27
 
28
28
  &:disabled {
29
29
  background-color: $ds-grey-300;
30
- border-color: $ds-grey-500;
30
+ border: none;
31
31
  }
32
32
 
33
33
  &:focus {
@@ -81,7 +81,7 @@
81
81
  height: 16px;
82
82
  min-height: 16px;
83
83
 
84
- border: 1px solid $ds-grey-300;
84
+ border: 1px solid $ds-grey-400;
85
85
  border-radius: 50%;
86
86
 
87
87
  background-color: white;
@@ -113,7 +113,7 @@
113
113
  height: 16px;
114
114
  min-height: 16px;
115
115
 
116
- border: 1px solid $ds-grey-300;
116
+ border: 1px solid $ds-grey-400;
117
117
  border-radius: 4px;
118
118
 
119
119
  background-color: white;
@@ -163,7 +163,7 @@
163
163
  padding-left: 16px;
164
164
 
165
165
  border-radius: 8px;
166
- border: 1px solid $ds-grey-300;
166
+ border: 1px solid $ds-grey-400;
167
167
  background-color: white;
168
168
 
169
169
  &:hover {
@@ -201,7 +201,7 @@ input:checked[type='checkbox'] + .p-label--bordered {
201
201
  height: 48px;
202
202
 
203
203
  border-radius: 8px;
204
- border: 1px solid $ds-grey-300;
204
+ border: 1px solid $ds-grey-400;
205
205
  background-color: white;
206
206
 
207
207
  font-family: inherit;
package/dist/lib/scss/public/colors/default.scss CHANGED
@@ -41,8 +41,9 @@ $ds-pink-900: #700024;
41
41
 
42
42
  $ds-grey-100: #fafaff;
43
43
  $ds-grey-200: #f5f5fa;
44
- $ds-grey-300: #d2d2d8;
45
- $ds-grey-500: #b4b4ba;
44
+ $ds-grey-300: #ededf2;
45
+ $ds-grey-400: #d2d2d8;
46
+ $ds-grey-500: #848490;
46
47
  $ds-grey-600: #696970;
47
48
  $ds-grey-700: #4c4c53;
48
49
  $ds-grey-900: #26262e;
@@ -98,6 +99,7 @@ $colors: (
98
99
  'grey-100': $ds-grey-100,
99
100
  'grey-200': $ds-grey-200,
100
101
  'grey-300': $ds-grey-300,
102
+ 'grey-400': $ds-grey-400,
101
103
  'grey-500': $ds-grey-500,
102
104
  'grey-600': $ds-grey-600,
103
105
  'grey-700': $ds-grey-700,
package/dist/lib/scss/third-party/_google_places.scss CHANGED
@@ -47,7 +47,7 @@
47
47
 
48
48
  .pac-container {
49
49
  background-color: white;
50
- border: 1px solid var(--ds-grey-300);
50
+ border: 1px solid var(--ds-grey-400);
51
51
  box-shadow: none;
52
52
  border-radius: 8px;
53
53
  margin-top: 8px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@popsure/dirty-swan",
3
- "version": "0.27.4",
3
+ "version": "0.27.7",
4
4
  "author": "Vincent Audoire <vincent@getpopsure.com>",
5
5
  "license": "MIT",
6
6
  "private": false,
package/src/lib/components/autocompleteAddress/style.module.scss CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
  .house-number-input {
15
15
  @include p-size-mobile {
16
- max-width: none;
16
+ max-width: none !important;
17
17
  }
18
18
  }
19
19
 
package/src/lib/components/dateSelector/datepicker.scss CHANGED
@@ -391,7 +391,7 @@
391
391
  }
392
392
 
393
393
  .DayPicker-Day--outside {
394
- color: $ds-grey-300;
394
+ color: $ds-grey-400;
395
395
  cursor: pointer;
396
396
 
397
397
  &:hover {
@@ -400,7 +400,7 @@
400
400
  }
401
401
 
402
402
  .DayPicker-Day--disabled {
403
- color: $ds-grey-300;
403
+ color: $ds-grey-400;
404
404
  background-color: transparent;
405
405
  pointer-events: none;
406
406
  }
package/src/lib/components/input/index.stories.mdx CHANGED
@@ -34,6 +34,8 @@ You are looking at the JSX definition of the Input component, if you want you ca
34
34
  value="jane.doe@feather-insurance.com"
35
35
  placeholder="Email"
36
36
  />
37
+ <h4 className="p-h4 mt24">Disabled</h4>
38
+ <Input className="wmx5 mt8" placeholder="Email" disabled />
37
39
  <h4 className="p-h4 mt24">Error</h4>
38
40
  <Input
39
41
  className="wmx5 mt8"
@@ -50,6 +52,8 @@ You are looking at the JSX definition of the Input component, if you want you ca
50
52
  <Input className="wmx5 mt8" placeholder="amount" prefix="€" />
51
53
  <h4 className="p-h4 mt24">Filled with placeholder</h4>
52
54
  <Input className="wmx5 mt8" placeholder="amount" value="100" prefix="€" />
55
+ <h4 className="p-h4 mt24">Disabled</h4>
56
+ <Input className="wmx5 mt8" placeholder="amount" disabled prefix="€" />
53
57
  <h4 className="p-h4 mt24">Error</h4>
54
58
  <Input
55
59
  className="wmx5 mt8"
package/src/lib/components/input/style.module.scss CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  transform: translateY(-50%);
12
12
 
13
- color: var(--ds-grey-300);
13
+ color: var(--ds-grey-400);
14
14
 
15
15
  transition: 0.3s top;
16
16
 
@@ -78,7 +78,7 @@
78
78
  transform: translateY(-50%);
79
79
  transition: 0.3s ease all;
80
80
 
81
- color: var(--ds-grey-300);
81
+ color: var(--ds-grey-400);
82
82
 
83
83
  &--with-prefix {
84
84
  left: 32px;
package/src/lib/components/multiDropzone/UploadFileCell/style.module.scss CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  padding: 8px 16px;
9
9
 
10
- border: 1px solid $ds-grey-300;
10
+ border: 1px solid $ds-grey-400;
11
11
  border-radius: 8px;
12
12
  background-color: white;
13
13
 
package/src/lib/components/multiDropzone/icons/upload.svg CHANGED
@@ -1,5 +1,5 @@
1
- <svg width="74" height="65" viewBox="0 0 74 65" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M26.7331 51.0225H16.9671C12.207 51.0225 2 46.6745 2 35.4347C2 23.341 12.207 19.2864 17.3221 19.2864C18.0198 13.4585 21.8677 2.64515 36.0438 1.896C49.6806 1.896 55.7671 14.2015 54.7655 23.3697C60.0996 23.0395 72 25.4458 72 37.4209C72 47.6065 61.3317 51.4782 55.9975 51.0225H47.5947" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
3
- <path d="M36.9999 62.9938V29.5552" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
4
- <path d="M28.6452 37.91L37 29.5552L45.3548 37.91" stroke="#8E8CEE" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
1
+ <svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M25.589 52.324H16.6368C12.2734 52.324 2.91699 48.3383 2.91699 38.0351C2.91699 26.9493 12.2734 23.2325 16.9623 23.2325C17.6018 17.8902 21.1291 7.97805 34.1238 7.29132C46.6242 7.29132 52.2035 18.5714 51.2854 26.9756C56.175 26.6729 67.0837 28.8787 67.0837 39.8558C67.0837 49.1926 57.3044 52.7417 52.4147 52.324H44.7121" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
3
+ <path d="M35 63.2981V32.646" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
4
+ <path d="M27.3428 40.3045L35.0013 32.646L42.6599 40.3045" stroke="#8E8CEE" stroke-width="3.08333" stroke-linecap="round" stroke-linejoin="round"/>
5
5
  </svg>
package/src/lib/components/multiDropzone/index.stories.mdx CHANGED
@@ -69,6 +69,27 @@ MultiDropzone component allows upload of multiple documents / files.
69
69
  />
70
70
  </Preview>
71
71
 
72
+ ### Condensed view
73
+
74
+ <Preview>
75
+ <MultiDropzone
76
+ uploadedFiles={[
77
+ {
78
+ id: '123',
79
+ type: 'pdf',
80
+ progress: '100',
81
+ name: 'test_file_name.pdf',
82
+ token: 'abc',
83
+ previewUrl: 'http://getpopsure.com/test_file_name.pdf',
84
+ },
85
+ ]}
86
+ onFileSelect={() => {}}
87
+ uploading={false}
88
+ onRemoveFile={() => {}}
89
+ isCondensed
90
+ />
91
+ </Preview>
92
+
72
93
  ### Error state
73
94
 
74
95
  <Preview>
package/src/lib/components/multiDropzone/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react';
1
+ import { useCallback } from 'react';
2
2
  import { useDropzone } from 'react-dropzone';
3
3
  import classnames from 'classnames';
4
4
 
@@ -44,6 +44,7 @@ interface Props {
44
44
  uploadedFiles: UploadedFile[];
45
45
  uploading: boolean;
46
46
  onRemoveFile: (id: string) => void;
47
+ isCondensed?: boolean;
47
48
  }
48
49
 
49
50
  export default ({
@@ -51,6 +52,7 @@ export default ({
51
52
  onFileSelect,
52
53
  uploading,
53
54
  onRemoveFile,
55
+ isCondensed = false,
54
56
  }: Props) => {
55
57
  const onDrop = useCallback(
56
58
  (acceptedFiles) => {
@@ -62,16 +64,23 @@ export default ({
62
64
  const { getRootProps, getInputProps } = useDropzone({ onDrop });
63
65
 
64
66
  return (
65
- <div className={`w100 ${styles.container}`}>
67
+ <div className={styles.container}>
66
68
  <div
67
- className={classnames(`w100 ta-center ${styles['upload-container']}`, {
68
- [styles['upload-container-disabled']]: uploading,
69
- })}
69
+ className={classnames(
70
+ `w100 ta-center br8 c-pointer ${styles.dropzoneContainer}`,
71
+ {
72
+ [styles['dropzoneContainerDisabled']]: uploading,
73
+ }
74
+ )}
70
75
  {...getRootProps()}
71
76
  >
72
77
  <input {...getInputProps()} />
73
- <img src={icons.uploadIcon} alt="" />
74
- <div className="p-h4 mt8">
78
+ <img
79
+ className={isCondensed ? styles.img : ''}
80
+ src={icons.uploadIcon}
81
+ alt="purple cloud with an arrow"
82
+ />
83
+ <div className={`p-h4 mt8 ${isCondensed ? styles.textInline : ''}`}>
75
84
  {uploading
76
85
  ? 'Please wait while uploading file...'
77
86
  : 'Choose file or drag & drop'}
@@ -79,7 +88,7 @@ export default ({
79
88
  <div className="p-p--small tc-grey-500">Supports JPEG, PNG, PDF</div>
80
89
  </div>
81
90
  {uploadedFiles.length > 0 && (
82
- <div className={`w100 mt16`}>
91
+ <div className="w100 mt16">
83
92
  {uploadedFiles.map((file) => {
84
93
  const uploadStatus = getUploadStatus(file.progress, file.error);
85
94
  return (
package/src/lib/components/multiDropzone/style.module.scss CHANGED
@@ -1,32 +1,37 @@
1
1
  @use "../../scss/public/grid" as *;
2
2
 
3
3
  .container {
4
- background-color: white;
5
- padding: 24px;
6
- box-shadow: 0px 2px 3px rgba(38, 38, 46, 0.04);
7
- border-radius: 8px;
8
-
9
- @include p-size-mobile {
10
- padding: 16px;
11
- }
4
+ background-color: transparent;
12
5
  }
13
6
 
14
- .upload-container {
7
+ .dropzoneContainer {
15
8
  border: 1px dashed var(--ds-primary-500);
16
9
  padding: 32px 0;
17
- cursor: pointer;
18
- border-radius: 8px;
10
+ background-color: white;
11
+
12
+ transition: all 0.6s ease-in-out;
13
+ }
14
+
15
+ .img {
16
+ vertical-align: middle;
17
+ margin-right: 8px;
18
+ height: 18px;
19
+ }
20
+
21
+ .textInline {
22
+ display: inline-flex;
19
23
  }
20
24
 
21
- .upload-container:focus {
25
+ .dropzoneContainer:focus {
22
26
  outline: none;
23
27
  }
24
28
 
25
- .upload-container:hover {
29
+ .dropzoneContainer:hover {
26
30
  background-color: var(--ds-primary-100);
27
31
  transition: 0.5s ease;
28
32
  }
29
33
 
30
- .upload-container-disabled {
34
+ .dropzoneContainerDisabled {
31
35
  pointer-events: none;
36
+ opacity: 0.4
32
37
  }
package/src/lib/components/signaturePad/style.module.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  left: 72px;
20
20
  bottom: 32px;
21
21
 
22
- background-color: var(--ds-grey-300);
22
+ background-color: var(--ds-grey-400);
23
23
 
24
24
  border-radius: 1px;
25
25
  }
package/src/lib/scss/private/base/style.module.scss CHANGED
@@ -35,7 +35,7 @@
35
35
  & > *:nth-child(2) {
36
36
  border-top-right-radius: 8px;
37
37
  border-bottom-right-radius: 8px;
38
- background-color: colors.$ds-grey-300;
38
+ background-color: colors.$ds-grey-400;
39
39
  width: 100%;
40
40
  }
41
41
  }
package/src/lib/scss/private/components/_badge.scss CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  &--inactive {
28
28
  @extend .p-badge;
29
- background-color: $ds-grey-300;
29
+ background-color: $ds-grey-400;
30
30
  }
31
31
 
32
32
  &--danger {
package/src/lib/scss/private/components/_buttons.scss CHANGED
@@ -171,7 +171,7 @@
171
171
  color: $ds-grey-500;
172
172
  background-color: transparent;
173
173
 
174
- border: 1px dashed $ds-grey-300;
174
+ border: 1px dashed $ds-grey-400;
175
175
 
176
176
  &:hover {
177
177
  color: $ds-grey-600;
@@ -180,7 +180,7 @@
180
180
 
181
181
  &[disabled] {
182
182
  color: $ds-grey-500;
183
- border-color: $ds-grey-300;
183
+ border-color: $ds-grey-400;
184
184
  opacity: 0.5;
185
185
  }
186
186
 
package/src/lib/scss/private/components/_input.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  width: 100%;
15
15
 
16
16
  border-radius: 8px;
17
- border: 1px solid $ds-grey-300;
17
+ border: 1px solid $ds-grey-400;
18
18
  background-color: white;
19
19
 
20
20
  color: $ds-grey-900;
@@ -27,7 +27,7 @@
27
27
 
28
28
  &:disabled {
29
29
  background-color: $ds-grey-300;
30
- border-color: $ds-grey-500;
30
+ border: none;
31
31
  }
32
32
 
33
33
  &:focus {
@@ -81,7 +81,7 @@
81
81
  height: 16px;
82
82
  min-height: 16px;
83
83
 
84
- border: 1px solid $ds-grey-300;
84
+ border: 1px solid $ds-grey-400;
85
85
  border-radius: 50%;
86
86
 
87
87
  background-color: white;
@@ -113,7 +113,7 @@
113
113
  height: 16px;
114
114
  min-height: 16px;
115
115
 
116
- border: 1px solid $ds-grey-300;
116
+ border: 1px solid $ds-grey-400;
117
117
  border-radius: 4px;
118
118
 
119
119
  background-color: white;
@@ -163,7 +163,7 @@
163
163
  padding-left: 16px;
164
164
 
165
165
  border-radius: 8px;
166
- border: 1px solid $ds-grey-300;
166
+ border: 1px solid $ds-grey-400;
167
167
  background-color: white;
168
168
 
169
169
  &:hover {
@@ -201,7 +201,7 @@ input:checked[type='checkbox'] + .p-label--bordered {
201
201
  height: 48px;
202
202
 
203
203
  border-radius: 8px;
204
- border: 1px solid $ds-grey-300;
204
+ border: 1px solid $ds-grey-400;
205
205
  background-color: white;
206
206
 
207
207
  font-family: inherit;
package/src/lib/scss/public/colors/default.scss CHANGED
@@ -41,8 +41,9 @@ $ds-pink-900: #700024;
41
41
 
42
42
  $ds-grey-100: #fafaff;
43
43
  $ds-grey-200: #f5f5fa;
44
- $ds-grey-300: #d2d2d8;
45
- $ds-grey-500: #b4b4ba;
44
+ $ds-grey-300: #ededf2;
45
+ $ds-grey-400: #d2d2d8;
46
+ $ds-grey-500: #848490;
46
47
  $ds-grey-600: #696970;
47
48
  $ds-grey-700: #4c4c53;
48
49
  $ds-grey-900: #26262e;
@@ -98,6 +99,7 @@ $colors: (
98
99
  'grey-100': $ds-grey-100,
99
100
  'grey-200': $ds-grey-200,
100
101
  'grey-300': $ds-grey-300,
102
+ 'grey-400': $ds-grey-400,
101
103
  'grey-500': $ds-grey-500,
102
104
  'grey-600': $ds-grey-600,
103
105
  'grey-700': $ds-grey-700,
package/src/lib/scss/third-party/_google_places.scss CHANGED
@@ -47,7 +47,7 @@
47
47
 
48
48
  .pac-container {
49
49
  background-color: white;
50
- border: 1px solid var(--ds-grey-300);
50
+ border: 1px solid var(--ds-grey-400);
51
51
  box-shadow: none;
52
52
  border-radius: 8px;
53
53
  margin-top: 8px;