-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcomponents-pagination-stories.43c0045c.iframe.bundle.js
1 lines (1 loc) · 14.9 KB
/
components-pagination-stories.43c0045c.iframe.bundle.js
1
(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[9876],{"./.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/components/pagination/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,VariantText:()=>VariantText,default:()=>stories});var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),react=__webpack_require__("../../node_modules/react/index.js");const esm_ChevronLeftIcon=react.forwardRef((function ChevronLeftIcon(props,svgRef){return react.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:svgRef},props),react.createElement("path",{fillRule:"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",clipRule:"evenodd"}))}));const esm_ChevronRightIcon=react.forwardRef((function ChevronRightIcon(props,svgRef){return react.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:svgRef},props),react.createElement("path",{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"}))}));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),use_svg_aria=__webpack_require__("./src/hooks/use-svg-aria.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Button=({className,children,active,disabled,...props})=>(0,jsx_runtime.jsx)("button",{type:"button",className:classnames_default()("yst-pagination__button",className,active&&!disabled&&"yst-pagination__button--active",disabled&&"yst-pagination__button--disabled"),disabled,...props,children});Button.displayName="Button",Button.displayName="Pagination.Button",Button.propTypes={className:prop_types_default().string,children:prop_types_default().node.isRequired,active:prop_types_default().bool,disabled:prop_types_default().bool},Button.defaultProps={className:"",active:!1,disabled:void 0};const pagination_button=Button;Button.__docgenInfo={description:"@param {string} [className] Extra class.\n@param {JSX.node} children The content.\n@param {boolean} [active] Whether the button is active.\n@param {boolean} [disabled] Whether the button is disabled.\n@param {Object} [props] Extra props.\n@returns {JSX.Element} The element.",methods:[],displayName:"Pagination.Button",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},active:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},disabled:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"bool"},required:!1},children:{description:"",type:{name:"node"},required:!0}}};const DisplayTruncated=()=>(0,jsx_runtime.jsx)("span",{className:"yst-pagination-display__truncated",children:"..."});DisplayTruncated.displayName="DisplayTruncated";const DisplayButtons=({current,total,onNavigate,maxPageButtons,disabled})=>{const amount=(0,react.useMemo)((()=>(0,lodash.clamp)(total,1,maxPageButtons)),[total,maxPageButtons]),half=(0,react.useMemo)((()=>(0,lodash.round)(amount/2,0)),[amount]),showTruncated=(0,react.useMemo)((()=>total>maxPageButtons&&maxPageButtons>1&¤t!==half+1),[total,maxPageButtons,half]),startOfSecondRange=(0,react.useMemo)((()=>total-(amount-half)+1),[total,amount,half]),currentIsTruncated=(0,react.useMemo)((()=>current>half&¤t<startOfSecondRange),[current,half,startOfSecondRange]);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,lodash.range)(half).map((index=>{const page=index+1;return(0,jsx_runtime.jsx)(pagination_button,{className:"yst-px-4",onClick:onNavigate,"data-page":page,active:page===current,disabled,children:page},page)})),showTruncated&&(0,jsx_runtime.jsx)(DisplayTruncated,{}),currentIsTruncated&&(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(pagination_button,{className:"yst-px-4",onClick:onNavigate,"data-page":current,active:!0,disabled,children:current}),current!==startOfSecondRange-1&&(0,jsx_runtime.jsx)(DisplayTruncated,{})]}),(0,lodash.rangeRight)(amount-half).map((index=>{const page=total-index;return(0,jsx_runtime.jsx)(pagination_button,{className:"yst-px-4",onClick:onNavigate,"data-page":page,active:page===current,disabled,children:page},page)}))]})};DisplayButtons.displayName="Pagination.DisplayButtons",DisplayButtons.propTypes={current:prop_types_default().number.isRequired,total:prop_types_default().number.isRequired,onNavigate:prop_types_default().func.isRequired,maxPageButtons:prop_types_default().number.isRequired,disabled:prop_types_default().bool.isRequired};const display_buttons=DisplayButtons;DisplayButtons.__docgenInfo={description:"Displays page buttons.\n@param {number} current The current page. Start at 1.\n@param {number} total The total pages.\n@param {function} onNavigate Callback for requested page navigation.\n@param {number} maxPageButtons For variant buttons: the maximum number of buttons to show.\n@param {boolean} disabled Whether the buttons are disabled.\n@returns {JSX.Element} The element.",methods:[],displayName:"Pagination.DisplayButtons",props:{current:{description:"",type:{name:"number"},required:!0},total:{description:"",type:{name:"number"},required:!0},onNavigate:{description:"",type:{name:"func"},required:!0},maxPageButtons:{description:"",type:{name:"number"},required:!0},disabled:{description:"",type:{name:"bool"},required:!0}}};const DisplayText=({current,total})=>(0,jsx_runtime.jsxs)("div",{className:"yst-pagination-display__text",children:[(0,jsx_runtime.jsx)("span",{className:"yst-pagination-display__current-text",children:current})," / ",total]});DisplayText.displayName="DisplayText",DisplayText.displayName="Pagination.DisplayText",DisplayText.propTypes={current:prop_types_default().number.isRequired,total:prop_types_default().number.isRequired};const display_text=DisplayText;DisplayText.__docgenInfo={description:"Displays the current / total as text.\n@param {number} current The current page. Start at 1.\n@param {number} total The total pages.\n@returns {JSX.Element} The element.",methods:[],displayName:"Pagination.DisplayText",props:{current:{description:"",type:{name:"number"},required:!0},total:{description:"",type:{name:"number"},required:!0}}};const VARIANT_display={buttons:"buttons",text:"text"},Pagination=({className,current,total,onNavigate,variant,maxPageButtons,disabled,screenReaderTextPrevious,screenReaderTextNext,...props})=>{const svgAriaProps=(0,use_svg_aria.A)(),handleNavigate=(0,react.useCallback)((({target})=>onNavigate((0,lodash.parseInt)(target.dataset.page))),[onNavigate]);return(0,jsx_runtime.jsxs)("nav",{className:classnames_default()("yst-pagination",className),...props,children:[(0,jsx_runtime.jsxs)(pagination_button,{className:"yst-rounded-l-md",onClick:handleNavigate,"data-page":current-1,disabled:disabled||current-1<1,children:[(0,jsx_runtime.jsx)("span",{className:"yst-pointer-events-none yst-sr-only",children:screenReaderTextPrevious}),(0,jsx_runtime.jsx)(esm_ChevronLeftIcon,{className:"yst-pointer-events-none yst-h-5 yst-w-5 rtl:yst-rotate-180",...svgAriaProps})]}),variant===VARIANT_display.text&&(0,jsx_runtime.jsx)(display_text,{current,total}),variant===VARIANT_display.buttons&&(0,jsx_runtime.jsx)(display_buttons,{current,total,maxPageButtons,onNavigate:handleNavigate,disabled}),(0,jsx_runtime.jsxs)(pagination_button,{className:"yst-rounded-r-md",onClick:handleNavigate,"data-page":current+1,disabled:disabled||current+1>total,children:[(0,jsx_runtime.jsx)("span",{className:"yst-pointer-events-none yst-sr-only",children:screenReaderTextNext}),(0,jsx_runtime.jsx)(esm_ChevronRightIcon,{className:"yst-pointer-events-none yst-h-5 yst-w-5 rtl:yst-rotate-180",...svgAriaProps})]})]})};Pagination.displayName="Pagination",Pagination.propTypes={className:prop_types_default().string,current:prop_types_default().number.isRequired,total:prop_types_default().number.isRequired,onNavigate:prop_types_default().func.isRequired,variant:prop_types_default().oneOf(Object.keys(VARIANT_display)),maxPageButtons:prop_types_default().number,disabled:prop_types_default().bool,screenReaderTextPrevious:prop_types_default().string.isRequired,screenReaderTextNext:prop_types_default().string.isRequired},Pagination.defaultProps={className:"",variant:VARIANT_display.buttons,maxPageButtons:6,disabled:!1};const pagination=Pagination;Pagination.__docgenInfo={description:'@param {string} [className] Extra class.\n@param {number} current The current page. Start at 1.\n@param {number} total The total pages.\n@param {function} onNavigate Callback for requested page navigation.\n@param {string} [variant] Display variant. Defaults to buttons. See const "VARIANT.display" for options.\n@param {number} [maxPageButtons] For variant buttons: the maximum number of buttons to show.\n@param {boolean} [disabled] Whether the buttons are disabled.\n@param {string} screenReaderTextPrevious The screen reader text for the previous button.\n@param {string} screenReaderTextNext The screen reader text for the next button.\n@param {Object} props Extra props.\n@returns {JSX.Element} The element.',methods:[],displayName:"Pagination",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},variant:{defaultValue:{value:'"buttons"',computed:!1},description:"",type:{name:"enum",value:[{value:'"buttons"',computed:!1},{value:'"text"',computed:!1}]},required:!1},maxPageButtons:{defaultValue:{value:"6",computed:!1},description:"",type:{name:"number"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},current:{description:"",type:{name:"number"},required:!0},total:{description:"",type:{name:"number"},required:!0},onNavigate:{description:"",type:{name:"func"},required:!0},screenReaderTextPrevious:{description:"",type:{name:"string"},required:!0},screenReaderTextNext:{description:"",type:{name:"string"},required:!0}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js");const Template=args=>{const[,updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),handleNavigate=(0,react.useCallback)((newCurrent=>updateArgs({current:newCurrent})),[updateArgs]);return(0,jsx_runtime.jsx)(pagination,{...args,onNavigate:handleNavigate})};Template.displayName="Template";const Factory={render:Template.bind({}),parameters:{controls:{disable:!1}},args:{current:1,total:10,screenReaderTextPrevious:"Previous",screenReaderTextNext:"Next"}},VariantText={render:Template.bind({}),name:"Variant text",parameters:{controls:{disable:!1}},args:{current:1,total:10,screenReaderTextPrevious:"Previous",screenReaderTextNext:"Next",variant:"text"}},stories={title:"2) Components/Pagination",component:pagination,argTypes:{current:{control:{type:"number",min:1}},total:{control:{type:"number",min:1}}},parameters:{docs:{description:{component:"The Pagination component offers navigation controls for one or more pages."},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[VariantText]})}}}},"./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}}]);