elements-button-stories.e7889497.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[3581],{"./.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/button/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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--ml-1 yst-mr-2"}),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/button/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,Sizes:()=>Sizes,States:()=>States,Variants:()=>Variants,default:()=>stories});__webpack_require__("../../node_modules/react/index.js");var elements_button=__webpack_require__("./src/elements/button/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={render:({children,...args})=>("a"===args.as&&(args.href="#!"),(0,jsx_runtime.jsx)(elements_button.A,{...args,children})),parameters:{controls:{disable:!1}},args:{children:"Button factory"}},Variants={render:args=>(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2",children:[(0,jsx_runtime.jsx)(elements_button.A,{variant:"primary",children:"Primary (default)"}),(0,jsx_runtime.jsx)(elements_button.A,{variant:"secondary",children:"Secondary"}),(0,jsx_runtime.jsx)(elements_button.A,{variant:"tertiary",children:"Tertiary"}),(0,jsx_runtime.jsx)(elements_button.A,{variant:"error",children:"Error"}),(0,jsx_runtime.jsx)(elements_button.A,{variant:"upsell",children:"Upsell"})]}),parameters:{docs:{description:{story:"In our user interfaces, we distinguish five different button variants:\n\n1. **Primary action**<br>\n  Purple buttons are used to highlight the most important action or call to action on a page or screen. They should be used for the main action you want your users to take. The purple color is derived from our branding guidelines, which helps them stand out and catch the user's attention. These buttons should be used sparingly to avoid overwhelming users. Ideally, there should only be one primary action button on a page.\n\n  > Example actions: *Save changes*, *Submit*, *Sign up* or *Confirm*.\n\n\n2. **Secondary action**<br>\n  White buttons are used to offer secondary or supplementary actions to users that are less important than the primary action. These buttons can complement the primary action or provide additional options to users. They have a clean and simple appearance that does not draw too much attention. In interfaces that offer a large number of actions, such as tables, it is recommended to use secondary action buttons or text links to keep the UI clean and uncluttered.\n\n  > Example actions: *Cancel* or *Go back*.\n\n\n3. **Tertiary action**<br>\n  Transparent buttons are used for actions of lower priority than secondary actions. These buttons don't stand out much and are often optional, allowing users to take non-essential actions without getting distracted from the main tasks (primary and secondary actions). The transparent background prevents them from getting too much attention. Be careful when using these buttons because they're not very noticeable, and users might overlook them.\n\n  > Example actions: *Close* or *Skip*.\n\n\n4. **Danger action**<br>\n  Red buttons are used to warn users of potentially hazardous or irreversible actions. They often alert users to high-risk actions that could have serious consequences if not handled carefully, such as deleting files, canceling subscriptions, or permanently removing data.\n\n  > Example actions: *Deactivate Yoast SEO*, *Cancel subscription*, *Discard changes*, *Delete* or *Permanently remove all data*.\n\n\n5. **Buy action**<br>\n  Yellow buttons are used to indicate the start of a flow that eventually leads to a purchase or financial transaction related to our own products\x3c!--related to **Yoast** products--\x3e. Often, these buttons guide users toward a product page, their cart or the checkout process. Their bright color makes them stand out from our brand colors and other interface elements, attracting the user's attention.\x3c!--These yellow upsell buttons are not typically used for upsells from partners (like Wincher or JetPack Boost). Partners typically provide their own upsell designs and use their own branded button colors or text links to encourage users to purchase their products.--\x3e\n\n  > Example actions: *Unlock with Premium*, *Get Yoast SEO Premium* or *Buy Yoast Local SEO*.\n\n**Accessibility**<br>\nAll button variants have a clear hover and focus state, to help users with motor impairments understand which element they are interacting with.\n"}}}},Sizes={render:args=>(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2",children:[(0,jsx_runtime.jsx)(elements_button.A,{size:"extra-large",children:"Extra large"}),(0,jsx_runtime.jsx)(elements_button.A,{size:"large",children:"Large"}),(0,jsx_runtime.jsx)(elements_button.A,{size:"default",children:"Default"}),(0,jsx_runtime.jsx)(elements_button.A,{size:"small",children:"Small"})]}),parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"The aforementioned button variants can be used in four different sizes:\n\n1. **Extra large**<br>\nThe extra large button size is often used ads and upsells that require significant user attention. It can also be useful for touch interfaces, where extra large buttons are easier to tap.\n\n2. **Large**<br>\nThe large button size is used next to form input fields, by default it has the same height.\n\n3. **Default**<br>\nThe default button size is used for the vast majority of actions in our user interfaces, including actions such as *Insert a variable*, *Select image*, *View XML sitemap*, *Unlock with Premium*, *Save changes*. It is also used in cards and other areas of the user interface where only a few buttons are present on the page.\n\n4. **Small**<br>\nThe small button size is very useful for fitting more actions in a smaller space, like in tables. This approach ensures that the user interface remains tidy and uncluttered.\n\n_**Note:** When choosing a button size for a particular situation other than those previously mentioned, it's important to consider the context, hierarchy, proximity, screen size and resolution. The goal should be to choose a size that is appropriate for the information being conveyed, while also maintaining visual balance in the user interface._\n"}}}},States={render:args=>(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2",children:[(0,jsx_runtime.jsx)(elements_button.A,{isLoading:!0,children:"Loading"}),(0,jsx_runtime.jsx)(elements_button.A,{disabled:!0,children:"Disabled"}),(0,jsx_runtime.jsx)(elements_button.A,{disabled:!0,className:"yst-pointer-events-none",children:"Disabled & without pointer-events"})]}),parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"In addition to the default, hover, and focus states, two other button states have been specified:\n\n1. **Loading state**<br>\nThe loading state is used when a button click triggers a process that takes some time to complete, such as running a data optimization or uploading a file. It is important to indicate to the user that an action is happening, and the loading state provides feedback that the system is working. The loading state will be represented by a spinner to indicate to the user that the process is ongoing.\n\n2. **Disabled state**<br>\nThe disabled state, represented by a transparent button, is used when the button cannot be clicked due to a certain condition. The disabled state should be used when the user is not eligible to perform the action due to reasons such as insufficient permissions, lack of connectivity, or a disabled setting.\n\n_**Note:** The disabled state does not remove pointer-events. If you want to remove pointer-events, do it manually using a `className`._\n"}}}},stories={title:"1) Elements/Button",component:elements_button.A,argTypes:{children:{control:"text"},as:{options:["button","div","span","a"],table:{type:{summary:["button","div","span","a"].join("|")}}},variant:{options:Object.keys(elements_button._.variant),control:"select",table:{type:{summary:Object.keys(elements_button._.variant).join("|")}}},size:{options:Object.keys(elements_button._.size),control:"select",table:{type:{summary:Object.keys(elements_button._.size).join("|")}}}},parameters:{docs:{description:{component:"Buttons are essential components in a user interface. They are used to trigger actions and provide users with feedback. A button should immediately trigger an action on a page or screen when clicked or tapped."},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[Variants,Sizes,States]})}}}},"./src/elements/spinner/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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/hooks/use-svg-aria.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__=(isFocusable=null)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>{const aria={role:"img","aria-hidden":"true"};return null!==isFocusable&&(aria.focusable=isFocusable?"true":"false"),aria}),[isFocusable])},"../../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}}]);