@kvdbil/components 15.0.2 → 15.0.4

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 (10) hide show
  1. package/cjs/components/Breadcrumbs/BreadcrumbsItem.js +8 -7
  2. package/cjs/components/Breadcrumbs/index.js +1 -1
  3. package/cjs/components/RadioButton/index.js +27 -22
  4. package/esm/components/Breadcrumbs/BreadcrumbsItem.js +19 -9
  5. package/esm/components/Breadcrumbs/index.js +2 -2
  6. package/esm/components/RadioButton/index.js +20 -15
  7. package/package.json +1 -1
  8. package/package.json.tmp +1 -1
  9. package/types/components/Breadcrumbs/BreadcrumbsItem.d.ts +2 -1
  10. package/types/components/Breadcrumbs/index.d.ts +2 -1
package/cjs/components/Breadcrumbs/BreadcrumbsItem.js CHANGED
@@ -1,20 +1,21 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var i,o=(i=t)&&i.__esModule?i:{default:i};const l=o.default.li`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),n=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var r,o=(r=t)&&r.__esModule?r:{default:r};const i=o.default.li`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  margin: 0;
5
5
  text-indent: 0;
6
6
  list-style-type: none;
7
- overflow: hidden;
7
+ ${({$onlyLastTruncated:e})=>!e&&"\n overflow: hidden;\n "}
8
8
 
9
9
  a {
10
- ${r.BodyTextStyle}
10
+ ${n.BodyTextStyle}
11
11
  font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
12
12
  color: ${({theme:e})=>e.colors.info.main};
13
13
  text-decoration: none;
14
- overflow: hidden;
15
- text-overflow: ellipsis;
14
+ ${({$onlyLastTruncated:e})=>!e&&"\n overflow: hidden;\n text-overflow: ellipsis;\n "}
16
15
  }
17
- `,n=o.default(r.BodyText)`
16
+
17
+ ${({$onlyLastTruncated:e})=>e&&"\n &:last-child {\n overflow: hidden;\n }\n "}
18
+ `,l=o.default(n.BodyText)`
18
19
  color: ${({theme:e})=>e.colors.text.dark};
19
20
  overflow: hidden;
20
21
  text-overflow: ellipsis;
@@ -33,4 +34,4 @@
33
34
  width: 1rem;
34
35
  height: 1rem;
35
36
  }
36
- `;exports.default=({link:t,separator:r,isLast:i})=>e.jsx(e.Fragment,{children:e.jsxs(l,{children:[t.prefixIcon&&e.jsx(s,{children:t.prefixIcon}),i?e.jsx(n,{as:"span",children:t.component}):e.jsxs(e.Fragment,{children:[t.component,e.jsx(d,{children:r})]})]})});
37
+ `;exports.default=({link:t,separator:n,isLast:r,onlyLastTruncated:o})=>e.jsx(e.Fragment,{children:e.jsxs(i,{$onlyLastTruncated:o,children:[t.prefixIcon&&e.jsx(s,{children:t.prefixIcon}),r?e.jsx(l,{as:"span",children:t.component}):e.jsxs(e.Fragment,{children:[t.component,e.jsx(d,{children:n})]})]})});
package/cjs/components/Breadcrumbs/index.js CHANGED
@@ -4,4 +4,4 @@
4
4
  padding: 0;
5
5
  white-space: nowrap;
6
6
  overflow: hidden;
7
- `;exports.default=({links:e,separator:s=r.jsx(a.default,{})})=>r.jsx(i,{children:e.map(((a,i)=>r.jsx(t.default,{link:a,separator:s,isLast:i===e.length-1},i)))});
7
+ `;exports.default=({links:e,separator:s=r.jsx(a.default,{}),onlyLastTruncated:n=!1})=>r.jsx(i,{children:e.map(((a,i)=>r.jsx(t.default,{link:a,separator:s,isLast:i===e.length-1,onlyLastTruncated:n},i)))});
package/cjs/components/RadioButton/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),i=require("../../shared/helpers.js"),s=require("../../theme.js"),o=require("../../typography/BodyText/index.js");require("../../shared/media-queries.js");var a,l=(a=r)&&a.__esModule?a:{default:a};const t={regular:r.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),s=require("../../shared/helpers.js"),i=require("../../theme.js"),o=require("../../typography/BodyText/index.js"),a=require("../IconButton.js");require("../../shared/media-queries.js");var l,t=(l=r)&&l.__esModule?l:{default:l};const c={regular:r.css`
2
2
  .circle {
3
3
  &--outer {
4
4
  height: 24px;
@@ -29,76 +29,81 @@
29
29
 
30
30
  .circle {
31
31
  &--inner {
32
- background-color: ${s.default.colors.gray.light1};
32
+ background-color: ${i.default.colors.gray.light1};
33
33
  }
34
34
 
35
35
  &--outer {
36
- border: 2px solid ${s.default.colors.gray.light1};
36
+ border: 2px solid ${i.default.colors.gray.light1};
37
37
  }
38
38
  }
39
- `,c=r.css`
39
+ `,n=r.css`
40
40
  .circle {
41
41
  &--inner {
42
42
  opacity: 1;
43
- background-color: ${s.default.colors.gray.light1};
43
+ background-color: ${i.default.colors.gray.light1};
44
44
  }
45
45
  }
46
- `,n=l.default.div`
46
+ `,u=t.default.div`
47
47
  display: flex;
48
48
  align-items: center;
49
49
  box-sizing: border-box;
50
- `,u=l.default.span`
50
+ `,h=t.default.span`
51
51
  cursor: pointer;
52
52
  display: flex;
53
53
  position: relative;
54
54
  align-items: center;
55
55
  justify-content: center;
56
56
 
57
- ${e=>t[e.size]};
57
+ ${e=>c[e.size]};
58
58
 
59
- ${e=>!e.isDisabled&&e.isChecked&&((e,i)=>r.css`
59
+ ${e=>!e.isDisabled&&e.isChecked&&((e,s)=>r.css`
60
60
  .circle {
61
61
  &--inner {
62
62
  opacity: 1;
63
- background-color: ${s.default.colors[e].main};
63
+ background-color: ${i.default.colors[e].main};
64
64
  }
65
65
 
66
66
  &--outer {
67
67
  border: 2px solid
68
- ${i?s.default.colors.error.dark:s.default.colors[e].main};
68
+ ${s?i.default.colors.error.dark:i.default.colors[e].main};
69
69
  }
70
70
  }
71
71
  `)(e.color,e.$hasError)};
72
72
  ${e=>e.isDisabled&&d};
73
73
 
74
- ${e=>e.isChecked&&e.isDisabled&&c};
75
- `,h=l.default.input`
76
- position: fixed;
74
+ ${e=>e.isChecked&&e.isDisabled&&n};
75
+ `,b=t.default.input`
76
+ position: absolute;
77
77
  opacity: 0;
78
78
  margin: 0;
79
- ${e=>!e.$isDisabled&&"cursor: pointer;"}
79
+ ${e=>!e.isDisabled&&"cursor: pointer;"}
80
80
  z-index: 1;
81
- ${e=>t[e.$size]};
82
- `,b=l.default.span`
81
+ ${e=>c[e.$size]};
82
+
83
+ :focus-visible {
84
+ transition: background-color 400ms;
85
+ ${a.BackgroundStyles}
86
+ }
87
+ `,p=t.default.span`
83
88
  display: flex;
84
89
  box-sizing: border-box;
85
90
  border-radius: 50%;
86
91
 
87
92
  border: 2px solid
88
- ${e=>e.$hasError?s.default.colors.error.dark:s.default.colors.gray.light1};
89
- `,p=l.default.span`
93
+ ${e=>e.$hasError?i.default.colors.error.dark:i.default.colors.gray.light1};
94
+ `,g=t.default.span`
90
95
  box-sizing: border-box;
91
96
  opacity: 0;
92
97
  margin: auto;
93
98
  border-radius: 50%;
94
- background-color: ${s.default.colors.gray.light1};
99
+ background-color: ${i.default.colors.gray.light1};
95
100
 
96
101
  position: absolute;
97
102
  top: 0;
98
103
  left: 0;
99
- `,x=l.default(o.BodyText)`
104
+ `,x=t.default(o.BodyText)`
100
105
  cursor: ${({isDisabled:e})=>e?"default":"pointer"};
101
106
  user-select: none;
102
107
  color: ${({theme:e,isDisabled:r})=>r?e.colors.text.disabled:e.colors.text.dark};
103
108
  margin-left: 0.5rem;
104
- `,g=({name:r=i.generateNameHash("radio-button"),size:s="regular",checked:o=!1,isDisabled:a=!1,color:l="secondary",label:t,hasError:d,...c})=>e.jsxs(n,{children:[e.jsxs(u,{size:s,color:l,isChecked:o,isDisabled:a,$hasError:d,children:[e.jsx(h,{"data-validate":"checked",checked:o,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":o,className:"circle circle--outer",$size:s,$isDisabled:a,...c}),e.jsx(b,{className:"circle circle--outer",$hasError:d,children:e.jsx(p,{className:"circle circle--inner"})})]}),t&&e.jsx(x,{as:"label",htmlFor:r,isDisabled:a,children:t})]});exports.RadioButton=g,exports.default=g;
109
+ `,f=({name:r=s.generateNameHash("radio-button"),size:i="regular",checked:o=!1,isDisabled:a=!1,color:l="secondary",label:t,hasError:c,...d})=>e.jsxs(u,{children:[e.jsxs(h,{size:i,color:l,isChecked:o,isDisabled:a,$hasError:c,children:[e.jsx(b,{"data-validate":"checked",checked:o,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":o,className:"circle circle--outer",$size:i,isDisabled:a,color:l,...d}),e.jsx(p,{className:"circle circle--outer",$hasError:c,children:e.jsx(g,{className:"circle circle--inner"})})]}),t&&e.jsx(x,{as:"label",htmlFor:r,isDisabled:a,children:t})]});exports.RadioButton=f,exports.default=f;
package/esm/components/Breadcrumbs/BreadcrumbsItem.js CHANGED
@@ -1,31 +1,41 @@
1
- import{jsx as o,Fragment as t,jsxs as r}from"react/jsx-runtime";import i from"styled-components";import{BodyTextStyle as d,BodyText as s}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const a=i.li`
1
+ import{jsx as t,Fragment as n,jsxs as i}from"react/jsx-runtime";import o from"styled-components";import{BodyTextStyle as a,BodyText as s}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const h=o.li`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  margin: 0;
5
5
  text-indent: 0;
6
6
  list-style-type: none;
7
- overflow: hidden;
7
+ ${({$onlyLastTruncated:e})=>!e&&`
8
+ overflow: hidden;
9
+ `}
8
10
 
9
11
  a {
10
- ${d}
12
+ ${a}
11
13
  font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
12
14
  color: ${({theme:e})=>e.colors.info.main};
13
15
  text-decoration: none;
14
- overflow: hidden;
15
- text-overflow: ellipsis;
16
+ ${({$onlyLastTruncated:e})=>!e&&`
17
+ overflow: hidden;
18
+ text-overflow: ellipsis;
19
+ `}
16
20
  }
17
- `,h=i(s)`
21
+
22
+ ${({$onlyLastTruncated:e})=>e&&`
23
+ &:last-child {
24
+ overflow: hidden;
25
+ }
26
+ `}
27
+ `,c=o(s)`
18
28
  color: ${({theme:e})=>e.colors.text.dark};
19
29
  overflow: hidden;
20
30
  text-overflow: ellipsis;
21
- `,m=i.span`
31
+ `,m=o.span`
22
32
  display: inline-flex;
23
33
  padding-right: 0.5rem;
24
34
  svg {
25
35
  width: 1rem;
26
36
  height: 1rem;
27
37
  }
28
- `,p=i.span`
38
+ `,p=o.span`
29
39
  display: inline-flex;
30
40
  padding: 0 0.5rem;
31
41
  color: ${({theme:e})=>e.colors.gray.light1};
@@ -33,4 +43,4 @@ import{jsx as o,Fragment as t,jsxs as r}from"react/jsx-runtime";import i from"st
33
43
  width: 1rem;
34
44
  height: 1rem;
35
45
  }
36
- `,c=({link:e,separator:n,isLast:l})=>o(t,{children:r(a,{children:[e.prefixIcon&&o(m,{children:e.prefixIcon}),l?o(h,{as:"span",children:e.component}):r(t,{children:[e.component,o(p,{children:n})]})]})});export{c as default};
46
+ `,f=({link:e,separator:r,isLast:l,onlyLastTruncated:d})=>t(n,{children:i(h,{$onlyLastTruncated:d,children:[e.prefixIcon&&t(m,{children:e.prefixIcon}),l?t(c,{as:"span",children:e.component}):i(n,{children:[e.component,t(p,{children:r})]})]})});export{f as default};
package/esm/components/Breadcrumbs/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import{jsx as r}from"react/jsx-runtime";import p from"styled-components";import a from"./BreadcrumbsItem.js";import m from"../../icons/components/NextIcon.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const n=p.ul`
1
+ import{jsx as r}from"react/jsx-runtime";import n from"styled-components";import p from"./BreadcrumbsItem.js";import m from"../../icons/components/NextIcon.js";import"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const s=n.ul`
2
2
  display: flex;
3
3
  align-items: center;
4
4
  padding: 0;
5
5
  white-space: nowrap;
6
6
  overflow: hidden;
7
- `,s=({links:o,separator:t=r(m,{})})=>r(n,{children:o.map((e,i)=>r(a,{link:e,separator:t,isLast:i===o.length-1},i))});export{s as default};
7
+ `,l=({links:t,separator:a=r(m,{}),onlyLastTruncated:e=!1})=>r(s,{children:t.map((i,o)=>r(p,{link:i,separator:a,isLast:o===t.length-1,onlyLastTruncated:e},o))});export{l as default};
package/esm/components/RadioButton/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled-components";import{generateNameHash as m}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as u}from"../../typography/BodyText/index.js";import"../../shared/media-queries.js";const x=s`
1
+ import{jsxs as b,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled-components";import{generateNameHash as g}from"../../shared/helpers.js";import e from"../../theme.js";import{BodyText as m}from"../../typography/BodyText/index.js";import{BackgroundStyles as x}from"../IconButton.js";import"../../shared/media-queries.js";const $=s`
2
2
  .circle {
3
3
  &--outer {
4
4
  height: 24px;
@@ -11,7 +11,7 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
11
11
  transform: scale(0.6);
12
12
  }
13
13
  }
14
- `,$=s`
14
+ `,f=s`
15
15
  .circle {
16
16
  &--outer {
17
17
  height: 32px;
@@ -24,7 +24,7 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
24
24
  transform: scale(0.6);
25
25
  }
26
26
  }
27
- `,h={regular:x,large:$},f=s`
27
+ `,h={regular:$,large:f},y=s`
28
28
  cursor: default;
29
29
 
30
30
  .circle {
@@ -36,14 +36,14 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
36
36
  border: 2px solid ${e.colors.gray.light1};
37
37
  }
38
38
  }
39
- `,y=s`
39
+ `,k=s`
40
40
  .circle {
41
41
  &--inner {
42
42
  opacity: 1;
43
43
  background-color: ${e.colors.gray.light1};
44
44
  }
45
45
  }
46
- `,k=(r,i)=>s`
46
+ `,D=(r,i)=>s`
47
47
  .circle {
48
48
  &--inner {
49
49
  opacity: 1;
@@ -59,7 +59,7 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
59
59
  display: flex;
60
60
  align-items: center;
61
61
  box-sizing: border-box;
62
- `,D=o.span`
62
+ `,E=o.span`
63
63
  cursor: pointer;
64
64
  display: flex;
65
65
  position: relative;
@@ -68,17 +68,22 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
68
68
 
69
69
  ${r=>h[r.size]};
70
70
 
71
- ${r=>!r.isDisabled&&r.isChecked&&k(r.color,r.$hasError)};
72
- ${r=>r.isDisabled&&f};
71
+ ${r=>!r.isDisabled&&r.isChecked&&D(r.color,r.$hasError)};
72
+ ${r=>r.isDisabled&&y};
73
73
 
74
- ${r=>r.isChecked&&r.isDisabled&&y};
75
- `,E=o.input`
76
- position: fixed;
74
+ ${r=>r.isChecked&&r.isDisabled&&k};
75
+ `,v=o.input`
76
+ position: absolute;
77
77
  opacity: 0;
78
78
  margin: 0;
79
- ${r=>!r.$isDisabled&&"cursor: pointer;"}
79
+ ${r=>!r.isDisabled&&"cursor: pointer;"}
80
80
  z-index: 1;
81
81
  ${r=>h[r.$size]};
82
+
83
+ :focus-visible {
84
+ transition: background-color 400ms;
85
+ ${x}
86
+ }
82
87
  `,w=o.span`
83
88
  display: flex;
84
89
  box-sizing: border-box;
@@ -86,7 +91,7 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
86
91
 
87
92
  border: 2px solid
88
93
  ${r=>r.$hasError?e.colors.error.dark:e.colors.gray.light1};
89
- `,C=o.span`
94
+ `,B=o.span`
90
95
  box-sizing: border-box;
91
96
  opacity: 0;
92
97
  margin: auto;
@@ -96,9 +101,9 @@ import{jsxs as n,jsx as l}from"react/jsx-runtime";import o,{css as s}from"styled
96
101
  position: absolute;
97
102
  top: 0;
98
103
  left: 0;
99
- `,N=o(u)`
104
+ `,C=o(m)`
100
105
  cursor: ${({isDisabled:r})=>r?"default":"pointer"};
101
106
  user-select: none;
102
107
  color: ${({theme:r,isDisabled:i})=>i?r.colors.text.disabled:r.colors.text.dark};
103
108
  margin-left: 0.5rem;
104
- `,b=({name:r=m("radio-button"),size:i="regular",checked:c=!1,isDisabled:a=!1,color:p="secondary",label:t,hasError:d,...g})=>n(z,{children:[n(D,{size:i,color:p,isChecked:c,isDisabled:a,$hasError:d,children:[l(E,{"data-validate":"checked",checked:c,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":c,className:"circle circle--outer",$size:i,$isDisabled:a,...g}),l(w,{className:"circle circle--outer",$hasError:d,children:l(C,{className:"circle circle--inner"})})]}),t&&l(N,{as:"label",htmlFor:r,isDisabled:a,children:t})]});export{b as RadioButton,b as default};
109
+ `,p=({name:r=g("radio-button"),size:i="regular",checked:c=!1,isDisabled:a=!1,color:t="secondary",label:d,hasError:n,...u})=>b(z,{children:[b(E,{size:i,color:t,isChecked:c,isDisabled:a,$hasError:n,children:[l(v,{"data-validate":"checked",checked:c,type:"radio",name:r,id:r,disabled:a,"aria-label":r,"aria-checked":c,className:"circle circle--outer",$size:i,isDisabled:a,color:t,...u}),l(w,{className:"circle circle--outer",$hasError:n,children:l(B,{className:"circle circle--inner"})})]}),d&&l(C,{as:"label",htmlFor:r,isDisabled:a,children:d})]});export{p as RadioButton,p as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "15.0.2",
3
+ "version": "15.0.4",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
package/package.json.tmp CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "15.0.2",
3
+ "version": "15.0.4",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
package/types/components/Breadcrumbs/BreadcrumbsItem.d.ts CHANGED
@@ -4,6 +4,7 @@ interface Props {
4
4
  link: BreadcrumbLink;
5
5
  separator?: ReactNode;
6
6
  isLast: boolean;
7
+ onlyLastTruncated: boolean;
7
8
  }
8
- declare const BreadcrumbsItem: ({ link, separator, isLast }: Props) => import("react/jsx-runtime").JSX.Element;
9
+ declare const BreadcrumbsItem: ({ link, separator, isLast, onlyLastTruncated, }: Props) => import("react/jsx-runtime").JSX.Element;
9
10
  export default BreadcrumbsItem;
package/types/components/Breadcrumbs/index.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface BreadcrumbLink {
6
6
  export interface Props {
7
7
  links: BreadcrumbLink[];
8
8
  separator?: ReactNode;
9
+ onlyLastTruncated?: boolean;
9
10
  }
10
- declare const Breadcrumbs: ({ links, separator }: Props) => import("react/jsx-runtime").JSX.Element;
11
+ declare const Breadcrumbs: ({ links, separator, onlyLastTruncated, }: Props) => import("react/jsx-runtime").JSX.Element;
11
12
  export default Breadcrumbs;