@popsure/dirty-swan 0.25.2 → 0.26.0
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/index.css +4261 -111
- package/dist/index.css.map +1 -1
- package/dist/index.js +16 -11
- package/dist/index.js.map +1 -1
- package/dist/lib/components/input/autoSuggestInput/index.d.ts +2 -1
- package/dist/lib/components/input/autoSuggestMultiSelect/index.d.ts +2 -1
- package/dist/lib/scss/private/base/_grid.scss +36 -0
- package/dist/lib/scss/private/base/_index.scss +1 -0
- package/dist/lib/scss/private/base/_spacing.scss +61 -24
- package/dist/lib/scss/private/base/flex/_flex.scss +67 -0
- package/dist/lib/scss/private/base/flex/style.module.scss +24 -0
- package/dist/lib/scss/private/components/_notices.scss +13 -1
- package/dist/lib/scss/public/grid.scss +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Option } from '../../../models/autoSuggestInput';
|
|
3
|
-
declare const _default: ({ currentOption, suggestions, handleSuggestionSelected, onChange, handleSuggestionFetchRequest, handleSuggestionClearRequest, placeholder, className, }: {
|
|
3
|
+
declare const _default: ({ currentOption, suggestions, handleSuggestionSelected, onChange, handleSuggestionFetchRequest, handleSuggestionClearRequest, placeholder, className, wrapText, }: {
|
|
4
4
|
currentOption: string;
|
|
5
5
|
suggestions: Option[];
|
|
6
6
|
handleSuggestionSelected: (value: Option) => void;
|
|
@@ -9,5 +9,6 @@ declare const _default: ({ currentOption, suggestions, handleSuggestionSelected,
|
|
|
9
9
|
handleSuggestionClearRequest: () => void;
|
|
10
10
|
placeholder: string;
|
|
11
11
|
className?: string | undefined;
|
|
12
|
+
wrapText?: boolean | undefined;
|
|
12
13
|
}) => JSX.Element;
|
|
13
14
|
export default _default;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Option } from '../../../models/autoSuggestInput';
|
|
3
|
-
declare const _default: ({ options, selectedValues, setValues, placeholder, chipsListClassName, multiSelectClassName, }: {
|
|
3
|
+
declare const _default: ({ options, selectedValues, setValues, placeholder, chipsListClassName, multiSelectClassName, wrapText, }: {
|
|
4
4
|
options: Option[];
|
|
5
5
|
selectedValues?: Option[] | undefined;
|
|
6
6
|
setValues: (values: Option[]) => void;
|
|
7
7
|
placeholder: string;
|
|
8
8
|
chipsListClassName?: string | undefined;
|
|
9
9
|
multiSelectClassName?: string | undefined;
|
|
10
|
+
wrapText?: boolean | undefined;
|
|
10
11
|
}) => JSX.Element;
|
|
11
12
|
export default _default;
|
|
@@ -14,3 +14,39 @@
|
|
|
14
14
|
margin: 0 auto;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
+
|
|
18
|
+
// Taken from https://gist.github.com/Bamieh/912a6f0b63cbb53f3ad0bd8df7171c6a
|
|
19
|
+
@function remove-dot-from-class($class) {
|
|
20
|
+
$class-string: quote($class);
|
|
21
|
+
@return if(
|
|
22
|
+
str-slice($class-string, 0, 1) == '.',
|
|
23
|
+
str-slice($class-string, 2, str-length($class-string)),
|
|
24
|
+
$class-string
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@mixin add-responsive {
|
|
29
|
+
$selector: remove-dot-from-class(#{&});
|
|
30
|
+
@content;
|
|
31
|
+
|
|
32
|
+
// We need to use @at-root to prevent the following rules to be nested inside the selector
|
|
33
|
+
@at-root {
|
|
34
|
+
.sm\:#{$selector} {
|
|
35
|
+
@include grid.p-size-mobile {
|
|
36
|
+
@content;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.md\:#{$selector} {
|
|
41
|
+
@include grid.p-size-tablet {
|
|
42
|
+
@content;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.lg\:#{$selector} {
|
|
47
|
+
@include grid.p-size-desktop {
|
|
48
|
+
@content;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -1,43 +1,80 @@
|
|
|
1
|
+
@use 'grid';
|
|
2
|
+
|
|
1
3
|
@for $i from 0 through 12 {
|
|
2
|
-
.
|
|
3
|
-
|
|
4
|
+
.m#{$i * 8} {
|
|
5
|
+
@include grid.add-responsive {
|
|
6
|
+
margin: $i * 8px;
|
|
7
|
+
}
|
|
4
8
|
}
|
|
5
|
-
}
|
|
6
9
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
+
.p#{$i * 8} {
|
|
11
|
+
@include grid.add-responsive {
|
|
12
|
+
padding: $i * 8px;
|
|
13
|
+
}
|
|
10
14
|
}
|
|
11
15
|
}
|
|
12
16
|
|
|
17
|
+
// Spacing left & right
|
|
13
18
|
@for $i from 0 through 12 {
|
|
14
|
-
.
|
|
15
|
-
|
|
19
|
+
.mx#{$i * 8} {
|
|
20
|
+
@include grid.add-responsive {
|
|
21
|
+
margin-left: $i * 8px;
|
|
22
|
+
margin-right: $i * 8px;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.px#{$i * 8} {
|
|
27
|
+
@include grid.add-responsive {
|
|
28
|
+
padding-left: $i * 8px;
|
|
29
|
+
padding-right: $i * 8px;
|
|
30
|
+
}
|
|
16
31
|
}
|
|
17
32
|
}
|
|
18
33
|
|
|
34
|
+
// Spacing up & down
|
|
19
35
|
@for $i from 0 through 12 {
|
|
20
|
-
.
|
|
21
|
-
|
|
36
|
+
.my#{$i * 8} {
|
|
37
|
+
@include grid.add-responsive {
|
|
38
|
+
margin-top: $i * 8px;
|
|
39
|
+
margin-bottom: $i * 8px;
|
|
40
|
+
}
|
|
22
41
|
}
|
|
23
|
-
}
|
|
24
42
|
|
|
25
|
-
.
|
|
26
|
-
|
|
43
|
+
.py#{$i * 8} {
|
|
44
|
+
@include grid.add-responsive {
|
|
45
|
+
padding-top: $i * 8px;
|
|
46
|
+
padding-bottom: $i * 8px;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
27
49
|
}
|
|
28
50
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
51
|
+
// Spacing for each specific area
|
|
52
|
+
$valid_areas: (
|
|
53
|
+
't': 'top',
|
|
54
|
+
'b': 'bottom',
|
|
55
|
+
'l': 'left',
|
|
56
|
+
'r': 'right',
|
|
57
|
+
);
|
|
32
58
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
59
|
+
@each $key, $area in $valid_areas {
|
|
60
|
+
@for $i from 0 through 12 {
|
|
61
|
+
.m#{$key}#{$i * 8} {
|
|
62
|
+
@include grid.add-responsive {
|
|
63
|
+
margin-#{$area}: $i * 8px;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
36
66
|
|
|
37
|
-
.
|
|
38
|
-
|
|
39
|
-
}
|
|
67
|
+
.p#{$key}#{$i * 8} {
|
|
68
|
+
@include grid.add-responsive {
|
|
69
|
+
padding-#{$area}: $i * 8px;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
40
73
|
|
|
41
|
-
|
|
42
|
-
|
|
74
|
+
// Auto value for margin
|
|
75
|
+
.m#{$key}-auto {
|
|
76
|
+
@include grid.add-responsive {
|
|
77
|
+
margin-#{$area}: auto;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
43
80
|
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
@use '../../../private/base/grid';
|
|
2
|
+
|
|
3
|
+
/** Shared values across align and justify properties */
|
|
4
|
+
$common-values: (
|
|
5
|
+
'start': flex-start,
|
|
6
|
+
'end': flex-end,
|
|
7
|
+
'center': center,
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
$align-values: map-merge(
|
|
11
|
+
$common-values,
|
|
12
|
+
(
|
|
13
|
+
'stretch': stretch,
|
|
14
|
+
'baseline': baseline,
|
|
15
|
+
)
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
$jutify-values: map-merge(
|
|
19
|
+
$common-values,
|
|
20
|
+
(
|
|
21
|
+
'between': space-between,
|
|
22
|
+
'around': space-around,
|
|
23
|
+
'evenly': space-evenly,
|
|
24
|
+
)
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
// Align items
|
|
28
|
+
@each $name, $value in $align-values {
|
|
29
|
+
.ai-#{$name} {
|
|
30
|
+
@include grid.add-responsive {
|
|
31
|
+
align-items: $value;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Justify content
|
|
37
|
+
@each $name, $value in $jutify-values {
|
|
38
|
+
.jc-#{$name} {
|
|
39
|
+
@include grid.add-responsive {
|
|
40
|
+
justify-content: $value;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.fd-row {
|
|
46
|
+
flex-direction: row !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.fd-row-reverse {
|
|
50
|
+
flex-direction: row-reverse !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.fd-column {
|
|
54
|
+
flex-direction: column !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.fd-column-reverse {
|
|
58
|
+
flex-direction: column-reverse !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.f-wrap {
|
|
62
|
+
flex-wrap: wrap;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.f-nowrap {
|
|
66
|
+
flex-wrap: nowrap;
|
|
67
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
margin-bottom: 24px;
|
|
3
|
+
background-color: #f8f8f8 !important;
|
|
4
|
+
border: 1px solid #d2d2d7;
|
|
5
|
+
border-radius: 8px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.ai-container {
|
|
9
|
+
height: 200px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.item {
|
|
13
|
+
margin: 8px !important;
|
|
14
|
+
background-color: white !important;
|
|
15
|
+
border: 1px solid #d2d2d7;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ai-item-2 {
|
|
19
|
+
min-height: 100px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.ai-item-3 {
|
|
23
|
+
min-height: 80px;
|
|
24
|
+
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
border: 1px solid;
|
|
6
6
|
border-radius: 8px;
|
|
7
7
|
|
|
8
|
-
&--
|
|
8
|
+
&--primary {
|
|
9
9
|
@extend .p-notice;
|
|
10
10
|
background-color: $ds-purple-100;
|
|
11
11
|
border-color: $ds-purple-500;
|
|
@@ -24,4 +24,16 @@
|
|
|
24
24
|
background-color: $ds-yellow-100;
|
|
25
25
|
border-color: $ds-yellow-500;
|
|
26
26
|
}
|
|
27
|
+
|
|
28
|
+
&--success {
|
|
29
|
+
@extend .p-notice;
|
|
30
|
+
background-color: $ds-green-100;
|
|
31
|
+
border-color: $ds-green-500;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&--info {
|
|
35
|
+
@extend .p-notice;
|
|
36
|
+
background-color: $ds-blue-100;
|
|
37
|
+
border-color: $ds-blue-500;
|
|
38
|
+
}
|
|
27
39
|
}
|