components-checkbox-group-stories.02859547.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[4085],{"./.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/checkbox-group/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ChildrenProp:()=>ChildrenProp,Disabled:()=>Disabled,Factory:()=>Factory,WithLabelAndDescription:()=>WithLabelAndDescription,WithValues:()=>WithValues,default:()=>stories});var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),react=__webpack_require__("../../node_modules/react/index.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),elements_checkbox=__webpack_require__("./src/elements/checkbox/index.js"),elements_label=__webpack_require__("./src/elements/label/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const CheckboxGroup=({children=null,id="",name="",values=[],label="",description="",disabled=!1,options,onChange=lodash.noop,className="",...props})=>{const handleChange=(0,react.useCallback)((({target})=>{if(target.checked&&!(0,lodash.includes)(values,target.value))return onChange([...values,target.value]);onChange((0,lodash.without)(values,target.value))}),[values,onChange]);return(0,jsx_runtime.jsxs)("fieldset",{id:`checkbox-group-${id}`,className:classnames_default()("yst-checkbox-group",disabled&&"yst-checkbox-group--disabled",className),children:[(0,jsx_runtime.jsx)(elements_label.A,{as:"legend",className:"yst-checkbox-group__label",label}),description&&(0,jsx_runtime.jsx)("div",{className:"yst-checkbox-group__description",children:description}),(0,jsx_runtime.jsx)("div",{className:"yst-checkbox-group__options",children:children||options.map(((option,index)=>{const optionId=`checkbox-${id}-${index}`;return(0,jsx_runtime.jsx)(elements_checkbox.A,{id:optionId,name,value:option.value,label:option.label,checked:(0,lodash.includes)(values,option.value),disabled,onChange:handleChange,...props},optionId)}))})]})};CheckboxGroup.displayName="CheckboxGroup",CheckboxGroup.propTypes={children:prop_types_default().node,id:prop_types_default().string,name:prop_types_default().string,values:prop_types_default().arrayOf(prop_types_default().string),label:prop_types_default().string,disabled:prop_types_default().bool,description:prop_types_default().string,options:prop_types_default().arrayOf(prop_types_default().shape({value:prop_types_default().string.isRequired,label:prop_types_default().string.isRequired})),onChange:prop_types_default().func,className:prop_types_default().string},(CheckboxGroup.Checkbox=elements_checkbox.A).displayName="CheckboxGroup.Checkbox";const checkbox_group=CheckboxGroup;CheckboxGroup.__docgenInfo={description:"@param {JSX.node} children Children are rendered below the checkbox group.\n@param {string} [id] Identifier.\n@param {string} [name] Name.\n@param {string[]} [values] Values.\n@param {string} [label] Label.\n@param {string} [description] Description.\n@param {{ value: string, label: string }[]} options Options to choose from.\n@param {Function} onChange Change handler.\n@param {string} [className] CSS class.\n@returns {JSX.Element} CheckboxGroup component.",methods:[],displayName:"CheckboxGroup",props:{children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},id:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},name:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},values:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"string"}},required:!1},label:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},description:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},onChange:{defaultValue:{value:"noop",computed:!0},description:"",type:{name:"func"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},options:{description:"",type:{name:"arrayOf",value:{name:"shape",value:{value:{name:"string",required:!0},label:{name:"string",required:!0}}}},required:!1}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js");const Template=args=>{const[{values},updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),handleChange=(0,react.useCallback)((newValues=>updateArgs({values:newValues})),[updateArgs]);return(0,jsx_runtime.jsx)(checkbox_group,{...args,values:values||[],onChange:handleChange})};Template.displayName="Template";const Factory={render:Template.bind({}),parameters:{controls:{disable:!1}},args:{id:"checkbox-group",name:"name",label:"A checkbox group",options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"},{value:"3",label:"Option 3"},{value:"4",label:"Option 4"}]}},WithLabelAndDescription={render:Template.bind({}),name:"With label and description",parameters:{controls:{disable:!1},docs:{description:{story:""}}},args:{id:"checkbox-group-1",name:"name-1",label:"Checkbox group with a label",description:"Checkbox group with a description.",options:Factory.args.options}},WithValues={render:Template.bind({}),name:"With values",parameters:{controls:{disable:!1},docs:{description:{story:""}}},args:{id:"checkbox-group-2",name:"name-2",values:["2","3"],options:Factory.args.options}},ChildrenProp={render:Template.bind({}),name:"Children prop",parameters:{controls:{disable:!1},docs:{description:{story:"The `children` prop can be used to render custom content. The options are rendered using the subcomponent `Checkbox` (`CheckboxGroup.Checkbox` is equal to `Checkbox` element). Default values should be set inside the child component and not the `value` prop.\n"}}},args:{id:"checkbox-group-3",name:"name-3",children:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(checkbox_group.Checkbox,{defaultChecked:!0,value:"child 1",label:"Option 1",id:"option-1",name:"name-3"}),(0,jsx_runtime.jsx)(checkbox_group.Checkbox,{value:"child 2",label:"Option 2",id:"option-2",name:"name-3"}),(0,jsx_runtime.jsx)(checkbox_group.Checkbox,{value:"child 3",label:"Option 3",id:"option-3",name:"name-3"})]})}},Disabled={render:Template.bind({}),parameters:{controls:{disable:!1},docs:{description:{story:""}}},args:{id:"checkbox-group-4",name:"name-4",values:["2","3"],label:"Checkbox group with a label",description:"Checkbox group with a description.",disabled:!0,options:Factory.args.options}},stories={title:"2) Components/Checkbox group",component:checkbox_group,argTypes:{children:{control:"text"}},parameters:{docs:{description:{component:"A simple checkbox group component.\n"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[WithLabelAndDescription,WithValues,ChildrenProp,Disabled]})}}}},"./src/elements/checkbox/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_4__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_4__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),_label__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/elements/label/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Checkbox=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({id,name,value,label,disabled,className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-checkbox",disabled&&"yst-checkbox--disabled",className),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("input",{ref,type:"checkbox",id,name,value,disabled,className:"yst-checkbox__input",...props}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_label__WEBPACK_IMPORTED_MODULE_3__.A,{htmlFor:id,className:"yst-checkbox__label",label})]})));Checkbox.displayName="Checkbox",Checkbox.propTypes={id:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string.isRequired,name:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string.isRequired,value:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string.isRequired,label:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string.isRequired,className:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string,disabled:prop_types__WEBPACK_IMPORTED_MODULE_4___default().bool},Checkbox.defaultProps={className:"",disabled:!1};const __WEBPACK_DEFAULT_EXPORT__=Checkbox;Checkbox.__docgenInfo={description:"@param {string} id Identifier.\n@param {string} name Name.\n@param {string} value Value.\n@param {string} label Label.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Checkbox component.",methods:[],displayName:"Checkbox",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},id:{description:"",type:{name:"string"},required:!0},name:{description:"",type:{name:"string"},required:!0},value:{description:"",type:{name:"string"},required:!0},label:{description:"",type:{name:"string"},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}}}},"../../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}}]);