@kvdbil/components 8.3.1 → 8.3.2
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),o=require("../../theme.js"),s=require("../../typography/BodyText/index.js"),i=require("../../icons/components/CheckmarkIcon.js"),a=require("../IconButton.js");function l(m){return m&&typeof m=="object"&&"default"in m?m:{default:m}}require("../../shared/media-queries.js");var d=l(e),c=l(r);const n={regular:r.css`
|
|
2
2
|
width: 24px;
|
|
3
3
|
height: 24px;
|
|
4
4
|
|
|
@@ -16,12 +16,13 @@
|
|
|
16
16
|
}
|
|
17
17
|
`},u=r.css`
|
|
18
18
|
cursor: default;
|
|
19
|
-
border: 2px solid ${
|
|
19
|
+
border: 2px solid ${o.default.colors.gray.light2};
|
|
20
20
|
`,h=r.css`
|
|
21
|
-
background: ${
|
|
21
|
+
background: ${o.default.colors.gray.light2};
|
|
22
22
|
`,p=c.default.div`
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
display: flex;
|
|
24
|
+
align-items: center;
|
|
25
|
+
box-sizing: border-box;
|
|
25
26
|
`,b=c.default.input.attrs({type:"checkbox"})`
|
|
26
27
|
position: absolute;
|
|
27
28
|
appearance: none;
|
|
@@ -32,20 +33,13 @@
|
|
|
32
33
|
outline: none;
|
|
33
34
|
cursor: pointer;
|
|
34
35
|
z-index: 1;
|
|
35
|
-
${
|
|
36
|
+
${m=>n[m.boxSize]};
|
|
36
37
|
|
|
37
38
|
:focus-visible {
|
|
38
|
-
height: calc(100% + 1.25rem);
|
|
39
|
-
width: calc(100% + 1.25rem);
|
|
40
|
-
top: -0.625rem;
|
|
41
|
-
left: -0.625rem;
|
|
42
|
-
|
|
43
|
-
appearance: initial;
|
|
44
|
-
border-radius: 10rem;
|
|
45
39
|
transition: background-color 400ms;
|
|
46
|
-
${
|
|
40
|
+
${a.BackgroundStyles}
|
|
47
41
|
}
|
|
48
|
-
`,
|
|
42
|
+
`,x=c.default.span`
|
|
49
43
|
box-sizing: border-box;
|
|
50
44
|
cursor: pointer;
|
|
51
45
|
display: flex;
|
|
@@ -54,16 +48,16 @@
|
|
|
54
48
|
justify-content: center;
|
|
55
49
|
z-index: 0;
|
|
56
50
|
|
|
57
|
-
border: 2px solid ${
|
|
51
|
+
border: 2px solid ${o.default.colors.gray.dark5};
|
|
58
52
|
|
|
59
|
-
${
|
|
53
|
+
${m=>n[m.size]};
|
|
60
54
|
|
|
61
55
|
svg {
|
|
62
56
|
opacity: 0;
|
|
63
|
-
color: ${({theme:
|
|
57
|
+
color: ${({theme:m})=>m.colors.common.white};
|
|
64
58
|
}
|
|
65
59
|
|
|
66
|
-
${
|
|
60
|
+
${m=>{return m.isChecked&&(y=m.color,r.css`
|
|
67
61
|
svg {
|
|
68
62
|
opacity: 1;
|
|
69
63
|
}
|
|
@@ -71,15 +65,15 @@
|
|
|
71
65
|
:hover {
|
|
72
66
|
}
|
|
73
67
|
|
|
74
|
-
background: ${
|
|
75
|
-
border: 2px solid ${
|
|
76
|
-
`);var
|
|
77
|
-
${
|
|
68
|
+
background: ${o.default.colors[y].main};
|
|
69
|
+
border: 2px solid ${o.default.colors[y].main};
|
|
70
|
+
`);var y}};
|
|
71
|
+
${m=>m.isDisabled&&u};
|
|
78
72
|
|
|
79
|
-
${
|
|
80
|
-
`,
|
|
81
|
-
cursor: ${({isDisabled:
|
|
73
|
+
${m=>m.isChecked&&m.isDisabled&&h};
|
|
74
|
+
`,g=c.default(s.BodyText)`
|
|
75
|
+
cursor: ${({isDisabled:m})=>m?"default":"pointer"};
|
|
82
76
|
user-select: none;
|
|
83
|
-
color: ${({theme:
|
|
77
|
+
color: ${({theme:m,isDisabled:y})=>y?m.colors.text.disabled:m.colors.text.dark};
|
|
84
78
|
margin-left: 0.5rem;
|
|
85
|
-
`,
|
|
79
|
+
`,f=({name:m=t.generateNameHash("check-box"),isDisabled:y=!1,size:k="regular",checked:$=!1,color:v="secondary",label:j,...q})=>d.default.createElement(p,null,d.default.createElement(b,{...q,type:"checkbox",checked:$,"data-validate":"checked",name:m,id:m,color:v,disabled:y,isDisabled:y,boxSize:k}),d.default.createElement(x,{size:k,color:v,isChecked:$,isDisabled:y},d.default.createElement(i.default,null)),j&&d.default.createElement(g,{as:"label",htmlFor:m,isDisabled:y},j));exports.CheckBox=f,exports.default=f;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import t from"react";import
|
|
1
|
+
import t from"react";import i,{css as r}from"styled-components";import{generateNameHash as m}from"../../shared/helpers.js";import s from"../../theme.js";import{BodyText as x}from"../../typography/BodyText/index.js";import g from"../../icons/components/CheckmarkIcon.js";import{BackgroundStyles as u}from"../IconButton.js";import"../../shared/media-queries.js";const b=r`
|
|
2
2
|
width: 24px;
|
|
3
3
|
height: 24px;
|
|
4
4
|
|
|
@@ -16,7 +16,7 @@ import t from"react";import c,{css as r}from"styled-components";import{generateN
|
|
|
16
16
|
}
|
|
17
17
|
`,d={regular:b,large:k},y=r`
|
|
18
18
|
cursor: default;
|
|
19
|
-
border: 2px solid ${
|
|
19
|
+
border: 2px solid ${s.colors.gray.light2};
|
|
20
20
|
`,f=e=>r`
|
|
21
21
|
svg {
|
|
22
22
|
opacity: 1;
|
|
@@ -25,14 +25,15 @@ import t from"react";import c,{css as r}from"styled-components";import{generateN
|
|
|
25
25
|
:hover {
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
background: ${
|
|
29
|
-
border: 2px solid ${
|
|
28
|
+
background: ${s.colors[e].main};
|
|
29
|
+
border: 2px solid ${s.colors[e].main};
|
|
30
30
|
`,$=r`
|
|
31
|
-
background: ${
|
|
32
|
-
`,v=
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
31
|
+
background: ${s.colors.gray.light2};
|
|
32
|
+
`,v=i.div`
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
`,z=i.input.attrs({type:"checkbox"})`
|
|
36
37
|
position: absolute;
|
|
37
38
|
appearance: none;
|
|
38
39
|
width: 100%;
|
|
@@ -45,17 +46,10 @@ import t from"react";import c,{css as r}from"styled-components";import{generateN
|
|
|
45
46
|
${e=>d[e.boxSize]};
|
|
46
47
|
|
|
47
48
|
:focus-visible {
|
|
48
|
-
height: calc(100% + 1.25rem);
|
|
49
|
-
width: calc(100% + 1.25rem);
|
|
50
|
-
top: -0.625rem;
|
|
51
|
-
left: -0.625rem;
|
|
52
|
-
|
|
53
|
-
appearance: initial;
|
|
54
|
-
border-radius: 10rem;
|
|
55
49
|
transition: background-color 400ms;
|
|
56
50
|
${u}
|
|
57
51
|
}
|
|
58
|
-
`,
|
|
52
|
+
`,C=i.span`
|
|
59
53
|
box-sizing: border-box;
|
|
60
54
|
cursor: pointer;
|
|
61
55
|
display: flex;
|
|
@@ -64,7 +58,7 @@ import t from"react";import c,{css as r}from"styled-components";import{generateN
|
|
|
64
58
|
justify-content: center;
|
|
65
59
|
z-index: 0;
|
|
66
60
|
|
|
67
|
-
border: 2px solid ${
|
|
61
|
+
border: 2px solid ${s.colors.gray.dark5};
|
|
68
62
|
|
|
69
63
|
${e=>d[e.size]};
|
|
70
64
|
|
|
@@ -77,9 +71,9 @@ import t from"react";import c,{css as r}from"styled-components";import{generateN
|
|
|
77
71
|
${e=>e.isDisabled&&y};
|
|
78
72
|
|
|
79
73
|
${e=>e.isChecked&&e.isDisabled&&$};
|
|
80
|
-
`,S=
|
|
74
|
+
`,S=i(x)`
|
|
81
75
|
cursor: ${({isDisabled:e})=>e?"default":"pointer"};
|
|
82
76
|
user-select: none;
|
|
83
77
|
color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
|
|
84
78
|
margin-left: 0.5rem;
|
|
85
|
-
`,h=({name:e=m("check-box"),isDisabled:o=!1,size:
|
|
79
|
+
`,h=({name:e=m("check-box"),isDisabled:o=!1,size:c="regular",checked:n=!1,color:a="secondary",label:l,...p})=>t.createElement(v,null,t.createElement(z,{...p,type:"checkbox",checked:n,"data-validate":"checked",name:e,id:e,color:a,disabled:o,isDisabled:o,boxSize:c}),t.createElement(C,{size:c,color:a,isChecked:n,isDisabled:o},t.createElement(g,null)),l&&t.createElement(S,{as:"label",htmlFor:e,isDisabled:o},l));export{h as CheckBox,h as default};
|