@nlabs/gothamjs/storybook-static/components-Button-Button-stories.3d568e12.iframe.bundle.js

Platform

"use strict";(self.webpackChunk_nlabs_gothamjs=self.webpackChunk_nlabs_gothamjs||[]).push([[721],{"./src/components/Button/Button.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Button:function(){return Button_stories_Button},__namedExportsOrder:function(){return __namedExportsOrder},default:function(){return Button_stories}});var lib=__webpack_require__("./node_modules/@nlabs/utils/lib/index.js"),react=__webpack_require__("../lex/node_modules/react/index.js"),es=__webpack_require__("./node_modules/react-i18next/dist/es/index.js"),colorUtils=__webpack_require__("./src/utils/colorUtils.ts"),jsx_runtime=__webpack_require__("../lex/node_modules/react/jsx-runtime.js");const Button=(0,react.forwardRef)(({children:children,className:className,color:color="primary",disabled:disabled,hasNotification:hasNotification=!1,hasShadow:hasShadow=!1,icon:icon,isLoading:isLoading=!1,label:label,onClick:onClick=()=>{},size:size="md",type:type="button",variant:variant,...restBtnProps},ref)=>{const{t:t}=(0,es.Bd)(),classes=[];if(variant){switch(classes.push("cursor-pointer","flex","focus-visible:outline","focus-visible:outline-2","focus-visible:outline-offset-2","focus-visible:outline-secondary","items-center","justify-center","leading-6","relative"),variant){case"outlined":classes.push("bg-transparent","border-1","font-semibold",(0,colorUtils.nw)(color,{hasFocus:!0,hasHover:!0}),(0,colorUtils.IR)(color,{hasFocus:!0,hasHover:!0}));break;case"text":classes.push("bg-transparent","font-semibold",(0,colorUtils.IR)(color,{hasFocus:!0,hasHover:!0}));break;default:classes.push((0,colorUtils.rt)(color,{hasFocus:!0,hasHover:!0}),"font-medium","text-white",hasShadow?"shadow-sm":"")}switch(size){case"sm":classes.push("px-4","py-0.5","rounded","text-sm");break;case"lg":classes.push("px-8","py-4","rounded-lg","text-lg");break;default:classes.push("px-6","py-2","rounded-md","text-md")}}let buttonIcon=icon;isLoading&&(buttonIcon=(0,jsx_runtime.jsxs)("svg",{className:"mr-3 -ml-1 size-5 animate-spin text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[(0,jsx_runtime.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor","stroke-width":"4"}),(0,jsx_runtime.jsx)("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}));let buttonNotification=null;return hasNotification&&(buttonNotification=(0,jsx_runtime.jsxs)("span",{className:"absolute top-0 right-0 -mt-1 -mr-1 flex size-3",children:[(0,jsx_runtime.jsx)("span",{className:"absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"}),(0,jsx_runtime.jsx)("span",{className:"relative inline-flex size-3 rounded-full bg-sky-500"})]})),(0,jsx_runtime.jsxs)("button",{className:(0,lib.cn)(...classes,className),"data-testid":`button-${label||children}`,disabled:isLoading||disabled,onClick:onClick,ref:ref,type:type,...restBtnProps,children:[buttonNotification,buttonIcon,children||t(label)]})});Button.__docgenInfo={description:"",methods:[],displayName:"Button",props:{children:{required:!1,tsType:{name:"ReactNode"},description:""},className:{required:!1,tsType:{name:"string"},description:""},color:{required:!1,tsType:{name:"union",raw:"'primary' | 'secondary' | 'tertiary' | 'link' | 'neutral' | 'white' | 'black' | 'error' | 'warning' | 'success' | 'info' | 'transparent'",elements:[{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'tertiary'"},{name:"literal",value:"'link'"},{name:"literal",value:"'neutral'"},{name:"literal",value:"'white'"},{name:"literal",value:"'black'"},{name:"literal",value:"'error'"},{name:"literal",value:"'warning'"},{name:"literal",value:"'success'"},{name:"literal",value:"'info'"},{name:"literal",value:"'transparent'"}]},description:"",defaultValue:{value:"'primary'",computed:!1}},disabled:{required:!1,tsType:{name:"boolean"},description:""},hasNotification:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},hasShadow:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},icon:{required:!1,tsType:{name:"ReactNode"},description:""},isLoading:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},label:{required:!1,tsType:{name:"string"},description:""},onClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(event?: unknown) => void",signature:{arguments:[{type:{name:"unknown"},name:"event"}],return:{name:"void"}}},description:"",defaultValue:{value:"() => {}",computed:!1}},size:{required:!1,tsType:{name:"union",raw:"'sm' | 'md' | 'lg'",elements:[{name:"literal",value:"'sm'"},{name:"literal",value:"'md'"},{name:"literal",value:"'lg'"}]},description:"",defaultValue:{value:"'md'",computed:!1}},tabIndex:{required:!1,tsType:{name:"number"},description:""},type:{required:!1,tsType:{name:"union",raw:"'button' | 'reset' | 'submit'",elements:[{name:"literal",value:"'button'"},{name:"literal",value:"'reset'"},{name:"literal",value:"'submit'"}]},description:"",defaultValue:{value:"'button'",computed:!1}},variant:{required:!1,tsType:{name:"union",raw:"'text' | 'contained' | 'outlined'",elements:[{name:"literal",value:"'text'"},{name:"literal",value:"'contained'"},{name:"literal",value:"'outlined'"}]},description:""}}};var Button_stories={argTypes:{color:{control:"select",options:colorUtils.v1},size:{control:"select",options:["sm","md","lg"]},variant:{control:"select",options:["contained","outlined","text"]}},component:Button,parameters:{backgrounds:{default:"light",values:[{name:"light",value:"#ffffff"},{name:"dark",value:"#1a1a1a"}]},layout:"centered"},title:"Components/Button"};const Button_stories_Button={args:{color:"secondary",disabled:!1,hasShadow:!1,isLoading:!1,label:"Button",size:"md",variant:"contained"}},__namedExportsOrder=["Button"];Button_stories_Button.parameters={...Button_stories_Button.parameters,docs:{...Button_stories_Button.parameters?.docs,source:{originalSource:"{\n  args: {\n    color: 'secondary',\n    disabled: false,\n    hasShadow: false,\n    isLoading: false,\n    label: 'Button',\n    size: 'md',\n    variant: 'contained'\n  }\n}",...Button_stories_Button.parameters?.docs?.source}}}},"./src/utils/colorUtils.ts":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{IR:function(){return getTextClasses},TL:function(){return getOutlineClasses},jr:function(){return getErrorClasses},kX:function(){return getPlaceholderClasses},nw:function(){return getBorderClasses},oj:function(){return getCheckedClasses},rt:function(){return getBackgroundClasses},v1:function(){return gothamColors}});const gothamColors=["primary","secondary","tertiary","link","neutral","black","white","error","warning","success","info"],getTextClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("text-primary dark:text-primary-dark"),hasHover&&classes.push("hover:text-primary-700 dark:hover:text-primary-dark-300"),hasFocus&&classes.push("focus:text-primary-700 dark:focus:text-primary-dark-300")):"secondary"===color?(classes.push("text-secondary dark:text-secondary-dark"),hasHover&&classes.push("hover:text-secondary-700 dark:hover:text-secondary-dark-300"),hasFocus&&classes.push("focus:text-secondary-700 dark:focus:text-secondary-dark-300")):"tertiary"===color?(classes.push("text-tertiary dark:text-tertiary-dark"),hasHover&&classes.push("hover:text-tertiary-700 dark:hover:text-tertiary-dark-300"),hasFocus&&classes.push("focus:text-tertiary-700 dark:focus:text-tertiary-dark-300")):"link"===color?(classes.push("text-link dark:text-link-dark"),hasHover&&classes.push("hover:text-link-700 dark:hover:text-link-dark-300"),hasFocus&&classes.push("focus:text-link-700 dark:focus:text-link-dark-300")):"neutral"===color?(classes.push("text-neutral dark:text-neutral-dark"),hasHover&&classes.push("hover:text-neutral-700 dark:hover:text-neutral-dark-300"),hasFocus&&classes.push("focus:text-neutral-700 dark:focus:text-neutral-dark-300")):"white"===color?(classes.push("text-white dark:text-white-dark"),hasHover&&classes.push("hover:text-white-300 dark:hover:text-white-dark-300"),hasFocus&&classes.push("focus:text-white-700 dark:focus:text-white-dark-700")):"error"===color?(classes.push("text-error dark:text-error-dark"),hasHover&&classes.push("hover:text-error-700 dark:hover:text-error-dark-300"),hasFocus&&classes.push("focus:text-error-700 dark:focus:text-error-dark-300")):"warning"===color?(classes.push("text-warning dark:text-warning-dark"),hasHover&&classes.push("hover:text-warning-700 dark:hover:text-warning-dark-300")):"success"===color?(classes.push("text-success dark:text-success-dark"),hasHover&&classes.push("hover:text-success-700 dark:hover:text-success-dark-300"),hasFocus&&classes.push("focus:text-success-700 dark:focus:text-success-dark-300")):"info"===color?(classes.push("text-info dark:text-info-dark"),hasHover&&classes.push("hover:text-info-700 dark:hover:text-info-dark-300"),hasFocus&&classes.push("focus:text-info-700 dark:focus:text-info-dark-300")):(classes.push("text-black dark:text-white"),hasHover&&classes.push("hover:text-black dark:hover:text-black-dark"),hasFocus&&classes.push("focus:text-black-900 dark:focus:text-black-dark-900")),classes.join(" ")},getPlaceholderClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("placeholder:text-primary dark:placeholder:text-primary-dark"),hasHover&&classes.push("hover:placeholder:text-primary-700 dark:hover:placeholder:text-primary-dark-300"),hasFocus&&classes.push("focus:placeholder:text-primary-700 dark:focus:placeholder:text-primary-dark-300")):"secondary"===color?(classes.push("placeholder:text-secondary dark:placeholder:text-secondary-dark"),hasHover&&classes.push("hover:placeholder:text-secondary-700 dark:hover:placeholder:text-secondary-dark-300"),hasFocus&&classes.push("focus:placeholder:text-secondary-700 dark:focus:placeholder:text-secondary-dark-300")):"tertiary"===color?(classes.push("placeholder:text-tertiary dark:placeholder:text-tertiary-dark"),hasHover&&classes.push("hover:placeholder:text-tertiary-700 dark:hover:placeholder:text-tertiary-dark-300"),hasFocus&&classes.push("focus:placeholder:text-tertiary-700 dark:focus:placeholder:text-tertiary-dark-300")):"link"===color?(classes.push("placeholder:text-link dark:placeholder:text-link-dark"),hasHover&&classes.push("hover:placeholder:text-link-700 dark:hover:placeholder:text-link-dark-300"),hasFocus&&classes.push("focus:placeholder:text-link-700 dark:focus:placeholder:text-link-dark-300")):"neutral"===color?(classes.push("placeholder:text-neutral dark:placeholder:text-neutral-dark"),hasHover&&classes.push("hover:placeholder:text-neutral-700 dark:hover:placeholder:text-neutral-dark-300"),hasFocus&&classes.push("focus:placeholder:text-neutral-700 dark:focus:placeholder:text-neutral-dark-300")):"white"===color?(classes.push("placeholder:text-white dark:placeholder:text-black"),hasHover&&classes.push("hover:placeholder:text-white-700 dark:hover:placeholder:text-black-dark-300"),hasFocus&&classes.push("focus:placeholder:text-white-700 dark:focus:placeholder:text-black-dark-300")):"error"===color?(classes.push("placeholder:text-error dark:placeholder:text-error-dark"),hasHover&&classes.push("hover:placeholder:text-error-700 dark:hover:placeholder:text-error-dark-300"),hasFocus&&classes.push("focus:placeholder:text-error-700 dark:focus:placeholder:text-error-dark-300")):"warning"===color?(classes.push("placeholder:text-warning dark:placeholder:text-warning-dark"),hasHover&&classes.push("hover:placeholder:text-warning-700 dark:hover:placeholder:text-warning-dark-300")):"success"===color?(classes.push("placeholder:text-success dark:placeholder:text-success-dark"),hasHover&&classes.push("hover:placeholder:text-success-700 dark:hover:placeholder:text-success-dark-300"),hasFocus&&classes.push("focus:placeholder:text-success-700 dark:focus:placeholder:text-success-dark-300")):"info"===color?(classes.push("placeholder:text-info dark:placeholder:text-info-dark"),hasHover&&classes.push("hover:placeholder:text-info-700 dark:hover:placeholder:text-info-dark-300"),hasFocus&&classes.push("focus:placeholder:text-info-700 dark:focus:placeholder:text-info-dark-300")):(classes.push("placeholder:text-black dark:placeholder:text-white"),hasHover&&classes.push("hover:placeholder:text-black dark:hover:placeholder:text-white"),hasFocus&&classes.push("focus:placeholder:text-black dark:focus:placeholder:text-white")),classes.join(" ")},getErrorClasses=errorColor=>"error"===errorColor?"text-error dark:text-error-dark":"warning"===errorColor?"text-warning dark:text-warning-dark":"success"===errorColor?"text-success dark:text-success-dark":"text-info dark:text-info-dark",getBorderClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("border-primary dark:border-primary-dark"),hasHover&&classes.push("hover:border-primary-700 dark:hover:border-primary-dark-300"),hasFocus&&classes.push("focus:border-primary-700 dark:focus:border-primary-dark-300")):"secondary"===color?(classes.push("border-secondary dark:border-secondary-dark"),hasHover&&classes.push("hover:border-secondary-700 dark:hover:border-secondary-dark-300"),hasFocus&&classes.push("focus:border-secondary-700 dark:focus:border-secondary-dark-300")):"tertiary"===color?(classes.push("border-tertiary dark:border-tertiary-dark"),hasHover&&classes.push("hover:border-tertiary-700 dark:hover:border-tertiary-dark-300"),hasFocus&&classes.push("focus:border-tertiary-700 dark:focus:border-tertiary-dark-300")):"error"===color?(classes.push("border-error dark:border-error-dark"),hasHover&&classes.push("hover:border-error-700 dark:hover:border-error-dark-300"),hasFocus&&classes.push("focus:border-error-700 dark:focus:border-error-dark-300")):"warning"===color?(classes.push("border-warning dark:border-warning-dark"),hasHover&&classes.push("hover:border-warning-700 dark:hover:border-warning-dark-300"),hasFocus&&classes.push("focus:border-warning-700 dark:focus:border-warning-dark-300")):"success"===color?(classes.push("border-success dark:border-success-dark"),hasHover&&classes.push("hover:border-success-700 dark:hover:border-success-dark-300"),hasFocus&&classes.push("focus:border-success-700 dark:focus:border-success-dark-300")):"info"===color?(classes.push("border-info dark:border-info-dark"),hasHover&&classes.push("hover:border-info-700 dark:hover:border-info-dark-300"),hasFocus&&classes.push("focus:border-info-700 dark:focus:border-info-dark-300")):(classes.push("border-black dark:border-white"),hasHover&&classes.push("hover:border-black dark:hover:border-white"),hasFocus&&classes.push("focus:border-black dark:focus:border-white")),classes.join(" ")},getOutlineClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("outline-primary dark:outline-primary-dark"),hasHover&&classes.push("hover:outline-primary-700 dark:hover:outline-primary-dark-300"),hasFocus&&classes.push("focus:outline-primary-700 dark:focus:outline-primary-dark-300")):"secondary"===color?(classes.push("outline-secondary dark:outline-secondary-dark"),hasHover&&classes.push("hover:outline-secondary-700 dark:hover:outline-secondary-dark-300"),hasFocus&&classes.push("focus:outline-secondary-700 dark:focus:outline-secondary-dark-300")):"tertiary"===color?(classes.push("outline-tertiary dark:outline-tertiary-dark"),hasHover&&classes.push("hover:outline-tertiary-700 dark:hover:outline-tertiary-dark-300"),hasFocus&&classes.push("focus:outline-tertiary-700 dark:focus:outline-tertiary-dark-300")):"error"===color?(classes.push("outline-error dark:outline-error-dark"),hasHover&&classes.push("hover:outline-error-700 dark:hover:outline-error-dark-300"),hasFocus&&classes.push("focus:outline-error-700 dark:focus:outline-error-dark-300")):"warning"===color?(classes.push("outline-warning dark:outline-warning-dark"),hasHover&&classes.push("hover:outline-warning-700 dark:hover:outline-warning-dark-300"),hasFocus&&classes.push("focus:outline-warning-700 dark:focus:outline-warning-dark-300")):"success"===color?(classes.push("outline-success dark:outline-success-dark"),hasHover&&classes.push("hover:outline-success-700 dark:hover:outline-success-dark-300"),hasFocus&&classes.push("focus:outline-success-700 dark:focus:outline-success-dark-300")):"info"===color?(classes.push("outline-info dark:outline-info-dark"),hasHover&&classes.push("hover:outline-info-700 dark:hover:outline-info-dark-300"),hasFocus&&classes.push("focus:outline-info-700 dark:focus:outline-info-dark-300")):(classes.push("outline-black dark:outline-white"),hasHover&&classes.push("hover:outline-black dark:hover:outline-white"),hasFocus&&classes.push("focus:outline-black dark:focus:outline-white")),classes.join(" ")},getCheckedClasses=color=>{const classes=[];return"primary"===color?classes.push("checked:border-primary-700 dark:checked:border-primary-dark-300 checked:bg-primary-700 dark:checked:bg-primary-dark-300"):"secondary"===color?classes.push("checked:border-secondary-700 dark:checked:border-secondary-dark-300 checked:bg-secondary-700 dark:checked:bg-secondary-dark-300"):"tertiary"===color?classes.push("checked:border-tertiary-700 dark:checked:border-tertiary-dark-300 checked:bg-tertiary-700 dark:checked:bg-tertiary-dark-300"):"neutral"===color?classes.push("checked:border-neutral-700 dark:checked:border-neutral-dark-300 checked:bg-neutral-700 dark:checked:bg-neutral-dark-300"):"error"===color?classes.push("checked:border-error-700 dark:checked:border-error-dark-300 checked:bg-error-700 dark:checked:bg-error-dark-300"):"warning"===color?classes.push("checked:border-warning-700 dark:checked:border-warning-dark-300 checked:bg-warning-700 dark:checked:bg-warning-dark-300"):"success"===color?classes.push("checked:border-success-700 dark:checked:border-success-dark-300 checked:bg-success-700 dark:checked:bg-success-dark-300"):"white"===color?classes.push("checked:border-white-700 dark:checked:border-black-dark-300 checked:bg-white-700 dark:checked:bg-black-dark-300"):"black"===color&&classes.push("checked:border-black-700 dark:checked:border-white-dark-300 checked:bg-black-700 dark:checked:bg-white-dark-300"),classes.join(" ")},getBackgroundClasses=(color,options={})=>{const{hasFocus:hasFocus=!1,hasHover:hasHover=!1}=options,classes=[];return"primary"===color?(classes.push("bg-primary dark:bg-primary-dark"),hasHover&&classes.push("hover:bg-primary-700 dark:hover:bg-primary-dark-300"),hasFocus&&classes.push("focus:bg-primary-700 dark:focus:bg-primary-dark-300")):"secondary"===color?(classes.push("bg-secondary dark:bg-secondary-dark"),hasHover&&classes.push("hover:bg-secondary-700 dark:hover:bg-secondary-dark-300"),hasFocus&&classes.push("focus:bg-secondary-700 dark:focus:bg-secondary-dark-300")):"tertiary"===color?(classes.push("bg-tertiary dark:bg-tertiary-dark"),hasHover&&classes.push("hover:bg-tertiary-700 dark:hover:bg-tertiary-dark-300"),hasFocus&&classes.push("focus:bg-tertiary-700 dark:focus:bg-tertiary-dark-300")):"neutral"===color?(classes.push("bg-neutral dark:bg-neutral-dark"),hasHover&&classes.push("hover:bg-neutral-700 dark:hover:bg-neutral-dark-300"),hasFocus&&classes.push("focus:bg-neutral-700 dark:focus:bg-neutral-dark-300")):"white"===color?(classes.push("bg-white dark:bg-black"),hasHover&&classes.push("hover:bg-white-700 dark:hover:bg-black-dark-300"),hasFocus&&classes.push("focus:bg-white-700 dark:focus:bg-black-dark-300")):"black"===color?(classes.push("bg-black dark:bg-white"),hasHover&&classes.push("hover:bg-black-700 dark:hover:bg-white-dark-300"),hasFocus&&classes.push("focus:bg-black-700 dark:focus:bg-white-dark-300")):"transparent"===color&&classes.push("bg-transparent"),classes.join(" ")}}}]);