@kvdbil/components 8.1.1 → 8.3.1

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 (13) hide show
  1. package/cjs/components/CheckBox/index.js +23 -19
  2. package/cjs/components/IconButton.js +7 -7
  3. package/cjs/components/Message/index.js +1 -1
  4. package/cjs/components/RadioButton/index.js +29 -20
  5. package/esm/components/CheckBox/index.js +26 -22
  6. package/esm/components/IconButton.js +8 -8
  7. package/esm/components/Message/index.js +1 -1
  8. package/esm/components/RadioButton/index.js +30 -21
  9. package/package.json +1 -1
  10. package/types/components/CheckBox/index.d.ts +5 -6
  11. package/types/components/IconButton.d.ts +2 -1
  12. package/types/components/Message/index.d.ts +2 -2
  13. package/types/components/RadioButton/index.d.ts +3 -1
package/cjs/components/CheckBox/index.js CHANGED
@@ -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"),i=require("../../theme.js"),a=require("../../typography/BodyText/index.js"),o=require("../IconButton.js"),s=require("../../icons/components/CheckmarkIcon.js");function l(x){return x&&typeof x=="object"&&"default"in x?x:{default:x}}require("../../shared/media-queries.js");var d=l(e),c=l(r);const n={regular:r.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),i=require("../../theme.js"),o=require("../../typography/BodyText/index.js"),a=require("../../icons/components/CheckmarkIcon.js"),s=require("../IconButton.js");function l(f){return f&&typeof f=="object"&&"default"in f?f:{default:f}}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
 
@@ -20,9 +20,8 @@
20
20
  `,h=r.css`
21
21
  background: ${i.default.colors.gray.light2};
22
22
  `,p=c.default.div`
23
- display: flex;
24
- align-items: center;
25
- box-sizing: border-box;
23
+ position: relative;
24
+ display: inline-block;
26
25
  `,b=c.default.input.attrs({type:"checkbox"})`
27
26
  position: absolute;
28
27
  appearance: none;
@@ -30,17 +29,21 @@
30
29
  height: 100%;
31
30
  margin: 0;
32
31
  padding: 0;
32
+ outline: none;
33
+ cursor: pointer;
34
+ z-index: 1;
35
+ ${f=>n[f.boxSize]};
33
36
 
34
37
  :focus-visible {
35
- outline: none;
36
- height: calc(100% + 1rem);
37
- width: calc(100% + 1rem);
38
- top: -0.5rem;
39
- left: -0.5rem;
38
+ height: calc(100% + 1.25rem);
39
+ width: calc(100% + 1.25rem);
40
+ top: -0.625rem;
41
+ left: -0.625rem;
42
+
40
43
  appearance: initial;
41
44
  border-radius: 10rem;
42
45
  transition: background-color 400ms;
43
- ${o.BackgroundStyles}
46
+ ${s.BackgroundStyles}
44
47
  }
45
48
  `,m=c.default.span`
46
49
  box-sizing: border-box;
@@ -49,17 +52,18 @@
49
52
  position: relative;
50
53
  align-items: center;
51
54
  justify-content: center;
55
+ z-index: 0;
52
56
 
53
57
  border: 2px solid ${i.default.colors.gray.dark5};
54
58
 
55
- ${x=>n[x.size]};
59
+ ${f=>n[f.size]};
56
60
 
57
61
  svg {
58
62
  opacity: 0;
59
- color: ${({theme:x})=>x.colors.common.white};
63
+ color: ${({theme:f})=>f.colors.common.white};
60
64
  }
61
65
 
62
- ${x=>{return x.isChecked&&(k=x.color,r.css`
66
+ ${f=>{return f.isChecked&&(k=f.color,r.css`
63
67
  svg {
64
68
  opacity: 1;
65
69
  }
@@ -70,12 +74,12 @@
70
74
  background: ${i.default.colors[k].main};
71
75
  border: 2px solid ${i.default.colors[k].main};
72
76
  `);var k}};
73
- ${x=>x.isDisabled&&u};
77
+ ${f=>f.isDisabled&&u};
74
78
 
75
- ${x=>x.isChecked&&x.isDisabled&&h};
76
- `,f=c.default(a.BodyText)`
77
- cursor: ${({isDisabled:x})=>x?"default":"pointer"};
79
+ ${f=>f.isChecked&&f.isDisabled&&h};
80
+ `,x=c.default(o.BodyText)`
81
+ cursor: ${({isDisabled:f})=>f?"default":"pointer"};
78
82
  user-select: none;
79
- color: ${({theme:x,isDisabled:k})=>k?x.colors.text.disabled:x.colors.text.dark};
83
+ color: ${({theme:f,isDisabled:k})=>k?f.colors.text.disabled:f.colors.text.dark};
80
84
  margin-left: 0.5rem;
81
- `,g=({name:x=t.generateNameHash("check-box"),isDisabled:k=!1,size:j="regular",checked:v,color:y="secondary",onClick:q,label:$,...D})=>d.default.createElement(p,null,d.default.createElement(o.default,{onClick:q,isActive:v,isDisabled:k,color:y},d.default.createElement(b,{...D,"data-validate":"checked",name:x,id:x,color:y,disabled:k,isDisabled:k}),d.default.createElement(m,{size:j,color:y,isChecked:v,isDisabled:k},d.default.createElement(s.default,null))),$&&d.default.createElement(f,{as:"label",htmlFor:x,isDisabled:k},$));exports.CheckBox=g,exports.default=g;
85
+ `,g=({name:f=t.generateNameHash("check-box"),isDisabled:k=!1,size:y="regular",checked:v=!1,color:$="secondary",label:j,...q})=>d.default.createElement(p,null,d.default.createElement(b,{...q,type:"checkbox",checked:v,"data-validate":"checked",name:f,id:f,color:$,disabled:k,isDisabled:k,boxSize:y}),d.default.createElement(m,{size:y,color:$,isChecked:v,isDisabled:k},d.default.createElement(a.default,null)),j&&d.default.createElement(x,{as:"label",htmlFor:f,isDisabled:k},j));exports.CheckBox=g,exports.default=g;
package/cjs/components/IconButton.js CHANGED
@@ -1,9 +1,9 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var i=o(e),r=o(t);const c=t.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("styled-components");function o(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var i=o(e),r=o(t);const n=t.css`
2
2
  background-color: transparent;
3
- `,n=t.css`
3
+ `,c=t.css`
4
4
  background-color: ${({theme:s,color:b})=>s.colors[b].main};
5
5
  opacity: 0.1;
6
- ${s=>s.isDisabled&&c};
6
+ ${s=>s.isDisabled&&n};
7
7
  `,a=r.default.div`
8
8
  cursor: ${s=>s.isDisabled?"default":"pointer"};
9
9
  outline: none;
@@ -20,7 +20,7 @@
20
20
  :hover {
21
21
  .button-background {
22
22
  transition: background-color ${"400ms"};
23
- ${n}
23
+ ${c}
24
24
  }
25
25
  }
26
26
 
@@ -28,14 +28,14 @@
28
28
  .button-background {
29
29
  transition: background-color ${"400ms"};
30
30
  animation: FocusRipple ${"1500ms"} 0ms infinite alternate-reverse;
31
- ${n}
31
+ ${c}
32
32
  }
33
33
  }
34
34
 
35
35
  :active {
36
36
  .button-background {
37
37
  animation: ActiveRipple ${"750ms"};
38
- ${n}
38
+ ${c}
39
39
  }
40
40
  }
41
41
 
@@ -72,4 +72,4 @@
72
72
 
73
73
  position: absolute;
74
74
  border-radius: 10rem;
75
- `;exports.BackgroundStyles=n,exports.default=({children:s,isActive:b,isDisabled:p,onClick:d,color:f})=>i.default.createElement(a,{color:f,isActive:b,isDisabled:p,onClick:u=>{u.stopPropagation(),u.preventDefault(),u.persist(),p||typeof d!="function"||d(u)},onKeyDown:u=>{u.key!=="Enter"||p||typeof d!="function"||(u.persist(),d(u))},tabIndex:p?void 0:0},i.default.createElement(l,{className:"button-background"}),s);
75
+ `;exports.BackgroundStyles=c,exports.default=({children:s,isActive:b,isDisabled:p,onClick:d,noTabIndex:f=!1,color:m})=>i.default.createElement(a,{color:m,isActive:b,isDisabled:p,onClick:u=>{u.stopPropagation(),u.preventDefault(),u.persist(),p||typeof d!="function"||d(u)},onKeyDown:u=>{u.key!=="Enter"||p||typeof d!="function"||(u.persist(),d(u))},tabIndex:p||f?void 0:0},i.default.createElement(l,{className:"button-background"}),s);
package/cjs/components/Message/index.js CHANGED
@@ -31,4 +31,4 @@
31
31
  font-size: 2.5rem;
32
32
  cursor: pointer;
33
33
  }
34
- `;exports.default=({content:x,type:E,withIcon:j=!1,isDeletable:q=!1,fullWidth:w=!1,inverted:I=!1,...b})=>{const k=e.useRef(null),[y,v]=e.useState(!1);return i.default.createElement(d,{isDeleted:y},i.default.createElement(f,{messageType:E,fullWidth:w,inverted:I,role:"alert",ref:k,...b},i.default.createElement(m,null,j&&i.default.createElement(p,null,($=>{switch($){case"success":return i.default.createElement(l.default,null);case"warning":return i.default.createElement(s.default,null);case"error":return i.default.createElement(n.default,null);case"info":case"text":default:return i.default.createElement(o.default,null)}})(E)),i.default.createElement(g,null,x)),q&&i.default.createElement(h,{onClick:$=>{$.stopPropagation(),v(!0),setTimeout(()=>{k.current&&k.current.remove()},300)},"aria-label":"Close"},i.default.createElement(a.default,null))))};
34
+ `;exports.default=({children:x,type:E,withIcon:j=!1,isDeletable:q=!1,fullWidth:w=!1,inverted:I=!1,...b})=>{const k=e.useRef(null),[y,v]=e.useState(!1);return i.default.createElement(d,{isDeleted:y},i.default.createElement(f,{messageType:E,fullWidth:w,inverted:I,role:"alert",ref:k,...b},i.default.createElement(m,null,j&&i.default.createElement(p,null,($=>{switch($){case"success":return i.default.createElement(l.default,null);case"warning":return i.default.createElement(s.default,null);case"error":return i.default.createElement(n.default,null);case"info":case"text":default:return i.default.createElement(o.default,null)}})(E)),i.default.createElement(g,null,x)),q&&i.default.createElement(h,{onClick:$=>{$.stopPropagation(),v(!0),setTimeout(()=>{k.current&&k.current.remove()},300)},"aria-label":"Close"},i.default.createElement(a.default,null))))};
package/cjs/components/RadioButton/index.js CHANGED
@@ -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"),o=require("../../theme.js"),a=require("../IconButton.js");function i(b){return b&&typeof b=="object"&&"default"in b?b:{default:b}}var l=i(e),s=i(r);const c={regular:r.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("styled-components"),t=require("../../shared/helpers.js"),a=require("../../theme.js"),l=require("../IconButton.js"),i=require("../../typography/BodyText/index.js");function o(y){return y&&typeof y=="object"&&"default"in y?y:{default:y}}require("../../shared/media-queries.js");var s=o(e),d=o(r);const c={regular:r.css`
2
2
  .circle {
3
3
  &--outer {
4
4
  height: 24px;
@@ -24,65 +24,74 @@
24
24
  transform: scale(0.6);
25
25
  }
26
26
  }
27
- `},d=r.css`
27
+ `},n=r.css`
28
28
  cursor: default;
29
29
 
30
30
  .circle {
31
31
  &--inner {
32
- background-color: ${o.default.colors.gray.light1};
32
+ background-color: ${a.default.colors.gray.light1};
33
33
  }
34
34
 
35
35
  &--outer {
36
- border: 2px solid ${o.default.colors.gray.light1};
36
+ border: 2px solid ${a.default.colors.gray.light1};
37
37
  }
38
38
  }
39
- `,n=r.css`
39
+ `,u=r.css`
40
40
  .circle {
41
41
  &--inner {
42
42
  opacity: 1;
43
- background-color: ${o.default.colors.gray.light1};
43
+ background-color: ${a.default.colors.gray.light1};
44
44
  }
45
45
  }
46
- `,u=s.default.label`
46
+ `,f=d.default.div`
47
+ display: flex;
48
+ align-items: center;
49
+ box-sizing: border-box;
50
+ `,b=d.default.span`
47
51
  cursor: pointer;
48
52
  display: flex;
49
53
  position: relative;
50
54
  align-items: center;
51
55
  justify-content: center;
52
56
 
53
- ${b=>c[b.size]};
57
+ ${y=>c[y.size]};
54
58
 
55
- ${b=>{return!b.isDisabled&&b.isChecked&&(m=b.color,r.css`
59
+ ${y=>{return!y.isDisabled&&y.isChecked&&($=y.color,r.css`
56
60
  .circle {
57
61
  &--inner {
58
62
  opacity: 1;
59
- background-color: ${o.default.colors[m].main};
63
+ background-color: ${a.default.colors[$].main};
60
64
  }
61
65
 
62
66
  &--outer {
63
- border: 2px solid ${o.default.colors[m].main};
67
+ border: 2px solid ${a.default.colors[$].main};
64
68
  }
65
69
  }
66
- `);var m}};
67
- ${b=>b.isDisabled&&d};
70
+ `);var $}};
71
+ ${y=>y.isDisabled&&n};
68
72
 
69
- ${b=>b.isChecked&&b.isDisabled&&n};
70
- `,f=s.default.input`
73
+ ${y=>y.isChecked&&y.isDisabled&&u};
74
+ `,p=d.default.input`
71
75
  display: none;
72
- `,h=s.default.span`
76
+ `,g=d.default.span`
73
77
  display: flex;
74
78
  box-sizing: border-box;
75
79
  border-radius: 50%;
76
80
 
77
- border: 2px solid ${o.default.colors.gray.light1};
78
- `,g=s.default.span`
81
+ border: 2px solid ${a.default.colors.gray.light1};
82
+ `,h=d.default.span`
79
83
  box-sizing: border-box;
80
84
  opacity: 0;
81
85
  margin: auto;
82
86
  border-radius: 50%;
83
- background-color: ${o.default.colors.gray.light1};
87
+ background-color: ${a.default.colors.gray.light1};
84
88
 
85
89
  position: absolute;
86
90
  top: 0;
87
91
  left: 0;
88
- `,p=({name:b=t.generateNameHash("radio-button"),size:m="regular",checked:x=!1,isDisabled:y=!1,color:$="secondary",onChange:k,...v})=>l.default.createElement(a.default,{onClick:k,isActive:x,isDisabled:y,color:$},l.default.createElement(f,{"data-validate":"checked",type:"radio",name:b,id:b,onChange:k,disabled:y,...v}),l.default.createElement(u,{htmlFor:b,size:m,color:$,isChecked:x,isDisabled:y},l.default.createElement(h,{className:"circle circle--outer"},l.default.createElement(g,{className:"circle circle--inner"}))));exports.RadioButton=p,exports.default=p;
92
+ `,m=d.default(i.BodyText)`
93
+ cursor: ${({isDisabled:y})=>y?"default":"pointer"};
94
+ user-select: none;
95
+ color: ${({theme:y,isDisabled:$})=>$?y.colors.text.disabled:y.colors.text.dark};
96
+ margin-left: 0.5rem;
97
+ `,x=({name:y=t.generateNameHash("radio-button"),size:$="regular",checked:D=!1,isDisabled:k=!1,color:j="secondary",onChange:q,label:v,...E})=>s.default.createElement(f,null,s.default.createElement(l.default,{onClick:q,isActive:D,isDisabled:k,color:j},s.default.createElement(p,{"data-validate":"checked",type:"radio",name:y,id:y,onChange:q,disabled:k,...E}),s.default.createElement(b,{size:$,color:j,isChecked:D,isDisabled:k},s.default.createElement(g,{className:"circle circle--outer"},s.default.createElement(h,{className:"circle circle--inner"})))),v&&s.default.createElement(m,{as:"label",htmlFor:y,isDisabled:k},v));exports.RadioButton=x,exports.default=x;
package/esm/components/CheckBox/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import o from"react";import c,{css as r}from"styled-components";import{generateNameHash as p}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import x,{BackgroundStyles as u}from"../IconButton.js";import b from"../../icons/components/CheckmarkIcon.js";import"../../shared/media-queries.js";const k=r`
1
+ import t from"react";import c,{css as r}from"styled-components";import{generateNameHash as m}from"../../shared/helpers.js";import i from"../../theme.js";import{BodyText as g}from"../../typography/BodyText/index.js";import x 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
 
@@ -6,7 +6,7 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
6
6
  width: 15px;
7
7
  height: 15px;
8
8
  }
9
- `,y=r`
9
+ `,k=r`
10
10
  width: 32px;
11
11
  height: 32px;
12
12
 
@@ -14,10 +14,10 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
14
14
  width: 22px;
15
15
  height: 22px;
16
16
  }
17
- `,f={regular:k,large:y},$=r`
17
+ `,d={regular:b,large:k},y=r`
18
18
  cursor: default;
19
19
  border: 2px solid ${i.colors.gray.light2};
20
- `,v=e=>r`
20
+ `,f=e=>r`
21
21
  svg {
22
22
  opacity: 1;
23
23
  }
@@ -27,26 +27,29 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
27
27
 
28
28
  background: ${i.colors[e].main};
29
29
  border: 2px solid ${i.colors[e].main};
30
- `,C=r`
30
+ `,$=r`
31
31
  background: ${i.colors.gray.light2};
32
- `,j=c.div`
33
- display: flex;
34
- align-items: center;
35
- box-sizing: border-box;
36
- `,w=c.input.attrs({type:"checkbox"})`
32
+ `,v=c.div`
33
+ position: relative;
34
+ display: inline-block;
35
+ `,C=c.input.attrs({type:"checkbox"})`
37
36
  position: absolute;
38
37
  appearance: none;
39
38
  width: 100%;
40
39
  height: 100%;
41
40
  margin: 0;
42
41
  padding: 0;
42
+ outline: none;
43
+ cursor: pointer;
44
+ z-index: 1;
45
+ ${e=>d[e.boxSize]};
43
46
 
44
47
  :focus-visible {
45
- outline: none;
46
- height: calc(100% + 1rem);
47
- width: calc(100% + 1rem);
48
- top: -0.5rem;
49
- left: -0.5rem;
48
+ height: calc(100% + 1.25rem);
49
+ width: calc(100% + 1.25rem);
50
+ top: -0.625rem;
51
+ left: -0.625rem;
52
+
50
53
  appearance: initial;
51
54
  border-radius: 10rem;
52
55
  transition: background-color 400ms;
@@ -59,23 +62,24 @@ import o from"react";import c,{css as r}from"styled-components";import{generateN
59
62
  position: relative;
60
63
  align-items: center;
61
64
  justify-content: center;
65
+ z-index: 0;
62
66
 
63
67
  border: 2px solid ${i.colors.gray.dark5};
64
68
 
65
- ${e=>f[e.size]};
69
+ ${e=>d[e.size]};
66
70
 
67
71
  svg {
68
72
  opacity: 0;
69
73
  color: ${({theme:e})=>e.colors.common.white};
70
74
  }
71
75
 
72
- ${e=>e.isChecked&&v(e.color)};
73
- ${e=>e.isDisabled&&$};
76
+ ${e=>e.isChecked&&f(e.color)};
77
+ ${e=>e.isDisabled&&y};
74
78
 
75
- ${e=>e.isChecked&&e.isDisabled&&C};
76
- `,B=c(g)`
79
+ ${e=>e.isChecked&&e.isDisabled&&$};
80
+ `,S=c(g)`
77
81
  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
78
82
  user-select: none;
79
- color: ${({theme:e,isDisabled:t})=>t?e.colors.text.disabled:e.colors.text.dark};
83
+ color: ${({theme:e,isDisabled:o})=>o?e.colors.text.disabled:e.colors.text.dark};
80
84
  margin-left: 0.5rem;
81
- `,l=({name:e=p("check-box"),isDisabled:t=!1,size:d="regular",checked:a,color:s="secondary",onClick:m,label:n,...h})=>o.createElement(j,null,o.createElement(x,{onClick:m,isActive:a,isDisabled:t,color:s},o.createElement(w,{...h,"data-validate":"checked",name:e,id:e,color:s,disabled:t,isDisabled:t}),o.createElement(z,{size:d,color:s,isChecked:a,isDisabled:t},o.createElement(b,null))),n&&o.createElement(B,{as:"label",htmlFor:e,isDisabled:t},n));export{l as CheckBox,l as default};
85
+ `,h=({name:e=m("check-box"),isDisabled:o=!1,size:s="regular",checked:a=!1,color:n="secondary",label:l,...p})=>t.createElement(v,null,t.createElement(C,{...p,type:"checkbox",checked:a,"data-validate":"checked",name:e,id:e,color:n,disabled:o,isDisabled:o,boxSize:s}),t.createElement(z,{size:s,color:n,isChecked:a,isDisabled:o},t.createElement(x,null)),l&&t.createElement(S,{as:"label",htmlFor:e,isDisabled:o},l));export{h as CheckBox,h as default};
package/esm/components/IconButton.js CHANGED
@@ -1,10 +1,10 @@
1
- import i from"react";import a,{css as s}from"styled-components";const m=s`
1
+ import a from"react";import i,{css as s}from"styled-components";const f=s`
2
2
  background-color: transparent;
3
- `,l="400ms",f="1500ms",b="750ms",c=s`
3
+ `,l="400ms",b="1500ms",k="750ms",c=s`
4
4
  background-color: ${({theme:o,color:r})=>o.colors[r].main};
5
5
  opacity: 0.1;
6
- ${o=>o.isDisabled&&m};
7
- `,k=a.div`
6
+ ${o=>o.isDisabled&&f};
7
+ `,g=i.div`
8
8
  cursor: ${o=>o.isDisabled?"default":"pointer"};
9
9
  outline: none;
10
10
 
@@ -27,14 +27,14 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
27
27
  :focus {
28
28
  .button-background {
29
29
  transition: background-color ${l};
30
- animation: FocusRipple ${f} 0ms infinite alternate-reverse;
30
+ animation: FocusRipple ${b} 0ms infinite alternate-reverse;
31
31
  ${c}
32
32
  }
33
33
  }
34
34
 
35
35
  :active {
36
36
  .button-background {
37
- animation: ActiveRipple ${b};
37
+ animation: ActiveRipple ${k};
38
38
  ${c}
39
39
  }
40
40
  }
@@ -62,7 +62,7 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
62
62
  clip-path: circle(50%);
63
63
  }
64
64
  }
65
- `,g=a.div`
65
+ `,h=i.div`
66
66
  top: 0;
67
67
  left: 0;
68
68
 
@@ -72,4 +72,4 @@ import i from"react";import a,{css as s}from"styled-components";const m=s`
72
72
 
73
73
  position: absolute;
74
74
  border-radius: 10rem;
75
- `,h=({children:o,isActive:r,isDisabled:e,onClick:n,color:p})=>{const u=t=>{t.key==="Enter"&&!e&&typeof n=="function"&&(t.persist(),n(t))},d=t=>{t.stopPropagation(),t.preventDefault(),t.persist(),!e&&typeof n=="function"&&n(t)};return i.createElement(k,{color:p,isActive:r,isDisabled:e,onClick:d,onKeyDown:u,tabIndex:e?void 0:0},i.createElement(g,{className:"button-background"}),o)};export{c as BackgroundStyles,h as default};
75
+ `,y=({children:o,isActive:r,isDisabled:e,onClick:n,noTabIndex:p=!1,color:u})=>{const d=t=>{t.key==="Enter"&&!e&&typeof n=="function"&&(t.persist(),n(t))},m=t=>{t.stopPropagation(),t.preventDefault(),t.persist(),!e&&typeof n=="function"&&n(t)};return a.createElement(g,{color:u,isActive:r,isDisabled:e,onClick:m,onKeyDown:d,tabIndex:e||p?void 0:0},a.createElement(h,{className:"button-background"}),o)};export{c as BackgroundStyles,y as default};
package/esm/components/Message/index.js CHANGED
@@ -31,4 +31,4 @@ import n,{useRef as f,useState as d}from"react";import s from"styled-components"
31
31
  font-size: 2.5rem;
32
32
  cursor: pointer;
33
33
  }
34
- `,R=({content:r,type:o,withIcon:e=!1,isDeletable:t=!1,fullWidth:c=!1,inverted:l=!1,...i})=>{const a=f(null),[u,p]=d(!1),g=m=>{m.stopPropagation(),p(!0),setTimeout(()=>{a.current&&a.current.remove()},300)};return n.createElement(w,{isDeleted:u},n.createElement(W,{messageType:o,fullWidth:c,inverted:l,role:"alert",ref:a,...i},n.createElement($,null,e&&n.createElement(T,null,j(o)),n.createElement(h,null,r)),t&&n.createElement(D,{onClick:g,"aria-label":"Close"},n.createElement(C,null))))};export{R as default};
34
+ `,R=({children:r,type:o,withIcon:e=!1,isDeletable:t=!1,fullWidth:c=!1,inverted:l=!1,...i})=>{const a=f(null),[u,p]=d(!1),g=m=>{m.stopPropagation(),p(!0),setTimeout(()=>{a.current&&a.current.remove()},300)};return n.createElement(w,{isDeleted:u},n.createElement(W,{messageType:o,fullWidth:c,inverted:l,role:"alert",ref:a,...i},n.createElement($,null,e&&n.createElement(T,null,j(o)),n.createElement(h,null,r)),t&&n.createElement(D,{onClick:g,"aria-label":"Close"},n.createElement(C,null))))};export{R as default};
package/esm/components/RadioButton/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import t from"react";import i,{css as o}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import r from"../../theme.js";import h from"../IconButton.js";const m=o`
1
+ import r from"react";import o,{css as i}from"styled-components";import{generateNameHash as p}from"../../shared/helpers.js";import t from"../../theme.js";import g from"../IconButton.js";import{BodyText as h}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const b=i`
2
2
  .circle {
3
3
  &--outer {
4
4
  height: 24px;
@@ -11,7 +11,7 @@ import t from"react";import i,{css as o}from"styled-components";import{generateN
11
11
  transform: scale(0.6);
12
12
  }
13
13
  }
14
- `,p=o`
14
+ `,y=i`
15
15
  .circle {
16
16
  &--outer {
17
17
  height: 32px;
@@ -24,65 +24,74 @@ import t from"react";import i,{css as o}from"styled-components";import{generateN
24
24
  transform: scale(0.6);
25
25
  }
26
26
  }
27
- `,b={regular:m,large:p},y=o`
27
+ `,x={regular:b,large:y},f=i`
28
28
  cursor: default;
29
29
 
30
30
  .circle {
31
31
  &--inner {
32
- background-color: ${r.colors.gray.light1};
32
+ background-color: ${t.colors.gray.light1};
33
33
  }
34
34
 
35
35
  &--outer {
36
- border: 2px solid ${r.colors.gray.light1};
36
+ border: 2px solid ${t.colors.gray.light1};
37
37
  }
38
38
  }
39
- `,f=o`
39
+ `,$=i`
40
40
  .circle {
41
41
  &--inner {
42
42
  opacity: 1;
43
- background-color: ${r.colors.gray.light1};
43
+ background-color: ${t.colors.gray.light1};
44
44
  }
45
45
  }
46
- `,x=e=>o`
46
+ `,k=e=>i`
47
47
  .circle {
48
48
  &--inner {
49
49
  opacity: 1;
50
- background-color: ${r.colors[e].main};
50
+ background-color: ${t.colors[e].main};
51
51
  }
52
52
 
53
53
  &--outer {
54
- border: 2px solid ${r.colors[e].main};
54
+ border: 2px solid ${t.colors[e].main};
55
55
  }
56
56
  }
57
- `,$=i.label`
57
+ `,z=o.div`
58
+ display: flex;
59
+ align-items: center;
60
+ box-sizing: border-box;
61
+ `,B=o.span`
58
62
  cursor: pointer;
59
63
  display: flex;
60
64
  position: relative;
61
65
  align-items: center;
62
66
  justify-content: center;
63
67
 
64
- ${e=>b[e.size]};
68
+ ${e=>x[e.size]};
65
69
 
66
- ${e=>!e.isDisabled&&e.isChecked&&x(e.color)};
67
- ${e=>e.isDisabled&&y};
70
+ ${e=>!e.isDisabled&&e.isChecked&&k(e.color)};
71
+ ${e=>e.isDisabled&&f};
68
72
 
69
- ${e=>e.isChecked&&e.isDisabled&&f};
70
- `,k=i.input`
73
+ ${e=>e.isChecked&&e.isDisabled&&$};
74
+ `,E=o.input`
71
75
  display: none;
72
- `,z=i.span`
76
+ `,j=o.span`
73
77
  display: flex;
74
78
  box-sizing: border-box;
75
79
  border-radius: 50%;
76
80
 
77
- border: 2px solid ${r.colors.gray.light1};
78
- `,B=i.span`
81
+ border: 2px solid ${t.colors.gray.light1};
82
+ `,C=o.span`
79
83
  box-sizing: border-box;
80
84
  opacity: 0;
81
85
  margin: auto;
82
86
  border-radius: 50%;
83
- background-color: ${r.colors.gray.light1};
87
+ background-color: ${t.colors.gray.light1};
84
88
 
85
89
  position: absolute;
86
90
  top: 0;
87
91
  left: 0;
88
- `,n=({name:e=g("radio-button"),size:d="regular",checked:l=!1,isDisabled:c=!1,color:a="secondary",onChange:s,...u})=>t.createElement(h,{onClick:s,isActive:l,isDisabled:c,color:a},t.createElement(k,{"data-validate":"checked",type:"radio",name:e,id:e,onChange:s,disabled:c,...u}),t.createElement($,{htmlFor:e,size:d,color:a,isChecked:l,isDisabled:c},t.createElement(z,{className:"circle circle--outer"},t.createElement(B,{className:"circle circle--inner"}))));export{n as RadioButton,n as default};
92
+ `,S=o(h)`
93
+ cursor: ${({isDisabled:e})=>e?"default":"pointer"};
94
+ user-select: none;
95
+ color: ${({theme:e,isDisabled:l})=>l?e.colors.text.disabled:e.colors.text.dark};
96
+ margin-left: 0.5rem;
97
+ `,m=({name:e=p("radio-button"),size:l="regular",checked:s=!1,isDisabled:c=!1,color:a="secondary",onChange:n,label:d,...u})=>r.createElement(z,null,r.createElement(g,{onClick:n,isActive:s,isDisabled:c,color:a},r.createElement(E,{"data-validate":"checked",type:"radio",name:e,id:e,onChange:n,disabled:c,...u}),r.createElement(B,{size:l,color:a,isChecked:s,isDisabled:c},r.createElement(j,{className:"circle circle--outer"},r.createElement(C,{className:"circle circle--inner"})))),d&&r.createElement(S,{as:"label",htmlFor:e,isDisabled:c},d));export{m as RadioButton,m as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "8.1.1",
3
+ "version": "8.3.1",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
package/types/components/CheckBox/index.d.ts CHANGED
@@ -1,14 +1,13 @@
1
- import { ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  import { CheckboxSize, Color } from '../../Types';
3
- export interface CheckBoxProps {
3
+ declare type ComponentPropsWithoutSize = Omit<ComponentPropsWithoutRef<'input'>, 'size'>;
4
+ export interface CheckBoxProps extends ComponentPropsWithoutSize {
4
5
  name?: string;
5
6
  size?: CheckboxSize;
6
- value?: string;
7
7
  color?: Color;
8
- checked: boolean;
8
+ checked?: boolean;
9
9
  isDisabled?: boolean;
10
- onClick?(): void;
11
10
  label?: ReactNode;
12
11
  }
13
- export declare const CheckBox: ({ name, isDisabled, size, checked, color, onClick, label, ...rest }: CheckBoxProps) => JSX.Element;
12
+ export declare const CheckBox: ({ name, isDisabled, size, checked, color, label, ...rest }: CheckBoxProps) => JSX.Element;
14
13
  export default CheckBox;
package/types/components/IconButton.d.ts CHANGED
@@ -9,7 +9,8 @@ interface Props {
9
9
  children: ReactNode;
10
10
  isActive: boolean;
11
11
  isDisabled: boolean;
12
+ noTabIndex?: boolean;
12
13
  onClick?(event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void;
13
14
  }
14
- declare const IconButton: ({ children, isActive, isDisabled, onClick, color, }: Props) => JSX.Element;
15
+ declare const IconButton: ({ children, isActive, isDisabled, onClick, noTabIndex, color, }: Props) => JSX.Element;
15
16
  export default IconButton;
package/types/components/Message/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  declare type MessageType = 'text' | 'info' | 'success' | 'warning' | 'error';
3
3
  export declare type Props = {
4
- content: ReactNode;
4
+ children: ReactNode;
5
5
  type: MessageType;
6
6
  withIcon?: boolean;
7
7
  isDeletable?: boolean;
8
8
  fullWidth?: boolean;
9
9
  inverted?: boolean;
10
10
  } & ComponentPropsWithoutRef<'div'>;
11
- declare const Message: ({ content, type, withIcon, isDeletable, fullWidth, inverted, ...props }: Props) => JSX.Element;
11
+ declare const Message: ({ children, type, withIcon, isDeletable, fullWidth, inverted, ...props }: Props) => JSX.Element;
12
12
  export default Message;
package/types/components/RadioButton/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ReactNode } from 'react';
1
2
  import { RadioButtonSize, Color } from '../../Types';
2
3
  export interface RadioButtonProps {
3
4
  name?: string;
@@ -6,6 +7,7 @@ export interface RadioButtonProps {
6
7
  checked?: boolean;
7
8
  isDisabled?: boolean;
8
9
  onChange?(): void;
10
+ label?: ReactNode;
9
11
  }
10
- export declare const RadioButton: ({ name, size, checked, isDisabled, color, onChange, ...props }: RadioButtonProps) => JSX.Element;
12
+ export declare const RadioButton: ({ name, size, checked, isDisabled, color, onChange, label, ...props }: RadioButtonProps) => JSX.Element;
11
13
  export default RadioButton;