elements-file-input-stories.cae0cee4.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[6380],{"../../node_modules/@heroicons/react/outline/esm/DesktopComputerIcon.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__=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function DesktopComputerIcon(props,svgRef){return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:svgRef},props),react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"}))}))},"../../node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{H2:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.H2,Hl:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Hl,Pd:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Pd,Tn:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Tn,VY:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.VY,W8:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.W8,fy:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.fy,gG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.gG,hE:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.hE,oz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oz});__webpack_require__("../../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@storybook/blocks/dist/index.mjs")},"./.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/file-input/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>file_input});var react=__webpack_require__("../../node_modules/react/index.js");const esm_DocumentAddIcon=react.forwardRef((function DocumentAddIcon(props,svgRef){return react.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:svgRef},props),react.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"}))}));var 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_link=__webpack_require__("./src/elements/link/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const FileInput=(0,react.forwardRef)((({id,name,value,selectLabel,dropLabel,screenReaderLabel,selectDescription,disabled,iconAs:IconComponent,onChange,onDrop,className,...props},ref)=>{const[isDragOver,setIsDragOver]=(0,react.useState)(!1),handleDragEnter=(0,react.useCallback)((event=>{event.preventDefault(),(0,lodash.isEmpty)(event.dataTransfer.items)||setIsDragOver(!0)}),[setIsDragOver]),handleDragLeave=(0,react.useCallback)((event=>{event.preventDefault(),setIsDragOver(!1)}),[setIsDragOver]),handleDragOver=(0,react.useCallback)((event=>{event.preventDefault()}),[]),handleDrop=(0,react.useCallback)((event=>{event.preventDefault(),setIsDragOver(!1),onDrop(event)}),[setIsDragOver,onDrop]);return(0,jsx_runtime.jsx)("div",{onDragEnter:handleDragEnter,onDragLeave:handleDragLeave,onDragOver:handleDragOver,onDrop:handleDrop,className:classnames_default()("yst-file-input",{"yst-is-drag-over":isDragOver,"yst-is-disabled":disabled,className}),children:(0,jsx_runtime.jsxs)("div",{className:"yst-file-input__content",children:[(0,jsx_runtime.jsx)(IconComponent,{className:"yst-file-input__icon"}),(0,jsx_runtime.jsxs)("div",{className:"yst-file-input__labels",children:[(0,jsx_runtime.jsx)("input",{ref,type:"file",id,name,value,onChange,className:"yst-file-input__input","aria-labelledby":screenReaderLabel,disabled,...props}),(0,jsx_runtime.jsx)(elements_link.A,{as:"label",htmlFor:id,className:"yst-file-input__select-label",children:selectLabel}),(0,jsx_runtime.jsx)("span",{children:" "}),dropLabel]}),selectDescription&&(0,jsx_runtime.jsx)("span",{children:selectDescription})]})})}));FileInput.displayName="FileInput",FileInput.propTypes={id:prop_types_default().string.isRequired,name:prop_types_default().string.isRequired,value:prop_types_default().string.isRequired,selectLabel:prop_types_default().string.isRequired,dropLabel:prop_types_default().string.isRequired,screenReaderLabel:prop_types_default().string.isRequired,selectDescription:prop_types_default().string,disabled:prop_types_default().bool,iconAs:prop_types_default().elementType,onChange:prop_types_default().func.isRequired,onDrop:prop_types_default().func,className:prop_types_default().string},FileInput.defaultProps={selectDescription:"",disabled:!1,iconAs:esm_DocumentAddIcon,className:"",onDrop:lodash.noop};const file_input=FileInput;FileInput.__docgenInfo={description:"File input with drag-and-drop support.\n\n@param {string} id Id.\n@param {string} name Name.\n@param {string} value Value.\n@param {string} selectLabel Label for default select button.\n@param {string} dropLabel Label for drop area.\n@param {string} screenReaderLabel Screen reader label.\n@param {string} selectDescription Description for select area.\n@param {boolean} disabled Disabled state.\n@param {JSX.Element} iconAs Icon to show in select area.\n@param {Function} onChange The callback for when a file is uploaded.\n@param {Function} onDrop The callback for when a file is dropped.\n@param {string} className Classname.\n@returns {JSX.Element} The FileInput component.",methods:[],displayName:"FileInput",props:{selectDescription:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},iconAs:{defaultValue:{value:"DocumentAddIcon",computed:!0},description:"",type:{name:"elementType"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},onDrop:{defaultValue:{value:"noop",computed:!0},description:"",type:{name:"func"},required:!1},id:{description:"",type:{name:"string"},required:!0},name:{description:"",type:{name:"string"},required:!0},value:{description:"",type:{name:"string"},required:!0},selectLabel:{description:"",type:{name:"string"},required:!0},dropLabel:{description:"",type:{name:"string"},required:!0},screenReaderLabel:{description:"",type:{name:"string"},required:!0},onChange:{description:"",type:{name:"func"},required:!0}}}},"./src/elements/file-input/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DifferentIcon:()=>DifferentIcon,Disabled:()=>Disabled,Factory:()=>Factory,WithDescription:()=>WithDescription,default:()=>stories});var DesktopComputerIcon=__webpack_require__("../../node_modules/@heroicons/react/outline/esm/DesktopComputerIcon.js"),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),file_input=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/elements/file-input/index.js")),interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js");var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Factory={parameters:{controls:{disable:!1}},args:{id:"factory",name:"factory"}},WithDescription={name:"With description",parameters:{controls:{disable:!1},docs:{description:{story:"A file input with a description using `selectDescription` prop.\n"}}},args:{id:"with-description",name:"with-description",selectDescription:"File input description"}},Disabled={parameters:{controls:{disable:!1},docs:{description:{story:"Disabled state using `disabled` prop.\n"}}},args:{id:"file-input-disabled",name:"disabled",selectDescription:"File input description",disabled:!0}},DifferentIcon={name:"Different icon",parameters:{controls:{disable:!1},docs:{description:{story:"A file input with different icon using `iconAs` prop. The icon should be a React component.\n"}}},args:{id:"icon-as",name:"icon-as",selectDescription:"File input description",iconAs:DesktopComputerIcon.A}},stories={title:"1) Elements/File input",component:file_input.A,argTypes:{value:{control:!1},iconAs:{control:!1}},args:{value:"",selectLabel:"Select label",dropLabel:"or drag and drop label",screenReaderLabel:"Select a file",onChange:lodash.noop},parameters:{docs:{description:{component:'File inputs with drag and drop functionality are user interface elements that allow users to upload local files.\nThey provide an intuitive and convenient way for users to interact with the system by simply dragging and dropping\nfiles from their local machine into the designated area.\nThe API of the `FileInput` elements resembles that of both a `<file type="input">`\nand an element with drag-and-drop behaviour with an `onDrop` callback.\n'},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[WithDescription,Disabled,DifferentIcon]})}}}},"./src/elements/link/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:{default:"yst-link--default",primary:"yst-link--primary",error:"yst-link--error"}},Link=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({as:Component,variant,className,children,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-link",classNameMap.variant[variant],className),...props,children})));Link.displayName="Link",Link.propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node.isRequired,variant:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(Object.keys(classNameMap.variant)),as:prop_types__WEBPACK_IMPORTED_MODULE_3___default().elementType,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},Link.defaultProps={as:"a",variant:"default",className:""};const __WEBPACK_DEFAULT_EXPORT__=Link;Link.__docgenInfo={description:"@param {JSX.Element} [Component] The component to render as.\n@param {string} [variant] The variant of the link.\n@param {string} [className] The HTML classes.\n@param {JSX.node} children The content of the link.\n@param {Object} [props] The props.\n@returns {JSX.Element} The link.",methods:[],displayName:"Link",props:{as:{defaultValue:{value:'"a"',computed:!1},description:"",type:{name:"elementType"},required:!1},variant:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",value:[{value:'"default"',computed:!1},{value:'"primary"',computed:!1},{value:'"error"',computed:!1}]},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}},"../../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}}]);