woocommerce/tour-kit-stories-tour-kit-story.e3c1fe6d.iframe.bundle.js

"use strict";(self.webpackChunk_woocommerce_storybook=self.webpackChunk_woocommerce_storybook||[]).push([[670],{"../../packages/js/components/src/tour-kit/stories/tour-kit.story.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AutoScroll:()=>AutoScroll,NoEffects:()=>NoEffects,Overlay:()=>Overlay,Placement:()=>Placement,Spotlight:()=>Spotlight,SpotlightInteractivity:()=>SpotlightInteractivity,default:()=>tour_kit_story});__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-property.js");var slicedToArray=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),defineProperty=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),tour_kit=__webpack_require__("../../node_modules/.pnpm/@automattic+tour-kit@1.1.3_@types+react@17.0.71_@wordpress+data@10.6.0_react@17.0.2__react-do_wpr2orkhsavt4ls5ttip2qkwai/node_modules/@automattic/tour-kit/dist/esm/components/tour-kit.js"),build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+viewport@4.20.0_react@17.0.2/node_modules/@wordpress/viewport/build-module/index.js"),component=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/card/card/component.js"),card_header_component=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/card/card-header/component.js"),card_body_component=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/card/card-body/component.js"),card_footer_component=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/card/card-footer/component.js"),build_module_button=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/button/index.js"),i18n_build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+i18n@4.6.1/node_modules/@wordpress/i18n/build-module/index.js");const step_navigation=function StepNavigation(_ref){var currentStepIndex=_ref.currentStepIndex,onNextStep=_ref.onNextStep,onPreviousStep=_ref.onPreviousStep,onDismiss=_ref.onDismiss,steps=_ref.steps,isFirstStep=0===currentStepIndex,isLastStep=currentStepIndex===steps.length-1,_steps$currentStepInd=steps[currentStepIndex].meta.primaryButton,primaryButton=void 0===_steps$currentStepInd?{text:"",isDisabled:!1,isHidden:!1}:_steps$currentStepInd,_steps$currentStepInd2=steps[currentStepIndex].meta.secondaryButton,secondaryButton=void 0===_steps$currentStepInd2?{text:""}:_steps$currentStepInd2,_steps$currentStepInd3=steps[currentStepIndex].meta.skipButton,skipButton=void 0===_steps$currentStepInd3?{text:"",isVisible:!1}:_steps$currentStepInd3,SkipButton=(0,react.createElement)(build_module_button.A,{className:"woocommerce-tour-kit-step-navigation__skip-btn",variant:"tertiary",onClick:onDismiss("skip-btn")},skipButton.text||(0,i18n_build_module.__)("Skip","woocommerce")),NextButton=(0,react.createElement)(build_module_button.A,{className:"woocommerce-tour-kit-step-navigation__next-btn",variant:"primary",disabled:primaryButton.isDisabled,onClick:onNextStep},primaryButton.text||(0,i18n_build_module.__)("Next","woocommerce")),BackButton=(0,react.createElement)(build_module_button.A,{className:"woocommerce-tour-kit-step-navigation__back-btn",variant:"secondary",onClick:onPreviousStep},secondaryButton.text||(0,i18n_build_module.__)("Back","woocommerce"));return primaryButton.isHidden?null:(0,react.createElement)("div",{className:"woocommerce-tour-kit-step-navigation"},(0,react.createElement)("div",{className:"woocommerce-tour-kit-step-navigation__step"},steps.length>1?(0,i18n_build_module.nv)((0,i18n_build_module.__)("Step %1$d of %2$d","woocommerce"),currentStepIndex+1,steps.length):null),function renderButtons(){return isLastStep?(0,react.createElement)("div",null,skipButton.isVisible?SkipButton:null,isFirstStep?null:BackButton,(0,react.createElement)(build_module_button.A,{variant:"primary",disabled:primaryButton.isDisabled,className:"woocommerce-tour-kit-step-navigation__done-btn",onClick:onDismiss("done-btn")},primaryButton.text||(0,i18n_build_module.__)("Done","woocommerce"))):isFirstStep?(0,react.createElement)("div",null,skipButton.isVisible?SkipButton:null,NextButton):(0,react.createElement)("div",null,skipButton.isVisible?SkipButton:null,BackButton,NextButton)}())};try{stepnavigation.displayName="stepnavigation",stepnavigation.__docgenInfo={description:"",displayName:"stepnavigation",props:{steps:{defaultValue:null,description:"",name:"steps",required:!0,type:{name:"WooStep[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/tour-kit/components/step-navigation.tsx#stepnavigation"]={docgenInfo:stepnavigation.__docgenInfo,name:"stepnavigation",path:"../../packages/js/components/src/tour-kit/components/step-navigation.tsx#stepnavigation"})}catch(__react_docgen_typescript_loader_error){}var flex_component=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/flex/flex/component.js"),icon=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/icon/index.js"),close_small=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/close-small.js");const step_controls=function StepControls(_ref){var onDismiss=_ref.onDismiss;return(0,react.createElement)(flex_component.A,{className:"woocommerce-tour-kit-step-controls",justify:"flex-end"},(0,react.createElement)(build_module_button.A,{className:"woocommerce-tour-kit-step-controls__close-btn",label:(0,i18n_build_module.__)("Close Tour","woocommerce"),icon:(0,react.createElement)(icon.A,{icon:close_small.A,viewBox:"6 4 12 14"}),iconSize:16,size:16,onClick:onDismiss("close-btn")}))};try{stepcontrols.displayName="stepcontrols",stepcontrols.__docgenInfo={description:"",displayName:"stepcontrols",props:{onDismiss:{defaultValue:null,description:"",name:"onDismiss",required:!0,type:{name:"(source: string) => () => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/tour-kit/components/step-controls.tsx#stepcontrols"]={docgenInfo:stepcontrols.__docgenInfo,name:"stepcontrols",path:"../../packages/js/components/src/tour-kit/components/step-controls.tsx#stepcontrols"})}catch(__react_docgen_typescript_loader_error){}const step=(0,build_module.uE)({isViewportMobile:"< medium"})((function Step(_ref){var _descriptions,_steps$currentStepInd2,_steps$currentStepInd3,steps=_ref.steps,currentStepIndex=_ref.currentStepIndex,onDismiss=_ref.onDismiss,onNextStep=_ref.onNextStep,onPreviousStep=_ref.onPreviousStep,setInitialFocusedElement=_ref.setInitialFocusedElement,onGoToStep=_ref.onGoToStep,isViewportMobile=_ref.isViewportMobile,_steps$currentStepInd=steps[currentStepIndex].meta,descriptions=_steps$currentStepInd.descriptions,heading=_steps$currentStepInd.heading,description=null!==(_descriptions=descriptions[isViewportMobile?"mobile":"desktop"])&&void 0!==_descriptions?_descriptions:descriptions.desktop,stepRef=(0,react.useRef)(),focusElement=function getFocusElement(focusElementSelector,iframeSelector){if(!focusElementSelector)return null;if(iframeSelector){var iframeElement=document.querySelector(iframeSelector);if(!iframeElement)return null;var innerDoc=iframeElement.contentDocument||iframeElement.contentWindow&&iframeElement.contentWindow.document;return innerDoc?innerDoc.querySelector(focusElementSelector):null}return document.querySelector(focusElementSelector)}((null===(_steps$currentStepInd2=steps[currentStepIndex].focusElement)||void 0===_steps$currentStepInd2?void 0:_steps$currentStepInd2[isViewportMobile?"mobile":"desktop"])||null,(null===(_steps$currentStepInd3=steps[currentStepIndex].focusElement)||void 0===_steps$currentStepInd3?void 0:_steps$currentStepInd3.iframe)||null);return(0,react.useEffect)((function(){if(focusElement)setInitialFocusedElement(focusElement);else{var _stepRef$current,buttons=null===(_stepRef$current=stepRef.current)||void 0===_stepRef$current?void 0:_stepRef$current.querySelectorAll("button");buttons&&buttons.length&&setInitialFocusedElement(buttons[buttons.length-1])}}),[focusElement,setInitialFocusedElement]),(0,react.createElement)(component.A,{ref:stepRef,className:"woocommerce-tour-kit-step",elevation:2},(0,react.createElement)(card_header_component.A,{isBorderless:!0,size:"small"},(0,react.createElement)(step_controls,{onDismiss})),(0,react.createElement)(card_body_component.A,{className:"woocommerce-tour-kit-step__body",size:"small"},(0,react.createElement)("h2",{className:"woocommerce-tour-kit-step__heading"},heading),(0,react.createElement)("p",{className:"woocommerce-tour-kit-step__description"},description)),(0,react.createElement)(card_footer_component.A,{isBorderless:!0,size:"small"},(0,react.createElement)(step_navigation,{currentStepIndex,onGoToStep,onNextStep,onPreviousStep,onDismiss,steps})))}));function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,defineProperty.A)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var defaultOptions={effects:{spotlight:{interactivity:{enabled:!0,rootElementSelector:"#wpwrap"}},arrowIndicator:!0,liveResize:{mutation:!0,resize:!0,rootElementSelector:"#wpwrap"}}};const src_tour_kit=function WooTourKit(_ref){var config=_ref.config;return(0,react.createElement)(tour_kit.A,{__temp__className:"woocommerce-tour-kit",config:_objectSpread(_objectSpread({options:_objectSpread(_objectSpread({},defaultOptions),config.options)},config),{},{renderers:{tourStep:step,tourMinimized:function tourMinimized(){return null}}})})};try{tourkit.displayName="tourkit",tourkit.__docgenInfo={description:"",displayName:"tourkit",props:{config:{defaultValue:null,description:"",name:"config",required:!0,type:{name:"WooConfig"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/tour-kit/index.tsx#tourkit"]={docgenInfo:tourkit.__docgenInfo,name:"tourkit",path:"../../packages/js/components/src/tour-kit/index.tsx#tourkit"})}catch(__react_docgen_typescript_loader_error){}function tour_kit_story_ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function tour_kit_story_objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?tour_kit_story_ownKeys(Object(t),!0).forEach((function(r){(0,defineProperty.A)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):tour_kit_story_ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}const tour_kit_story={title:"WooCommerce Admin/components/TourKit",component:src_tour_kit};var References=function References(){return(0,react.createElement)("div",{className:"storybook__tourkit-references"},(0,react.createElement)("div",{className:"storybook__tourkit-references-container"},(0,react.createElement)("div",{className:"storybook__tourkit-references-a"},(0,react.createElement)("p",null,"Reference A")),(0,react.createElement)("div",{className:"storybook__tourkit-references-b"},(0,react.createElement)("p",null,"Reference B"),(0,react.createElement)("div",{style:{display:"grid",placeItems:"center"}},(0,react.createElement)("input",{style:{margin:"auto",display:"block"}}))),(0,react.createElement)("div",{className:"storybook__tourkit-references-c"},(0,react.createElement)("p",null,"Reference C")),(0,react.createElement)("div",{className:"storybook__tourkit-references-d"},(0,react.createElement)("p",null,"Reference D"))))},Tour=function Tour(_ref){var onClose=_ref.onClose,options=_ref.options,config={placement:_ref.placement,steps:[{referenceElements:{desktop:".storybook__tourkit-references-a",mobile:".storybook__tourkit-references-a"},meta:{heading:"Change content",descriptions:{desktop:"You can change the content and add any relevant links.",mobile:"You can change the content and add any relevant links."}}},{referenceElements:{desktop:".storybook__tourkit-references-b",mobile:".storybook__tourkit-references-b"},focusElement:{desktop:".storybook__tourkit-references-b input"},meta:{heading:"Shipping zones",descriptions:{desktop:"We added a few shipping zones for you based on your location, but you can manage them at any time.",mobile:"A shipping zone is a geographic area where a certain set of shipping methods are offered."}}},{referenceElements:{desktop:".storybook__tourkit-references-c",mobile:".storybook__tourkit-references-c"},meta:{heading:"Shipping methods",descriptions:{desktop:"We defaulted to some recommended shipping methods based on your store location, but you can manage them at any time within each shipping zone settings.   ",mobile:"We defaulted to some recommended shipping methods based on your store location, but you can manage them at any time within each shipping zone settings.   "}}},{referenceElements:{desktop:".storybook__tourkit-references-d",mobile:".storybook__tourkit-references-d"},meta:{heading:"Laura 4",descriptions:{desktop:"Lorem ipsum dolor sit amet.",mobile:"Lorem ipsum dolor sit amet."},primaryButton:{isDisabled:!0,text:"Keep editing"}}}],closeHandler:onClose,options:tour_kit_story_objectSpread({classNames:["mytour"]},options)};return(0,react.createElement)(src_tour_kit,{config})},StoryTour=function StoryTour(_ref2){var _ref2$options=_ref2.options,options=void 0===_ref2$options?{}:_ref2$options,placement=_ref2.placement,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.A)(_useState,2),showTour=_useState2[0],setShowTour=_useState2[1];return(0,react.createElement)("div",{className:"storybook__tourkit"},(0,react.createElement)(References,null),!showTour&&(0,react.createElement)("button",{onClick:function onClick(){return setShowTour(!0)}},"Start Tour"),showTour&&(0,react.createElement)(Tour,{placement,onClose:function onClose(){return setShowTour(!1)},options}))},NoEffects=function NoEffects(){return(0,react.createElement)(StoryTour,{options:{effects:{}}})},Spotlight=function Spotlight(){return(0,react.createElement)(StoryTour,{options:{effects:{arrowIndicator:!0,spotlight:{}}}})},Overlay=function Overlay(){return(0,react.createElement)(StoryTour,{options:{effects:{arrowIndicator:!0,overlay:!0}}})},SpotlightInteractivity=function SpotlightInteractivity(){return(0,react.createElement)(StoryTour,{options:{effects:{spotlight:{interactivity:{rootElementSelector:"#root",enabled:!0}}}}})},AutoScroll=function AutoScroll(){return(0,react.createElement)(react.Fragment,null,(0,react.createElement)("div",{style:{height:"10vh"}}),(0,react.createElement)(StoryTour,{options:{effects:{autoScroll:{behavior:"smooth"}}}}))},Placement=function Placement(){return(0,react.createElement)(StoryTour,{placement:"left"})};NoEffects.parameters={...NoEffects.parameters,docs:{...NoEffects.parameters?.docs,source:{originalSource:"() => <StoryTour options={{\n  effects: {}\n}} />",...NoEffects.parameters?.docs?.source}}},Spotlight.parameters={...Spotlight.parameters,docs:{...Spotlight.parameters?.docs,source:{originalSource:"() => <StoryTour options={{\n  effects: {\n    arrowIndicator: true,\n    spotlight: {}\n  }\n}} />",...Spotlight.parameters?.docs?.source}}},Overlay.parameters={...Overlay.parameters,docs:{...Overlay.parameters?.docs,source:{originalSource:"() => <StoryTour options={{\n  effects: {\n    arrowIndicator: true,\n    overlay: true\n  }\n}} />",...Overlay.parameters?.docs?.source}}},SpotlightInteractivity.parameters={...SpotlightInteractivity.parameters,docs:{...SpotlightInteractivity.parameters?.docs,source:{originalSource:"() => <StoryTour options={{\n  effects: {\n    spotlight: {\n      interactivity: {\n        rootElementSelector: '#root',\n        enabled: true\n      }\n    }\n  }\n}} />",...SpotlightInteractivity.parameters?.docs?.source}}},AutoScroll.parameters={...AutoScroll.parameters,docs:{...AutoScroll.parameters?.docs,source:{originalSource:"() => <>\n        <div style={{\n    height: '10vh'\n  }}></div>\n        <StoryTour options={{\n    effects: {\n      autoScroll: {\n        behavior: 'smooth'\n      }\n    }\n  }} />\n    </>",...AutoScroll.parameters?.docs?.source}}},Placement.parameters={...Placement.parameters,docs:{...Placement.parameters?.docs,source:{originalSource:"() => <StoryTour placement={'left'} />",...Placement.parameters?.docs?.source}}}}}]);