elements-toggle-stories.b067ca5a.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[8769],{"./.storybook/interactive-docs-page.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{f:()=>InteractiveDocsPage});var _storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs"),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_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const InteractiveDocsPage=({stories})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.hE,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Pd,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"meta"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"story"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Tn,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.H2,{}),stories.map(((story,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.fy,{of:story},(null==story?void 0:story.name)||`story-${index}`)))]});InteractiveDocsPage.propTypes={stories:prop_types__WEBPACK_IMPORTED_MODULE_3___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().object,prop_types__WEBPACK_IMPORTED_MODULE_3___default().func]))},InteractiveDocsPage.defaultProps={stories:[]},InteractiveDocsPage.__docgenInfo={description:"An alternative version of the Storybook DocsPage component.\n\nReplacing the Stories component with individual DocsStory components.\nThis prevents Stories from passing `__forceInitialArgs` to the DocsStory components.\nWhich makes the stories are interactive on the docs page, making the `args` more like initial values.\n\n@param {(Object|function)[]} [stories] The stories to display.\n@returns {JSX.Element} The DocsPage component without stories.",methods:[],displayName:"InteractiveDocsPage",props:{stories:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"union",value:[{name:"object"},{name:"func"}]}},required:!1}}}},"./src/elements/toggle/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _headlessui_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/@headlessui/react/dist/components/switch/switch.js"),_headlessui_react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@headlessui/react/dist/components/transitions/transition.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/CheckIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/XIcon.js"),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_9__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_9___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_9__),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 Toggle=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({id,as:Component,checked,screenReaderLabel,onChange,disabled,className,type,...props},ref)=>{const svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_4__.A)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_headlessui_react__WEBPACK_IMPORTED_MODULE_5__.d,{ref,as:Component,checked,disabled,onChange:disabled?lodash__WEBPACK_IMPORTED_MODULE_1__.noop:onChange,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-toggle",checked&&"yst-toggle--checked",disabled&&"yst-toggle--disabled",className),"data-id":id,...props,type:"button"===Component?"button":type,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span",{className:"yst-sr-only",children:screenReaderLabel}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("span",{className:"yst-toggle__handle",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_6__.e,{show:checked,unmount:!1,as:"span","aria-hidden":!checked,enter:"",enterFrom:"yst-opacity-0 yst-hidden",enterTo:"yst-opacity-100",leaveFrom:"yst-opacity-100",leaveTo:"yst-opacity-0 yst-hidden",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_7__.A,{className:"yst-toggle__icon yst-toggle__icon--check",...svgAriaProps})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_6__.e,{show:!checked,unmount:!1,as:"span","aria-hidden":checked,enterFrom:"yst-opacity-0 yst-hidden",enterTo:"yst-opacity-100",leaveFrom:"yst-opacity-100",leaveTo:"yst-opacity-0 yst-hidden",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_8__.A,{className:"yst-toggle__icon yst-toggle__icon--x",...svgAriaProps})})]})]})}));Toggle.displayName="Toggle",Toggle.propTypes={as:prop_types__WEBPACK_IMPORTED_MODULE_9___default().elementType,id:prop_types__WEBPACK_IMPORTED_MODULE_9___default().string.isRequired,checked:prop_types__WEBPACK_IMPORTED_MODULE_9___default().bool,screenReaderLabel:prop_types__WEBPACK_IMPORTED_MODULE_9___default().string.isRequired,onChange:prop_types__WEBPACK_IMPORTED_MODULE_9___default().func.isRequired,disabled:prop_types__WEBPACK_IMPORTED_MODULE_9___default().bool,type:prop_types__WEBPACK_IMPORTED_MODULE_9___default().string,className:prop_types__WEBPACK_IMPORTED_MODULE_9___default().string},Toggle.defaultProps={as:"button",checked:!1,disabled:!1,type:"",className:""};const __WEBPACK_DEFAULT_EXPORT__=Toggle;Toggle.__docgenInfo={description:'@param {string} id ID.\n@param {string|JSX.Element} [as="button"] Base component.\n@param {boolean} checked Default state.\n@param {string} screenReaderLabel The label for screen readers.\n@param {Function} onChange Change callback.\n@param {boolean} [disabled] Disabled flag.\n@param {string} [type] Type.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Toggle component.',methods:[],displayName:"Toggle",props:{as:{defaultValue:{value:'"button"',computed:!1},description:"",type:{name:"elementType"},required:!1},checked:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},type:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},id:{description:"",type:{name:"string"},required:!0},screenReaderLabel:{description:"",type:{name:"string"},required:!0},onChange:{description:"",type:{name:"func"},required:!0}}}},"./src/elements/toggle/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,default:()=>stories});var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),react=__webpack_require__("../../node_modules/react/index.js"),toggle=__webpack_require__("./src/elements/toggle/index.js"),interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js");var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Template=args=>{const[{checked},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),handleChange=(0,react.useCallback)((newChecked=>updateArgs({checked:newChecked})),[updateArgs]);return(0,jsx_runtime.jsx)(toggle.A,{...args,checked,onChange:handleChange})};Template.displayName="Template";const Factory={render:Template.bind({}),parameters:{controls:{disable:!1}},args:{id:"id-1",screenReaderLabel:"Toggle",checked:!1,onChange:lodash.noop}},stories={title:"1) Elements/Toggle",component:toggle.A,argTypes:{as:{options:["button","div","span"]},type:{control:"string",description:"When `as` is `button`, the type is forced to `button` for proper behavior in HTML forms."}},parameters:{docs:{description:{component:'Toggle switches enable users to switch between two states (on and off) by clicking or tapping on it. These switches are commonly used in settings or options menus to enable or disable certain features or functions.\n\nA toggle switch should always have:\n- a clear visual indication of its current state. This toggle has a purple background with a purple checkmark icon to indicate the "on" state, and a gray background with a gray cross icon to indicate the "off" state.\n- a clear and descriptive label placed to the left of it, to help users understand its purpose and what it controls. If the toggle switch is part of a feature card, we usually place the label `Enable feature` in front of it to indicate its purpose.'},page:interactive_docs_page.f}}}},"./src/hooks/use-svg-aria.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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])},"../../node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]);