elements-toast-stories.15c28588.iframe.bundle.js

"use strict";(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[8982],{"./src/elements/button/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,_:()=>classNameMap});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__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_spinner__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/spinner/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{primary:"yst-button--primary",secondary:"yst-button--secondary",tertiary:"yst-button--tertiary",error:"yst-button--error",upsell:"yst-button--upsell"},size:{default:"",small:"yst-button--small",large:"yst-button--large","extra-large":"yst-button--extra-large"}},Button=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({children,as:Component,type,variant,size,isLoading,disabled,className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(Component,{type:type||"button"===Component&&"button"||void 0,disabled,ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-button",classNameMap.variant[variant],classNameMap.size[size],isLoading&&"yst-cursor-wait",disabled&&"yst-button--disabled",className),...props,children:[isLoading&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_spinner__WEBPACK_IMPORTED_MODULE_4__.A,{size:"small"===size?"3":"4",className:"yst-button--loading"}),children]})));Button.displayName="Button",Button.propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_5___default().node.isRequired,as:prop_types__WEBPACK_IMPORTED_MODULE_5___default().elementType,type:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf(["button","submit","reset"]),variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.size)),isLoading:prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool,disabled:prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool,className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string},Button.defaultProps={as:"button",type:void 0,variant:"primary",size:"default",isLoading:!1,disabled:!1,className:""};const __WEBPACK_DEFAULT_EXPORT__=Button;Button.__docgenInfo={description:'@param {JSX.node} children Content of the button.\n@param {string|JSX.Element} [as="button"] Base component.\n@param {string} [type] Type attribute. Used when `as` is a `button`.\n@param {string} [variant="primary"] Button variant. See `classNameMap` for the options.\n@param {string} [size="default"] Button size. See `classNameMap` for the options.\n@param {boolean} [isLoading=false] Whether to show a spinner.\n@param {boolean} [disabled=false] Whether the button is disabled.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Button component.',methods:[],displayName:"Button",props:{as:{defaultValue:{value:'"button"',computed:!1},description:"",type:{name:"elementType"},required:!1},type:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"enum",value:[{value:'"button"',computed:!1},{value:'"submit"',computed:!1},{value:'"reset"',computed:!1}]},required:!1},variant:{defaultValue:{value:'"primary"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},isLoading:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},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},children:{description:"",type:{name:"node"},required:!0}}}},"./src/elements/spinner/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,_:()=>classNameMap});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__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__),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 classNameMap={variant:{default:"",primary:"yst-text-primary-500",white:"yst-text-white"},size:{3:"yst-w-3 yst-h-3",4:"yst-w-4 yst-h-4",8:"yst-w-8 yst-h-8"}},Spinner=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({variant,size,className},ref)=>{const svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_4__.A)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("svg",{ref,xmlns:"http://www.w3.org/2000/svg/",fill:"none",viewBox:"0 0 24 24",className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-animate-spin",classNameMap.variant[variant],classNameMap.size[size],className),...svgAriaProps,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("circle",{className:"yst-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("path",{className:"yst-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})}));Spinner.displayName="Spinner",Spinner.propTypes={variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.size)),className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string},Spinner.defaultProps={variant:"default",size:"4",className:""};const __WEBPACK_DEFAULT_EXPORT__=Spinner;Spinner.__docgenInfo={description:"@param {string} [variant=default] The variant.\n@param {string} [size] The size.\n@param {string} [className] The HTML class.\n@returns {JSX.Element} The spinner.",methods:[],displayName:"Spinner",props:{variant:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"4"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}}},"./src/elements/toast/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,asComplexLayout:()=>asComplexLayout,default:()=>stories,useToastContextHook:()=>useToastContextHook,withClose:()=>withClose,withDescription:()=>withDescription,withTitle:()=>withTitle});var 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),toast=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("./src/elements/toast/index.js")),elements_button=__webpack_require__("./src/elements/button/index.js"),interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),validation_icon=__webpack_require__("./src/elements/validation/validation-icon.js"),use_toggle_state=__webpack_require__("./src/hooks/use-toggle-state.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const positionClassNameMap={position:{"bottom-center":"yst-notifications--bottom-center","bottom-left":"yst-notifications--bottom-left","top-center":"yst-notifications--top-center"}},Template=({isVisible:initialVisible,setIsVisible:_,position,children,...props})=>{const[isVisible,toggleToast,,openToast]=(0,use_toggle_state.A)(initialVisible);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(elements_button.A,{onClick:toggleToast,children:"Toggle toast"}),(0,jsx_runtime.jsx)("aside",{className:classnames_default()("yst-notifications",positionClassNameMap.position[position]),children:(0,jsx_runtime.jsx)(toast.Ay,{...props,isVisible,setIsVisible:openToast,onDismiss:toggleToast,position,id:"toast",children})})]})};Template.displayName="Toast",Template.propTypes={isVisible:prop_types_default().bool,setIsVisible:prop_types_default().func};const Factory={component:Template,parameters:{controls:{disable:!1}}},withTitle={name:"With title",args:{children:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(toast.Ay.Title,{title:"Cool title"}),(0,jsx_runtime.jsx)("p",{children:"Hello everyone!"})]})},parameters:{controls:{disable:!0},docs:{description:{story:"The `Toast.Title` subcomponent can be used to add a title to the toast's content.\n"}}}},withDescription={name:"With description",args:{children:(0,jsx_runtime.jsx)(jsx_runtime.Fragment,{children:(0,jsx_runtime.jsx)(toast.Ay.Description,{description:["Bullet 1","Bullet 2","Bullet 3"]})})},parameters:{controls:{disable:!0},docs:{description:{story:"The `Toast.Description` subcomponent allows you to add detailed content to the toast, either as a paragraph or a list of strings.\n"}}}},withClose={name:"With close button",args:{children:(0,jsx_runtime.jsxs)("div",{className:"yst-flex",children:[(0,jsx_runtime.jsx)("div",{className:"yst-flex-1",children:(0,jsx_runtime.jsx)("p",{children:"Hello everyone!"})}),(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(toast.Ay.Close,{dismissScreenReaderLabel:"Dismiss"})})]})},parameters:{controls:{disable:!0},docs:{description:{story:"The `Toast.Close` subcomponent allows to render a button that closes the toast. It is useful when you want to give the user the ability to close the toast manually.\n"}}}},ConfirmButton=()=>{const{handleDismiss}=(0,toast.Y6)();return(0,jsx_runtime.jsx)(elements_button.A,{size:"small",onClick:handleDismiss,children:"Confirm"})};ConfirmButton.displayName="ConfirmButton";const useToastContextHook={name:"useToastContext",args:{children:(0,jsx_runtime.jsxs)("div",{className:"yst-flex",children:[(0,jsx_runtime.jsx)("div",{className:"yst-flex-1",children:(0,jsx_runtime.jsx)("p",{children:"Hello everyone!"})}),(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(ConfirmButton,{})})]})},parameters:{controls:{disable:!0},docs:{description:{story:'The `useToastContext` hook returns the toast context. It provides an object with a `handleDismiss` callback, which can be used\nto close the toast from other actions inside the modal. This is useful when you want to close the toast from a custom button or\na different kind of action.\n\nWith help of the `handleDismiss` callback, the `Toast.Close` subcomponent could be replaced with below `ConfirmButton`.\n\n```jsx dark\nimport { Button, useToastContext } from "@yoast/ui-library";\n\nconst ConfirmButton = () => {\n\tconst { handleDismiss } = useToastContext();\n\treturn <Button size="small" onClick={ handleDismiss }>Confirm</Button>;\n};\n```\n'}}}},DismissButton=()=>{const{handleDismiss}=(0,toast.Y6)();return(0,jsx_runtime.jsx)(elements_button.A,{size:"small",variant:"tertiary",onClick:handleDismiss,children:"Dismiss"})};DismissButton.displayName="DismissButton";const asComplexLayout={name:"Complex layout",args:{children:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-gap-3",children:[(0,jsx_runtime.jsx)("div",{className:"yst-flex-shrink-0",children:(0,jsx_runtime.jsx)(validation_icon.A,{className:"yst-w-5 yst-h-5"})}),(0,jsx_runtime.jsxs)("div",{className:"yst-flex-1",children:[(0,jsx_runtime.jsx)(toast.Ay.Title,{title:"Perform an action?"}),(0,jsx_runtime.jsx)("p",{children:"An optional action can be performed. Please confirm this action. Otherwise, feel free to dismiss this suggestion."})]}),(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(toast.Ay.Close,{dismissScreenReaderLabel:"Dismiss"})})]}),(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-gap-3 yst-justify-end yst-mt-3",children:[(0,jsx_runtime.jsx)(DismissButton,{}),(0,jsx_runtime.jsx)(ConfirmButton,{})]})]})},parameters:{controls:{disable:!0},docs:{description:{story:"The content of the `Toast` element can be provided a complex structure. Here `Toast.Title`, `Toast.Description`\nand `Toast.Close` are combined with several other elements like `Button` and `ValidationIcon` in a flex-based structure.\n"}}},decorators:[Story=>(0,jsx_runtime.jsx)("div",{className:"yst-min-h-[21rem]",children:(0,jsx_runtime.jsx)(Story,{})})]},stories={title:"1) Elements/Toast",component:Template,argTypes:{children:{control:"text",type:{required:!0},table:{type:{summary:"node"}}},id:{control:"text"},autoDismiss:{type:"number",description:"Milliseconds for the toast to disappear."},isVisible:{control:{disable:!0},type:{required:!0},table:{type:{summary:"bool"}}},setIsVisible:{control:{disable:!0},type:{required:!0},table:{type:{summary:"func"}}},onDismiss:{control:{disable:!0},type:{required:!1},table:{type:{summary:"func"}}},className:{control:"text",table:{type:{summary:"string"},defaultValue:{summary:""}}},position:{options:["bottom-center","bottom-left","top-center"],type:"select",description:"The position of the toast.",table:{defaultValue:{summary:"bottom-left"}}}},args:{isVisible:!0,setIsVisible:lodash.noop,id:"toast",children:"Hello everyone!",position:"bottom-left"},parameters:{docs:{description:{component:"Toasts are versatile elements that can include multiple subcomponents for implementing custom notifications.\n"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[withTitle,withDescription,withClose,useToastContextHook,asComplexLayout]})}},decorators:[Story=>(0,jsx_runtime.jsx)("div",{className:"yst-min-h-[12rem]",children:(0,jsx_runtime.jsx)(Story,{})})]}},"./src/hooks/use-toggle-state.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__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__=(initialState=!0)=>{const[state,setState]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(initialState),toggleState=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((()=>setState(!state)),[state,setState]),setTrue=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((()=>setState(!0)),[setState]),setFalse=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)((()=>setState(!1)),[setState]);return[state,toggleState,setState,setTrue,setFalse]}}}]);