@kvdbil/components 8.1.1 → 8.2.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.
Files changed (4) hide show
  1. package/cjs/components/RadioButton/index.js +29 -20
  2. package/esm/components/RadioButton/index.js +30 -21
  3. package/package.json +1 -1
  4. package/types/components/RadioButton/index.d.ts +3 -1
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/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.2.0",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
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;