uangcermat-web-toolkit-v2 0.2.15 → 0.2.17
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/build/src/assets/icons/checkbox-fill.svg.js +1 -1
- package/build/src/components/Modal/BaseModal.d.ts +1 -1
- package/build/src/components/Modal/BaseModal.js +1 -1
- package/build/src/components/Modal/BaseModal.js.map +1 -1
- package/build/src/components/Modal/BaseModal.type.d.ts +1 -0
- package/build/src/components/RadioButton/RadioButton.js +1 -1
- package/build/src/components/RadioButton/RadioButton.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),t||(t=r.createElement("path",{clipRule:"evenodd",d:"M1.333 0h9.334C11.4 0 12 .6 12 1.333v9.334C12 11.4 11.4 12 10.667 12H1.333C.6 12 0 11.4 0 10.667V1.333C0 .6.6 0 1.333 0zm8.459 3.943L5.079 8.657 2.25 5.828l.943-.943 1.886 1.886L8.849 3l.943.943z"})))};
|
|
1
|
+
"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(null,arguments)}exports.ReactComponent=function(e){return r.createElement("svg",n({width:12,height:12,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg",fillRule:"evenodd"},e),t||(t=r.createElement("path",{clipRule:"evenodd",d:"M1.333 0h9.334C11.4 0 12 .6 12 1.333v9.334C12 11.4 11.4 12 10.667 12H1.333C.6 12 0 11.4 0 10.667V1.333C0 .6.6 0 1.333 0zm8.459 3.943L5.079 8.657 2.25 5.828l.943-.943 1.886 1.886L8.849 3l.943.943z"})))};
|
|
2
2
|
//# sourceMappingURL=checkbox-fill.svg.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseModalContentInterface, BaseModalFooterInterface, BaseModalHeaderInterface, BaseModalInterface } from './BaseModal.type';
|
|
2
2
|
declare const BaseModal: {
|
|
3
|
-
({ isOpen, overlayDisableClose, onClose, containerStyles, children }: BaseModalInterface): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ isOpen, overlayDisableClose, onClose, containerStyles, wrapperStyles, children }: BaseModalInterface): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
Header: {
|
|
5
5
|
({ title, titleStyles, containerStyles, iconCloseContainerStyles, iconCloseStyles, onClose, children }: BaseModalHeaderInterface): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
displayName: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),s=require("../../utils/getChildrenOnDisplayName.js");require("../Button/ButtonHyperlink.js");var i=require("../Button/BaseButton.js");require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js"),require("../Button/ButtonLink.js"),require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js");var n=require("../Text/BaseText.js");require("../Text/Text.js");var a=require("../Icon/Icon.js"),r=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js"),l=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js"),o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");const c=({isOpen:i,overlayDisableClose:n,onClose:a,containerStyles:c,children:
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),s=require("../../utils/getChildrenOnDisplayName.js");require("../Button/ButtonHyperlink.js");var i=require("../Button/BaseButton.js");require("../Button/BaseButtonIcon.js"),require("../Button/Button.js"),require("../Button/ButtonConfirmation.js"),require("../Button/ButtonLink.js"),require("../Button/ButtonRipple.js"),require("../../../_virtual/_tslib.js"),require("../../styles/Colors.js");var n=require("../Text/BaseText.js");require("../Text/Text.js");var a=require("../Icon/Icon.js"),r=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js"),l=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.js"),o=require("../../../node_modules/tailwind-merge/dist/lib/tw-merge.mjs.js");const c=({isOpen:i,overlayDisableClose:n,onClose:a,containerStyles:c,wrapperStyles:d,children:u})=>{const j=s.getChildrenOnDisplayName(u,"Header"),m=s.getChildrenOnDisplayName(u,"Content"),g=s.getChildrenOnDisplayName(u,"Footer");return e.jsx(e.Fragment,{children:e.jsx(l.Transition,Object.assign({appear:!0,show:i,as:t.Fragment},{children:e.jsxs(r.Dialog,Object.assign({as:"div",className:"relative z-10",onClose:()=>{n||a()}},{children:[e.jsx(l.TransitionChild,Object.assign({as:t.Fragment,enter:"ease-out duration-300",enterFrom:"opacity-0",enterTo:"opacity-100",leave:"ease-in duration-200",leaveFrom:"opacity-100",leaveTo:"opacity-0"},{children:e.jsx("div",{className:"fixed inset-0 bg-black bg-opacity-25"})})),e.jsx("div",Object.assign({className:"fixed inset-0 overflow-y-auto"},{children:e.jsx("div",Object.assign({className:o.twMerge("flex min-h-full items-center justify-center p-4 text-center",d)},{children:e.jsx(l.TransitionChild,Object.assign({as:t.Fragment,enter:"ease-out duration-300",enterFrom:"opacity-0 scale-95",enterTo:"opacity-100 scale-100",leave:"ease-in duration-200",leaveFrom:"opacity-100 scale-100",leaveTo:"opacity-0 scale-95"},{children:e.jsxs(r.DialogPanel,Object.assign({className:o.twMerge("flex flex-col w-full max-w-md transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all relative",c)},{children:[j,m,g]}))}))}))}))]}))}))})},d=({title:t,titleStyles:s,containerStyles:i,iconCloseContainerStyles:r,iconCloseStyles:l,onClose:c,children:d})=>e.jsx(e.Fragment,{children:d||e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({className:o.twMerge("position absolute top-2 right-2",r)},{children:e.jsx("button",Object.assign({className:"bg-white p-0",onClick:()=>c()},{children:e.jsx(a,{name:"close",className:o.twMerge("w-3 h-3",l)})}))})),e.jsx("div",Object.assign({className:o.twMerge("w-full px-6 pt-6 pb-4",i)},{children:e.jsx(n.default,{label:t||"",className:o.twMerge("text-center font-semibold text-lg text-popup-title-default",s)})}))]})});d.displayName="Header",c.Header=d;const u=({containerStyles:t,children:s})=>e.jsx(e.Fragment,{children:e.jsx("div",Object.assign({className:o.twMerge("flex flex-1 w-full px-6",t)},{children:s}))});u.displayName="Content",c.Content=u;const j=({containerStyles:t,onClose:s,children:n})=>e.jsx(e.Fragment,{children:e.jsx("div",Object.assign({className:o.twMerge("flex items-center justify-center w-full p-3 bg-light-whiteSmoke",t)},{children:n||e.jsx(i.default,{label:"Close",variant:"secondary",onClick:()=>s()})}))});j.displayName="Footer",c.Footer=j,module.exports=c;
|
|
2
2
|
//# sourceMappingURL=BaseModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseModal.js","sources":["../../../../src/components/Modal/BaseModal.tsx"],"sourcesContent":["import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';\nimport React, { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { BaseButton } from '../Button';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseModalContentInterface,\n BaseModalFooterInterface,\n BaseModalHeaderInterface,\n BaseModalInterface\n} from './BaseModal.type';\n\nconst BaseModal = ({\n isOpen,\n overlayDisableClose,\n onClose,\n containerStyles,\n children\n}: BaseModalInterface) => {\n const header = getChildrenOnDisplayName(children, 'Header');\n const content = getChildrenOnDisplayName(children, 'Content');\n const footer = getChildrenOnDisplayName(children, 'Footer');\n\n const onCloseModal = () => {\n onClose();\n };\n\n return (\n <>\n <Transition appear show={isOpen} as={Fragment}>\n <Dialog\n as='div'\n className='relative z-10'\n onClose={() => {\n if (!overlayDisableClose) onCloseModal();\n }}\n >\n <TransitionChild\n as={Fragment}\n enter='ease-out duration-300'\n enterFrom='opacity-0'\n enterTo='opacity-100'\n leave='ease-in duration-200'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <div className='fixed inset-0 bg-black bg-opacity-25' />\n </TransitionChild>\n\n <div className='fixed inset-0 overflow-y-auto'>\n <div
|
|
1
|
+
{"version":3,"file":"BaseModal.js","sources":["../../../../src/components/Modal/BaseModal.tsx"],"sourcesContent":["import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react';\nimport React, { Fragment } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nimport { getChildrenOnDisplayName } from '../../utils/getChildrenOnDisplayName';\nimport { BaseButton } from '../Button';\nimport { Icon } from '../Icon';\nimport { BaseText } from '../Text';\nimport {\n BaseModalContentInterface,\n BaseModalFooterInterface,\n BaseModalHeaderInterface,\n BaseModalInterface\n} from './BaseModal.type';\n\nconst BaseModal = ({\n isOpen,\n overlayDisableClose,\n onClose,\n containerStyles,\n wrapperStyles,\n children\n}: BaseModalInterface) => {\n const header = getChildrenOnDisplayName(children, 'Header');\n const content = getChildrenOnDisplayName(children, 'Content');\n const footer = getChildrenOnDisplayName(children, 'Footer');\n\n const onCloseModal = () => {\n onClose();\n };\n\n return (\n <>\n <Transition appear show={isOpen} as={Fragment}>\n <Dialog\n as='div'\n className='relative z-10'\n onClose={() => {\n if (!overlayDisableClose) onCloseModal();\n }}\n >\n <TransitionChild\n as={Fragment}\n enter='ease-out duration-300'\n enterFrom='opacity-0'\n enterTo='opacity-100'\n leave='ease-in duration-200'\n leaveFrom='opacity-100'\n leaveTo='opacity-0'\n >\n <div className='fixed inset-0 bg-black bg-opacity-25' />\n </TransitionChild>\n\n <div className='fixed inset-0 overflow-y-auto'>\n <div\n className={twMerge(\n 'flex min-h-full items-center justify-center p-4 text-center',\n wrapperStyles\n )}\n >\n <TransitionChild\n as={Fragment}\n enter='ease-out duration-300'\n enterFrom='opacity-0 scale-95'\n enterTo='opacity-100 scale-100'\n leave='ease-in duration-200'\n leaveFrom='opacity-100 scale-100'\n leaveTo='opacity-0 scale-95'\n >\n <DialogPanel\n className={twMerge(\n 'flex flex-col w-full max-w-md transform overflow-hidden rounded-lg bg-white text-left align-middle shadow-xl transition-all relative',\n containerStyles\n )}\n >\n {header}\n {content}\n {footer}\n </DialogPanel>\n </TransitionChild>\n </div>\n </div>\n </Dialog>\n </Transition>\n </>\n );\n};\n\nconst Header = ({\n title,\n titleStyles,\n containerStyles,\n iconCloseContainerStyles,\n iconCloseStyles,\n onClose,\n children\n}: BaseModalHeaderInterface) => (\n <>\n {children ? (\n children\n ) : (\n <>\n <div className={twMerge('position absolute top-2 right-2', iconCloseContainerStyles)}>\n <button className='bg-white p-0' onClick={() => onClose()}>\n <Icon name='close' className={twMerge('w-3 h-3', iconCloseStyles)} />\n </button>\n </div>\n <div className={twMerge('w-full px-6 pt-6 pb-4', containerStyles)}>\n <BaseText\n label={title || ''}\n className={twMerge(\n 'text-center font-semibold text-lg text-popup-title-default',\n titleStyles\n )}\n />\n </div>\n </>\n )}\n </>\n);\nHeader.displayName = 'Header';\nBaseModal.Header = Header;\n\nconst Content = ({ containerStyles, children }: BaseModalContentInterface) => (\n <>\n <div className={twMerge('flex flex-1 w-full px-6', containerStyles)}>{children}</div>\n </>\n);\nContent.displayName = 'Content';\nBaseModal.Content = Content;\n\nconst Footer = ({ containerStyles, onClose, children }: BaseModalFooterInterface) => (\n <>\n <div\n className={twMerge(\n 'flex items-center justify-center w-full p-3 bg-light-whiteSmoke',\n containerStyles\n )}\n >\n {children ? (\n children\n ) : (\n <BaseButton label='Close' variant='secondary' onClick={() => onClose()} />\n )}\n </div>\n </>\n);\nFooter.displayName = 'Footer';\nBaseModal.Footer = Footer;\n\nexport default BaseModal;\n"],"names":["BaseModal","isOpen","overlayDisableClose","onClose","containerStyles","wrapperStyles","children","header","getChildrenOnDisplayName","content","footer","_jsx","jsx","_Fragment","Fragment","Transition","Object","assign","appear","show","as","_jsxs","Dialog","className","TransitionChild","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","twMerge","DialogPanel","Header","title","titleStyles","iconCloseContainerStyles","iconCloseStyles","onClick","Icon","name","BaseText","label","displayName","Content","Footer","BaseButton","variant"],"mappings":"2yBAeA,MAAMA,EAAY,EAChBC,SACAC,sBACAC,UACAC,kBACAC,gBACAC,eAEA,MAAMC,EAASC,EAAAA,yBAAyBF,EAAU,UAC5CG,EAAUD,EAAAA,yBAAyBF,EAAU,WAC7CI,EAASF,EAAAA,yBAAyBF,EAAU,UAMlD,OACEK,EAAAC,IAAAC,EAAAC,SAAA,CAAAR,SACEK,EAACC,IAAAG,EAAUA,WAACC,OAAAC,OAAA,CAAAC,QAAO,EAAAC,KAAMlB,EAAQmB,GAAIN,EAAQA,UAC3C,CAAAR,SAAAe,OAACC,EAAAA,OAAMN,OAAAC,OAAA,CACLG,GAAG,MACHG,UAAU,gBACVpB,QAAS,KACFD,GAVbC,GAUgD,GACzC,CAAAG,SAAA,CAEDK,EAAAA,IAACa,EAAeA,gBACdR,OAAAC,OAAA,CAAAG,GAAIN,EAAQA,SACZW,MAAM,wBACNC,UAAU,YACVC,QAAQ,cACRC,MAAM,uBACNC,UAAU,cACVC,QAAQ,aAER,CAAAxB,SAAAK,EAAAC,IAAA,MAAA,CAAKW,UAAU,4CAGjBZ,MAAA,MAAAK,OAAAC,OAAA,CAAKM,UAAU,iCACb,CAAAjB,SAAAK,EAAAA,IAAA,MAAAK,OAAAC,OAAA,CACEM,UAAWQ,EAAOA,QAChB,8DACA1B,IAGF,CAAAC,SAAAK,EAAAA,IAACa,EAAeA,gBACdR,OAAAC,OAAA,CAAAG,GAAIN,EAAQA,SACZW,MAAM,wBACNC,UAAU,qBACVC,QAAQ,wBACRC,MAAM,uBACNC,UAAU,wBACVC,QAAQ,sBAER,CAAAxB,SAAAe,EAAAA,KAACW,EAAAA,YAAWhB,OAAAC,OAAA,CACVM,UAAWQ,EAAAA,QACT,uIACA3B,IACD,CAAAE,SAAA,CAEAC,EACAE,EACAC,uBAQf,EAGEuB,EAAS,EACbC,QACAC,cACA/B,kBACAgC,2BACAC,kBACAlC,UACAG,cAEAK,EAAAA,IACGE,EAAAC,SAAA,CAAAR,SAAAA,GAGCe,OACER,EAAAA,SAAA,CAAAP,SAAA,CAAAK,EAAAA,IAAA,MAAAK,OAAAC,OAAA,CAAKM,UAAWQ,EAAOA,QAAC,kCAAmCK,IAAyB,CAAA9B,SAClFK,EAAQC,IAAA,SAAAI,OAAAC,OAAA,CAAAM,UAAU,eAAee,QAAS,IAAMnC,KAAS,CAAAG,SACvDK,MAAC4B,EAAK,CAAAC,KAAK,QAAQjB,UAAWQ,EAAOA,QAAC,UAAWM,WAGrD1B,EAAKC,IAAA,MAAAI,OAAAC,OAAA,CAAAM,UAAWQ,EAAOA,QAAC,wBAAyB3B,IAC/C,CAAAE,SAAAK,EAAAA,IAAC8B,EAAAA,QAAQ,CACPC,MAAOR,GAAS,GAChBX,UAAWQ,EAAAA,QACT,6DACAI,aAQdF,EAAOU,YAAc,SACrB3C,EAAUiC,OAASA,EAEnB,MAAMW,EAAU,EAAGxC,kBAAiBE,cAClCK,EAAAA,IAAAE,EAAAC,SAAA,CAAAR,SACEK,MAAK,MAAAK,OAAAC,OAAA,CAAAM,UAAWQ,EAAAA,QAAQ,0BAA2B3B,IAAgB,CAAAE,SAAGA,OAG1EsC,EAAQD,YAAc,UACtB3C,EAAU4C,QAAUA,EAEpB,MAAMC,EAAS,EAAGzC,kBAAiBD,UAASG,cAC1CK,EAAAC,IAAAC,WAAA,CAAAP,SACEK,EACEC,IAAA,MAAAI,OAAAC,OAAA,CAAAM,UAAWQ,EAAAA,QACT,kEACA3B,IACD,CAAAE,SAEAA,GAGCK,EAAAC,IAACkC,UAAU,CAACJ,MAAM,QAAQK,QAAQ,YAAYT,QAAS,IAAMnC,WAKrE0C,EAAOF,YAAc,SACrB3C,EAAU6C,OAASA"}
|
|
@@ -13,5 +13,5 @@
|
|
|
13
13
|
border-radius: ${d.BorderRadiusType.round};
|
|
14
14
|
height: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
15
15
|
width: ${({size:e})=>"small"===e?"12px":"16px"};
|
|
16
|
-
`,p=a=>e.jsxs(n,Object.assign({"data-test-id":`radioButton-${a.value}`,variant:a.size},{children:[e.jsx(u,{name:a.name,value:a.value,checked:a.checked,onChange:e=>a.onClick(e.target.value),disabled:a.isDisabled,className:r.twJoin(i.default("small"===a.size?"w-3 h-3":"w-4 h-4"))}),a.checked?e.jsx(t,{name:"radioButton",className:r.twJoin(i.default("small"===a.size?"w-3 h-3":"w-4 h-4",r.twJoin("fill-blue-buttonBlue","fill-radio-background-active"),a.isDisabled&&r.twJoin("fill-dark-silver","fill-radio-background-disable-checked")))}):e.jsx(c,{size:a.size?a.size:"medium",className:r.twJoin(i.default("border
|
|
16
|
+
`,p=a=>e.jsxs(n,Object.assign({"data-test-id":`radioButton-${a.value}`,variant:a.size},{children:[e.jsx(u,{name:a.name,value:a.value,checked:a.checked,onChange:e=>a.onClick(e.target.value),disabled:a.isDisabled,className:r.twJoin(i.default("small"===a.size?"w-3 h-3":"w-4 h-4"))}),a.checked?e.jsx(t,{name:"radioButton",className:r.twJoin(i.default("small"===a.size?"w-3 h-3":"w-4 h-4",r.twJoin("fill-blue-buttonBlue","fill-radio-background-active"),a.isDisabled&&r.twJoin("fill-dark-silver","fill-radio-background-disable-checked")))}):e.jsx(c,{size:a.size?a.size:"medium",className:r.twJoin(i.default("border border-solid",a.isDisabled?"border-radio-border-disable-unchecked bg-radio-background-disable-unchecked":"border-radio-border-default bg-radio-background-default"))})]}));p.prototype={value:a.propTypesExports.string},p.defaultProps={value:"string"},module.exports=p;
|
|
17
17
|
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { twJoin } from 'tailwind-merge';\n\nimport { BorderRadiusType } from '../../styles/BorderRadius';\nimport { Icon } from '../Icon';\nimport { RadioButtonInterface, RadioSizeType } from './RadioButton.type';\n\nconst RadioContainerStyled = styled.div<{ variant: RadioSizeType }>`\n align-items: center;\n display: flex;\n height: ${({ variant }) => (variant === 'small' ? '12px' : '16px')};\n justify-content: center;\n position: relative;\n width: ${({ variant }) => (variant === 'small' ? '12px' : '16px')};\n`;\n\nconst HiddenRadioStyled = styled.input.attrs<RadioButtonInterface>(() => ({\n type: 'radio'\n}))`\n position: absolute;\n cursor: pointer;\n opacity: 0;\n`;\n\nconst RadioOffStyled = styled.div<{ size: RadioSizeType }>`\n border-radius: ${BorderRadiusType['round']};\n height: ${({ size }) => (size === 'small' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'small' ? '12px' : '16px')};\n`;\n\nconst Radio = (props: RadioButtonInterface) => (\n <RadioContainerStyled data-test-id={`radioButton-${props.value}`} variant={props.size}>\n <HiddenRadioStyled\n name={props.name}\n value={props.value}\n checked={props.checked}\n onChange={(e) => props.onClick(e.target.value)}\n disabled={props.isDisabled}\n className={twJoin(classNames(props.size === 'small' ? 'w-3 h-3' : 'w-4 h-4'))}\n />\n {props.checked ? (\n <Icon\n name='radioButton'\n className={twJoin(\n classNames(\n props.size === 'small' ? 'w-3 h-3' : 'w-4 h-4',\n twJoin('fill-blue-buttonBlue', 'fill-radio-background-active'),\n props.isDisabled && twJoin('fill-dark-silver', 'fill-radio-background-disable-checked')\n )\n )}\n />\n ) : (\n <RadioOffStyled\n size={props.size ? props.size : 'medium'}\n className={twJoin(\n classNames(\n 'border
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport * as PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { twJoin } from 'tailwind-merge';\n\nimport { BorderRadiusType } from '../../styles/BorderRadius';\nimport { Icon } from '../Icon';\nimport { RadioButtonInterface, RadioSizeType } from './RadioButton.type';\n\nconst RadioContainerStyled = styled.div<{ variant: RadioSizeType }>`\n align-items: center;\n display: flex;\n height: ${({ variant }) => (variant === 'small' ? '12px' : '16px')};\n justify-content: center;\n position: relative;\n width: ${({ variant }) => (variant === 'small' ? '12px' : '16px')};\n`;\n\nconst HiddenRadioStyled = styled.input.attrs<RadioButtonInterface>(() => ({\n type: 'radio'\n}))`\n position: absolute;\n cursor: pointer;\n opacity: 0;\n`;\n\nconst RadioOffStyled = styled.div<{ size: RadioSizeType }>`\n border-radius: ${BorderRadiusType['round']};\n height: ${({ size }) => (size === 'small' ? '12px' : '16px')};\n width: ${({ size }) => (size === 'small' ? '12px' : '16px')};\n`;\n\nconst Radio = (props: RadioButtonInterface) => (\n <RadioContainerStyled data-test-id={`radioButton-${props.value}`} variant={props.size}>\n <HiddenRadioStyled\n name={props.name}\n value={props.value}\n checked={props.checked}\n onChange={(e) => props.onClick(e.target.value)}\n disabled={props.isDisabled}\n className={twJoin(classNames(props.size === 'small' ? 'w-3 h-3' : 'w-4 h-4'))}\n />\n {props.checked ? (\n <Icon\n name='radioButton'\n className={twJoin(\n classNames(\n props.size === 'small' ? 'w-3 h-3' : 'w-4 h-4',\n twJoin('fill-blue-buttonBlue', 'fill-radio-background-active'),\n props.isDisabled && twJoin('fill-dark-silver', 'fill-radio-background-disable-checked')\n )\n )}\n />\n ) : (\n <RadioOffStyled\n size={props.size ? props.size : 'medium'}\n className={twJoin(\n classNames(\n 'border border-solid',\n props.isDisabled\n ? 'border-radio-border-disable-unchecked bg-radio-background-disable-unchecked'\n : 'border-radio-border-default bg-radio-background-default'\n )\n )}\n />\n )}\n </RadioContainerStyled>\n);\n\nRadio.prototype = {\n value: PropTypes.string\n};\nRadio.defaultProps = {\n value: 'string'\n};\nexport default Radio;\n"],"names":["RadioContainerStyled","styled","div","variant","HiddenRadioStyled","input","attrs","type","RadioOffStyled","BorderRadiusType","size","Radio","props","_jsxs","Object","assign","value","_jsx","name","checked","onChange","e","onClick","target","disabled","isDisabled","className","twJoin","classNames","Icon","prototype","PropTypes.string","propTypesExports","string","defaultProps"],"mappings":"iaASA,MAAMA,EAAuBC,EAAAA,QAAOC,GAA+B;;;YAGvD,EAAGC,aAA2B,UAAZA,EAAsB,OAAS;;;WAGlD,EAAGA,aAA2B,UAAZA,EAAsB,OAAS;EAGtDC,EAAoBH,EAAM,QAACI,MAAMC,OAA4B,KAAO,CACxEC,KAAM,WACL;;;;EAMGC,EAAiBP,EAAAA,QAAOC,GAA4B;mBACvCO,EAAAA,iBAAwB;YAC/B,EAAGC,UAAqB,UAATA,EAAmB,OAAS;WAC5C,EAAGA,UAAqB,UAATA,EAAmB,OAAS;EAGhDC,EAASC,GACbC,EAAAA,KAACb,EAAoBc,OAAAC,OAAA,CAAA,eAAe,eAAeH,EAAMI,QAASb,QAASS,EAAMF,iBAC/EO,EAAAA,IAACb,GACCc,KAAMN,EAAMM,KACZF,MAAOJ,EAAMI,MACbG,QAASP,EAAMO,QACfC,SAAWC,GAAMT,EAAMU,QAAQD,EAAEE,OAAOP,OACxCQ,SAAUZ,EAAMa,WAChBC,UAAWC,SAAOC,EAAAA,QAA0B,UAAfhB,EAAMF,KAAmB,UAAY,cAEnEE,EAAMO,QACLF,EAAAA,IAACY,GACCX,KAAK,cACLQ,UAAWC,EAAAA,OACTC,EAAU,QACO,UAAfhB,EAAMF,KAAmB,UAAY,UACrCiB,EAAMA,OAAC,uBAAwB,gCAC/Bf,EAAMa,YAAcE,EAAMA,OAAC,mBAAoB,6CAKrDV,MAACT,GACCE,KAAME,EAAMF,KAAOE,EAAMF,KAAO,SAChCgB,UAAWC,EAAAA,OACTC,EAAU,QACR,sBACAhB,EAAMa,WACF,8EACA,kEAQhBd,EAAMmB,UAAY,CAChBd,MAAOe,EAAgBC,iBAAAC,QAEzBtB,EAAMuB,aAAe,CACnBlB,MAAO"}
|