components-toggle-field-stories.f59da6f7.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[5351],{"./.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/components/toggle-field/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Checked:()=>Checked,Factory:()=>Factory,WithLabelAndDescription:()=>WithLabelAndDescription,WithLabelSuffix:()=>WithLabelSuffix,default:()=>stories});var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),react=__webpack_require__("../../node_modules/react/index.js"),switch_switch=__webpack_require__("../../node_modules/@headlessui/react/dist/components/switch/switch.js"),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),elements_label=__webpack_require__("./src/elements/label/index.js"),toggle=__webpack_require__("./src/elements/toggle/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const ToggleField=(0,react.forwardRef)((({id,children,label,labelSuffix,description,checked,disabled,onChange,className,"aria-label":ariaLabel,...props},ref)=>(0,jsx_runtime.jsxs)(switch_switch.d.Group,{as:"div",className:classnames_default()("yst-toggle-field",disabled&&"yst-toggle-field--disabled",className),children:[(0,jsx_runtime.jsxs)("div",{className:"yst-toggle-field__header",children:[label&&(0,jsx_runtime.jsxs)("div",{className:"yst-toggle-field__label-wrapper",children:[(0,jsx_runtime.jsx)(elements_label.A,{as:switch_switch.d.Label,className:"yst-toggle-field__label",label,"aria-label":ariaLabel}),labelSuffix]}),(0,jsx_runtime.jsx)(toggle.A,{id,ref,checked,onChange,screenReaderLabel:label,disabled,...props})]}),(description||children)&&(0,jsx_runtime.jsx)(switch_switch.d.Description,{as:"div",className:"yst-toggle-field__description",children:description||children})]})));ToggleField.displayName="ToggleField",ToggleField.propTypes={id:prop_types_default().string.isRequired,children:prop_types_default().node,label:prop_types_default().string.isRequired,labelSuffix:prop_types_default().node,description:prop_types_default().node,checked:prop_types_default().bool.isRequired,disabled:prop_types_default().bool,onChange:prop_types_default().func.isRequired,className:prop_types_default().string,"aria-label":prop_types_default().string},ToggleField.defaultProps={children:null,labelSuffix:null,description:null,disabled:!1,className:"","aria-label":null};const toggle_field=ToggleField;ToggleField.__docgenInfo={description:"@param {JSX.node} children Children are rendered below the checkbox group.\n@param {string} label The Label.\n@param {JSX.node} [labelSuffix] Optional label suffix.\n@param {JSX.node} [description] Optional description to use over children prop.\n@param {boolean} [checked] Default state.\n@param {boolean} [disabled] Disabled state.\n@param {Function} onChange Change callback.\n@param {string} [className] CSS class.\n@param {Object} props Other Toggle props.\n@returns {JSX.Element} ToggleField component.",methods:[],displayName:"ToggleField",props:{children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},labelSuffix:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},description:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},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},"aria-label":{defaultValue:{value:"null",computed:!1},description:"",type:{name:"string"},required:!1},id:{description:"",type:{name:"string"},required:!0},label:{description:"",type:{name:"string"},required:!0},checked:{description:"",type:{name:"bool"},required:!0},onChange:{description:"",type:{name:"func"},required:!0}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js"),badge=__webpack_require__("./src/elements/badge/index.js");const Template=args=>{const[{checked:isChecked},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),handleChange=(0,react.useCallback)((newChecked=>updateArgs({checked:newChecked})),[updateArgs]);return(0,jsx_runtime.jsx)(toggle_field,{...args,checked:isChecked||!1,onChange:handleChange})};Template.displayName="Template";const Factory={render:Template.bind({}),parameters:{controls:{disable:!1}},args:{id:"factory-id",label:"A toggle field"}},WithLabelAndDescription={render:Template.bind({}),name:"With label and description",parameters:{controls:{disable:!1},docs:{description:{story:""}}},args:{id:"id-1",name:"name-1",label:"Toggle field with a label that spans multiple lines is still centered nicely with the toggle",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a nisi egestas, accumsan ante quis, accumsan nisi. Duis lacinia pharetra luctus. Aliquam nisi orci, mattis quis lacus tristique, tempus pulvinar lectus. Nam rutrum vitae arcu at ullamcorper. Sed in felis blandit, consectetur nulla eu, congue justo. Suspendisse a augue a arcu lacinia tristique. Integer finibus dui sit amet pulvinar placerat. Phasellus a erat nec odio aliquet maximus id viverra nunc. Aliquam finibus malesuada est id dapibus. Curabitur suscipit lorem vitae sodales malesuada."}},Checked={render:Template.bind({}),parameters:{controls:{disable:!1},docs:{description:{story:""}}},args:{id:"id-2",name:"name-2",checked:!0,label:"Checked toggle field"}},WithLabelSuffix={render:Template.bind({}),name:"With label suffix",parameters:{controls:{disable:!1},docs:{description:{story:""}}},args:{id:"id-3",name:"name-3",checked:!0,label:"Label suffix toggle field",labelSuffix:(0,jsx_runtime.jsx)(badge.A,{className:"yst-ml-1.5",variant:"upsell",children:"Premium"})}},stories={title:"2) Components/Toggle field",component:toggle_field,argTypes:{children:{control:"text"},description:{control:"text"},labelSuffix:{control:"text"}},parameters:{docs:{description:{component:"A simple toggle field component.\n"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[WithLabelAndDescription,Checked,WithLabelSuffix]})}}}},"./src/elements/badge/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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 classNameMap={variant:{info:"yst-badge--info",upsell:"yst-badge--upsell",plain:"yst-badge--plain"},size:{default:"",small:"yst-badge--small",large:"yst-badge--large"}},Badge=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({children,as:Component,variant,size,className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-badge",classNameMap.variant[variant],classNameMap.size[size],className),...props,children}))),propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node.isRequired,as:prop_types__WEBPACK_IMPORTED_MODULE_3___default().elementType,variant:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(Object.keys(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(Object.keys(classNameMap.size)),className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string};Badge.displayName="Badge",Badge.propTypes=propTypes,Badge.defaultProps={as:"span",variant:"info",size:"default",className:""};const __WEBPACK_DEFAULT_EXPORT__=Badge;Badge.__docgenInfo={description:"@param {JSX.node} children Content of the Badge.\n@param {string|function} [as] Base component.\n@param {string} [variant] Badge variant. See `classNameMap.variant` for the options.\n@param {string} [size] Badge size. See `classNameMap.size` for the options.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Badge component.",methods:[],displayName:"Badge",props:{as:{defaultValue:{value:'"span"',computed:!1},description:"",type:{name:"elementType"},required:!1},variant:{defaultValue:{value:'"info"',computed:!1},description:"",type:{name:"enum",value:[{value:'"info"',computed:!1},{value:'"upsell"',computed:!1},{value:'"plain"',computed:!1}]},required:!1},size:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",value:[{value:'"default"',computed:!1},{value:'"small"',computed:!1},{value:'"large"',computed:!1}]},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}},"./src/elements/label/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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 Label=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({as:Component,className,label,children,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-label",className),...props,children:label||children||null})));Label.displayName="Label",Label.propTypes={label:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,as:prop_types__WEBPACK_IMPORTED_MODULE_3___default().elementType,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},Label.defaultProps={label:"",children:"",as:"label",className:""};const __WEBPACK_DEFAULT_EXPORT__=Label;Label.__docgenInfo={description:"@param {string} label Content of the Label. Note that this is a string ONLY for a11y reasons.\n@param {string} children Alternative to the label. See label.\n@param {string|JSX.node} [as] Base component.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Label component.",methods:[],displayName:"Label",props:{label:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},as:{defaultValue:{value:'"label"',computed:!1},description:"",type:{name:"elementType"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},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/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}}]);