components-notifications-stories.faf87471.iframe.bundle.js

"use strict";(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[9872],{"./src/components/notifications/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ChildrenNotification:()=>ChildrenNotification,DescriptionList:()=>DescriptionList,Error:()=>Error,Factory:()=>Factory,Info:()=>Info,Success:()=>Success,Warning:()=>Warning,default:()=>stories});var lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),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),validation_icon=__webpack_require__("./src/elements/validation/validation-icon.js"),toast=__webpack_require__("./src/elements/toast/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const NotificationsContext=(0,react.createContext)({position:"bottom-left"}),notificationClassNameMap={variant:{info:"yst-notification--info",warning:"yst-notification--warning",success:"yst-notification--success",error:"yst-notification--error"},size:{default:"",large:"yst-notification--large"}},Notification=({children,id,variant="info",size="default",title="",description="",onDismiss=lodash.noop,autoDismiss=null,dismissScreenReaderLabel})=>{const{position}=(0,react.useContext)(NotificationsContext),[isVisible,setIsVisible]=(0,react.useState)(!1);return(0,jsx_runtime.jsx)(toast.Ay,{id,className:classnames_default()("yst-notification",notificationClassNameMap.variant[variant],notificationClassNameMap.size[size]),position,size,onDismiss,autoDismiss,dismissScreenReaderLabel,isVisible,setIsVisible,children:(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-items-start yst-gap-3",children:[(0,jsx_runtime.jsx)("div",{className:"yst-flex-shrink-0",children:(0,jsx_runtime.jsx)(validation_icon.A,{variant,className:"yst-notification__icon"})}),(0,jsx_runtime.jsxs)("div",{className:"yst-w-0 yst-flex-1",children:[title&&(0,jsx_runtime.jsx)(toast.Ay.Title,{title}),children||description&&(0,jsx_runtime.jsx)(toast.Ay.Description,{description})]}),onDismiss&&(0,jsx_runtime.jsx)(toast.Ay.Close,{dismissScreenReaderLabel})]})})};Notification.displayName="Notification",Notification.propTypes={children:prop_types_default().node,id:prop_types_default().string.isRequired,variant:prop_types_default().oneOf((0,lodash.keys)(notificationClassNameMap.variant)),size:prop_types_default().oneOf((0,lodash.keys)(notificationClassNameMap.size)),title:prop_types_default().string,description:prop_types_default().oneOfType([prop_types_default().node,prop_types_default().arrayOf(prop_types_default().node)]),onDismiss:prop_types_default().func,autoDismiss:prop_types_default().number,dismissScreenReaderLabel:prop_types_default().string.isRequired};const notificationsClassNameMap={position:{"bottom-center":"yst-notifications--bottom-center","bottom-left":"yst-notifications--bottom-left","top-center":"yst-notifications--top-center"}},Notifications=({children,className="",position="bottom-left",...props})=>(0,jsx_runtime.jsx)(NotificationsContext.Provider,{value:{position},children:(0,jsx_runtime.jsx)("aside",{className:classnames_default()("yst-notifications",notificationsClassNameMap.position[position],className),...props,children})});Notifications.displayName="Notifications",Notifications.propTypes={children:prop_types_default().node,className:prop_types_default().string,position:prop_types_default().oneOf((0,lodash.keys)(notificationsClassNameMap.position))},(Notifications.Notification=Notification).displayName="Notifications.Notification";const notifications=Notifications;Notifications.__docgenInfo={description:"The Notifications component shows notifications on a specified position on the screen.\n@param {JSX.Element} children The children.\n@param {string} [className] Additional class names.\n@param {string} position Position on screen.\n@param {Object} [props] Additional props.\n@returns {JSX.Element} The Notifications element.",methods:[{name:"Notification",docblock:null,modifiers:["static"],params:[{name:'{\n\tchildren,\n\tid,\n\tvariant = "info",\n\tsize = "default",\n\ttitle = "",\n\tdescription = "",\n\tonDismiss = noop,\n\tautoDismiss = null,\n\tdismissScreenReaderLabel,\n}',optional:!1,type:null}],returns:null}],displayName:"Notifications",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},position:{defaultValue:{value:'"bottom-left"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( notificationsClassNameMap.position )"},required:!1},children:{description:"",type:{name:"node"},required:!1}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js");var success=__webpack_require__("./src/components/notifications/docs/success.md");const Template=({position,...args})=>(0,jsx_runtime.jsx)(notifications,{position,children:(0,jsx_runtime.jsx)(notifications.Notification,{...args})});Template.displayName="Template";const Factory={render:Template.bind({}),args:{id:"notification-factory"},parameters:{controls:{disable:!1}}},Info={render:Template.bind({}),args:{variant:"info",id:"notification-info"},parameters:{controls:{disable:!1},docs:{description:{story:""}}}},Warning={render:Template.bind({}),args:{variant:"warning",id:"notification-warning"},parameters:{controls:{disable:!1},docs:{description:{story:""}}}},Success={render:Template.bind({}),args:{variant:"success",id:"notification-success"},parameters:{controls:{disable:!1},docs:{description:{story:success}}}},Error={render:Template.bind({}),args:{variant:"error",id:"notification-error"},parameters:{controls:{disable:!1},docs:{description:{story:""}}}},DescriptionList={render:Template.bind({}),name:"Description list",argTypes:{description:{control:"array"}},args:{variant:"info",id:"notification-info",description:["Description 1","Description 2","Description 3"]},parameters:{controls:{disable:!1},docs:{description:{story:"Description can be an array of strings.\n"}}}},ChildrenNotification={render:Template.bind({}),mame:"Children notification",args:{variant:"info",id:"notification-info",children:(0,jsx_runtime.jsx)("b",{children:"Notification description as a component."})},parameters:{controls:{disable:!1},docs:{description:{story:"`children` prop in `Notifications.Notification` subcomponent, takes the place of `description` value and accepts React components.\n"}}}},stories={title:"2) Components/Notifications",component:notifications.Notification,argTypes:{children:{control:{disable:!0}},position:{options:["bottom-center","bottom-left","top-center"],type:"select",description:"The position of the notification. Notifications prop.",table:{defaultValue:{summary:"bottom-left"}}},id:{control:"text"},variant:{options:(0,lodash.keys)(notificationClassNameMap.variant),type:"select",table:{type:{summary:(0,lodash.keys)(notificationClassNameMap.variant).toString()}}},size:{options:(0,lodash.keys)(notificationClassNameMap.size),type:"select",table:{type:{summary:(0,lodash.keys)(notificationClassNameMap.size).toString()}}},title:{control:"text",type:"string"},description:{control:"text",type:"string"},onDismiss:{control:{disable:!1}},autoDismiss:{type:"number",description:"Milliseconds for Notification to disappear."},dismissScreenReaderLabel:{control:"text",type:"string"}},args:{title:"Notification title",description:"Notification description",dismissScreenReaderLabel:"Dismiss"},parameters:{docs:{description:{component:"The Notifications component shows notifications on a specified position on the screen. Switch `position` in the control panel to view.\n"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[Info,Warning,Success,Error,DescriptionList,ChildrenNotification]})}},decorators:[Story=>(0,jsx_runtime.jsx)("div",{className:"yst-min-h-[12rem]",children:(0,jsx_runtime.jsx)(Story,{})})]}},"./src/components/notifications/docs/success.md":module=>{module.exports=""}}]);