@snack-uikit/status 0.5.4-preview-1f246c4a.0 → 0.5.4-preview-7adaddbe.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/cjs/components/Status/Status.js +4 -1
- package/dist/cjs/components/Status/styles.module.css +47 -0
- package/dist/cjs/components/StatusIndicator/StatusIndicator.js +4 -1
- package/dist/cjs/components/StatusIndicator/styles.module.css +87 -0
- package/dist/esm/components/Status/styles.module.css +47 -0
- package/dist/esm/components/StatusIndicator/styles.module.css +87 -0
- package/package.json +3 -3
|
@@ -23,7 +23,10 @@ const utils_1 = require("@snack-uikit/utils");
|
|
|
23
23
|
const constants_1 = require("../../constants");
|
|
24
24
|
const StatusIndicator_1 = require("../StatusIndicator");
|
|
25
25
|
const constants_2 = require("./constants");
|
|
26
|
-
const styles_module_scss_1 = __importDefault({
|
|
26
|
+
const styles_module_scss_1 = __importDefault({
|
|
27
|
+
"container": "styles-module__container___21Ck2",
|
|
28
|
+
"label": "styles-module__label___3nfmb"
|
|
29
|
+
});
|
|
27
30
|
function Status(_a) {
|
|
28
31
|
var {
|
|
29
32
|
label,
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.container{
|
|
2
|
+
display:inline-flex;
|
|
3
|
+
align-items:center;
|
|
4
|
+
}
|
|
5
|
+
.container[data-has-background]{
|
|
6
|
+
background-color:var(--sys-neutral-decor-default, #dde0ea);
|
|
7
|
+
}
|
|
8
|
+
.container[data-has-background][data-size=xs]{
|
|
9
|
+
height:var(--size-status-background-container-xs, 16px);
|
|
10
|
+
padding-right:var(--spacing-status-background-container-padding-right-xs, 4px);
|
|
11
|
+
padding-left:var(--spacing-status-background-container-padding-left-xs, 4px);
|
|
12
|
+
gap:var(--spacing-status-container-gap-single, 2px);
|
|
13
|
+
border-radius:var(--radius-status-xs, 6px);
|
|
14
|
+
}
|
|
15
|
+
.container[data-has-background][data-size=s]{
|
|
16
|
+
height:var(--size-status-background-container-s, 24px);
|
|
17
|
+
padding-right:var(--spacing-status-background-container-padding-right-s, 8px);
|
|
18
|
+
padding-left:var(--spacing-status-background-container-padding-left-s, 4px);
|
|
19
|
+
gap:var(--spacing-status-container-gap-single, 2px);
|
|
20
|
+
border-radius:var(--radius-status-s, 8px);
|
|
21
|
+
}
|
|
22
|
+
.container[data-size=xs]{
|
|
23
|
+
gap:var(--spacing-status-container-gap-single, 2px);
|
|
24
|
+
}
|
|
25
|
+
.container[data-size=xs] .label{
|
|
26
|
+
font-family:var(--sans-label-s-font-family, SB Sans Interface);
|
|
27
|
+
font-weight:var(--sans-label-s-font-weight, Semibold);
|
|
28
|
+
line-height:var(--sans-label-s-line-height, 14px);
|
|
29
|
+
font-size:var(--sans-label-s-font-size, 11px);
|
|
30
|
+
letter-spacing:var(--sans-label-s-letter-spacing, 0px);
|
|
31
|
+
paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
|
|
32
|
+
}
|
|
33
|
+
.container[data-size=s]{
|
|
34
|
+
gap:var(--spacing-status-container-gap-single, 2px);
|
|
35
|
+
}
|
|
36
|
+
.container[data-size=s] .label{
|
|
37
|
+
font-family:var(--sans-label-m-font-family, SB Sans Interface);
|
|
38
|
+
font-weight:var(--sans-label-m-font-weight, Semibold);
|
|
39
|
+
line-height:var(--sans-label-m-line-height, 16px);
|
|
40
|
+
font-size:var(--sans-label-m-font-size, 12px);
|
|
41
|
+
letter-spacing:var(--sans-label-m-letter-spacing, 0px);
|
|
42
|
+
paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.label{
|
|
46
|
+
color:var(--sys-neutral-text-support, #6d707f);
|
|
47
|
+
}
|
|
@@ -22,7 +22,10 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
22
22
|
const utils_1 = require("@snack-uikit/utils");
|
|
23
23
|
const constants_1 = require("../../constants");
|
|
24
24
|
const constants_2 = require("./constants");
|
|
25
|
-
const styles_module_scss_1 = __importDefault({
|
|
25
|
+
const styles_module_scss_1 = __importDefault({
|
|
26
|
+
"container": "styles-module__container___3GudW",
|
|
27
|
+
"indicator": "styles-module__indicator___VZLJA"
|
|
28
|
+
});
|
|
26
29
|
function StatusIndicator(_a) {
|
|
27
30
|
var {
|
|
28
31
|
size = constants_2.SIZE.M,
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
.container{
|
|
2
|
+
display:inline-flex;
|
|
3
|
+
align-items:center;
|
|
4
|
+
justify-content:center;
|
|
5
|
+
}
|
|
6
|
+
.container[data-size=xxs]{
|
|
7
|
+
width:var(--size-status-indicator-container-xxs, 4px);
|
|
8
|
+
height:var(--size-status-indicator-container-xxs, 4px);
|
|
9
|
+
}
|
|
10
|
+
.container[data-size=xxs] .indicator{
|
|
11
|
+
border-radius:var(--radius-status-indicator-xxs, 2px);
|
|
12
|
+
border-width:var(--border-width-general-xxs, 0.5px);
|
|
13
|
+
width:var(--size-status-indicator-xxs, 4px);
|
|
14
|
+
height:var(--size-status-indicator-xxs, 4px);
|
|
15
|
+
}
|
|
16
|
+
.container[data-size=xs]{
|
|
17
|
+
width:var(--size-status-indicator-container-xs, 8px);
|
|
18
|
+
height:var(--size-status-indicator-container-xs, 8px);
|
|
19
|
+
}
|
|
20
|
+
.container[data-size=xs] .indicator{
|
|
21
|
+
border-radius:var(--radius-status-indicator-xs, 4px);
|
|
22
|
+
border-width:var(--border-width-general-s, 1.5px);
|
|
23
|
+
width:var(--size-status-indicator-xs, 8px);
|
|
24
|
+
height:var(--size-status-indicator-xs, 8px);
|
|
25
|
+
}
|
|
26
|
+
.container[data-size=s]{
|
|
27
|
+
width:var(--size-status-indicator-container-s, 16px);
|
|
28
|
+
height:var(--size-status-indicator-container-s, 16px);
|
|
29
|
+
}
|
|
30
|
+
.container[data-size=s] .indicator{
|
|
31
|
+
border-radius:var(--radius-status-indicator-s, 8px);
|
|
32
|
+
border-width:var(--border-width-general-m, 2px);
|
|
33
|
+
width:var(--size-status-indicator-s, 12px);
|
|
34
|
+
height:var(--size-status-indicator-s, 12px);
|
|
35
|
+
}
|
|
36
|
+
.container[data-size=m]{
|
|
37
|
+
width:var(--size-status-indicator-container-m, 16px);
|
|
38
|
+
height:var(--size-status-indicator-container-m, 16px);
|
|
39
|
+
}
|
|
40
|
+
.container[data-size=m] .indicator{
|
|
41
|
+
border-radius:var(--radius-status-indicator-m, 8px);
|
|
42
|
+
border-width:var(--border-width-general-l, 3px);
|
|
43
|
+
width:var(--size-status-indicator-m, 16px);
|
|
44
|
+
height:var(--size-status-indicator-m, 16px);
|
|
45
|
+
}
|
|
46
|
+
.container[data-size=l]{
|
|
47
|
+
width:var(--size-status-indicator-container-l, 24px);
|
|
48
|
+
height:var(--size-status-indicator-container-l, 24px);
|
|
49
|
+
}
|
|
50
|
+
.container[data-size=l] .indicator{
|
|
51
|
+
border-radius:var(--radius-status-indicator-l, 16px);
|
|
52
|
+
border-width:var(--border-width-general-xl, 4px);
|
|
53
|
+
width:var(--size-status-indicator-l, 24px);
|
|
54
|
+
height:var(--size-status-indicator-l, 24px);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.indicator{
|
|
58
|
+
box-sizing:border-box;
|
|
59
|
+
border:0 solid var(--sys-neutral-background1-level, #fdfdfd);
|
|
60
|
+
}
|
|
61
|
+
.indicator[data-appearance=primary]{
|
|
62
|
+
background-color:var(--sys-primary-accent-default, #794ed3);
|
|
63
|
+
}
|
|
64
|
+
.indicator[data-appearance=neutral]{
|
|
65
|
+
background-color:var(--sys-neutral-accent-default, #787b8a);
|
|
66
|
+
}
|
|
67
|
+
.indicator[data-appearance=red]{
|
|
68
|
+
background-color:var(--sys-red-accent-default, #cb3f3e);
|
|
69
|
+
}
|
|
70
|
+
.indicator[data-appearance=orange]{
|
|
71
|
+
background-color:var(--sys-orange-accent-default, #fb8e42);
|
|
72
|
+
}
|
|
73
|
+
.indicator[data-appearance=yellow]{
|
|
74
|
+
background-color:var(--sys-yellow-accent-default, #e2b134);
|
|
75
|
+
}
|
|
76
|
+
.indicator[data-appearance=green]{
|
|
77
|
+
background-color:var(--sys-green-accent-default, #57b762);
|
|
78
|
+
}
|
|
79
|
+
.indicator[data-appearance=blue]{
|
|
80
|
+
background-color:var(--sys-blue-accent-default, #5388d1);
|
|
81
|
+
}
|
|
82
|
+
.indicator[data-appearance=violet]{
|
|
83
|
+
background-color:var(--sys-violet-accent-default, #aa6cc1);
|
|
84
|
+
}
|
|
85
|
+
.indicator[data-appearance=pink]{
|
|
86
|
+
background-color:var(--sys-pink-accent-default, #d1668e);
|
|
87
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.container{
|
|
2
|
+
display:inline-flex;
|
|
3
|
+
align-items:center;
|
|
4
|
+
}
|
|
5
|
+
.container[data-has-background]{
|
|
6
|
+
background-color:var(--sys-neutral-decor-default, #dde0ea);
|
|
7
|
+
}
|
|
8
|
+
.container[data-has-background][data-size=xs]{
|
|
9
|
+
height:var(--size-status-background-container-xs, 16px);
|
|
10
|
+
padding-right:var(--spacing-status-background-container-padding-right-xs, 4px);
|
|
11
|
+
padding-left:var(--spacing-status-background-container-padding-left-xs, 4px);
|
|
12
|
+
gap:var(--spacing-status-container-gap-single, 2px);
|
|
13
|
+
border-radius:var(--radius-status-xs, 6px);
|
|
14
|
+
}
|
|
15
|
+
.container[data-has-background][data-size=s]{
|
|
16
|
+
height:var(--size-status-background-container-s, 24px);
|
|
17
|
+
padding-right:var(--spacing-status-background-container-padding-right-s, 8px);
|
|
18
|
+
padding-left:var(--spacing-status-background-container-padding-left-s, 4px);
|
|
19
|
+
gap:var(--spacing-status-container-gap-single, 2px);
|
|
20
|
+
border-radius:var(--radius-status-s, 8px);
|
|
21
|
+
}
|
|
22
|
+
.container[data-size=xs]{
|
|
23
|
+
gap:var(--spacing-status-container-gap-single, 2px);
|
|
24
|
+
}
|
|
25
|
+
.container[data-size=xs] .label{
|
|
26
|
+
font-family:var(--sans-label-s-font-family, SB Sans Interface);
|
|
27
|
+
font-weight:var(--sans-label-s-font-weight, Semibold);
|
|
28
|
+
line-height:var(--sans-label-s-line-height, 14px);
|
|
29
|
+
font-size:var(--sans-label-s-font-size, 11px);
|
|
30
|
+
letter-spacing:var(--sans-label-s-letter-spacing, 0px);
|
|
31
|
+
paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
|
|
32
|
+
}
|
|
33
|
+
.container[data-size=s]{
|
|
34
|
+
gap:var(--spacing-status-container-gap-single, 2px);
|
|
35
|
+
}
|
|
36
|
+
.container[data-size=s] .label{
|
|
37
|
+
font-family:var(--sans-label-m-font-family, SB Sans Interface);
|
|
38
|
+
font-weight:var(--sans-label-m-font-weight, Semibold);
|
|
39
|
+
line-height:var(--sans-label-m-line-height, 16px);
|
|
40
|
+
font-size:var(--sans-label-m-font-size, 12px);
|
|
41
|
+
letter-spacing:var(--sans-label-m-letter-spacing, 0px);
|
|
42
|
+
paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.label{
|
|
46
|
+
color:var(--sys-neutral-text-support, #6d707f);
|
|
47
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
.container{
|
|
2
|
+
display:inline-flex;
|
|
3
|
+
align-items:center;
|
|
4
|
+
justify-content:center;
|
|
5
|
+
}
|
|
6
|
+
.container[data-size=xxs]{
|
|
7
|
+
width:var(--size-status-indicator-container-xxs, 4px);
|
|
8
|
+
height:var(--size-status-indicator-container-xxs, 4px);
|
|
9
|
+
}
|
|
10
|
+
.container[data-size=xxs] .indicator{
|
|
11
|
+
border-radius:var(--radius-status-indicator-xxs, 2px);
|
|
12
|
+
border-width:var(--border-width-general-xxs, 0.5px);
|
|
13
|
+
width:var(--size-status-indicator-xxs, 4px);
|
|
14
|
+
height:var(--size-status-indicator-xxs, 4px);
|
|
15
|
+
}
|
|
16
|
+
.container[data-size=xs]{
|
|
17
|
+
width:var(--size-status-indicator-container-xs, 8px);
|
|
18
|
+
height:var(--size-status-indicator-container-xs, 8px);
|
|
19
|
+
}
|
|
20
|
+
.container[data-size=xs] .indicator{
|
|
21
|
+
border-radius:var(--radius-status-indicator-xs, 4px);
|
|
22
|
+
border-width:var(--border-width-general-s, 1.5px);
|
|
23
|
+
width:var(--size-status-indicator-xs, 8px);
|
|
24
|
+
height:var(--size-status-indicator-xs, 8px);
|
|
25
|
+
}
|
|
26
|
+
.container[data-size=s]{
|
|
27
|
+
width:var(--size-status-indicator-container-s, 16px);
|
|
28
|
+
height:var(--size-status-indicator-container-s, 16px);
|
|
29
|
+
}
|
|
30
|
+
.container[data-size=s] .indicator{
|
|
31
|
+
border-radius:var(--radius-status-indicator-s, 8px);
|
|
32
|
+
border-width:var(--border-width-general-m, 2px);
|
|
33
|
+
width:var(--size-status-indicator-s, 12px);
|
|
34
|
+
height:var(--size-status-indicator-s, 12px);
|
|
35
|
+
}
|
|
36
|
+
.container[data-size=m]{
|
|
37
|
+
width:var(--size-status-indicator-container-m, 16px);
|
|
38
|
+
height:var(--size-status-indicator-container-m, 16px);
|
|
39
|
+
}
|
|
40
|
+
.container[data-size=m] .indicator{
|
|
41
|
+
border-radius:var(--radius-status-indicator-m, 8px);
|
|
42
|
+
border-width:var(--border-width-general-l, 3px);
|
|
43
|
+
width:var(--size-status-indicator-m, 16px);
|
|
44
|
+
height:var(--size-status-indicator-m, 16px);
|
|
45
|
+
}
|
|
46
|
+
.container[data-size=l]{
|
|
47
|
+
width:var(--size-status-indicator-container-l, 24px);
|
|
48
|
+
height:var(--size-status-indicator-container-l, 24px);
|
|
49
|
+
}
|
|
50
|
+
.container[data-size=l] .indicator{
|
|
51
|
+
border-radius:var(--radius-status-indicator-l, 16px);
|
|
52
|
+
border-width:var(--border-width-general-xl, 4px);
|
|
53
|
+
width:var(--size-status-indicator-l, 24px);
|
|
54
|
+
height:var(--size-status-indicator-l, 24px);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.indicator{
|
|
58
|
+
box-sizing:border-box;
|
|
59
|
+
border:0 solid var(--sys-neutral-background1-level, #fdfdfd);
|
|
60
|
+
}
|
|
61
|
+
.indicator[data-appearance=primary]{
|
|
62
|
+
background-color:var(--sys-primary-accent-default, #794ed3);
|
|
63
|
+
}
|
|
64
|
+
.indicator[data-appearance=neutral]{
|
|
65
|
+
background-color:var(--sys-neutral-accent-default, #787b8a);
|
|
66
|
+
}
|
|
67
|
+
.indicator[data-appearance=red]{
|
|
68
|
+
background-color:var(--sys-red-accent-default, #cb3f3e);
|
|
69
|
+
}
|
|
70
|
+
.indicator[data-appearance=orange]{
|
|
71
|
+
background-color:var(--sys-orange-accent-default, #fb8e42);
|
|
72
|
+
}
|
|
73
|
+
.indicator[data-appearance=yellow]{
|
|
74
|
+
background-color:var(--sys-yellow-accent-default, #e2b134);
|
|
75
|
+
}
|
|
76
|
+
.indicator[data-appearance=green]{
|
|
77
|
+
background-color:var(--sys-green-accent-default, #57b762);
|
|
78
|
+
}
|
|
79
|
+
.indicator[data-appearance=blue]{
|
|
80
|
+
background-color:var(--sys-blue-accent-default, #5388d1);
|
|
81
|
+
}
|
|
82
|
+
.indicator[data-appearance=violet]{
|
|
83
|
+
background-color:var(--sys-violet-accent-default, #aa6cc1);
|
|
84
|
+
}
|
|
85
|
+
.indicator[data-appearance=pink]{
|
|
86
|
+
background-color:var(--sys-pink-accent-default, #d1668e);
|
|
87
|
+
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Status",
|
|
7
|
-
"version": "0.5.4-preview-
|
|
7
|
+
"version": "0.5.4-preview-7adaddbe.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -34,8 +34,8 @@
|
|
|
34
34
|
"license": "Apache-2.0",
|
|
35
35
|
"scripts": {},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@snack-uikit/utils": "3.4.1-preview-
|
|
37
|
+
"@snack-uikit/utils": "3.4.1-preview-7adaddbe.0",
|
|
38
38
|
"classnames": "2.3.2"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "22ebb9f5f7f3407dd6a2a31baf58dab13199b158"
|
|
41
41
|
}
|