components-stepper-stories.e93ce62c.iframe.bundle.js

"use strict";(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[2187],{"../../node_modules/@heroicons/react/solid/esm/CheckIcon.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const __WEBPACK_DEFAULT_EXPORT__=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function CheckIcon(props,svgRef){return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:svgRef},props),react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{fillRule:"evenodd",d:"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",clipRule:"evenodd"}))}))},"./src/components/stepper/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,default:()=>stories});var react=__webpack_require__("../../node_modules/react/index.js"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),CheckIcon=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/CheckIcon.js"),progress_bar=__webpack_require__("./src/elements/progress-bar/index.js"),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const StepperContext=(0,react.createContext)({addStepRef:lodash.noop}),Step=({children,isComplete,isActive})=>{const{addStepRef}=(0,react.useContext)(StepperContext);return(0,jsx_runtime.jsxs)("div",{ref:addStepRef,className:classnames_default()("yst-step",isComplete?"yst-step--complete":"",isActive?"yst-step--active":""),children:[(0,jsx_runtime.jsxs)("div",{className:"yst-step__circle",children:[isComplete&&(0,jsx_runtime.jsx)(CheckIcon.A,{className:"yst-step__icon yst-w-4 yst-z-50"}),(0,jsx_runtime.jsx)("div",{className:classnames_default()("yst-step__icon yst-bg-primary-500 yst-w-2 yst-h-2 yst-rounded-full yst-delay-500",!isComplete&&isActive?"yst-opacity-100":"yst-opacity-0")})]}),(0,jsx_runtime.jsx)("div",{className:"yst-font-semibold yst-text-xxs yst-mt-3",children})]})};Step.displayName="Step",Step.displayName="Step",Step.propTypes={children:prop_types_default().node.isRequired,isActive:prop_types_default().bool.isRequired,isComplete:prop_types_default().bool.isRequired};const Stepper=(0,react.forwardRef)((({children,currentStep,className=""},ref)=>{const[progressBarPosition,setProgressBarPosition]=(0,react.useState)({left:0,right:0}),stepRef=(0,react.useRef)([]);(0,react.useLayoutEffect)((()=>{if(stepRef.current.length>0){const firstStepRect=stepRef.current[0].getBoundingClientRect(),lastStepRect=stepRef.current[stepRef.current.length-1].getBoundingClientRect();setProgressBarPosition({left:firstStepRect.width/2,right:lastStepRect.width/2})}}),[stepRef.current]);const addStepRef=(0,react.useCallback)((el=>stepRef.current.push(el)),[stepRef.current]);return(0,jsx_runtime.jsx)(StepperContext.Provider,{value:{addStepRef},children:(0,jsx_runtime.jsxs)("div",{className:classnames_default()(className,"yst-stepper"),ref,children:[children,(0,jsx_runtime.jsx)(progress_bar.A,{className:"yst-absolute yst-top-3 yst-w-auto yst-h-0.5",style:progressBarPosition,min:0,max:stepRef.current.length-1,progress:currentStep})]})})}));Stepper.displayName="Stepper",Stepper.propTypes={currentStep:prop_types_default().number.isRequired,children:prop_types_default().node.isRequired,className:prop_types_default().string},Stepper.defaultProps={className:""},Stepper.Step=Step,Stepper.Context=StepperContext,Stepper.Step.displayName="Stepper.Step",Stepper.__docgenInfo={description:"@param {JSX.Node} children Content of the stepper.\n@param {number} [currentStep] The current step, starts from 0.\n@param {string} [className] Optional extra className.\n\n@returns {JSX.Element} The Stepper element.",methods:[{name:"Step",docblock:null,modifiers:["static"],params:[{name:"{ children, isComplete, isActive }",optional:!1,type:null}],returns:null}],displayName:"Stepper",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},currentStep:{description:"",type:{name:"number"},required:!0},children:{description:"",type:{name:"node"},required:!0}}};var elements_button=__webpack_require__("./src/elements/button/index.js");const Factory={parameters:{controls:{disable:!1}},render:args=>{const[isComplete,setIsComplete]=(0,react.useState)(!1),steps=["INSTALL","ACTIVATE","SET UP","CONNECT"],[{className,currentStep},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),handleNext=(0,react.useCallback)((()=>{currentStep<steps.length-1?(setIsComplete(!1),updateArgs({currentStep:currentStep+1})):currentStep!==steps.length-1||isComplete?isComplete&&(setIsComplete(!1),updateArgs({currentStep:0})):setIsComplete(!0)}),[setIsComplete,updateArgs,isComplete,currentStep]);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(Stepper,{className,currentStep,children:steps.map(((step,index)=>(0,jsx_runtime.jsx)(Stepper.Step,{isComplete:currentStep>index||isComplete,isActive:currentStep===index,children:step},step)))}),(0,jsx_runtime.jsxs)(elements_button.A,{id:"yst-stepper-button",onClick:handleNext,children:[currentStep<steps.length-1&&"Next",currentStep===steps.length-1&&!isComplete&&"Finish",isComplete&&"Restart"]})]})}},stories={title:"2) Components/Stepper",component:Stepper,argTypes:{className:{control:"text"},currentStep:{control:"number"}},parameters:{docs:{description:{component:"The stepper element takes takes the number of steps and current step and has Step component to render each step."}}},args:{className:"yst-mb-5",currentStep:0}}},"./src/elements/button/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,_:()=>classNameMap});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_spinner__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/spinner/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{primary:"yst-button--primary",secondary:"yst-button--secondary",tertiary:"yst-button--tertiary",error:"yst-button--error",upsell:"yst-button--upsell"},size:{default:"",small:"yst-button--small",large:"yst-button--large","extra-large":"yst-button--extra-large"}},Button=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({children,as:Component,type,variant,size,isLoading,disabled,className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(Component,{type:type||"button"===Component&&"button"||void 0,disabled,ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-button",classNameMap.variant[variant],classNameMap.size[size],isLoading&&"yst-cursor-wait",disabled&&"yst-button--disabled",className),...props,children:[isLoading&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_spinner__WEBPACK_IMPORTED_MODULE_4__.A,{size:"small"===size?"3":"4",className:"yst-button--loading"}),children]})));Button.displayName="Button",Button.propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_5___default().node.isRequired,as:prop_types__WEBPACK_IMPORTED_MODULE_5___default().elementType,type:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf(["button","submit","reset"]),variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.size)),isLoading:prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool,disabled:prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool,className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string},Button.defaultProps={as:"button",type:void 0,variant:"primary",size:"default",isLoading:!1,disabled:!1,className:""};const __WEBPACK_DEFAULT_EXPORT__=Button;Button.__docgenInfo={description:'@param {JSX.node} children Content of the button.\n@param {string|JSX.Element} [as="button"] Base component.\n@param {string} [type] Type attribute. Used when `as` is a `button`.\n@param {string} [variant="primary"] Button variant. See `classNameMap` for the options.\n@param {string} [size="default"] Button size. See `classNameMap` for the options.\n@param {boolean} [isLoading=false] Whether to show a spinner.\n@param {boolean} [disabled=false] Whether the button is disabled.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Button component.',methods:[],displayName:"Button",props:{as:{defaultValue:{value:'"button"',computed:!1},description:"",type:{name:"elementType"},required:!1},type:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"enum",value:[{value:'"button"',computed:!1},{value:'"submit"',computed:!1},{value:'"reset"',computed:!1}]},required:!1},variant:{defaultValue:{value:'"primary"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},isLoading:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}},"./src/elements/progress-bar/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const ProgressBar=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({min,max,progress,className,...props},ref)=>{const percentage=(0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)((()=>progress/(max-min)*100),[min,max,progress]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{ref,"aria-hidden":"true",className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-progress-bar",className),...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{className:"yst-progress-bar__progress",style:{width:`${percentage}%`}})})}));ProgressBar.displayName="ProgressBar",ProgressBar.propTypes={min:prop_types__WEBPACK_IMPORTED_MODULE_3___default().number.isRequired,max:prop_types__WEBPACK_IMPORTED_MODULE_3___default().number.isRequired,progress:prop_types__WEBPACK_IMPORTED_MODULE_3___default().number.isRequired,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},ProgressBar.defaultProps={className:""};const __WEBPACK_DEFAULT_EXPORT__=ProgressBar;ProgressBar.__docgenInfo={description:"@param {number} min The minimal value.\n@param {number} max The maximum value.\n@param {number} progress The current progress value between min and max.\n@returns {JSX.Element} The ProgressBar component.",methods:[],displayName:"ProgressBar",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},min:{description:"",type:{name:"number"},required:!0},max:{description:"",type:{name:"number"},required:!0},progress:{description:"",type:{name:"number"},required:!0}}}},"./src/elements/spinner/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,_:()=>classNameMap});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_hooks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/hooks/use-svg-aria.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{default:"",primary:"yst-text-primary-500",white:"yst-text-white"},size:{3:"yst-w-3 yst-h-3",4:"yst-w-4 yst-h-4",8:"yst-w-8 yst-h-8"}},Spinner=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({variant,size,className},ref)=>{const svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_4__.A)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("svg",{ref,xmlns:"http://www.w3.org/2000/svg/",fill:"none",viewBox:"0 0 24 24",className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-animate-spin",classNameMap.variant[variant],classNameMap.size[size],className),...svgAriaProps,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("circle",{className:"yst-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("path",{className:"yst-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"})]})}));Spinner.displayName="Spinner",Spinner.propTypes={variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.size)),className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string},Spinner.defaultProps={variant:"default",size:"4",className:""};const __WEBPACK_DEFAULT_EXPORT__=Spinner;Spinner.__docgenInfo={description:"@param {string} [variant=default] The variant.\n@param {string} [size] The size.\n@param {string} [className] The HTML class.\n@returns {JSX.Element} The spinner.",methods:[],displayName:"Spinner",props:{variant:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"4"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}}},"./src/hooks/use-svg-aria.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const __WEBPACK_DEFAULT_EXPORT__=(isFocusable=null)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>{const aria={role:"img","aria-hidden":"true"};return null!==isFocusable&&(aria.focusable=isFocusable?"true":"false"),aria}),[isFocusable])}}]);