@helsenorge/designsystem-react 1.0.0-beta79 → 1.0.0-beta80
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/{Button-619210b9.js → Button-7200b617.js} +2 -2
- package/Button-7200b617.js.map +1 -0
- package/Check-6291ad09.js +2 -0
- package/Check-6291ad09.js.map +1 -0
- package/Checkbox-ffdd3cb7.js +2 -0
- package/Checkbox-ffdd3cb7.js.map +1 -0
- package/FormGroup-17d2a3d3.js +2 -0
- package/FormGroup-17d2a3d3.js.map +1 -0
- package/Loader-9e099b42.js +2 -0
- package/Loader-9e099b42.js.map +1 -0
- package/Modal-5c2defa7.js +2 -0
- package/Modal-5c2defa7.js.map +1 -0
- package/Validation-e113da7e.js +2 -0
- package/Validation-e113da7e.js.map +1 -0
- package/components/Avatar/index.js +1 -1
- package/components/Button/index.js +1 -1
- package/components/ButtonWithModal/ButtonWithModal.d.ts +1 -1
- package/components/ButtonWithModal/ButtonWithModal.d.ts.map +1 -1
- package/components/ButtonWithModal/index.js +1 -1
- package/components/Checkbox/Checkbox.d.ts +31 -0
- package/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/components/Checkbox/componentdata.json +259 -0
- package/components/Checkbox/index.d.ts +3 -0
- package/components/Checkbox/index.d.ts.map +1 -0
- package/components/Checkbox/index.js +2 -0
- package/components/Checkbox/index.js.map +1 -0
- package/components/Checkbox/styles.module.scss +191 -0
- package/components/Checkbox/styles.module.scss.d.ts +25 -0
- package/components/FormExample/FormExample.d.ts +13 -0
- package/components/FormExample/FormExample.d.ts.map +1 -0
- package/components/FormExample/componentdata.json +63 -0
- package/components/FormExample/index.d.ts +3 -0
- package/components/FormExample/index.d.ts.map +1 -0
- package/components/FormExample/index.js +2 -0
- package/components/FormExample/index.js.map +1 -0
- package/components/FormGroup/FormGroup.d.ts +26 -0
- package/components/FormGroup/FormGroup.d.ts.map +1 -0
- package/components/FormGroup/componentdata.json +183 -0
- package/components/FormGroup/index.d.ts +3 -0
- package/components/FormGroup/index.d.ts.map +1 -0
- package/components/FormGroup/index.js +2 -0
- package/components/FormGroup/index.js.map +1 -0
- package/components/FormGroup/styles.module.scss +79 -0
- package/components/FormGroup/styles.module.scss.d.ts +22 -0
- package/components/Loader/Loader.d.ts +2 -2
- package/components/Loader/Loader.d.ts.map +1 -1
- package/components/Loader/componentdata.json +2 -2
- package/components/Loader/index.js +1 -1
- package/components/Modal/index.js +1 -1
- package/components/Validation/Validation.d.ts +17 -0
- package/components/Validation/Validation.d.ts.map +1 -0
- package/components/Validation/componentdata.json +111 -0
- package/components/Validation/index.d.ts +3 -0
- package/components/Validation/index.d.ts.map +1 -0
- package/components/Validation/index.js +2 -0
- package/components/Validation/index.js.map +1 -0
- package/components/Validation/styles.module.scss +15 -0
- package/components/Validation/styles.module.scss.d.ts +10 -0
- package/package.json +3 -4
- package/scss/_palette.scss +1 -0
- package/utils/uuid.d.ts +2 -0
- package/utils/uuid.d.ts.map +1 -0
- package/uuid-484288be.js +2 -0
- package/uuid-484288be.js.map +1 -0
- package/Button-619210b9.js.map +0 -1
- package/Loader-084dd998.js +0 -2
- package/Loader-084dd998.js.map +0 -1
- package/Modal-52971fb1.js +0 -2
- package/Modal-52971fb1.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,a as e}from"./_rollupPluginBabelHelpers-e1c7fe69.js";import{_ as n}from"./_tslib-51c8a283.js";import o from"react";import{g as r}from"./color-acb834c6.js";import{a as l}from"./constants-d1f48e8e.js";import{L as i}from"./Loader-
|
|
2
|
-
//# sourceMappingURL=Button-
|
|
1
|
+
import{_ as t,a as e}from"./_rollupPluginBabelHelpers-e1c7fe69.js";import{_ as n}from"./_tslib-51c8a283.js";import o from"react";import{g as r}from"./color-acb834c6.js";import{a as l}from"./constants-d1f48e8e.js";import{L as i}from"./Loader-9e099b42.js";import{u as a}from"./useHover-57ad4df9.js";import{u as s}from"./useWindowSize-c22d7634.js";import{b as d}from"./grid-11a70eb7.js";import{c as u}from"./index-9b84fabc.js";import c from"./components/Button/styles.module.scss";var m={primary:"blueberry",warning:"banana",danger:"cherry"};var b=function(t,e){return e&&e<d.md&&t?l.Small:t?l.Medium:l.XSmall},f=o.forwardRef((function(d,f){var v,p,_,g=d.children,h=d.className,w=void 0===h?"":h,j=d.fluid,E=void 0!==j&&j,y=d.intent,N=void 0===y?"primary":y,k=d.inverted,C=void 0!==k&&k,I=d.htmlMarkup,H=void 0===I?"button":I,O=d.onClick,S=d.large,z=void 0!==S&&S,B=d.loading,F=void 0!==B&&B,M=d.variant,x=void 0===M?"fill":M,L=d.disabled,R=void 0!==L&&L,X=d.ellipsis,A=void 0!==X&&X,P=d.testId,W=d.href,q=d.target,D=n(d,["children","className","fluid","intent","inverted","htmlMarkup","onClick","large","loading","variant","disabled","ellipsis","testId","href","target"]),G=function(t){var e,n,o,r,l=null,i=null;return void 0!==(null===(n=null===(e=t[0])||void 0===e?void 0:e.props)||void 0===n?void 0:n.svgIcon)&&(l=t.shift()),void 0!==(null===(r=null===(o=t[t.length-1])||void 0===o?void 0:o.props)||void 0===r?void 0:r.svgIcon)&&(i=t.pop()),[l,i,t]}(o.Children.toArray(g)),J=t(G,3),K=J[0],Q=J[1],T=J[2],U=a(f),V=U.hoverRef,Y=U.isHovered,Z=function(t,e,n,o,l){return e?r("neutral",600):t&&!o||!t&&o?"white":r(m[n],l?700:600)}("fill"===x,R,N,C,Y),$=s(),tt="fill"===x,et="outline"===x,nt="borderless"===x,ot="warning"===N,rt="danger"===N,lt=!(!K&&!Q||F),it=Object.assign({},D),at=u(c.button,(e(v={},c["button--fluid"],E),e(v,c["button--large"],z),e(v,c["button--warning"],ot),e(v,c["button--danger"],rt),e(v,c["button--inverted"],C),e(v,c["button--fill"],tt),e(v,c["button--outline"],et),e(v,c["button--borderless"],nt),e(v,c["button--with-icon"],lt),e(v,c["button--ellipsis"],A),v),w),st=u(c.button__content,(e(p={},c["button__content--warning"],ot),e(p,c["button__content--danger"],rt),e(p,c["button__content--fill"],tt),e(p,c["button__content--borderless"],nt),e(p,c["button__content--with-icon"],lt),e(p,c["button__content--large"],z),e(p,c["button__content--ellipsis"],A),e(p,c["button__content--inverted"],C),e(p,c["button__content--fluid"],E),p)),dt=u(c["button__left-fluid-content"],(e(_={},c["button__left-fluid-content--with-icon"],lt),e(_,c["button__left-fluid-content--large"],z),_));function ut(t,e,n,r){var l=t&&t.props&&t.props.color?t.props.color:n;return t&&Object.keys(t).length>0?o.cloneElement(t,{size:e,color:l,isHovered:r}):null}var ct=function(){return o.createElement("span",{className:st},T)},mt=function(){return o.createElement("span",{className:c["content-wrapper"]},F?o.createElement("div",{className:c["button__left-fluid-content"]},o.createElement(i,{testId:"test-id-loader",color:"fill"!==x||C?m[N]:"white",size:"tiny"})):o.createElement(o.Fragment,null,E?o.createElement("div",{className:dt},ut(K,b(z,$.width),Z,Y),ct()):o.createElement(o.Fragment,null,ut(K,b(z,$.width),Z,Y),ct()),ut(Q,l.XSmall,Z,Y)))};return o.createElement(o.Fragment,null,"button"===H&&o.createElement("button",Object.assign({onClick:O,disabled:R,"data-testid":P,className:at,ref:V},it),mt()),"a"===H&&o.createElement("a",Object.assign({onClick:O,"data-testid":P,className:at,href:W,target:q,ref:V},D),mt()))}));export{f as B};
|
|
2
|
+
//# sourceMappingURL=Button-7200b617.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button-7200b617.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import e from"react";var t=function(t){var a=t.isExtraSmall,r=t.isHovered,l=e.createElement("path",{d:"M22.504 31.198l-9.59-9.966 1.441-1.387 8.149 8.468 14.455-15.016 1.441 1.386z"}),m=e.createElement("path",{d:"M22.504 31.198l-7.816-8.121 1.441-1.387 6.375 6.623 15.859-16.474 1.44 1.386z"}),n=e.createElement("path",{d:"M22.504 31.578l-9.781-10.162 1.822-1.752 7.959 8.269 14.265-14.819 1.821 1.752z"});return a?r?e.createElement("path",{d:"M22.504 31.578l-7.816-8.124 1.82-1.75 5.996 6.229 16.321-16.956 1.821 1.752z"}):n:r?m:l};export{t as C};
|
|
2
|
+
//# sourceMappingURL=Check-6291ad09.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Check-6291ad09.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as e,a as r}from"./_rollupPluginBabelHelpers-e1c7fe69.js";import c,{useState as o,useEffect as a}from"react";import{c as l}from"./index-9b84fabc.js";import{u as b}from"./uuid-484288be.js";import{C as i}from"./Check-6291ad09.js";import{I as s}from"./constants-d1f48e8e.js";import{g as n}from"./color-acb834c6.js";import t from"./components/Checkbox/styles.module.scss";var m=c.forwardRef((function(m,d){var p,h,k,x=m.className,f=m.checked,u=void 0!==f&&f,_=m.disabled,v=m.label,w=m.inputid,g=void 0===w?b():w,y=m.mode,N=m.name,j=void 0===N?g:N,E=m.variant,C=m.errorText,I=m.error,z=void 0===I?!!C:I,B=m.value,F=void 0===B?v:B,H=o(u),P=e(H,2),R=P[0],T=P[1],q=z,A="on-dark"===y,D="on-blueberry"===y,G="bigform"===E,J=l(t["checkbox-wrapper"],(r(p={},t["checkbox-wrapper--with-error"],C),r(p,t["checkbox-wrapper--bigform"],G),p)),K=l(t["checkbox-label"],(r(h={},t["checkbox-label--disabled"],_),r(h,t["checkbox-label--on-dark"],A),r(h,t["checkbox-label--on-blueberry"],D),r(h,t["checkbox-label--invalid"],q),r(h,t["checkbox-label--bigform"],G),h)),L=l(t.checkbox,x),M=l(t["checkbox__icon-wrapper"],(r(k={},t["checkbox__icon-wrapper--checked"],R),r(k,t["checkbox__icon-wrapper--disabled"],_),r(k,t["checkbox__icon-wrapper--on-dark"],A),r(k,t["checkbox__icon-wrapper--on-blueberry"],D),r(k,t["checkbox__icon-wrapper--invalid"],q),k)),O=l(t["checkbox-errors"],r({},t["checkbox-errors--bigform"],G)),Q=n("blueberry",500);return _&&(Q=n("neutral",400)),A&&(Q=n("blueberry",200)),q&&(Q=n("cherry",500)),a((function(){T(u)}),[u]),c.createElement("div",{"data-testid":m.testId,className:J},C&&c.createElement("p",{className:O},C),c.createElement("label",{htmlFor:g,className:K},c.createElement("input",{id:g,name:j,className:L,type:"checkbox",checked:R,disabled:_,onChange:function(){T(!R)},value:F,ref:d,"aria-invalid":z}),c.createElement("span",{className:M},R&&c.createElement(s,{color:Q,className:t.checkbox__icon,svgIcon:i,size:38})),v))}));export{m as C};
|
|
2
|
+
//# sourceMappingURL=Checkbox-ffdd3cb7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox-ffdd3cb7.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as r}from"./_rollupPluginBabelHelpers-e1c7fe69.js";import e from"react";import{c as o}from"./index-9b84fabc.js";import a from"./components/FormGroup/styles.module.scss";import{C as m}from"./Checkbox-ffdd3cb7.js";import{T as p}from"./Title-863af332.js";var t=e.forwardRef((function(t,l){var n,f,i,s=t.className,d=t.mode,g=void 0===d?"on-white":d,u=t.variant,c=void 0===u?"normal":u,_=t.error,b="on-dark"===g,w="on-blueberry"===g,v="bigform"===c,h=o(a["form-group-wrapper"],(r(n={},a["form-group-wrapper--on-blueberry"],w),r(n,a["form-group-wrapper--on-dark"],b),r(n,a["form-group-wrapper--bigform"],v),r(n,a["form-group-wrapper--invalid"],_),n),s),k=o(a["form-group-wrapper__title"],(r(f={},a["form-group-wrapper__title--on-dark"],b&&!_),r(f,a["form-group-wrapper__title--bigform"],v),f)),E=o(a["form-group-wrapper__errors"],r({},a["form-group-wrapper__errors--bigform"],v)),N=o(a["form-group__legend"],(r(i={},a["form-group__legend--on-dark"],b&&!_),r(i,a["form-group__legend--bigform"],v),i));return e.createElement("div",{"data-testid":t.testId,className:h},t.title&&e.createElement(p,{className:k,htmlMarkup:"h4",appearance:"title4"},t.title),_&&e.createElement("p",{className:E},_),e.createElement("fieldset",{name:t.title,className:a["form-group"]},t.legend&&e.createElement("legend",{className:N},t.legend),e.Children.map(t.children,(function(r){return r.type===m?e.cloneElement(r,{mode:g,variant:c,error:!!_}):r}))))}));export{t as F};
|
|
2
|
+
//# sourceMappingURL=FormGroup-17d2a3d3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormGroup-17d2a3d3.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as e}from"./_rollupPluginBabelHelpers-e1c7fe69.js";import a from"react";import{c as r}from"./index-9b84fabc.js";import{u as l}from"./uuid-484288be.js";import o from"./components/Loader/styles.module.scss";var d=a.forwardRef((function(d,t){var s,m,i,c=d.overlay,n=d.color,_=void 0===n?c?"black":"neutral":n,p=d.size,u=void 0===p?"small":p,v=d.className,b=void 0===v?"":v,f=d.testId,w=void 0===f?"":f,N=d.center,y=d.ariaLabelledById,E=d.ariaLabel,g=void 0===E?"Laster inn":E,h="small"===u,k="medium"===u,L="large"===u,j=r(o["loader-wrapper"],(e(s={},o["loader-wrapper--center"],N),e(s,o["loader-wrapper--overlay"],c),s)),x=r(o.loader,(e(m={},o["loader--small"],h),e(m,o["loader--medium"],k),e(m,o["loader--large"],L),m),b),B=r(o.loader__dot,(e(i={},o["loader__dot--small"],h),e(i,o["loader__dot--medium"],k),e(i,o["loader__dot--large"],L),e(i,o["loader__dot--banana"],"banana"===_),e(i,o["loader__dot--cherry"],"cherry"===_),e(i,o["loader__dot--kiwi"],"kiwi"===_),e(i,o["loader__dot--neutral"],"neutral"===_),e(i,o["loader__dot--plum"],"plum"===_),e(i,o["loader__dot--black"],"black"===_),e(i,o["loader__dot--white"],"white"===_),i)),I="loader".concat(l());return a.createElement("div",{role:"progressbar",className:j},a.createElement("div",{"data-testid":w,"aria-labelledby":y||I,className:x},a.createElement("div",{className:B}),a.createElement("div",{className:B}),a.createElement("div",{className:B}),a.createElement("div",{className:B}),!y&&a.createElement("span",{id:I,className:o["loader__hidden-text"]},g)))}));export{d as L};
|
|
2
|
+
//# sourceMappingURL=Loader-9e099b42.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loader-9e099b42.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import e,{useRef as t,useEffect as a}from"react";import{c as n}from"./index-9b84fabc.js";import{u as r}from"./uuid-484288be.js";import{p as o}from"./palette-f206f488.js";import{B as l}from"./Button-7200b617.js";import{I as c}from"./constants-d1f48e8e.js";import{X as i,A as s,a as m}from"./AlertSignFill-64bfef57.js";import d from"./components/Modal/styles.module.scss";import{T as u}from"./Title-863af332.js";function v(){var e=t(null);function n(t){var a=e.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),n=a[0],r=1===a.length?n:a[a.length-1];"Tab"===t.key&&(t.shiftKey?document.activeElement===n&&(r.focus(),t.preventDefault()):document.activeElement===r&&(n.focus(),t.preventDefault()))}function r(t){var a=e.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');1===a.length&&(a[0].focus(),t.preventDefault())}return a((function(){var t=e.current;return t.addEventListener("keydown",n),t.addEventListener("click",r),function(){t.removeEventListener("keydown",n),t.removeEventListener("click",r)}}),[]),e}var p;!function(e){e.normal="normal",e.warning="warning",e.error="error",e.image="image"}(p||(p={}));var f={variant:p.normal,primaryButtonText:"OK",large:!1,className:""},y=function(t){return e.createElement("button",{className:d.modal__lukkekryss,"aria-label":t.ariaLabel||"Lukk",onClick:t.onClick,autoFocus:!0,role:"button"},e.createElement(c,{svgIcon:i,color:o.blueberry600,size:42}))},E=e.forwardRef((function(t,i){var f,E,b;function g(e){"Escape"===e.key&&t.onClose&&(e.stopPropagation(),t.onClose())}function _(e){e.target&&C.current===e.target&&t.onClose&&(e.stopPropagation(),t.onClose())}var k,h=t.variant===p.image,L=null!==(f=t.titleId)&&void 0!==f?f:r(),x=e.useRef(null),C=e.useRef(null),B=t.secondaryButtonText&&(null===(E=t.secondaryButtonText)||void 0===E?void 0:E.length)>0||t.onSuccess,N=t.ariaLabelledBy?void 0:t.ariaLabel,w=t.ariaLabelledBy?t.ariaLabelledBy:t.ariaLabel?void 0:L;return a((function(){var e=x.current,t=C.current;return document.body.style.overflow="hidden",e&&(e.addEventListener("keydown",g),t.addEventListener("click",_)),function(){document.body.style.removeProperty("overflow"),e.removeEventListener("keydown",g),t.removeEventListener("click",_)}})),e.createElement("div",{ref:x,"data-testid":"dialog-container"},e.createElement("div",{ref:C,className:d["modal-overlay"],"data-testid":t.testId},e.createElement("div",{className:d.align,ref:v()},e.createElement("div",{className:n(t.className,d.modal,d["modal--".concat(t.variant)],t.large?d["modal--large"]:""),role:"dialog","aria-label":N,"aria-labelledby":w},!t.noCloseButton&&e.createElement("div",{className:h?d["modal__close--image"]:d.modal__close},e.createElement(y,{onClick:t.onClose,ariaLabel:t.ariaLabelCloseBtn})),e.createElement("div",{className:h?d["modal__contentWrapper--image"]:d.modal__contentWrapper},e.createElement("div",{className:d.modal__contentWrapper__title},t.variant&&((k=t.variant)===p.error?e.createElement("div",null,e.createElement(c,{svgIcon:s,color:o.cherry500,hoverColor:o.cherry500})):k===p.warning?e.createElement("div",null,e.createElement(c,{svgIcon:m,color:o.black,hoverColor:o.black})):null),e.createElement("div",null,e.createElement(u,{id:L,htmlMarkup:"h3",appearance:"title3"},t.title))),e.createElement("div",{className:h?d["modal__contentWrapper__content--image"]:d.modal__contentWrapper__content},h?t.children&&e.createElement("div",null,e.createElement("div",{className:d["modal--image__img"]},t.children),e.createElement("span",{className:d["modal--image__text"]},t.description)):t.children&&e.createElement("div",null,t.children),t.description&&!t.children&&e.createElement("p",{className:d.modal__description},t.description)),B&&e.createElement("div",{className:d.modal__actions},t.onSuccess&&e.createElement(l,{onClick:t.onSuccess},t.primaryButtonText),t.secondaryButtonText&&(null===(b=t.secondaryButtonText)||void 0===b?void 0:b.length)>0&&e.createElement(l,{variant:"borderless",onClick:t.onClose},t.secondaryButtonText)))))))}));E.defaultProps=f;export{E as M};
|
|
2
|
+
//# sourceMappingURL=Modal-5c2defa7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal-5c2defa7.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as r}from"./_rollupPluginBabelHelpers-e1c7fe69.js";import e from"react";import{c as a}from"./index-9b84fabc.js";import t from"./components/Validation/styles.module.scss";var o=e.forwardRef((function(o,s){var i=o.errorSummary,m=o.className,l="bigform"===o.variant,n=a(t.validation,m),c=a(t.validation__errors,r({},t["validation__errors--bigform"],l));return e.createElement(e.Fragment,null,e.createElement("div",{"data-testid":o.testId,className:n},o.children),i&&e.createElement("p",{className:c},i))}));export{o as V};
|
|
2
|
+
//# sourceMappingURL=Validation-e113da7e.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Validation-e113da7e.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import a from"react";import{I as e,a as r}from"../../constants-d1f48e8e.js";import{C as t}from"../../Check-6291ad09.js";import{c as s}from"../../index-9b84fabc.js";import o from"./styles.module.scss";import{p as c}from"../../palette-f206f488.js";import"../../_tslib-51c8a283.js";var l=a.forwardRef((function(l,m){var i=l.children,f=l.className,n=void 0===f?"":f,p=l.selected,d=void 0!==p&&p,v=l.variant,b=void 0===v?"normal":v,u=i.charAt(0).toLocaleUpperCase()+i.substring(1,2);return a.createElement("span",{className:s(o.avatar,d&&o["avatar--selected"],"black"===b&&o["avatar--black"],n),ref:m},d?a.createElement(e,{svgIcon:t,size:r.Small,color:"black"===b?c.neutral900:c.blueberry600}):u)}));export default l;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{B as
|
|
1
|
+
import{B as s}from"../../Button-7200b617.js";export{B as default}from"../../Button-7200b617.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"../../_tslib-51c8a283.js";import"react";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-9e099b42.js";import"../../index-9b84fabc.js";import"../../uuid-484288be.js";import"../Loader/styles.module.scss";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"./styles.module.scss";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -4,6 +4,6 @@ interface ModalWithButtonProps extends ModalProps {
|
|
|
4
4
|
/** Text of the button */
|
|
5
5
|
buttonText: string;
|
|
6
6
|
}
|
|
7
|
-
declare const ModalWithButton: React.ForwardRefExoticComponent<ModalWithButtonProps & React.RefAttributes<
|
|
7
|
+
declare const ModalWithButton: React.ForwardRefExoticComponent<ModalWithButtonProps & React.RefAttributes<HTMLElement>>;
|
|
8
8
|
export default ModalWithButton;
|
|
9
9
|
//# sourceMappingURL=ButtonWithModal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonWithModal.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEnD,UAAU,oBAAqB,SAAQ,UAAU;IAC/C,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"ButtonWithModal.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEnD,UAAU,oBAAqB,SAAQ,UAAU;IAC/C,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,0FASnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import e,{useState as o}from"react";import{B as r}from"../../Button-
|
|
1
|
+
import{_ as t}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import e,{useState as o}from"react";import{B as r}from"../../Button-7200b617.js";import{M as s}from"../../Modal-5c2defa7.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-9e099b42.js";import"../../index-9b84fabc.js";import"../../uuid-484288be.js";import"../Loader/styles.module.scss";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"../Button/styles.module.scss";import"../../AlertSignFill-64bfef57.js";import"../Modal/styles.module.scss";import"../../Title-863af332.js";import"../Title/styles.module.scss";var i=e.forwardRef((function(i,m){var l=o(!1),a=t(l,2),n=a[0],p=a[1];return e.createElement("div",null,e.createElement(r,{onClick:function(){return p(!0)}},i.buttonText),n&&e.createElement(s,Object.assign({},i,{onClose:function(){return p(!1)}})))}));export default i;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FormMode, FormVariant } from '../FormGroup/FormGroup';
|
|
3
|
+
export interface CheckboxProps {
|
|
4
|
+
/** Adds custom classes to the element. */
|
|
5
|
+
className?: string;
|
|
6
|
+
/** Sets checkbox as checked */
|
|
7
|
+
checked?: boolean;
|
|
8
|
+
/** Disables the checkbox */
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** The label text next to the checkbox */
|
|
11
|
+
label: string;
|
|
12
|
+
/** input id of the checkbox */
|
|
13
|
+
inputid?: string;
|
|
14
|
+
/** Changes the visuals of the checkbox */
|
|
15
|
+
mode?: FormMode;
|
|
16
|
+
/** Unique identifyer for the input tag */
|
|
17
|
+
name?: string;
|
|
18
|
+
/** Return value for the checkbox */
|
|
19
|
+
value?: string;
|
|
20
|
+
/** Changes the visuals of the checkbox */
|
|
21
|
+
variant?: FormVariant;
|
|
22
|
+
/** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */
|
|
23
|
+
error?: boolean;
|
|
24
|
+
/** Error text to show above the component */
|
|
25
|
+
errorText?: string;
|
|
26
|
+
/** Sets the data-testid attribute. */
|
|
27
|
+
testId?: string;
|
|
28
|
+
}
|
|
29
|
+
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
30
|
+
export default Checkbox;
|
|
31
|
+
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iHAAiH;IACjH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,wFA6EnB,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
{
|
|
2
|
+
"props": {
|
|
3
|
+
"className": {
|
|
4
|
+
"defaultValue": null,
|
|
5
|
+
"description": "Adds custom classes to the element.",
|
|
6
|
+
"name": "className",
|
|
7
|
+
"parent": {
|
|
8
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
9
|
+
"name": "CheckboxProps"
|
|
10
|
+
},
|
|
11
|
+
"declarations": [
|
|
12
|
+
{
|
|
13
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
14
|
+
"name": "CheckboxProps"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"required": false,
|
|
18
|
+
"type": {
|
|
19
|
+
"name": "string"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"checked": {
|
|
23
|
+
"defaultValue": null,
|
|
24
|
+
"description": "Sets checkbox as checked",
|
|
25
|
+
"name": "checked",
|
|
26
|
+
"parent": {
|
|
27
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
28
|
+
"name": "CheckboxProps"
|
|
29
|
+
},
|
|
30
|
+
"declarations": [
|
|
31
|
+
{
|
|
32
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
33
|
+
"name": "CheckboxProps"
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"required": false,
|
|
37
|
+
"type": {
|
|
38
|
+
"name": "boolean"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
"disabled": {
|
|
42
|
+
"defaultValue": null,
|
|
43
|
+
"description": "Disables the checkbox",
|
|
44
|
+
"name": "disabled",
|
|
45
|
+
"parent": {
|
|
46
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
47
|
+
"name": "CheckboxProps"
|
|
48
|
+
},
|
|
49
|
+
"declarations": [
|
|
50
|
+
{
|
|
51
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
52
|
+
"name": "CheckboxProps"
|
|
53
|
+
}
|
|
54
|
+
],
|
|
55
|
+
"required": false,
|
|
56
|
+
"type": {
|
|
57
|
+
"name": "boolean"
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
"label": {
|
|
61
|
+
"defaultValue": null,
|
|
62
|
+
"description": "The label text next to the checkbox",
|
|
63
|
+
"name": "label",
|
|
64
|
+
"parent": {
|
|
65
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
66
|
+
"name": "CheckboxProps"
|
|
67
|
+
},
|
|
68
|
+
"declarations": [
|
|
69
|
+
{
|
|
70
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
71
|
+
"name": "CheckboxProps"
|
|
72
|
+
}
|
|
73
|
+
],
|
|
74
|
+
"required": true,
|
|
75
|
+
"type": {
|
|
76
|
+
"name": "string"
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
"inputid": {
|
|
80
|
+
"defaultValue": null,
|
|
81
|
+
"description": "input id of the checkbox",
|
|
82
|
+
"name": "inputid",
|
|
83
|
+
"parent": {
|
|
84
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
85
|
+
"name": "CheckboxProps"
|
|
86
|
+
},
|
|
87
|
+
"declarations": [
|
|
88
|
+
{
|
|
89
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
90
|
+
"name": "CheckboxProps"
|
|
91
|
+
}
|
|
92
|
+
],
|
|
93
|
+
"required": false,
|
|
94
|
+
"type": {
|
|
95
|
+
"name": "string"
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
"mode": {
|
|
99
|
+
"defaultValue": null,
|
|
100
|
+
"description": "Changes the visuals of the checkbox",
|
|
101
|
+
"name": "mode",
|
|
102
|
+
"parent": {
|
|
103
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
104
|
+
"name": "CheckboxProps"
|
|
105
|
+
},
|
|
106
|
+
"declarations": [
|
|
107
|
+
{
|
|
108
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
109
|
+
"name": "CheckboxProps"
|
|
110
|
+
}
|
|
111
|
+
],
|
|
112
|
+
"required": false,
|
|
113
|
+
"type": {
|
|
114
|
+
"name": "enum",
|
|
115
|
+
"raw": "\"on-white\" | \"on-blueberry\" | \"on-dark\" | undefined",
|
|
116
|
+
"value": [
|
|
117
|
+
{
|
|
118
|
+
"value": "undefined"
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"value": "\"on-white\""
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"value": "\"on-blueberry\""
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"value": "\"on-dark\""
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
"name": {
|
|
133
|
+
"defaultValue": null,
|
|
134
|
+
"description": "Unique identifyer for the input tag",
|
|
135
|
+
"name": "name",
|
|
136
|
+
"parent": {
|
|
137
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
138
|
+
"name": "CheckboxProps"
|
|
139
|
+
},
|
|
140
|
+
"declarations": [
|
|
141
|
+
{
|
|
142
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
143
|
+
"name": "CheckboxProps"
|
|
144
|
+
}
|
|
145
|
+
],
|
|
146
|
+
"required": false,
|
|
147
|
+
"type": {
|
|
148
|
+
"name": "string"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
"value": {
|
|
152
|
+
"defaultValue": null,
|
|
153
|
+
"description": "Return value for the checkbox",
|
|
154
|
+
"name": "value",
|
|
155
|
+
"parent": {
|
|
156
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
157
|
+
"name": "CheckboxProps"
|
|
158
|
+
},
|
|
159
|
+
"declarations": [
|
|
160
|
+
{
|
|
161
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
162
|
+
"name": "CheckboxProps"
|
|
163
|
+
}
|
|
164
|
+
],
|
|
165
|
+
"required": false,
|
|
166
|
+
"type": {
|
|
167
|
+
"name": "string"
|
|
168
|
+
}
|
|
169
|
+
},
|
|
170
|
+
"variant": {
|
|
171
|
+
"defaultValue": null,
|
|
172
|
+
"description": "Changes the visuals of the checkbox",
|
|
173
|
+
"name": "variant",
|
|
174
|
+
"parent": {
|
|
175
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
176
|
+
"name": "CheckboxProps"
|
|
177
|
+
},
|
|
178
|
+
"declarations": [
|
|
179
|
+
{
|
|
180
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
181
|
+
"name": "CheckboxProps"
|
|
182
|
+
}
|
|
183
|
+
],
|
|
184
|
+
"required": false,
|
|
185
|
+
"type": {
|
|
186
|
+
"name": "enum",
|
|
187
|
+
"raw": "\"normal\" | \"bigform\" | undefined",
|
|
188
|
+
"value": [
|
|
189
|
+
{
|
|
190
|
+
"value": "undefined"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"value": "\"normal\""
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"value": "\"bigform\""
|
|
197
|
+
}
|
|
198
|
+
]
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
"error": {
|
|
202
|
+
"defaultValue": null,
|
|
203
|
+
"description": "Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup",
|
|
204
|
+
"name": "error",
|
|
205
|
+
"parent": {
|
|
206
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
207
|
+
"name": "CheckboxProps"
|
|
208
|
+
},
|
|
209
|
+
"declarations": [
|
|
210
|
+
{
|
|
211
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
212
|
+
"name": "CheckboxProps"
|
|
213
|
+
}
|
|
214
|
+
],
|
|
215
|
+
"required": false,
|
|
216
|
+
"type": {
|
|
217
|
+
"name": "boolean"
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
"errorText": {
|
|
221
|
+
"defaultValue": null,
|
|
222
|
+
"description": "Error text to show above the component",
|
|
223
|
+
"name": "errorText",
|
|
224
|
+
"parent": {
|
|
225
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
226
|
+
"name": "CheckboxProps"
|
|
227
|
+
},
|
|
228
|
+
"declarations": [
|
|
229
|
+
{
|
|
230
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
231
|
+
"name": "CheckboxProps"
|
|
232
|
+
}
|
|
233
|
+
],
|
|
234
|
+
"required": false,
|
|
235
|
+
"type": {
|
|
236
|
+
"name": "string"
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
"testId": {
|
|
240
|
+
"defaultValue": null,
|
|
241
|
+
"description": "Sets the data-testid attribute.",
|
|
242
|
+
"name": "testId",
|
|
243
|
+
"parent": {
|
|
244
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
245
|
+
"name": "CheckboxProps"
|
|
246
|
+
},
|
|
247
|
+
"declarations": [
|
|
248
|
+
{
|
|
249
|
+
"fileName": "src/components/Checkbox/Checkbox.tsx",
|
|
250
|
+
"name": "CheckboxProps"
|
|
251
|
+
}
|
|
252
|
+
],
|
|
253
|
+
"required": false,
|
|
254
|
+
"type": {
|
|
255
|
+
"name": "string"
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{C as o}from"../../Checkbox-ffdd3cb7.js";export{C as default}from"../../Checkbox-ffdd3cb7.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"react";import"../../index-9b84fabc.js";import"../../uuid-484288be.js";import"../../Check-6291ad09.js";import"../../constants-d1f48e8e.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"./styles.module.scss";
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,191 @@
|
|
|
1
|
+
@import '../../scss/_spacers.scss';
|
|
2
|
+
@import '../../scss/_breakpoints.scss';
|
|
3
|
+
@import '../../scss/_palette.scss';
|
|
4
|
+
@import '../../scss/font-settings.scss';
|
|
5
|
+
|
|
6
|
+
.checkbox-errors {
|
|
7
|
+
font-size: $font-size-sm;
|
|
8
|
+
font-weight: 600;
|
|
9
|
+
color: $cherry500;
|
|
10
|
+
margin-top: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.checkbox-wrapper {
|
|
14
|
+
&--with-error {
|
|
15
|
+
padding: getSpacer(s) getSpacer(xs) getSpacer(m);
|
|
16
|
+
background-color: $cherry50;
|
|
17
|
+
border-left: 0.25rem solid $cherry500;
|
|
18
|
+
|
|
19
|
+
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
20
|
+
padding: getSpacer(s) getSpacer(m) getSpacer(l);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&--with-error#{&}--bigform {
|
|
25
|
+
padding: getSpacer(m) getSpacer(m);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.checkbox-label {
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
font-size: $font-size-sm;
|
|
34
|
+
margin: getSpacer(s) 0;
|
|
35
|
+
|
|
36
|
+
@media (min-width: map-get($grid-breakpoints, md)) {
|
|
37
|
+
font-size: $font-size-md;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&--on-dark {
|
|
41
|
+
color: $white;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&--invalid {
|
|
45
|
+
color: $black;
|
|
46
|
+
padding: getSpacer(s);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&--disabled {
|
|
50
|
+
cursor: default;
|
|
51
|
+
color: $neutral400;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--bigform {
|
|
55
|
+
margin: getSpacer(xs) 0 getSpacer(xs) 0;
|
|
56
|
+
padding: 1.68rem getSpacer(l);
|
|
57
|
+
background-color: $neutral50;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--bigform#{&}--on-blueberry {
|
|
61
|
+
background-color: $blueberry50;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&--bigform#{&}--on-dark {
|
|
65
|
+
background-color: $blueberry800;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&--invalid,
|
|
69
|
+
&--bigform#{&}--invalid {
|
|
70
|
+
background-color: $white;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.checkbox-label:last-of-type {
|
|
75
|
+
margin-bottom: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.checkbox {
|
|
79
|
+
width: 0px;
|
|
80
|
+
|
|
81
|
+
-moz-appearance: none;
|
|
82
|
+
-webkit-appearance: none;
|
|
83
|
+
-o-appearance: none;
|
|
84
|
+
|
|
85
|
+
&__icon-wrapper {
|
|
86
|
+
display: flex;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
align-items: center;
|
|
89
|
+
margin: getSpacer(3xs) getSpacer(s) getSpacer(3xs) getSpacer(3xs);
|
|
90
|
+
height: 1.625rem;
|
|
91
|
+
width: 1.625rem;
|
|
92
|
+
min-width: auto !important;
|
|
93
|
+
min-height: auto !important;
|
|
94
|
+
color: $neutral700;
|
|
95
|
+
box-shadow: 0 0 0 getSpacer(3xs);
|
|
96
|
+
|
|
97
|
+
:hover > & {
|
|
98
|
+
box-shadow: 0 0 0 getSpacer(2xs);
|
|
99
|
+
background-color: $neutral100;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
:active > & {
|
|
103
|
+
box-shadow: 0 0 0 getSpacer(2xs);
|
|
104
|
+
color: $black;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&--checked {
|
|
108
|
+
color: $blueberry500;
|
|
109
|
+
|
|
110
|
+
:hover > & {
|
|
111
|
+
background-color: $blueberry50;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
&--on-blueberry {
|
|
116
|
+
color: $blueberry500;
|
|
117
|
+
|
|
118
|
+
:hover > & {
|
|
119
|
+
background-color: $blueberry100;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&--on-dark {
|
|
124
|
+
color: $neutral200;
|
|
125
|
+
|
|
126
|
+
:hover > & {
|
|
127
|
+
background-color: $inverted-hover;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
&.checkbox__icon-wrapper--checked {
|
|
131
|
+
color: $blueberry200;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
:active > & {
|
|
135
|
+
color: $white;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&--invalid {
|
|
140
|
+
color: $cherry500;
|
|
141
|
+
|
|
142
|
+
:hover > & {
|
|
143
|
+
background-color: $cherry100;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&.checkbox__icon-wrapper--checked {
|
|
147
|
+
color: $cherry500;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
:active > & {
|
|
151
|
+
color: $black;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&--disabled {
|
|
156
|
+
color: $neutral400;
|
|
157
|
+
&.checkbox__icon-wrapper--checked {
|
|
158
|
+
color: $neutral400;
|
|
159
|
+
}
|
|
160
|
+
:hover > & {
|
|
161
|
+
box-shadow: 0 0 0 getSpacer(3xs);
|
|
162
|
+
background-color: transparent;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
:active > & {
|
|
166
|
+
color: $neutral400;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
&__icon {
|
|
172
|
+
position: relative;
|
|
173
|
+
top: 0.1rem;
|
|
174
|
+
right: 0.05rem;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
&:focus {
|
|
178
|
+
& + .checkbox__icon-wrapper {
|
|
179
|
+
box-shadow: 0 0 0 getSpacer(2xs);
|
|
180
|
+
color: $black;
|
|
181
|
+
|
|
182
|
+
&--on-dark {
|
|
183
|
+
color: $white;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
&--invalid {
|
|
187
|
+
color: $black;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|