-
Notifications
You must be signed in to change notification settings - Fork 1
/
elements-tooltip-stories.3107896b.iframe.bundle.js
2 lines (2 loc) · 13.1 KB
/
elements-tooltip-stories.3107896b.iframe.bundle.js
1
2
/*! For license information please see elements-tooltip-stories.3107896b.iframe.bundle.js.LICENSE.txt */
(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[1358],{"../../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/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/tooltip/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{BadgeShowsATooltipOnHover:()=>BadgeShowsATooltipOnHover,Factory:()=>Factory,default:()=>stories});var react=__webpack_require__("../../node_modules/react/index.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),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const positionClassNameMap={top:"yst-tooltip--top",right:"yst-tooltip--right",bottom:"yst-tooltip--bottom",left:"yst-tooltip--left"},Tooltip=(0,react.forwardRef)((({children,as:Component,className,position,...props},ref)=>(0,jsx_runtime.jsx)(Component,{ref,className:classnames_default()("yst-tooltip",positionClassNameMap[position],className),role:"tooltip",...props,children})));Tooltip.displayName="Tooltip",Tooltip.propTypes={as:prop_types_default().elementType,children:prop_types_default().node,className:prop_types_default().string,position:prop_types_default().oneOf(Object.keys(positionClassNameMap))},Tooltip.defaultProps={as:"div",children:null,className:"",position:"top"};const tooltip=Tooltip;Tooltip.__docgenInfo={description:"@param {JSX.node} children Content of the tooltip.\n@param {string|JSX.Element} [as] Base component.\n@param {string} [className] CSS class.\n@param {string} [position] Position of the tooltip.\n@returns {JSX.Element} Tooltip component.",methods:[],displayName:"Tooltip",props:{as:{defaultValue:{value:'"div"',computed:!1},description:"",type:{name:"elementType"},required:!1},children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},position:{defaultValue:{value:'"top"',computed:!1},description:"",type:{name:"enum",value:[{value:'"top"',computed:!1},{value:'"right"',computed:!1},{value:'"bottom"',computed:!1},{value:'"left"',computed:!1}]},required:!1}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js"),badge=__webpack_require__("./src/elements/badge/index.js");const Factory={render:args=>(0,jsx_runtime.jsxs)("div",{className:"yst-relative","aria-describedby":args.id,children:["Element containing a tooltip.",(0,jsx_runtime.jsx)(tooltip,{...args})]}),parameters:{controls:{disable:!1}},args:{id:"id-1",children:"I am a tooltip"}},BadgeShowsATooltipOnHover={render:args=>{const[isVisible,setIsVisible]=(0,react.useState)(!1),handleMouseEnter=(0,react.useCallback)((()=>setIsVisible(!0)),[setIsVisible]),handleMouseLeave=(0,react.useCallback)((()=>setIsVisible(!1)),[setIsVisible]);return(0,jsx_runtime.jsxs)(badge.A,{variant:"plain","aria-describedby":args.id,onMouseEnter:handleMouseEnter,onMouseLeave:handleMouseLeave,className:"yst-relative yst-cursor-pointer",children:["Hover me",isVisible&&(0,jsx_runtime.jsx)(tooltip,{...args})]})},name:"Badge shows a tooltip on hover",args:{id:"id-2",children:"I am also a tooltip with a long text. Lorem ipsum dolor sit amet. Rem in odit doloribus quo soluta voluptates a atque minus!"},parameters:{controls:{disable:!1},docs:{description:{story:"An example of a `badge` that displays a tooltip when the mouse cursor hovers over it.\n\n"},source:{transform:(string,storyContext)=>`\n\t\t\t\tconst [ isVisible, setIsVisible ] = useState( false );\nconst handleMouseEnter = useCallback(\n\t() => setIsVisible( true ),\n\t[ setIsVisible ],\n);\nconst handleMouseLeave = useCallback(\n\t() => setIsVisible( false ),\n\t[ setIsVisible ],\n);\n\nreturn (\n\t<Badge\n\t\tvariant="plain"\n\t\taria-describedby="${storyContext.args.id}"\n\t\tonMouseEnter={ handleMouseEnter }\n\t\tonMouseLeave={ handleMouseLeave }\n\t\tclassName="yst-relative yst-cursor-pointer"\n\t>\n\t\tHover me\n\t\t{ isVisible && <Tooltip id="${storyContext.args.id}" children="${storyContext.args.children}"/> }\n\t</Badge>\n);\n`}}}},stories={title:"1) Elements/Tooltip",component:tooltip,argTypes:{as:{options:["div","span"]}},parameters:{docs:{description:{component:"Tooltips provide contextual information about an element when that owning element receives focus or is hovered over, but are otherwise not visible. They are displayed as small boxes containing a brief label or message.\n\n**Note:**\n1. _**The aria-describedby attribute**_<br>\nThe aria-describedby attribute of the element containing the tooltip, is used to establish an association between the tooltip and its trigger element, providing enhanced accessibility for users.\n\n2. _**Position of the parent element**_<br>\nThe parent element nesting the tooltip should have a relative position. This positioning attribute ensures that the tooltip is positioned relative to its parent element."},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[BadgeShowsATooltipOnHover]})}},decorators:[Story=>(0,jsx_runtime.jsx)("div",{className:"yst-m-20 yst-flex yst-justify-center",children:(0,jsx_runtime.jsx)(Story,{})})]}},"../../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},"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)){if(arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}}else if("object"===argType){if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]")){classes.push(arg.toString());continue}for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()}}]);