@preply/ds-docs 11.5.0 → 11.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.LayoutFlex.stories-BqNKOxzc.js → 00.LayoutFlex.stories-BHaWJWDM.js} +1 -1
- package/dist/assets/{00.applications-CyJAiQf3.js → 00.applications-D_J6NM1u.js} +1 -1
- package/dist/assets/{00.favicons.guide-BwKV7LgZ.js → 00.favicons.guide-Bt-UuIyd.js} +1 -1
- package/dist/assets/{00.token-explorer-D3HQJ3dy.js → 00.token-explorer-DaWjizOC.js} +1 -1
- package/dist/assets/{00.using-responsive-props-CCkI1Tld.js → 00.using-responsive-props-u8e84XKC.js} +1 -1
- package/dist/assets/{01.semantic-tokens-BK7BLZcq.js → 01.semantic-tokens-D4PHkv6c.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-CBbf3XxB.js → 01.using-shorthand-props-C_yM69l5.js} +1 -1
- package/dist/assets/{10.Combinations.stories-TKz5kBVj.js → 10.Combinations.stories-IPREYRw0.js} +1 -1
- package/dist/assets/{10.fonts.guide-UdXB_iOK.js → 10.fonts.guide-Ciq_ZNCo.js} +1 -1
- package/dist/assets/{10.ssr-C1u7dvjT.js → 10.ssr-BrqjyUR0.js} +1 -1
- package/dist/assets/{11.fonts.explorer-CDjnXfid.js → 11.fonts.explorer-DyvG8lOx.js} +1 -1
- package/dist/assets/{11.ssr.app-router-Cs4FOPhH.js → 11.ssr.app-router-rwNZtOr0.js} +1 -1
- package/dist/assets/{20.libraries-ioSyK1LY.js → 20.libraries-tF6QAbo1.js} +1 -1
- package/dist/assets/{2025-q4-ds-cleanup-DbXMK8WZ.js → 2025-q4-ds-cleanup-Cr6XG9X_.js} +1 -1
- package/dist/assets/{30.icons.explorer-6cQPOSNU.js → 30.icons.explorer-DVNm3Pm7.js} +1 -1
- package/dist/assets/{30.storybook-DlAnWMKK.js → 30.storybook-CaTUV-is.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-B7_S_GNn.js → 40.illustrations.explorer-DD9wN_f4.js} +1 -1
- package/dist/assets/{60.components-jfwjYYtD.js → 60.components-QCH0w5DT.js} +1 -1
- package/dist/assets/{90.advanced-Do_Wb8pV.js → 90.advanced-7vm9OwgD.js} +1 -1
- package/dist/assets/{Accordion-DlAp8KmP.js → Accordion-DrTxWHkT.js} +1 -1
- package/dist/assets/{Accordion-D95NvT0Z.css → Accordion-WlRloI0g.css} +1 -1
- package/dist/assets/{Accordion.stories-C12F7sjW.js → Accordion.stories-CsCBLmfd.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-CE9oHsW9.js → Accordion.tests.stories-DAOgB7S1.js} +1 -1
- package/dist/assets/{AlertBanner.primitives.stories-WvY-_iZh.js → AlertBanner.primitives.stories-DQdOIfAM.js} +1 -1
- package/dist/assets/{AlertBanner.stories-F7Vn8C02.js → AlertBanner.stories-CNtmHIeO.js} +1 -1
- package/dist/assets/{AlertBannerAction-BYa4kXiw.js → AlertBannerAction-DCnZmTB4.js} +9 -9
- package/dist/assets/{AlertDialog-D7FoU9Mo.js → AlertDialog-B5Se41e9.js} +1 -1
- package/dist/assets/{AlertDialog.stories-DKp7VN29.js → AlertDialog.stories-BjKs6Lok.js} +1 -1
- package/dist/assets/{Badge-DWIG0IOC.js → Badge-CW0c1rzN.js} +1 -1
- package/dist/assets/{Badge.stories-BMAaOyYW.js → Badge.stories-DyH7dMAW.js} +1 -1
- package/dist/assets/{Box-C3D0dCXP.js → Box-DDzEO3wG.js} +1 -1
- package/dist/assets/{Box.stories-BYLL5FQs.js → Box.stories-BMLrLf8t.js} +1 -1
- package/dist/assets/{BubbleCounter-C02fRH2E.js → BubbleCounter-D0mBKYuV.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-DMwREIgs.js → BubbleCounter.stories-CE7zD5sq.js} +1 -1
- package/dist/assets/{Button-_0pS2khJ.js → Button-BUsGqnKd.js} +2 -2
- package/dist/assets/{Button.stories-DxmLSlgT.js → Button.stories-BfbELWzV.js} +1 -1
- package/dist/assets/{CalloutBanner.stories-YHmPUMKD.js → CalloutBanner.stories-DJOJlyln.js} +1 -1
- package/dist/assets/{CalloutBannerText-BcIjTCPR.js → CalloutBannerText-BtTvKbyc.js} +2 -2
- package/dist/assets/{Checkbox.stories-DMh-0H-W.js → Checkbox.stories-BGqsdvxH.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-BwjQYoFK.js → Checkbox.tests.stories-C-NewDy1.js} +1 -1
- package/dist/assets/{Chips.stories-_gpuOeIw.js → Chips.stories-Ya8zFO22.js} +1 -1
- package/dist/assets/{Color-6BZIO3FS-D9fH_9BP.js → Color-6BZIO3FS-B-9Fm1EP.js} +1 -1
- package/dist/assets/{ComposingDialogs.stories-BtoJMTfu.js → ComposingDialogs.stories-Dwo7Wyok.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-CBbifa2e.js → ComposingPopovers.stories-C7E6ohoH.js} +1 -1
- package/dist/assets/{CountryFlag-CqhLpgul.js → CountryFlag-BODAmrMA.js} +1 -1
- package/dist/assets/{CountryFlag.stories-DCh8nQ3R.js → CountryFlag.stories-wR6oVHnf.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-KdCwJQaC.js → CountryFlag.test.stories-C14d_nRG.js} +1 -1
- package/dist/assets/{Dialog-DJ_22m-M.js → Dialog-Yu9YbPdw.js} +1 -1
- package/dist/assets/{Dialog.primitives.stories-_LjNw1Aq.js → Dialog.primitives.stories-jFrwNXqd.js} +1 -1
- package/dist/assets/{Dialog.stories-BgLYxxSl.js → Dialog.stories-CsKNoRAL.js} +1 -1
- package/dist/assets/{Dialog.test.stories-CCA5_y47.js → Dialog.test.stories-Dz2nmavs.js} +1 -1
- package/dist/assets/{DialogActions-D5TuMAHt.js → DialogActions-CrOEH1KW.js} +1 -1
- package/dist/assets/{DialogCloseButton-V4tiko9-.js → DialogCloseButton-oIOLb2GZ.js} +3 -3
- package/dist/assets/{DismissibleChips-DIxEewPp.js → DismissibleChips-CRmvwQtT.js} +1 -1
- package/dist/assets/{DismissibleChips.stories-DTC-zjPX.js → DismissibleChips.stories--rvtEp3W.js} +1 -1
- package/dist/assets/{DocsRenderer-LL677BLK-4u1YXi13.js → DocsRenderer-LL677BLK-DsJe_gys.js} +1 -1
- package/dist/assets/{DropdownMenu-L_qQlJsT.js → DropdownMenu-BhyC7iIo.js} +11 -11
- package/dist/assets/{DropdownMenu-Dp5QD_2I.css → DropdownMenu-DK5srF7R.css} +1 -1
- package/dist/assets/{DropdownMenu.stories-CS1tMRg_.js → DropdownMenu.stories-DpgWrI7l.js} +1 -1
- package/dist/assets/{FormControl-B3jdXz5i.js → FormControl-DG7egvWs.js} +1 -1
- package/dist/assets/{FormControl.stories-D7X11Qhj.js → FormControl.stories-C0OPOmlx.js} +1 -1
- package/dist/assets/{Heading-DX-HCDkx.js → Heading-vZk25JM-.js} +1 -1
- package/dist/assets/{Heading.stories-DhvMfSFQ.js → Heading.stories-CFER10Qo.js} +1 -1
- package/dist/assets/{Icon-BItN7xKl.js → Icon-0niTGk4t.js} +1 -1
- package/dist/assets/{Icon-RSC-DjKuVLz1.js → Icon-RSC-BNWKvBW2.js} +1 -1
- package/dist/assets/{Icon.stories-FXAqY7I2.js → Icon.stories-DB5MuhGm.js} +1 -1
- package/dist/assets/IconButton-69CfWgKz.js +9 -0
- package/dist/assets/{IconTile.stories-IpimMCpQ.js → IconTile.stories-ByvkHwjg.js} +1 -1
- package/dist/assets/{Input-D6_jI5Uh.js → Input-D5QJivuW.js} +2 -2
- package/dist/assets/{IntegrationWithReactHookForm.stories-DsGQ7mGb.js → IntegrationWithReactHookForm.stories-T18t6WxS.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-D53a5bAt.js → IntlFormattedCurrency.stories-BF1RCDv7.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-BjHGvxyx.js → IntlFormattedDateTime.stories-CoilOAeY.js} +1 -1
- package/dist/assets/{LayoutFlex-CEOcocT6.js → LayoutFlex-Ca74XcC1.js} +1 -1
- package/dist/assets/{LayoutFlexItem-DJZHfd4G.js → LayoutFlexItem-Cc8MfuDK.js} +1 -1
- package/dist/assets/{LayoutGrid-Ce9ffWmL.js → LayoutGrid-C6Vvf74I.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-CsbKauS5.js → LayoutGrid.stories-B12y4oON.js} +1 -1
- package/dist/assets/{LayoutGridItem-BtGWBhGr.js → LayoutGridItem-Bmlsy-Hl.js} +1 -1
- package/dist/assets/{Link.stories-DlsXh361.js → Link.stories-CbQnXOIu.js} +1 -1
- package/dist/assets/{MultiSelectChips-BvRx5YLq.js → MultiSelectChips-BzhRi2EC.js} +2 -2
- package/dist/assets/{MultiSelectChips.stories-2TW7F44B.js → MultiSelectChips.stories-D5VPTFyB.js} +1 -1
- package/dist/assets/{NativeSelectField.stories-DmBdDAYW.js → NativeSelectField.stories-BNW09yKI.js} +6 -6
- package/dist/assets/NumberField-BME7mYxn.js +6 -0
- package/dist/assets/{NumberField.stories-oR8Gegez.js → NumberField.stories-rBipFrXc.js} +1 -1
- package/dist/assets/{ObserveIntersection-Jf71_G5v.js → ObserveIntersection-B1ciJ546.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-C3o8aTAg.js → ObserveIntersection.stories-CfdIzzpg.js} +1 -1
- package/dist/assets/{OnboardingTooltip-ANaVB8Qh.js → OnboardingTooltip-IddlUs6s.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-B2P2loQ_.js → OnboardingTooltip.stories-DyL-qxZr.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-zXUt0NJE.js → OnboardingTooltip.tests.stories-Bo02UP2_.js} +1 -1
- package/dist/assets/{OnboardingTour-ChdI2m_S.js → OnboardingTour-DXTaYFSg.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-Bs8xxSkO.js → OnboardingTour.stories-BAq9wAlT.js} +2 -2
- package/dist/assets/{OnboardingTour.tests.stories-9KaTQw8J.js → OnboardingTour.tests.stories-DJeStnzI.js} +1 -1
- package/dist/assets/{PasswordField-CneYVFFH.js → PasswordField-BN7Fk1JN.js} +5 -5
- package/dist/assets/{PasswordField.stories-COup04RY.js → PasswordField.stories-ByfF9RQU.js} +1 -1
- package/dist/assets/{ProgressBar.stories-Bib8wp9b.js → ProgressBar.stories-BExsN1vA.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-D8soXV_p.js → ProgressSteps.stories-CpofAtnD.js} +1 -1
- package/dist/assets/{PromoDialog-De2gYvXV.js → PromoDialog-0Z8NWpvb.js} +1 -1
- package/dist/assets/{RangeSlider-BczA6Et9.js → RangeSlider-CgR6JzNj.js} +1 -1
- package/dist/assets/{RangeSlider.stories-BfKXCzjC.js → RangeSlider.stories-CSlM_ZlZ.js} +1 -1
- package/dist/assets/{RatingInput.stories-BumN1i78.js → RatingInput.stories-DsmsN3i3.js} +1 -1
- package/dist/assets/{SelectField-Ci40lkHJ.js → SelectField-CO8g8POj.js} +5 -5
- package/dist/assets/{SelectField.stories-BzbCicRv.js → SelectField.stories-CTxS9Eeh.js} +1 -1
- package/dist/assets/{ShowOnIntersection-BiVPS7mQ.js → ShowOnIntersection-C4zRhYOZ.js} +2 -2
- package/dist/assets/{ShowOnIntersection.stories-Cq68GulS.js → ShowOnIntersection.stories-D08H1P_8.js} +1 -1
- package/dist/assets/{SingleSelectChips-Dgw0qYjB.js → SingleSelectChips-D0diRaYm.js} +2 -2
- package/dist/assets/{SingleSelectChips.stories-CTaYA6Yk.js → SingleSelectChips.stories-D4b9wYEW.js} +1 -1
- package/dist/assets/{Slider-DZQBnl2S.js → Slider-CV6iUw0B.js} +1 -1
- package/dist/assets/{Slider.stories-D0ZL0kqe.js → Slider.stories-D45GNmX0.js} +1 -1
- package/dist/assets/{Steps-D3cRQC3d.js → Steps-74_KvRyO.js} +1 -1
- package/dist/assets/{Steps.stories-DiKBPx9F.js → Steps.stories-tZBETY8Z.js} +1 -1
- package/dist/assets/{Switch.stories-wpsXwv-p.js → Switch.stories-ByuSsYNd.js} +1 -1
- package/dist/assets/{Text-BiCO96_r.js → Text-at08VF1d.js} +1 -1
- package/dist/assets/{Text.stories-Dn10lUJM.js → Text.stories-BtMMipQe.js} +1 -1
- package/dist/assets/TextField-BJ7Kei00.js +6 -0
- package/dist/assets/{TextField.stories-Dk6xmaqf.js → TextField.stories-CahPTkGl.js} +1 -1
- package/dist/assets/{TextHighlighted-Dau-4kMW.js → TextHighlighted-pTdCiBe0.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-CP88FiIa.js → TextHighlighted.stories-Ce2GU7G3.js} +1 -1
- package/dist/assets/{TextInline-Cx8xE15e.js → TextInline-gqM1edPR.js} +1 -1
- package/dist/assets/{TextInline.stories-5LuYQY-N.js → TextInline.stories-D_SO39-W.js} +1 -1
- package/dist/assets/TextareaField-NW1OotsP.js +6 -0
- package/dist/assets/{TextareaField.stories-Bs7pC0n_.js → TextareaField.stories-D2SMqS5C.js} +1 -1
- package/dist/assets/{Toast-BZjsurC1.js → Toast-CGMAFCL5.js} +1 -1
- package/dist/assets/{Toast.stories-uzy2Iqxo.js → Toast.stories-DJjg_y8u.js} +1 -1
- package/dist/assets/{Tooltip-CX8T37NP.js → Tooltip-Bu-_YyPH.js} +1 -1
- package/dist/assets/{Tooltip.stories-GnmHp_bX.js → Tooltip.stories-7Jvlo0et.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-CoxZ2Mzn.js → Tooltip.tests.stories-B7s22F_Q.js} +1 -1
- package/dist/assets/{ai-integration-qIUPfaJz.js → ai-integration-CpdHOAn5.js} +1 -1
- package/dist/assets/{breakpoints-BHIftKDH.js → breakpoints-BVSRi6ht.js} +1 -1
- package/dist/assets/{breakpoints-BO0KD_ym.js → breakpoints-Co-SMTYq.js} +1 -1
- package/dist/assets/{breakpoints-BoWDpBQq.js → breakpoints-eS7Z7TJr.js} +1 -1
- package/dist/assets/{changelog-DMSLa5gf.js → changelog-Cl6TBUoP.js} +8 -1
- package/dist/assets/{constants-FY3oqVHd.js → constants-BRk8fyp8.js} +1 -1
- package/dist/assets/{createRequiredContext-9tmtQKcI.js → createRequiredContext-B8FlkWgj.js} +2 -2
- package/dist/assets/{dist-CKzY_Ph_.css → dist-CEs0aFF0.css} +1 -1
- package/dist/assets/{dist-CxlmHSsk.js → dist-QhLTxRNy.js} +1 -1
- package/dist/assets/{esm-raxNxvJf.js → esm-B9XcgzyC.js} +1 -1
- package/dist/assets/{fonts-explorer.stories-i_p7YItV.js → fonts-explorer.stories-C3atRwOK.js} +1 -1
- package/dist/assets/{getTokenVar-4EmFJzte.js → getTokenVar-Bs88KSBZ.js} +1 -1
- package/dist/assets/{gradientBorders-DJrc2s0y.js → gradientBorders-BbG3fAIU.js} +1 -1
- package/dist/assets/{hover-glItH_Lr.js → hover-Cfg4MhCw.js} +1 -1
- package/dist/assets/{hover-DNtNop2y.js → hover-D9U8Wv2F.js} +1 -1
- package/dist/assets/{hover-fkMFUnk3.js → hover-DGiHWh3e.js} +1 -1
- package/dist/assets/{iframe-Czcvpvgg.js → iframe-dOU5q7Ak.js} +4 -4
- package/dist/assets/{intro-CyzFu4JY.js → intro-C_TjoimS.js} +1 -1
- package/dist/assets/{migrating-from-less-2bmmx-e1.js → migrating-from-less-CSFfvwQw.js} +1 -1
- package/dist/assets/{tokens-DxS0cNj0.js → tokens-BGnlxsXa.js} +1 -1
- package/dist/assets/{tokens-DW7LgqLI.js → tokens-D7kbkVdd.js} +1 -1
- package/dist/assets/{tokens-iE0hKajS.js → tokens-DZ8IANNm.js} +1 -1
- package/dist/assets/{usePortalElement-BUBRjIYT.js → usePortalElement-WZQ90Rb6.js} +1 -1
- package/dist/assets/{welcome-BIdOz8Yn.js → welcome-8-BI09zG.js} +1 -1
- package/dist/assets/{zeroheight-BX9Z_BVr.js → zeroheight-ry_CctJ0.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +13786 -13786
- package/dist/project.json +1 -1
- package/package.json +5 -5
- package/dist/assets/IconButton-sZZtNos_.js +0 -9
- package/dist/assets/NumberField-DW7lG9mg.js +0 -6
- package/dist/assets/TextField-C5bFUM0q.js +0 -6
- package/dist/assets/TextareaField-1Q9FqsHc.js +0 -6
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,y as a}from"./dist-DtfJeYQK.js";import{t as o}from"./react-dom-CLuuWI32.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as ee,t as u}from"./Icon-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,y as a}from"./dist-DtfJeYQK.js";import{t as o}from"./react-dom-CLuuWI32.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as ee,t as u}from"./Icon-0niTGk4t.js";import{n as te,t as ne}from"./Text-at08VF1d.js";import{n as re}from"./Heading-vZk25JM-.js";import{n as ie,t as ae}from"./Button-BUsGqnKd.js";import{r as oe}from"./OnboardingTooltip-IddlUs6s.js";import{i as d,o as se,r as ce}from"./lib-8ue2PVWI.js";import{n as le}from"./AlertDialog-B5Se41e9.js";import{n as ue,t as de}from"./TokyoUICheck-BxTDosuA.js";import{i as fe,n as pe,r as me,t as he}from"./TokyoUIErrorWarning-BH93ehx8.js";import{n as ge,t as _e}from"./VisuallyHidden-CpMYtDeS.js";import{n as ve,t as ye}from"./IconButton-69CfWgKz.js";import{n as be}from"./Checkbox-BV4Be-fH.js";import{r as xe}from"./SingleSelectChips-D0diRaYm.js";import{r as Se}from"./MultiSelectChips-BzhRi2EC.js";import{r as Ce}from"./DismissibleChips-CRmvwQtT.js";import{l as f,u as we}from"./DialogCloseButton-oIOLb2GZ.js";import{n as Te}from"./Dialog-Yu9YbPdw.js";import{a as Ee,o as De}from"./DialogActions-CrOEH1KW.js";import{n as Oe,r as ke,t as p}from"./Steps-74_KvRyO.js";import{u as Ae}from"./DropdownMenu-BhyC7iIo.js";import{n as je}from"./FormControl-DG7egvWs.js";import{n as Me}from"./LayoutFlex-Ca74XcC1.js";import{n as Ne}from"./NumberField-BME7mYxn.js";import{n as Pe}from"./PasswordField-BN7Fk1JN.js";import{i as Fe}from"./SelectField-CO8g8POj.js";import{r as Ie}from"./Slider-CV6iUw0B.js";import{n as Le}from"./RangeSlider-CgR6JzNj.js";import{n as Re}from"./Switch-DyKTsO1c.js";import{n as ze}from"./TextareaField-NW1OotsP.js";import{n as Be}from"./TextField-BJ7Kei00.js";import{n as Ve}from"./Tooltip-Bu-_YyPH.js";var m,h,He,Ue,g,_,v=t((()=>{m=`alertBannerHost__NKFyB`,h=`alertBanner__Dje2u`,He=`icon__xEAyT`,Ue=`description__4PDHP`,g=`action__0gYZG`,_={alertBannerHost:m,alertBanner:h,icon:He,description:Ue,action:g}}));function y(){let e=(0,x.useContext)(C);if(!e)throw Error(`useAlertBannerHost must be used within AlertBannerHostContext`);return e.hostEl}function b({children:e,...t}){let[n,r]=(0,x.useState)(null),{formatMessage:i}=se();return(0,S.jsxs)(C.Provider,{value:{hostEl:n},children:[(0,S.jsx)(`div`,{className:_.alertBannerHost,role:`region`,"aria-live":`polite`,"aria-atomic":`false`,"aria-label":i({id:`preply-ds.alert-banner.host-region`,defaultMessage:`Alerts, warnings, and updates`,description:`It's announced by screen readers when they scan the content of the page, and they find the alert banners container.`}),ref:r,...t}),e]})}var x,S,C,w=t((()=>{x=e(n(),1),v(),ce(),S=s(),C=(0,x.createContext)({hostEl:null});try{y.displayName=`useAlertBannerHost`,y.__docgenInfo={description:"If you have issues with AlertBannerHostContext, ensures `AlertBannerProvider` is put at the top of\nyour app component tree",displayName:`useAlertBannerHost`,props:{}}}catch{}try{b.displayName=`AlertBannerProvider`,b.__docgenInfo={description:`A region where all the \`AlertBanner\`s will be rendered into, and announced accordingly. It should
|
|
2
2
|
be the first element of the page.
|
|
3
3
|
|
|
4
4
|
From an affordance perspective:
|
|
@@ -16,7 +16,7 @@ warnings, and updates") as the first element, so the users are aware since the b
|
|
|
16
16
|
there is a dedicated region for alerts.
|
|
17
17
|
3. When an alert appears, it's announced with something like "Alert: we can't renew your
|
|
18
18
|
subscription", and they can connect the initially announced region with the newly appeared alert.
|
|
19
|
-
4. They can then navigate to the alerts region, and interact with the alert actions.`,displayName:`AlertBannerProvider`,props:{}}}catch{}})),T,We,E,D,O,Ge,k=t((()=>{T=e(n(),1),v(),We=e(o(),1),w(),E=s(),D=(0,T.createContext)({variant:`positive`}),O=(0,T.forwardRef)(function(e,t){let n=y();return n?(0,We.createPortal)((0,E.jsx)(Ge,{ref:t,...e}),n):null}),Ge=(0,T.forwardRef)(function({className:e,variant:t,...n},r){let i=[_.alertBanner,e].filter(Boolean).join(` `);return(0,E.jsx)(D.Provider,{value:{variant:t},children:(0,E.jsx)(`div`,{ref:r,className:i,"data-preply-ds-component":`AlertBannerRoot`,"data-variant":t,...n})})});try{O.displayName=`AlertBannerRoot`,O.__docgenInfo={description:``,displayName:`AlertBannerRoot`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!0,type:{name:`enum`,value:[{value:`"positive"`},{value:`"warning"`},{value:`"critical"`}]}},dataset:{defaultValue:null,description:"@deprecated Pass data attributes as regular props instead (`data-testid` for instance)",name:`dataset`,required:!1,type:{name:`undefined`}}}}}catch{}})),A,j,M,N,P,F,I,Ke=t((()=>{A=e(n(),1),ue(),fe(),pe(),ee(),v(),k(),j=s(),M=()=>(0,j.jsx)(u,{svg:de,size:`24`}),N=()=>(0,j.jsx)(u,{svg:he,size:`24`}),P=()=>(0,j.jsx)(u,{svg:me,size:`24`}),F={positive:M,warning:N,critical:P},I=(0,A.forwardRef)(function({svg:e,children:t,className:n=``},r){let{variant:i}=(0,A.useContext)(D),a=[_.icon,n].join(` `),o=null;return t?o=t:e?o=(0,j.jsx)(u,{svg:e,size:`24`}):i&&i in F&&(o=F[i]()),o?(0,j.jsx)(`div`,{ref:r,className:a,children:o}):null});try{M.displayName=`AlertBannerPositiveIcon`,M.__docgenInfo={description:`Positive icon for the AlertBanner.`,displayName:`AlertBannerPositiveIcon`,props:{}}}catch{}try{N.displayName=`AlertBannerWarningIcon`,N.__docgenInfo={description:`Warning icon for the AlertBanner.`,displayName:`AlertBannerWarningIcon`,props:{}}}catch{}try{P.displayName=`AlertBannerCriticalIcon`,P.__docgenInfo={description:`Critical icon for the AlertBanner.`,displayName:`AlertBannerCriticalIcon`,props:{}}}catch{}try{I.displayName=`AlertBannerIcon`,I.__docgenInfo={description:"An icon for the alert banner.\n\nThis component will render the appropriate icon based on the parent\n`AlertBannerRoot` component's `variant` prop — these semantic icons are also\nexported for the following variants:\n- `positive` -> `<AlertBannerPositiveIcon />`\n- `warning` -> `<AlertBannerWarningIcon />`\n- `critical` -> `<AlertBannerCriticalIcon />`\n\nThe icon can be overridden by passing a custom SVG icon via the `svg` prop.\n\nIf you want to place any leading element inside of the `AlertBanner`,\nwith the same spacing as the icon, you can pass it as a child element.\n\nNote: The root of this component is a `div` element. You can use the\n`className` prop to override the default styles for the **container**.",displayName:`AlertBannerIcon`,props:{svg:{defaultValue:null,description:``,name:`svg`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},className:{defaultValue:{value:``},description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),L,R,qe,z,Je=t((()=>{L=e(n(),1),ce(),X(),ge(),v(),k(),R=s(),qe={critical:(0,R.jsx)(d,{id:`preply-ds.alert-banner.critical-prefix`,defaultMessage:`Alert:`,description:`Prefix every alert banner shown to the user. It's announced by screen readers as 'Alert: 'the alert message (for instance: 'Alert: We can't renew your subscription.').`}),warning:(0,R.jsx)(d,{id:`preply-ds.alert-banner.warning-prefix`,defaultMessage:`Warning:`,description:`Prefix every warning banner shown to the user. It's announced by screen readers as 'Warning: 'the alert message (for instance: 'Warning: Your credit card is about to expire.').`}),positive:(0,R.jsx)(d,{id:`preply-ds.alert-banner.positive-prefix`,defaultMessage:`Update:`,description:`Prefix every positive banner shown to the user. It's announced by screen readers as 'Warning: 'the alert message (for instance: 'Warning: Your subscription has been renewed successfully.').`})},z=(0,L.forwardRef)(function({className:e,children:t,...n},r){let{variant:i}=(0,L.useContext)(D);return(0,R.jsxs)(ne,{ref:r,variant:`default-regular`,accent:`primary`,className:[_.description,e].filter(Boolean).join(` `),...n,children:[(0,R.jsx)(_e,{children:qe[i]}),` `,t]})});try{z.displayName=`AlertBannerText`,z.__docgenInfo={description:"The AlertBannerText is a container which defaults to displaying a `Text` child with a\n`default-regular` variant, which can be overridden with the `children` prop. The passed text is\nalso prefixed with a visually hidden text to allow screen reader user to remind of the existence\nof the region rendered by `AlertBannerProvider`.",displayName:`AlertBannerText`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"
|
|
19
|
+
4. They can then navigate to the alerts region, and interact with the alert actions.`,displayName:`AlertBannerProvider`,props:{}}}catch{}})),T,We,E,D,O,Ge,k=t((()=>{T=e(n(),1),v(),We=e(o(),1),w(),E=s(),D=(0,T.createContext)({variant:`positive`}),O=(0,T.forwardRef)(function(e,t){let n=y();return n?(0,We.createPortal)((0,E.jsx)(Ge,{ref:t,...e}),n):null}),Ge=(0,T.forwardRef)(function({className:e,variant:t,...n},r){let i=[_.alertBanner,e].filter(Boolean).join(` `);return(0,E.jsx)(D.Provider,{value:{variant:t},children:(0,E.jsx)(`div`,{ref:r,className:i,"data-preply-ds-component":`AlertBannerRoot`,"data-variant":t,...n})})});try{O.displayName=`AlertBannerRoot`,O.__docgenInfo={description:``,displayName:`AlertBannerRoot`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!0,type:{name:`enum`,value:[{value:`"positive"`},{value:`"warning"`},{value:`"critical"`}]}},dataset:{defaultValue:null,description:"@deprecated Pass data attributes as regular props instead (`data-testid` for instance)",name:`dataset`,required:!1,type:{name:`undefined`}}}}}catch{}})),A,j,M,N,P,F,I,Ke=t((()=>{A=e(n(),1),ue(),fe(),pe(),ee(),v(),k(),j=s(),M=()=>(0,j.jsx)(u,{svg:de,size:`24`}),N=()=>(0,j.jsx)(u,{svg:he,size:`24`}),P=()=>(0,j.jsx)(u,{svg:me,size:`24`}),F={positive:M,warning:N,critical:P},I=(0,A.forwardRef)(function({svg:e,children:t,className:n=``},r){let{variant:i}=(0,A.useContext)(D),a=[_.icon,n].join(` `),o=null;return t?o=t:e?o=(0,j.jsx)(u,{svg:e,size:`24`}):i&&i in F&&(o=F[i]()),o?(0,j.jsx)(`div`,{ref:r,className:a,children:o}):null});try{M.displayName=`AlertBannerPositiveIcon`,M.__docgenInfo={description:`Positive icon for the AlertBanner.`,displayName:`AlertBannerPositiveIcon`,props:{}}}catch{}try{N.displayName=`AlertBannerWarningIcon`,N.__docgenInfo={description:`Warning icon for the AlertBanner.`,displayName:`AlertBannerWarningIcon`,props:{}}}catch{}try{P.displayName=`AlertBannerCriticalIcon`,P.__docgenInfo={description:`Critical icon for the AlertBanner.`,displayName:`AlertBannerCriticalIcon`,props:{}}}catch{}try{I.displayName=`AlertBannerIcon`,I.__docgenInfo={description:"An icon for the alert banner.\n\nThis component will render the appropriate icon based on the parent\n`AlertBannerRoot` component's `variant` prop — these semantic icons are also\nexported for the following variants:\n- `positive` -> `<AlertBannerPositiveIcon />`\n- `warning` -> `<AlertBannerWarningIcon />`\n- `critical` -> `<AlertBannerCriticalIcon />`\n\nThe icon can be overridden by passing a custom SVG icon via the `svg` prop.\n\nIf you want to place any leading element inside of the `AlertBanner`,\nwith the same spacing as the icon, you can pass it as a child element.\n\nNote: The root of this component is a `div` element. You can use the\n`className` prop to override the default styles for the **container**.",displayName:`AlertBannerIcon`,props:{svg:{defaultValue:null,description:``,name:`svg`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},className:{defaultValue:{value:``},description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),L,R,qe,z,Je=t((()=>{L=e(n(),1),ce(),X(),ge(),v(),k(),R=s(),qe={critical:(0,R.jsx)(d,{id:`preply-ds.alert-banner.critical-prefix`,defaultMessage:`Alert:`,description:`Prefix every alert banner shown to the user. It's announced by screen readers as 'Alert: 'the alert message (for instance: 'Alert: We can't renew your subscription.').`}),warning:(0,R.jsx)(d,{id:`preply-ds.alert-banner.warning-prefix`,defaultMessage:`Warning:`,description:`Prefix every warning banner shown to the user. It's announced by screen readers as 'Warning: 'the alert message (for instance: 'Warning: Your credit card is about to expire.').`}),positive:(0,R.jsx)(d,{id:`preply-ds.alert-banner.positive-prefix`,defaultMessage:`Update:`,description:`Prefix every positive banner shown to the user. It's announced by screen readers as 'Warning: 'the alert message (for instance: 'Warning: Your subscription has been renewed successfully.').`})},z=(0,L.forwardRef)(function({className:e,children:t,...n},r){let{variant:i}=(0,L.useContext)(D);return(0,R.jsxs)(ne,{ref:r,variant:`default-regular`,accent:`primary`,className:[_.description,e].filter(Boolean).join(` `),...n,children:[(0,R.jsx)(_e,{children:qe[i]}),` `,t]})});try{z.displayName=`AlertBannerText`,z.__docgenInfo={description:"The AlertBannerText is a container which defaults to displaying a `Text` child with a\n`default-regular` variant, which can be overridden with the `children` prop. The passed text is\nalso prefixed with a visually hidden text to allow screen reader user to remind of the existence\nof the region rendered by `AlertBannerProvider`.",displayName:`AlertBannerText`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"placeholder"`},{value:`"accentDark"`}]}},strong:{defaultValue:null,description:``,name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"div"`},{value:`"p"`},{value:`"span"`}]}},dataset:{defaultValue:null,description:"@deprecated Pass data attributes as regular props instead (`data-testid` for instance)",name:`dataset`,required:!1,type:{name:`undefined`}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),B,V,Ye=t((()=>{e(n(),1),i(),l(),k(),Ke(),Je(),$(),B=s(),V=e=>{let{variant:t,description:n,action:i,dataset:a}=e;return(0,B.jsxs)(O,{variant:t,...r(a,{preplyDsComponent:c.AlertBanner}),children:[(0,B.jsx)(I,{}),(0,B.jsx)(z,{children:n}),(0,B.jsx)(Q,{children:i})]})};try{V.displayName=`AlertBanner`,V.__docgenInfo={description:`The Alert Banner communicates important and time-sensitive messages that require user attention.
|
|
20
20
|
|
|
21
21
|
From an accessibility perspective, the description is prefixed to announce the importance of the
|
|
22
22
|
banner.`,displayName:`AlertBanner`,props:{variant:{defaultValue:null,description:"Impact the visualized icon, the background color, and how the banner is announced by screen\nreaders.\n\nSemantic icons are also exported for the following variants:\n- `warning` -> `<AlertBannerWarningIcon />`\n- `critical` -> `<AlertBannerCriticalIcon />`\n- `positive` -> `<AlertBannerPositiveIcon />`",name:`variant`,required:!0,type:{name:`enum`,value:[{value:`"positive"`},{value:`"warning"`},{value:`"critical"`}]}},description:{defaultValue:null,description:`The banner's message content.`,name:`description`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},action:{defaultValue:null,description:`The banner' action.
|
|
@@ -70,14 +70,14 @@ return next;
|
|
|
70
70
|
const handleStepChange = async (current, next) => {
|
|
71
71
|
if (next === 2) return 3; // Skip step 2
|
|
72
72
|
return next;
|
|
73
|
-
};`,name:`onStepChange`,required:!1,type:{name:`enum`,value:[{value:`(currentStep: number, nextStep: number) => number | Promise<number | undefined> | undefined`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{G.displayName=`DialogStep`,G.__docgenInfo={description:``,displayName:`DialogStep`,props:{title:{defaultValue:null,description:`Main heading for the step.`,name:`title`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},description:{defaultValue:null,description:`Optional description text displayed below the title.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideHeader:{defaultValue:null,description:`If true, hides the step title and description.`,name:`hideHeader`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},children:{defaultValue:null,description:`Step content.`,name:`children`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}}}}}catch{}try{K.displayName=`DialogStepsNext`,K.__docgenInfo={description:``,displayName:`DialogStepsNext`,props:{
|
|
73
|
+
};`,name:`onStepChange`,required:!1,type:{name:`enum`,value:[{value:`(currentStep: number, nextStep: number) => number | Promise<number | undefined> | undefined`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{G.displayName=`DialogStep`,G.__docgenInfo={description:``,displayName:`DialogStep`,props:{title:{defaultValue:null,description:`Main heading for the step.`,name:`title`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},description:{defaultValue:null,description:`Optional description text displayed below the title.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideHeader:{defaultValue:null,description:`If true, hides the step title and description.`,name:`hideHeader`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},children:{defaultValue:null,description:`Step content.`,name:`children`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}}}}}catch{}try{K.displayName=`DialogStepsNext`,K.__docgenInfo={description:``,displayName:`DialogStepsNext`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},as:{defaultValue:null,description:`Custom element to render the button.
|
|
74
74
|
|
|
75
75
|
Allows rendering the button using a different React element or component.
|
|
76
76
|
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
|
|
77
77
|
@example // Render as a react router link component
|
|
78
78
|
import { Link } from 'react-router-dom';
|
|
79
79
|
|
|
80
|
-
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},
|
|
80
|
+
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"inverted"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
|
|
81
81
|
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
|
|
82
82
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
83
83
|
|
|
@@ -88,14 +88,14 @@ or
|
|
|
88
88
|
|
|
89
89
|
<Button trailingSvgIcon={TokyoUITag}>Button</Button>
|
|
90
90
|
or
|
|
91
|
-
<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`trailingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}try{q.displayName=`DialogStepsPrevious`,q.__docgenInfo={description:``,displayName:`DialogStepsPrevious`,props:{
|
|
91
|
+
<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`trailingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}try{q.displayName=`DialogStepsPrevious`,q.__docgenInfo={description:``,displayName:`DialogStepsPrevious`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},as:{defaultValue:null,description:`Custom element to render the button.
|
|
92
92
|
|
|
93
93
|
Allows rendering the button using a different React element or component.
|
|
94
94
|
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
|
|
95
95
|
@example // Render as a react router link component
|
|
96
96
|
import { Link } from 'react-router-dom';
|
|
97
97
|
|
|
98
|
-
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},
|
|
98
|
+
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"inverted"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
|
|
99
99
|
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
|
|
100
100
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
101
101
|
|
|
@@ -106,19 +106,19 @@ or
|
|
|
106
106
|
|
|
107
107
|
<Button trailingSvgIcon={TokyoUITag}>Button</Button>
|
|
108
108
|
or
|
|
109
|
-
<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`trailingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}})),Ze,Qe,$e=t((()=>{Ze=`IconTile__XlzW3`,Qe={IconTile:Ze,"IconTile--size-small":`IconTile--size-small__brJck`,"IconTile--size-base":`IconTile--size-base__gPIDE`,"IconTile--size-medium":`IconTile--size-medium__gAwOs`,"IconTile--size-large":`IconTile--size-large__M35fc`,"IconTile--tone-neutral":`IconTile--tone-neutral__IVJ2Y`,"IconTile--tone-info":`IconTile--tone-info__o2x-M`,"IconTile--tone-ai":`IconTile--tone-ai__dJp9n`,"IconTile--tone-positive":`IconTile--tone-positive__yJsa9`,"IconTile--tone-warning":`IconTile--tone-warning__q8yaj`,"IconTile--tone-critical":`IconTile--tone-critical__iAjl0`}}));function et(e){switch(e){case`small`:return`16`;case`medium`:return`32`;case`large`:return`48`}return`24`}var tt,J,Y,nt=t((()=>{i(),tt=e(n(),1),$e(),l(),X(),J=s(),Y=(0,tt.forwardRef)(function({size:e=`base`,tone:t=`neutral`,dataset:n,...i},o){return(0,J.jsx)(`span`,{className:a(Qe,c.IconTile,[`size-${e}`,`tone-${t}`]).join(` `),...r(n,{preplyDsComponent:c.IconTile}),children:(0,J.jsx)(u,{...i,accent:`primary`,size:et(e),ref:o})})});try{Y.displayName=`IconTile`,Y.__docgenInfo={description:``,displayName:`IconTile`,props:{label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:`label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
109
|
+
<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`trailingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}})),Ze,Qe,$e=t((()=>{Ze=`IconTile__XlzW3`,Qe={IconTile:Ze,"IconTile--size-small":`IconTile--size-small__brJck`,"IconTile--size-base":`IconTile--size-base__gPIDE`,"IconTile--size-medium":`IconTile--size-medium__gAwOs`,"IconTile--size-large":`IconTile--size-large__M35fc`,"IconTile--tone-neutral":`IconTile--tone-neutral__IVJ2Y`,"IconTile--tone-info":`IconTile--tone-info__o2x-M`,"IconTile--tone-ai":`IconTile--tone-ai__dJp9n`,"IconTile--tone-positive":`IconTile--tone-positive__yJsa9`,"IconTile--tone-warning":`IconTile--tone-warning__q8yaj`,"IconTile--tone-critical":`IconTile--tone-critical__iAjl0`}}));function et(e){switch(e){case`small`:return`16`;case`medium`:return`32`;case`large`:return`48`}return`24`}var tt,J,Y,nt=t((()=>{i(),tt=e(n(),1),$e(),l(),X(),J=s(),Y=(0,tt.forwardRef)(function({size:e=`base`,tone:t=`neutral`,dataset:n,...i},o){return(0,J.jsx)(`span`,{className:a(Qe,c.IconTile,[`size-${e}`,`tone-${t}`]).join(` `),...r(n,{preplyDsComponent:c.IconTile}),children:(0,J.jsx)(u,{...i,accent:`primary`,size:et(e),ref:o})})});try{Y.displayName=`IconTile`,Y.__docgenInfo={description:``,displayName:`IconTile`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:`label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},svg:{defaultValue:null,description:``,name:`svg`,required:!0,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`}]}},size:{defaultValue:{value:`base`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`"base"`}]}},tone:{defaultValue:{value:`neutral`},description:``,name:`tone`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"neutral"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`}]}}}}}catch{}})),X=t((()=>{le(),w(),ie(),be(),xe(),Se(),Ce(),Te(),Ae(),je(),re(),ee(),nt(),ve(),Me(),Ne(),oe(),Pe(),Fe(),Ie(),Le(),Re(),te(),ze(),Be(),Ve()}));function rt(e){return(0,Z.isValidElement)(e)?e.type===ae||e.type===ye:!1}var Z,it,at,Q,$=t((()=>{Z=e(n(),1),X(),v(),l(),it=s(),at={variant:`secondary`,size:`small`,wrap:!0,fullWidth:{_:!0,"medium-l":!1}},Q=(0,Z.forwardRef)(function({className:e,children:t,...n},r){let i=[_.action,e].filter(Boolean).join(` `),a=Z.Children.map(t,e=>rt(e)?(0,Z.cloneElement)(e,{...at,...e.props,ref:r,...n}):e);return(0,it.jsx)(`div`,{className:i,"data-preply-ds-component":c.AlertBannerAction,children:a})});try{Q.displayName=`AlertBannerAction`,Q.__docgenInfo={description:`The AlertBannerAction is a container that sets defaults when Button or IconButton are passed.`,displayName:`AlertBannerAction`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},as:{defaultValue:null,description:`Custom element to render the button.
|
|
110
110
|
|
|
111
111
|
Allows rendering the button using a different React element or component.
|
|
112
112
|
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
|
|
113
113
|
@example // Render as a react router link component
|
|
114
114
|
import { Link } from 'react-router-dom';
|
|
115
115
|
|
|
116
|
-
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},
|
|
116
|
+
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
|
|
117
117
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
118
118
|
|
|
119
119
|
<Button leadingSvgIcon={TokyoUITag}>Button</Button>
|
|
120
120
|
or
|
|
121
|
-
<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`leadingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
121
|
+
<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`leadingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"inverted"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
|
|
122
122
|
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
|
|
123
123
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
124
124
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{g as o,m as s}from"./iframe-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{g as o,m as s}from"./iframe-dOU5q7Ak.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./Heading-vZk25JM-.js";import{n as f,t as p}from"./Button-BUsGqnKd.js";import{A as m,D as h,E as g,M as _,N as v,O as y,j as b,k as x,t as S}from"./esm-B9XcgzyC.js";var C,w,T,E,D,O,k,A=t((()=>{C=`overlay__vG-Gu`,w=`overlayShow__TBIKv`,T=`content__Nk-Ib`,E=`contentShow__wWPJX`,D=`description__1dRpy`,O=`actions__FsX-e`,k={overlay:C,overlayShow:w,content:T,contentShow:E,description:D,actions:O}})),j,M,N,P,F,I,L,R=t((()=>{j=e(n(),1),S(),s(),A(),u(),i(),l(),f(),M=a(),N=(0,j.forwardRef)(function(e,t){let n=j.Children.only(e.children);return(0,j.isValidElement)(n)?(0,M.jsx)(g,{render:e=>(0,j.cloneElement)(n,{...e,ref:t})}):null}),P=(0,j.forwardRef)(function(e,t){return(0,M.jsx)(_,{ref:t,render:(0,M.jsx)(p,{}),...e})}),F=(0,j.forwardRef)(function(e,t){return(0,M.jsx)(_,{ref:t,render:(0,M.jsx)(p,{}),...e})}),I=({open:e,title:t,description:n,dataset:i,children:a})=>{let s=o(),l=r(i,{preplyDsComponent:c.AlertDialog}),u,f=[];return j.Children.forEach(a,e=>{(0,j.isValidElement)(e)&&(e.type===N?u=e:f.push(e))}),(0,M.jsxs)(y,{open:e,children:[u,(0,M.jsxs)(x,{container:s,children:[(0,M.jsx)(v,{className:k.overlay}),(0,M.jsxs)(m,{...l,className:k.content,children:[(0,M.jsx)(h,{render:(0,M.jsx)(d,{tag:`h3`,variant:`medium`,children:t})}),(0,M.jsx)(b,{className:k.description,children:n}),(0,M.jsx)(`div`,{className:k.actions,children:f})]})]})]})},L=Object.assign(I,{Trigger:N,Action:P,Cancel:F});try{L.displayName=`AlertDialog`,L.__docgenInfo={description:`A modal alertdialog that interrupts the user with important content and expects a response.
|
|
2
2
|
|
|
3
3
|
Unlike a \`Dialog\`, it cannot be dismissed by clicking outside or pressing escape.`,displayName:`AlertDialog`,props:{title:{defaultValue:null,description:`The alert's title, describing what the user needs to confirm`,name:`title`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},description:{defaultValue:null,description:`Details about the action and its consequences`,name:`description`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},children:{defaultValue:null,description:"The AlertDialog actions.\n@see `AlertDialog.Actions` for a common actions convenience wrapper.",name:`children`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},open:{defaultValue:null,description:`Controls the visibility of the alert.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-BUsGqnKd.js";import{n as o,t as s}from"./AlertDialog-B5Se41e9.js";var c,l,u,d,f,p,m,h,g,_,v,y,b;t((()=>{c=e(n(),1),o(),i(),l=r(),{expect:u,userEvent:d,waitFor:f}=__STORYBOOK_MODULE_TEST__,{action:p}=__STORYBOOK_MODULE_ACTIONS__,m={title:`Components/AlertDialog`,component:s,parameters:{preventIframeFromScrollingParent:!0,docs:{description:{component:`A modal alert dialog for confirming destructive or important actions.`},story:{inline:!1,height:300}}},play:async({canvas:e,step:t})=>{await t(`Open alert`,async()=>(await d.click(e.getByTestId(`alert-trigger`)),f(()=>{u(e.getByTestId(`alert-dialog`)).toBeVisible()})))}},h={parameters:{docs:{description:{story:"Uncontrolled alert using the `Trigger`, `Cancel`, and `Action` subcomponents."}}},args:{title:`Confirm`,description:`This action cannot be undone.`,dataset:{testid:`alert-dialog`}},render:function(e){return(0,l.jsxs)(s,{...e,children:[(0,l.jsx)(s.Trigger,{children:(0,l.jsx)(a,{dataset:{testid:`alert-trigger`},children:`Action`})}),(0,l.jsx)(s.Cancel,{variant:`tertiary`,onClick:p(`cancel`),children:`Cancel`}),(0,l.jsx)(s.Action,{onClick:p(`confirm`),children:`Confirm`})]})}},g={parameters:{docs:{description:{story:`Uncontrolled alert using the \`Trigger\`, and two \`Action\` subcomponents.
|
|
2
2
|
|
|
3
3
|
The two actions are styled differently to suggest a preferred action to the one the user has requested.
|
|
4
4
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./Icon-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./Icon-0niTGk4t.js";var f,p,m,h=t((()=>{f=`badge__ioy0w`,p=`label__lXPEF`,m={badge:f,label:p}})),g,_,v,y,b=t((()=>{s(),i(),g=e(n(),1),c(),u(),h(),_=a(),v=e=>{switch(e){case`xs`:return`small`;case`s`:return`medium`;case`m`:return`large`;default:return e}},y=(0,g.forwardRef)(function({type:e=`neutral`,size:t=`medium`,leadingSvgIcon:n,dataset:i,children:a,accent:s,inverted:c,hideLabel:u,...f},p){let h=v(t),g={...i,size:h};return s===void 0&&c===void 0?g.type=e:(g.accent=s||`unset`,g.inverted=!!c),(0,_.jsxs)(`span`,{...l(f),ref:p,className:m.badge,...r(g,{preplyDsComponent:o.Badge}),children:[!!n&&(0,_.jsx)(d,{accent:`primary`,size:t===`large`?`24`:`16`,svg:n}),(0,_.jsx)(`span`,{className:m.label,"data-hidden":u,children:a})]})});try{y.displayName=`Badge`,y.__docgenInfo={description:``,displayName:`Badge`,props:{size:{defaultValue:{value:`medium`},description:`The size of the badge.`,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`"xs"`},{value:`"s"`},{value:`"m"`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
|
|
2
2
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
3
3
|
|
|
4
4
|
<Badge leadingSvgIcon={TokyoUITag}>Badge</Badge>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Badge-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Badge-CW0c1rzN.js";import{n as o,t as s}from"./LayoutFlex-Ca74XcC1.js";import{n as c,t as l}from"./TokyoUITag-C8mbO1a7.js";var u,d,f,p,m,h,g,_;t((()=>{c(),e(n(),1),o(),i(),u=r(),d={title:`components/Badge`,component:a,parameters:{layout:`padded`,docs:{source:{type:`dynamic`}}}},f=()=>(0,u.jsxs)(s,{gap:`16`,children:[(0,u.jsx)(a,{type:`neutral`,children:`Neutral`}),(0,u.jsx)(a,{type:`positive`,children:`Positive`}),(0,u.jsx)(a,{type:`info`,children:`Info`}),(0,u.jsx)(a,{type:`warning`,children:`Warning`}),(0,u.jsx)(a,{type:`critical`,children:`Critical`}),(0,u.jsx)(a,{type:`ai`,children:`AI`}),(0,u.jsx)(a,{type:`neutral`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Neutral`}),(0,u.jsx)(a,{type:`positive`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Positive`}),(0,u.jsx)(a,{type:`info`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Info`}),(0,u.jsx)(a,{type:`warning`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Warning`}),(0,u.jsx)(a,{type:`critical`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Critical`}),(0,u.jsx)(a,{type:`ai`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`AI`})]}),l.displayName=`TokyoUITag`,p=()=>(0,u.jsxs)(s,{gap:`16`,alignItems:`center`,children:[(0,u.jsx)(a,{size:`small`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Small`}),(0,u.jsx)(a,{size:`medium`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Medium`}),(0,u.jsx)(a,{size:`large`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Large`})]}),m=()=>(0,u.jsx)(s,{gap:`16`,direction:`column`,children:(0,u.jsx)(a,{size:`small`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`Badge`})}),m.tags=[`!autodocs`],h=()=>(0,u.jsx)(`div`,{style:{maxWidth:150,margin:`0 auto`},children:(0,u.jsx)(a,{size:`medium`,leadingSvgIcon:(0,u.jsx)(l,{}),children:`I'm way too long to be a badge label`})}),g={parameters:{chromatic:{disableSnapshot:!0}},args:{type:`neutral`,size:`medium`,children:`Badge`,dataset:{qaid:`badge`}},argTypes:{dataset:{control:`object`},leadingSvgIcon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":l},control:`select`},assistiveText:{table:{disable:!0}},accent:{table:{disable:!0}},inverted:{table:{disable:!0}}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => <LayoutFlex gap="16">
|
|
2
2
|
<Badge type="neutral">Neutral</Badge>
|
|
3
3
|
<Badge type="positive">Positive</Badge>
|
|
4
4
|
<Badge type="info">Info</Badge>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,w as a,x as o,y as s}from"./dist-DtfJeYQK.js";import{t as c}from"./jsx-runtime-C2wGStra.js";import{n as l,t as u}from"./dist-Cc1j9Pjk.js";import{n as d,t as f}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{c as p,s as m}from"./layout-relative.module-C0ke0xP4.js";var h,g,_=t((()=>{h=`Box__T6Fyt`,g={Box:h,"Box--box-radius-0":`Box--box-radius-0__FWPBJ`,"Box--box-radius-2":`Box--box-radius-2__IXJHQ`,"Box--box-radius-4":`Box--box-radius-4__aoSlX`,"Box--box-radius-8":`Box--box-radius-8__-BuzF`,"Box--box-radius-16":`Box--box-radius-16__n3666`,"Box--box-radius-300":`Box--box-radius-300__MyFTq`,"Box--narrow-l--box-radius-0":`Box--narrow-l--box-radius-0__rbA8v`,"Box--narrow-l--box-radius-2":`Box--narrow-l--box-radius-2__Cn0nB`,"Box--narrow-l--box-radius-4":`Box--narrow-l--box-radius-4__dXX4d`,"Box--narrow-l--box-radius-8":`Box--narrow-l--box-radius-8__c2qTs`,"Box--narrow-l--box-radius-16":`Box--narrow-l--box-radius-16__7yiZ2`,"Box--narrow-l--box-radius-300":`Box--narrow-l--box-radius-300__Ic2BC`,"Box--medium-s--box-radius-0":`Box--medium-s--box-radius-0__6dX4D`,"Box--medium-s--box-radius-2":`Box--medium-s--box-radius-2__h-yhf`,"Box--medium-s--box-radius-4":`Box--medium-s--box-radius-4__YmbvG`,"Box--medium-s--box-radius-8":`Box--medium-s--box-radius-8__NOIeK`,"Box--medium-s--box-radius-16":`Box--medium-s--box-radius-16__Q-4Io`,"Box--medium-s--box-radius-300":`Box--medium-s--box-radius-300__fynf3`,"Box--medium-l--box-radius-0":`Box--medium-l--box-radius-0__-HCNC`,"Box--medium-l--box-radius-2":`Box--medium-l--box-radius-2__cWx-n`,"Box--medium-l--box-radius-4":`Box--medium-l--box-radius-4__ibcr4`,"Box--medium-l--box-radius-8":`Box--medium-l--box-radius-8__zm-dC`,"Box--medium-l--box-radius-16":`Box--medium-l--box-radius-16__o3E1Q`,"Box--medium-l--box-radius-300":`Box--medium-l--box-radius-300__Hsi3C`,"Box--wide-s--box-radius-0":`Box--wide-s--box-radius-0__H9zOa`,"Box--wide-s--box-radius-2":`Box--wide-s--box-radius-2__FnsdM`,"Box--wide-s--box-radius-4":`Box--wide-s--box-radius-4__G4jL0`,"Box--wide-s--box-radius-8":`Box--wide-s--box-radius-8__7Mz6S`,"Box--wide-s--box-radius-16":`Box--wide-s--box-radius-16__or-lk`,"Box--wide-s--box-radius-300":`Box--wide-s--box-radius-300__rPeg0`,"Box--wide-l--box-radius-0":`Box--wide-l--box-radius-0__HQ2Tn`,"Box--wide-l--box-radius-2":`Box--wide-l--box-radius-2__GYO54`,"Box--wide-l--box-radius-4":`Box--wide-l--box-radius-4__267az`,"Box--wide-l--box-radius-8":`Box--wide-l--box-radius-8__1hPOR`,"Box--wide-l--box-radius-16":`Box--wide-l--box-radius-16__gp8Ov`,"Box--wide-l--box-radius-300":`Box--wide-l--box-radius-300__NiuZR`,"Box--background-primary":`Box--background-primary__00zVu`,"Box--background-secondary":`Box--background-secondary__hY7w0`,"Box--background-tertiary":`Box--background-tertiary__cIPge`,"Box--background-overlay":`Box--background-overlay__vbs8V`,"Box--background-disabled":`Box--background-disabled__81WYT`,"Box--background-brand":`Box--background-brand__2W0VB`,"Box--background-brandB2b":`Box--background-brandB2b__KQrLm`,"Box--background-accentLight":`Box--background-accentLight__x6RrQ`,"Box--background-accentDark":`Box--background-accentDark__agpDd`,"Box--background-positiveLight":`Box--background-positiveLight__67dRq`,"Box--background-positiveDark":`Box--background-positiveDark__lYghV`,"Box--background-infoLight":`Box--background-infoLight__u-TX4`,"Box--background-infoDark":`Box--background-infoDark__ud4qs`,"Box--background-warningLight":`Box--background-warningLight__JtSuS`,"Box--background-warningDark":`Box--background-warningDark__SIgOQ`,"Box--background-criticalLight":`Box--background-criticalLight__uPTDs`,"Box--background-criticalDark":`Box--background-criticalDark__12Zft`,"Box--background-statusOnline":`Box--background-statusOnline__5PZcQ`,"Box--background-statusOffline":`Box--background-statusOffline__Vh0CO`,"Box--background-primaryInverted":`Box--background-primaryInverted__TePy2`,"Box--background-secondaryInverted":`Box--background-secondaryInverted__tMytW`,"Box--background-tertiaryInverted":`Box--background-tertiaryInverted__K2wU5`}})),v,y,b,x=t((()=>{a(),i(),v=e(n(),1),d(),p(),_(),u(),y=c(),b=(0,v.forwardRef)(function({children:e,background:t=`primary`,radius:n=`16`,padding:i=`24`,tag:a,dataset:c,...u},d){let p=s(g,l.Box,[o(`box-radius`,n),o(`background`,t)]),h=m(i),_=a??`div`,v=[...p,...h];return(0,y.jsx)(_,{...f(u),ref:d,className:v.join(` `),...r(c,{preplyDsComponent:l.Box}),children:e})});try{b.displayName=`Box`,b.__docgenInfo={description:`A styleable container.
|
|
2
2
|
|
|
3
|
-
Use this with \`Layout*\` components to create complex content containers.`,displayName:`Box`,props:{background:{defaultValue:{value:`primary`},description:``,name:`background`,required:!1,type:{name:`enum`,value:[{value:`"
|
|
3
|
+
Use this with \`Layout*\` components to create complex content containers.`,displayName:`Box`,props:{background:{defaultValue:{value:`primary`},description:``,name:`background`,required:!1,type:{name:`enum`,value:[{value:`"tertiary"`},{value:`"disabled"`},{value:`"primary"`},{value:`"secondary"`},{value:`"accentDark"`},{value:`"overlay"`},{value:`"brand"`},{value:`"brandB2b"`},{value:`"accentLight"`},{value:`"positiveLight"`},{value:`"positiveDark"`},{value:`"infoLight"`},{value:`"infoDark"`},{value:`"warningLight"`},{value:`"warningDark"`},{value:`"criticalLight"`},{value:`"criticalDark"`},{value:`"statusOnline"`},{value:`"statusOffline"`},{value:`"primaryInverted"`},{value:`"secondaryInverted"`},{value:`"tertiaryInverted"`}]}},radius:{defaultValue:{value:`16`},description:``,name:`radius`,required:!1,type:{name:`enum`,value:[{value:`"0"`},{value:`"2"`},{value:`"4"`},{value:`"8"`},{value:`"16"`},{value:`"300"`},{value:`ResponsiveProp<BoxRadius>`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"td"`},{value:`"li"`},{value:`"th"`},{value:`"tr"`},{value:`"article"`},{value:`"figure"`},{value:`"main"`},{value:`"table"`},{value:`"div"`},{value:`"header"`},{value:`"footer"`},{value:`"section"`},{value:`"ul"`},{value:`"ol"`},{value:`"p"`},{value:`"span"`},{value:`"fieldset"`},{value:`"thead"`},{value:`"tfoot"`},{value:`"tbody"`},{value:`"caption"`},{value:`"figcaption"`}]}},padding:{defaultValue:{value:`24`},description:``,name:`padding`,required:!1,type:{name:`enum`,value:[{value:`"24"`},{value:`"32"`},{value:`"48"`},{value:`"64"`},{value:`"96"`},{value:`"160"`},{value:`"0"`},{value:`"1"`},{value:`"2"`},{value:`"4"`},{value:`"6"`},{value:`"8"`},{value:`"12"`},{value:`"16"`},{value:`"20"`},{value:`[BoxPadding, BoxPadding]`},{value:`[BoxPadding, BoxPadding, BoxPadding]`},{value:`[BoxPadding, BoxPadding, BoxPadding, BoxPadding]`},{value:`ResponsiveProp<ShortHand<BoxPadding>>`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{x as n,b as t};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-at08VF1d.js";import{n as o,t as s}from"./Heading-vZk25JM-.js";import{n as c,t as l}from"./Box-DDzEO3wG.js";import{n as u,t as d}from"./LayoutFlex-Ca74XcC1.js";import{n as f,r as p,t as m}from"./storybook-utils-BfrlMSeG.js";var h,g,_,v,y;t((()=>{e(n(),1),o(),u(),i(),c(),m(),h=r(),g={title:`components/Box`,component:l,argTypes:{radius:{description:p},padding:{description:f}}},_=()=>(0,h.jsx)(l,{background:`positiveLight`,children:(0,h.jsxs)(d,{gap:`16`,direction:`column`,children:[(0,h.jsx)(s,{tag:`h3`,variant:`medium`,children:`Heading`}),(0,h.jsx)(a,{accent:`positive`,children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et vitae eros`})]})}),_.storyName=`Box`,v={parameters:{chromatic:{disableSnapshot:!0}},args:{background:void 0,radius:void 0,padding:void 0,children:(0,h.jsxs)(d,{gap:`16`,direction:`column`,children:[(0,h.jsx)(s,{variant:`large`,tag:`h3`,children:`Heading`}),(0,h.jsx)(a,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed metus nisi, ornare sit amet elit ut, porttitor commodo ipsum. Aliquam vel est quis erat sagittis posuere et vitae eros`})]}),dataset:{qaid:`box`}},argTypes:{children:{control:!1},dataset:{control:`object`}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`() => <Box background="positiveLight">
|
|
2
2
|
<LayoutFlex gap="16" direction="column">
|
|
3
3
|
<Heading tag="h3" variant="medium">
|
|
4
4
|
Heading
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{i as c,r as l}from"./IconButton-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{i as c,r as l}from"./IconButton-69CfWgKz.js";var u,d,f=t((()=>{e(n(),1),i(),s(),c(),u=a(),d=({count:e,showEmpty:t=!1,limit:n=99,size:i=`large`,variant:a=`dark`,children:s,dataset:c})=>{if(e===void 0&&!t)return s??(0,u.jsx)(u.Fragment,{});let d=(0,u.jsx)(`span`,{className:[l.bubbleCounter,l[`size-${i}`],l[`variant-${a}`]].join(` `),...r(c,{preplyDsComponent:o.BubbleCounter}),children:typeof e==`number`&&(e>n?`${n}+`:e)});return s?(0,u.jsxs)(`div`,{className:l.childTargetOverlay,children:[d,s]}):d};try{d.displayName=`BubbleCounter`,d.__docgenInfo={description:``,displayName:`BubbleCounter`,props:{count:{defaultValue:null,description:"The counter's current value;\n\n- If `undefined`, the counter is not rendered.\n- If above `limit`, the `limit` value is rendered instead, with a `+`\n suffix.",name:`count`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},showEmpty:{defaultValue:{value:`false`},description:"If `true`, the counter will render even if `count` is `undefined`.",name:`showEmpty`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},limit:{defaultValue:{value:`99`},description:``,name:`limit`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},size:{defaultValue:{value:`large`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`}]}},variant:{defaultValue:{value:`dark`},description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"light"`},{value:`"dark"`}]}},children:{defaultValue:null,description:`When provided, the \`BubbleCounter\` will position itself as an indicator
|
|
2
2
|
overlay above the target child element.
|
|
3
3
|
|
|
4
4
|
This is intended to work on just one child, but will not throw errors if
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-BUsGqnKd.js";import{n as o,t as s}from"./Avatar-D6oXWjq1.js";import{n as c,t as l}from"./IconButton-69CfWgKz.js";import{n as u,t as d}from"./BubbleCounter-D0mBKYuV.js";import{n as f,t as p}from"./LayoutFlex-Ca74XcC1.js";import{n as m,t as h}from"./TokyoUIMessages-BO3EETWj.js";var g,_,v,y,b,x,S,C,w,T,E,D,O,k,A;t((()=>{e(n(),1),u(),c(),m(),i(),o(),f(),g=r(),_={title:`components/BubbleCounter`,component:d,decorators:[e=>(0,g.jsx)(`div`,{style:{padding:`24px`},children:(0,g.jsx)(e,{})})]},v=()=>(0,g.jsx)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:(0,g.jsxs)(`tbody`,{children:[(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`dark`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,variant:`dark`})})]}),(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`light`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,variant:`light`})})]})]})}),y=()=>(0,g.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,g.jsx)(`thead`,{children:(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`th`,{children:`Variant`}),(0,g.jsx)(`th`,{children:`small`}),(0,g.jsx)(`th`,{children:`medium`}),(0,g.jsx)(`th`,{children:`large`})]})}),(0,g.jsxs)(`tbody`,{children:[(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`dark`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`small`,variant:`dark`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`medium`,variant:`dark`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`large`,variant:`dark`})})]}),(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`light`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`small`,variant:`light`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`medium`,variant:`light`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:5,size:`large`,variant:`light`})})]})]})]}),b=()=>(0,g.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,g.jsx)(`thead`,{children:(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`th`,{children:`Variant`}),(0,g.jsx)(`th`,{children:`small`}),(0,g.jsx)(`th`,{children:`medium`}),(0,g.jsx)(`th`,{children:`large`})]})}),(0,g.jsxs)(`tbody`,{children:[(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`dark`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`small`,variant:`dark`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`medium`,variant:`dark`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`large`,variant:`dark`})})]}),(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`light`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`small`,variant:`light`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`medium`,variant:`light`})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{count:500,size:`large`,variant:`light`})})]})]})]}),x=()=>(0,g.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,g.jsx)(`thead`,{children:(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`th`,{children:`Variant`}),(0,g.jsx)(`th`,{children:`small`}),(0,g.jsx)(`th`,{children:`medium`}),(0,g.jsx)(`th`,{children:`medium`})]})}),(0,g.jsxs)(`tbody`,{children:[(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`dark`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`small`,variant:`dark`,showEmpty:!0})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`medium`,variant:`dark`,showEmpty:!0})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`large`,variant:`dark`,showEmpty:!0})})]}),(0,g.jsxs)(`tr`,{children:[(0,g.jsx)(`td`,{children:`light`}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`small`,variant:`light`,showEmpty:!0})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`medium`,variant:`light`,showEmpty:!0})}),(0,g.jsx)(`td`,{children:(0,g.jsx)(d,{size:`large`,variant:`light`,showEmpty:!0})})]})]})]}),S=()=>(0,g.jsxs)(p,{gap:`12`,children:[(0,g.jsxs)(a,{variant:`primary`,size:`medium`,children:[`Messages `,(0,g.jsx)(d,{variant:`dark`,count:5,size:`medium`})]}),(0,g.jsxs)(a,{variant:`tertiary`,size:`medium`,children:[`Messages `,(0,g.jsx)(d,{variant:`light`,count:5,size:`medium`})]})]}),C=()=>(0,g.jsxs)(p,{gap:`12`,children:[(0,g.jsx)(d,{count:5,size:`small`,children:(0,g.jsx)(s,{size:`48`})}),(0,g.jsx)(d,{count:5,size:`medium`,children:(0,g.jsx)(s,{size:`64`})}),(0,g.jsx)(d,{count:5,size:`large`,children:(0,g.jsx)(s,{size:`96`})})]}),w=()=>(0,g.jsxs)(p,{gap:`12`,children:[(0,g.jsx)(d,{count:5,size:`small`,children:(0,g.jsx)(l,{svg:h,assistiveText:`Messages`,size:`small`,variant:`tertiary`})}),(0,g.jsx)(d,{count:5,size:`medium`,children:(0,g.jsx)(l,{svg:h,assistiveText:`Messages`,size:`medium`,variant:`tertiary`})}),(0,g.jsx)(d,{count:5,size:`large`,children:(0,g.jsx)(l,{svg:h,assistiveText:`Messages`,size:`large`,variant:`tertiary`})})]}),T=()=>(0,g.jsx)(`div`,{style:{"--ds-bubblecounter-target-offset":`20%`,"--ds-bubblecounter-outline-color":`red`},children:(0,g.jsx)(d,{count:5,size:`medium`,children:(0,g.jsx)(`div`,{style:{backgroundColor:`lightgray`,width:`30px`,height:`30px`,borderRadius:`50%`,padding:`8px`}})})}),T.parameters={docs:{canvas:{sourceState:`shown`}}},E=()=>(0,g.jsx)(l,{svg:h,assistiveText:`Messages`,variant:`tertiary`,size:`large`}),D=()=>(0,g.jsx)(d,{count:void 0,children:(0,g.jsx)(E,{})}),D.parameters={docs:{canvas:{sourceState:`shown`}}},O=()=>(0,g.jsx)(d,{showEmpty:!0,children:(0,g.jsx)(E,{})}),O.parameters={docs:{canvas:{sourceState:`shown`}}},k={tags:[`!autodocs`],parameters:{chromatic:{disableSnapshot:!0}},args:{count:5,size:`large`,variant:`dark`},argTypes:{dataset:{control:`object`},count:{control:`number`},limit:{control:`number`},size:{control:`select`,options:[`small`,`medium`,`large`]},variant:{control:`select`,options:[`dark`,`light`]},children:{control:`text`,description:`Add any text here to see how the counter positions over children`}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`() => <table style={{
|
|
2
2
|
borderCollapse: 'separate',
|
|
3
3
|
borderSpacing: '16px'
|
|
4
4
|
}}>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{at as r,it as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./render-icon-CUp_n6rD.js";import{n as m,t as h}from"./ButtonBase-CMUecywM.js";var g,_,v,y,b,x=t((()=>{g=`Button__zN6zT`,_=`leadingIcon__wQqJW`,v=`trailingIcon__zChSf`,y=`icon__sU6GA`,b={Button:g,leadingIcon:_,trailingIcon:v,"Button--size-s":`Button--size-s__yKEFo`,icon:y,"Button--size-m":`Button--size-m__-0jeH`,"Button--size-small":`Button--size-small__xrFvg`,"Button--size-medium":`Button--size-medium__Mc1B1`,"Button--size-l":`Button--size-l__7gew2`,"Button--size-large":`Button--size-large__LejpK`,"Button--narrow-l--size-s":`Button--narrow-l--size-s__oKIHq`,"Button--narrow-l--size-m":`Button--narrow-l--size-m__FfkOA`,"Button--narrow-l--size-small":`Button--narrow-l--size-small__y-M26`,"Button--narrow-l--size-medium":`Button--narrow-l--size-medium__so23Y`,"Button--narrow-l--size-l":`Button--narrow-l--size-l__xZOAd`,"Button--narrow-l--size-large":`Button--narrow-l--size-large__8clcn`,"Button--medium-s--size-s":`Button--medium-s--size-s__I-GoC`,"Button--medium-s--size-m":`Button--medium-s--size-m__Fk3sj`,"Button--medium-s--size-small":`Button--medium-s--size-small__N-91h`,"Button--medium-s--size-medium":`Button--medium-s--size-medium__sRSxR`,"Button--medium-s--size-l":`Button--medium-s--size-l__QXDbD`,"Button--medium-s--size-large":`Button--medium-s--size-large__Rtei-`,"Button--medium-l--size-s":`Button--medium-l--size-s__YqR0K`,"Button--medium-l--size-m":`Button--medium-l--size-m__BaJ0d`,"Button--medium-l--size-small":`Button--medium-l--size-small__iP5bS`,"Button--medium-l--size-medium":`Button--medium-l--size-medium__JanvZ`,"Button--medium-l--size-l":`Button--medium-l--size-l__ps0aM`,"Button--medium-l--size-large":`Button--medium-l--size-large__2gVOL`,"Button--wide-s--size-s":`Button--wide-s--size-s__OE3Yz`,"Button--wide-s--size-m":`Button--wide-s--size-m__H2KPf`,"Button--wide-s--size-small":`Button--wide-s--size-small__lDDYF`,"Button--wide-s--size-medium":`Button--wide-s--size-medium__CoePZ`,"Button--wide-s--size-l":`Button--wide-s--size-l__gcSoP`,"Button--wide-s--size-large":`Button--wide-s--size-large__KLj98`,"Button--wide-l--size-s":`Button--wide-l--size-s__HAZa1`,"Button--wide-l--size-m":`Button--wide-l--size-m__xB4x0`,"Button--wide-l--size-small":`Button--wide-l--size-small__WdoWT`,"Button--wide-l--size-medium":`Button--wide-l--size-medium__KgZbS`,"Button--wide-l--size-l":`Button--wide-l--size-l__rw5N1`,"Button--wide-l--size-large":`Button--wide-l--size-large__7TyOT`}})),S,C,w,T=t((()=>{o(),d(),a(),S=e(n(),1),p(),m(),x(),C=l(),w=(0,S.forwardRef)(function({variant:e=r,size:t=i,url:n,a11yLabel:a,leadingSvgIcon:o,trailingSvgIcon:l,children:d,...p},m){let g=!!o||!!l,_=c(b,u.Button,[s(`size`,t)]);return(0,C.jsxs)(h,{...p,ref:m,isIconButton:!1,variant:e,size:t,url:n,a11yLabel:a,preplyDsComponent:u.Button,className:g?_.join(` `):``,children:[!!o&&(0,C.jsx)(`span`,{className:`${b.icon} ${b.leadingIcon}`,children:f(o,{"aria-hidden":`true`,focusable:`false`})}),d,!!l&&(0,C.jsx)(`span`,{className:`${b.icon} ${b.trailingIcon}`,children:f(l,{"aria-hidden":`true`,focusable:`false`})})]})});try{w.displayName=`Button`,w.__docgenInfo={description:``,displayName:`Button`,props:{
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{at as r,it as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./dist-Cc1j9Pjk.js";import{n as f,t as p}from"./render-icon-CUp_n6rD.js";import{n as m,t as h}from"./ButtonBase-CMUecywM.js";var g,_,v,y,b,x=t((()=>{g=`Button__zN6zT`,_=`leadingIcon__wQqJW`,v=`trailingIcon__zChSf`,y=`icon__sU6GA`,b={Button:g,leadingIcon:_,trailingIcon:v,"Button--size-s":`Button--size-s__yKEFo`,icon:y,"Button--size-m":`Button--size-m__-0jeH`,"Button--size-small":`Button--size-small__xrFvg`,"Button--size-medium":`Button--size-medium__Mc1B1`,"Button--size-l":`Button--size-l__7gew2`,"Button--size-large":`Button--size-large__LejpK`,"Button--narrow-l--size-s":`Button--narrow-l--size-s__oKIHq`,"Button--narrow-l--size-m":`Button--narrow-l--size-m__FfkOA`,"Button--narrow-l--size-small":`Button--narrow-l--size-small__y-M26`,"Button--narrow-l--size-medium":`Button--narrow-l--size-medium__so23Y`,"Button--narrow-l--size-l":`Button--narrow-l--size-l__xZOAd`,"Button--narrow-l--size-large":`Button--narrow-l--size-large__8clcn`,"Button--medium-s--size-s":`Button--medium-s--size-s__I-GoC`,"Button--medium-s--size-m":`Button--medium-s--size-m__Fk3sj`,"Button--medium-s--size-small":`Button--medium-s--size-small__N-91h`,"Button--medium-s--size-medium":`Button--medium-s--size-medium__sRSxR`,"Button--medium-s--size-l":`Button--medium-s--size-l__QXDbD`,"Button--medium-s--size-large":`Button--medium-s--size-large__Rtei-`,"Button--medium-l--size-s":`Button--medium-l--size-s__YqR0K`,"Button--medium-l--size-m":`Button--medium-l--size-m__BaJ0d`,"Button--medium-l--size-small":`Button--medium-l--size-small__iP5bS`,"Button--medium-l--size-medium":`Button--medium-l--size-medium__JanvZ`,"Button--medium-l--size-l":`Button--medium-l--size-l__ps0aM`,"Button--medium-l--size-large":`Button--medium-l--size-large__2gVOL`,"Button--wide-s--size-s":`Button--wide-s--size-s__OE3Yz`,"Button--wide-s--size-m":`Button--wide-s--size-m__H2KPf`,"Button--wide-s--size-small":`Button--wide-s--size-small__lDDYF`,"Button--wide-s--size-medium":`Button--wide-s--size-medium__CoePZ`,"Button--wide-s--size-l":`Button--wide-s--size-l__gcSoP`,"Button--wide-s--size-large":`Button--wide-s--size-large__KLj98`,"Button--wide-l--size-s":`Button--wide-l--size-s__HAZa1`,"Button--wide-l--size-m":`Button--wide-l--size-m__xB4x0`,"Button--wide-l--size-small":`Button--wide-l--size-small__WdoWT`,"Button--wide-l--size-medium":`Button--wide-l--size-medium__KgZbS`,"Button--wide-l--size-l":`Button--wide-l--size-l__rw5N1`,"Button--wide-l--size-large":`Button--wide-l--size-large__7TyOT`}})),S,C,w,T=t((()=>{o(),d(),a(),S=e(n(),1),p(),m(),x(),C=l(),w=(0,S.forwardRef)(function({variant:e=r,size:t=i,url:n,a11yLabel:a,leadingSvgIcon:o,trailingSvgIcon:l,children:d,...p},m){let g=!!o||!!l,_=c(b,u.Button,[s(`size`,t)]);return(0,C.jsxs)(h,{...p,ref:m,isIconButton:!1,variant:e,size:t,url:n,a11yLabel:a,preplyDsComponent:u.Button,className:g?_.join(` `):``,children:[!!o&&(0,C.jsx)(`span`,{className:`${b.icon} ${b.leadingIcon}`,children:f(o,{"aria-hidden":`true`,focusable:`false`})}),d,!!l&&(0,C.jsx)(`span`,{className:`${b.icon} ${b.trailingIcon}`,children:f(l,{"aria-hidden":`true`,focusable:`false`})})]})});try{w.displayName=`Button`,w.__docgenInfo={description:``,displayName:`Button`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},size:{defaultValue:{value:`small`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},as:{defaultValue:null,description:`Custom element to render the button.
|
|
2
2
|
|
|
3
3
|
Allows rendering the button using a different React element or component.
|
|
4
4
|
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
|
|
5
5
|
@example // Render as a react router link component
|
|
6
6
|
import { Link } from 'react-router-dom';
|
|
7
7
|
|
|
8
|
-
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},
|
|
8
|
+
<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},variant:{defaultValue:{value:`primary`},description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"inverted"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
|
|
9
9
|
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
|
|
10
10
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
11
11
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Text-at08VF1d.js";import{n as u,t as d}from"./Button-BUsGqnKd.js";import{n as f,t as p}from"./IconButton-69CfWgKz.js";import{r as m,t as h}from"./storybook-utils-BfrlMSeG.js";import{n as g,t as _}from"./TokyoUIFav-B1g1wYYK.js";var v,y,b,x,S,C,w,T,E,D,O,k,A,j;t((()=>{o(),g(),a(),v=e(n(),1),f(),u(),c(),h(),y=s(),b={title:`components/Button`,component:d,subcomponents:{IconButton:p},argTypes:{size:{description:m},fullWidth:{description:m}}},x=()=>(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(d,{children:`Button`}),(0,y.jsx)(d,{leadingSvgIcon:_,children:`Button`}),(0,y.jsx)(d,{trailingSvgIcon:_,children:`Button`}),(0,y.jsx)(p,{svg:_,assistiveText:`Favourite`})]}),x.tags=[`!autodocs`,`!test`],x.parameters={chromatic:{disableSnapshot:!0}},S=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(d,{variant:`primary`,children:`Primary`}),(0,y.jsx)(d,{variant:`secondary`,children:`Secondary`}),(0,y.jsx)(d,{variant:`tertiary`,children:`Tertiary`}),(0,y.jsx)(d,{variant:`ghost`,children:`Ghost`}),(0,y.jsx)(`div`,{style:{backgroundColor:e,borderRadius:`8px`},children:(0,y.jsx)(d,{variant:`inverted`,children:`Inverted`})}),(0,y.jsx)(d,{variant:`critical`,children:`Critical`}),(0,y.jsx)(d,{variant:`onColor`,children:`onColor`})]})},C=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`1rem`},children:[(0,y.jsx)(p,{variant:`primary`,svg:_,assistiveText:`primary`}),(0,y.jsx)(p,{variant:`secondary`,svg:_,assistiveText:`secondary`}),(0,y.jsx)(p,{variant:`tertiary`,svg:_,assistiveText:`tertiary`}),(0,y.jsx)(p,{variant:`ghost`,svg:_,assistiveText:`ghost`}),(0,y.jsx)(`div`,{style:{backgroundColor:e,borderRadius:`8px`},children:(0,y.jsx)(p,{variant:`inverted`,svg:_,assistiveText:`inverted`})}),(0,y.jsx)(p,{variant:`critical`,svg:_,assistiveText:`critical`}),(0,y.jsx)(p,{variant:`onColor`,svg:_,assistiveText:`onColor`})]})},C.storyName=`Variants (IconButton)`,w=()=>{let e=r(i.background.primaryInverted);return(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`8px`},children:[(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{variant:`ai`,children:`AI`}),(0,y.jsx)(p,{variant:`ai`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`,backgroundColor:e},children:[(0,y.jsx)(d,{variant:`classroom`,children:`Classroom`}),(0,y.jsx)(p,{variant:`classroom`,svg:_,assistiveText:`Fav`}),(0,y.jsx)(p,{variant:`classroom`,svg:_,assistiveText:`Fav`,selected:!0})]})]})},T=()=>(0,y.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:`8px`},children:[(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`small`,children:`Small`}),(0,y.jsx)(p,{size:`small`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`medium`,children:`Medium`}),(0,y.jsx)(p,{size:`medium`,svg:_,assistiveText:`Fav`})]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`4px`},children:[(0,y.jsx)(d,{size:`large`,children:`Large`}),(0,y.jsx)(p,{size:`large`,svg:_,assistiveText:`Fav`})]})]}),E=()=>(0,y.jsxs)(y.Fragment,{children:[(0,y.jsx)(d,{wrap:!0,size:`small`,children:`Do the really quite unusually long thing`}),(0,y.jsx)(d,{wrap:!0,size:`medium`,children:`Do the really quite unusually long thing`}),(0,y.jsx)(d,{wrap:!0,size:`large`,children:`Do the really quite unusually long thing`})]}),E.tags=[`!autodocs`],E.decorators=[e=>(0,y.jsx)(`div`,{style:{width:`200px`},children:e()})],D=()=>(0,y.jsx)(d,{size:{_:`small`,"medium-l":`medium`,"wide-s":`large`},leadingSvgIcon:_,children:`Change the viewport size`}),D.parameters={chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-l":{viewport:`medium-l`},"wide-s":{viewport:`wide-s`}}}},O=()=>{let e=r(i.background.primaryInverted);return(0,y.jsx)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[`small`,`medium`,`large`].map(t=>[`primary`,`secondary`,`tertiary`,`ghost`,`inverted`,`critical`,`ai`,`onColor`,`classroom`].map(n=>(0,y.jsxs)(v.Fragment,{children:[(0,y.jsxs)(l,{variant:`default-regular-italic`,children:[n,` - `,t]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,backgroundColor:n===`inverted`||n===`classroom`?e:void 0},children:[(0,y.jsx)(d,{size:t,variant:n,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,leadingSvgIcon:_,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,trailingSvgIcon:_,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,busy:!0,assistiveText:`Fav`,children:`button`}),(0,y.jsx)(d,{size:t,variant:n,disabled:!0,children:`disabled`}),(0,y.jsx)(d,{size:t,variant:n,dataset:{hover:!0},children:`hover`}),(0,y.jsx)(d,{size:t,variant:n,dataset:{active:!0},children:`active`}),(0,y.jsx)(d,{size:t,variant:n,dataset:{focus:!0},children:`focus`})]},`${t}-${n}`)]},`${t}-${n}`)))})},O.parameters={pseudo:{hover:`[data-hover="true"]`,active:`[data-active="true"]`,focusVisible:`[data-focus="true"]`}},O.tags=[`!autodocs`],k=()=>{let e=r(i.background.primaryInverted);return(0,y.jsx)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[`small`,`medium`,`large`].map(t=>[`primary`,`secondary`,`tertiary`,`ghost`,`inverted`,`critical`,`ai`,`onColor`,`classroom`].map(n=>(0,y.jsxs)(y.Fragment,{children:[(0,y.jsxs)(l,{variant:`default-regular-italic`,children:[n,` - `,t]}),(0,y.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,backgroundColor:n===`inverted`||n===`classroom`?e:void 0},children:[(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,busy:!0}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,disabled:!0}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dataset:{hover:!0}}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dataset:{active:!0}}),(0,y.jsx)(p,{svg:_,assistiveText:`fav`,size:t,variant:n,dataset:{focus:!0}})]},`${t}-${n}`)]})))})},k.parameters={pseudo:{hover:`[data-hover="true"]`,active:`[data-active="true"]`,focusVisible:`[data-focus="true"]`}},k.storyName=`Combinations (IconButton)`,k.tags=[`!autodocs`],A={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,y.jsx)(`div`,{style:{backgroundColor:t.variant===`inverted`?`black`:void 0},children:e()})],args:{children:`Button`,dataset:{qaid:`button`}},argTypes:{children:{control:`text`},dataset:{control:`object`},assistiveText:{control:`text`},disabled:{control:`boolean`},fullWidth:{control:`boolean`},wrap:{control:`boolean`},href:{control:`text`},download:{control:`boolean`},opensInNewTab:{control:`boolean`},nofollow:{control:`boolean`},submitsForm:{control:`boolean`},busy:{control:`boolean`},leadingSvgIcon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":_},control:`select`},trailingSvgIcon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":_},control:`select`},url:{table:{disable:!0}},a11yLabel:{table:{disable:!0}}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`() => <div style={{
|
|
2
2
|
display: 'flex',
|
|
3
3
|
gap: '1rem'
|
|
4
4
|
}}>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-at08VF1d.js";import{n as o,t as s}from"./Button-BUsGqnKd.js";import{n as c,t as l}from"./Avatar-D6oXWjq1.js";import{a as u,c as d,d as f,f as p,i as m,l as h,m as g,n as _,o as v,p as y,r as b,s as x,t as S,u as C}from"./CalloutBannerText-BtTvKbyc.js";import{n as w,t as T}from"./LayoutFlex-Ca74XcC1.js";import{n as E,t as D}from"./Link-DLL8OonN.js";var O,k,A=t((()=>{O=`banner__YzvKK`,k={banner:O}})),j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q;t((()=>{j=e(n(),1),w(),E(),o(),c(),i(),p(),C(),d(),g(),_(),A(),M=r(),{expect:N,userEvent:P,within:F}=__STORYBOOK_MODULE_TEST__,I={title:`Components/CalloutBanner`,component:f,subcomponents:{CalloutBannerText:S,CalloutBannerDismissButton:h,CalloutBannerIcon:m,CalloutBannerInfoIcon:u,CalloutBannerWarningIcon:x,CalloutBannerCriticalIcon:b,CalloutBannerPositiveIcon:v},parameters:{layout:`padded`,docs:{source:{type:`dynamic`}}},decorators:[e=>(0,M.jsx)(`div`,{style:{width:`400px`},children:(0,M.jsx)(e,{})})]},L={args:{children:(0,M.jsx)(S,{children:`Callout banner message goes here.`})}},R={args:{variant:`info`,children:(0,M.jsxs)(M.Fragment,{children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Callout banner message with a leading icon.`})]})}},z={render:function(e){let[t,n]=(0,j.useState)(!0);return t?(0,M.jsxs)(f,{...e,dataset:{testid:`banner`},children:[(0,M.jsx)(S,{children:`This banner can be dismissed.`}),(0,M.jsx)(h,{onClick:()=>n(!1)})]}):(0,M.jsxs)(T,{gap:`16`,alignItems:`center`,children:[(0,M.jsx)(`p`,{children:`Banner has been dismissed.`}),(0,M.jsx)(s,{variant:`tertiary`,onClick:()=>n(!0),dataset:{testid:`show-banner`},children:`Show banner`})]})}},B={tags:[`!autodocs`],render:function(e){let[t,n]=(0,j.useState)(!0);return t?(0,M.jsxs)(f,{...e,dataset:{testid:`banner`},children:[(0,M.jsx)(S,{children:`This banner can be dismissed by clicking the close button.`}),(0,M.jsx)(h,{onClick:()=>n(!1)})]}):(0,M.jsxs)(T,{gap:`16`,alignItems:`center`,children:[(0,M.jsx)(`p`,{children:`Banner has been dismissed.`}),(0,M.jsx)(s,{variant:`tertiary`,onClick:()=>n(!0),dataset:{testid:`show-banner`},children:`Show banner`})]})},play:async({canvas:e,step:t})=>{await t(`Dismiss banner`,async()=>{let t=e.getByTestId(`banner`);await P.click(F(t).getByRole(`button`,{name:`Close`})),N(t).not.toBeInTheDocument()})}},V={tags:[`!autodocs`],render:function(e){let[t,n]=(0,j.useState)(!0);return t?(0,M.jsxs)(f,{...e,dataset:{testid:`banner`},children:[(0,M.jsx)(S,{children:`This banner can be dismissed by clicking the close button.`}),(0,M.jsx)(h,{onClick:()=>n(!1)})]}):(0,M.jsxs)(T,{gap:`16`,alignItems:`center`,children:[(0,M.jsx)(`p`,{children:`Banner has been dismissed.`}),(0,M.jsx)(s,{variant:`tertiary`,onClick:()=>n(!0),dataset:{testid:`show-banner`},children:`Show banner`})]})},play:async({canvas:e,step:t})=>{await t(`Dismiss banner`,async()=>{let t=e.getByTestId(`banner`);await P.click(F(t).getByRole(`button`,{name:`Close`})),N(t).not.toBeInTheDocument()}),await t(`Show banner`,async()=>{let t=e.getByTestId(`show-banner`);await P.click(t),N(e.getByTestId(`banner`)).toBeInTheDocument()})}},H={args:{children:(0,M.jsxs)(S,{children:[`Callout banner message goes here.`,` `,(0,M.jsx)(D,{href:`/path`,inline:!0,children:`Inline link`}),`.`]})}},U={render:()=>(0,M.jsxs)(T,{direction:`column`,gap:`16`,children:[(0,M.jsxs)(f,{variant:`neutral`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Neutral callout banner message.`})]}),(0,M.jsxs)(f,{variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Info callout banner message.`})]}),(0,M.jsxs)(f,{variant:`warning`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Warning callout banner message.`})]}),(0,M.jsxs)(f,{variant:`critical`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Critical callout banner message.`})]}),(0,M.jsxs)(f,{variant:`positive`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Positive callout banner message.`})]}),(0,M.jsxs)(f,{variant:`ai`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`AI callout banner message.`})]})]})},W={render:()=>(0,M.jsxs)(T,{direction:`column`,gap:`16`,children:[(0,M.jsxs)(f,{size:`regular`,variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Regular size callout banner message.`})]}),(0,M.jsxs)(f,{size:`small`,variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`Small size callout banner message.`})]})]})},G={render:()=>(0,M.jsxs)(T,{direction:`column`,gap:`16`,children:[(0,M.jsx)(f,{variant:`info`,children:(0,M.jsx)(S,{children:`This is a longer callout banner message that demonstrates how the component handles text wrapping and longer content.`})}),(0,M.jsxs)(f,{variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`This is a longer callout banner message that demonstrates how the component handles text wrapping and longer content.`})]}),(0,M.jsxs)(f,{variant:`info`,children:[(0,M.jsx)(m,{}),(0,M.jsx)(S,{children:`This is a longer callout banner message that demonstrates how the component handles text wrapping and longer content.`}),(0,M.jsx)(h,{})]}),(0,M.jsxs)(f,{variant:`info`,children:[(0,M.jsx)(S,{children:`This is a longer callout banner message that demonstrates how the component handles text wrapping and longer content.`}),(0,M.jsx)(h,{})]})]})},K={tags:[`!autodocs`],render:function(){let[e,t]=(0,j.useState)(!0);return e?(0,M.jsxs)(y,{variant:`neutral`,size:`regular`,className:k.banner,children:[(0,M.jsx)(m,{children:(0,M.jsx)(l,{size:`24`})}),(0,M.jsx)(a,{variant:`default-semibold`,children:`Custom banner built with primitives.`}),(0,M.jsx)(h,{className:k.dismissButton,children:(0,M.jsx)(s,{size:`small`,variant:`tertiary`,onClick:()=>t(!1),children:`Close`})})]}):(0,M.jsxs)(T,{gap:`16`,alignItems:`center`,children:[(0,M.jsx)(`p`,{children:`Banner has been dismissed.`}),(0,M.jsx)(s,{variant:`tertiary`,onClick:()=>t(!0),children:`Show banner`})]})}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
args: {
|
|
3
3
|
children: <CalloutBannerText>Callout banner message goes here.</CalloutBannerText>
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./Icon-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./Icon-0niTGk4t.js";import{n as u,t as d}from"./Text-at08VF1d.js";import{n as ee,t as te}from"./TokyoUIClose-BsMsQk2w.js";import{o as ne,r as f}from"./lib-8ue2PVWI.js";import{n as p,t as m}from"./shared-strings-BFfhcoGp.js";import{n as h,t as g}from"./TokyoUICheck-BxTDosuA.js";import{i as _,n as v,r as y,t as b}from"./TokyoUIErrorWarning-BH93ehx8.js";import{n as x,t as S}from"./IconButton-69CfWgKz.js";import{n as C,t as re}from"./TokyoUIInfo-CL0Zo7ru.js";var w,T,E,D,O=t((()=>{w=`banner__X9HSx`,T=`icon__Hc4CV`,E=`dismissButton__QqYFY`,D={banner:w,icon:T,dismissButton:E}})),k,A,j,M,N=t((()=>{k=e(n(),1),i(),s(),O(),A=a(),j=(0,k.createContext)({variant:`neutral`,size:`regular`}),M=(0,k.forwardRef)(function({variant:e=`neutral`,size:t=`regular`,children:n,dataset:i,className:a=``,...s},c){let l=[D.banner,a].join(` `);return(0,A.jsx)(j.Provider,{value:{variant:e,size:t},children:(0,A.jsx)(`div`,{ref:c,role:`note`,className:l,...r(i,{preplyDsComponent:o.CalloutBanner}),"data-variant":e,"data-size":t,...s,children:n})})});try{M.displayName=`CalloutBannerRoot`,M.__docgenInfo={description:`The root primitive for the callout banner.
|
|
2
2
|
|
|
3
3
|
This component is used to create a custom callout banner; it accepts a
|
|
4
4
|
\`className prop to override the default styles for the callout banner
|
|
@@ -25,4 +25,4 @@ Alternatively, to diverge from the DS, you're able to:
|
|
|
25
25
|
styling and structure.
|
|
26
26
|
- Use the \`CalloutBannerRoot\` primitive to customize the banner
|
|
27
27
|
container (e.g. colour).`,name:`children`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),R,z,B,V,H=t((()=>{R=e(n(),1),f(),ee(),x(),p(),O(),z=a(),B=(0,R.forwardRef)(function({children:e,className:t=``,...n},r){return(0,z.jsx)(`div`,{ref:r,className:[D.dismissButton,t].join(` `),children:e??(0,z.jsx)(V,{...n})})}),V=(0,R.forwardRef)(function({onClick:e,dataset:t},n){let{formatMessage:r}=ne();return(0,z.jsx)(S,{ref:n,onClick:e,svg:te,size:`small`,variant:`ghost`,assistiveText:r(m.close),dataset:t})});try{B.displayName=`CalloutBannerDismissButton`,B.__docgenInfo={description:"A dismiss button for the callout banner.\n\nNote: The root of this component is a `div` element. It renders the default\ndismiss button by default, but you can override it with the `children` prop.\nYou can also use the `className` prop to override the default styles for the\ncontainer.",displayName:`CalloutBannerDismissButton`,props:{children:{defaultValue:null,description:`If present, the component will render the children instead of the
|
|
28
|
-
default dismiss button.`,name:`children`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},className:{defaultValue:{value:``},description:`A class name to apply to the dismiss button **container**.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),U,W,G,K,q,J,Y,X,ie=t((()=>{U=e(n(),1),C(),v(),_(),h(),c(),O(),N(),W=a(),G=()=>(0,W.jsx)(l,{svg:re,size:`24`}),K=()=>(0,W.jsx)(l,{svg:g,size:`24`}),q=()=>(0,W.jsx)(l,{svg:b,size:`24`}),J=()=>(0,W.jsx)(l,{svg:y,size:`24`}),Y={info:G,positive:K,warning:q,critical:J},X=(0,U.forwardRef)(function({svg:e,children:t,className:n=``},r){let{variant:i}=(0,U.useContext)(j),a=[D.icon,n].join(` `),o=null;return t?o=t:e?o=(0,W.jsx)(l,{svg:e,size:`24`}):i&&i in Y&&(o=Y[i]()),o?(0,W.jsx)(`div`,{ref:r,className:a,children:o}):null});try{G.displayName=`CalloutBannerInfoIcon`,G.__docgenInfo={description:`Info icon for the CalloutBanner.`,displayName:`CalloutBannerInfoIcon`,props:{}}}catch{}try{K.displayName=`CalloutBannerPositiveIcon`,K.__docgenInfo={description:`Positive icon for the CalloutBanner.`,displayName:`CalloutBannerPositiveIcon`,props:{}}}catch{}try{q.displayName=`CalloutBannerWarningIcon`,q.__docgenInfo={description:`Warning icon for the CalloutBanner.`,displayName:`CalloutBannerWarningIcon`,props:{}}}catch{}try{J.displayName=`CalloutBannerCriticalIcon`,J.__docgenInfo={description:`Critical icon for the CalloutBanner.`,displayName:`CalloutBannerCriticalIcon`,props:{}}}catch{}try{X.displayName=`CalloutBannerIcon`,X.__docgenInfo={description:"An icon for the callout banner.\n\nThis component will render the appropriate icon based on the parent\n`CalloutBanner` component's `variant` prop — these semantic icons are also\nexported for the following variants:\n- `info` -> `<CalloutBannerInfoIcon />`\n- `positive` -> `<CalloutBannerPositiveIcon />`\n- `warning` -> `<CalloutBannerWarningIcon />`\n- `critical` -> `<CalloutBannerCriticalIcon />`\n\nThe icon can be overridden by passing a custom SVG icon via the `svg` prop.\n\nIf you want to place any leading element inside of the `CalloutBanner`,\nwith the same spacing as the icon, you can pass it as a child element.\n\nNote: The root of this component is a `div` element. You can use the\n`className` prop to override the default styles for the **container**.",displayName:`CalloutBannerIcon`,props:{svg:{defaultValue:null,description:``,name:`svg`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},className:{defaultValue:{value:``},description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),Z,Q,$,ae=t((()=>{Z=e(n(),1),u(),N(),Q=a(),$=(0,Z.forwardRef)(function(e,t){let{size:n}=(0,Z.useContext)(j);return(0,Q.jsx)(d,{ref:t,variant:n===`small`?`small-regular`:`default-regular`,...e})});try{$.displayName=`CalloutBannerText`,$.__docgenInfo={description:"A `Text` component alias for the callout banner that is context-aware,\nadjusting its own `variant` based on the parent `CalloutBanner`'s `size`.",displayName:`CalloutBannerText`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"
|
|
28
|
+
default dismiss button.`,name:`children`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},className:{defaultValue:{value:``},description:`A class name to apply to the dismiss button **container**.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),U,W,G,K,q,J,Y,X,ie=t((()=>{U=e(n(),1),C(),v(),_(),h(),c(),O(),N(),W=a(),G=()=>(0,W.jsx)(l,{svg:re,size:`24`}),K=()=>(0,W.jsx)(l,{svg:g,size:`24`}),q=()=>(0,W.jsx)(l,{svg:b,size:`24`}),J=()=>(0,W.jsx)(l,{svg:y,size:`24`}),Y={info:G,positive:K,warning:q,critical:J},X=(0,U.forwardRef)(function({svg:e,children:t,className:n=``},r){let{variant:i}=(0,U.useContext)(j),a=[D.icon,n].join(` `),o=null;return t?o=t:e?o=(0,W.jsx)(l,{svg:e,size:`24`}):i&&i in Y&&(o=Y[i]()),o?(0,W.jsx)(`div`,{ref:r,className:a,children:o}):null});try{G.displayName=`CalloutBannerInfoIcon`,G.__docgenInfo={description:`Info icon for the CalloutBanner.`,displayName:`CalloutBannerInfoIcon`,props:{}}}catch{}try{K.displayName=`CalloutBannerPositiveIcon`,K.__docgenInfo={description:`Positive icon for the CalloutBanner.`,displayName:`CalloutBannerPositiveIcon`,props:{}}}catch{}try{q.displayName=`CalloutBannerWarningIcon`,q.__docgenInfo={description:`Warning icon for the CalloutBanner.`,displayName:`CalloutBannerWarningIcon`,props:{}}}catch{}try{J.displayName=`CalloutBannerCriticalIcon`,J.__docgenInfo={description:`Critical icon for the CalloutBanner.`,displayName:`CalloutBannerCriticalIcon`,props:{}}}catch{}try{X.displayName=`CalloutBannerIcon`,X.__docgenInfo={description:"An icon for the callout banner.\n\nThis component will render the appropriate icon based on the parent\n`CalloutBanner` component's `variant` prop — these semantic icons are also\nexported for the following variants:\n- `info` -> `<CalloutBannerInfoIcon />`\n- `positive` -> `<CalloutBannerPositiveIcon />`\n- `warning` -> `<CalloutBannerWarningIcon />`\n- `critical` -> `<CalloutBannerCriticalIcon />`\n\nThe icon can be overridden by passing a custom SVG icon via the `svg` prop.\n\nIf you want to place any leading element inside of the `CalloutBanner`,\nwith the same spacing as the icon, you can pass it as a child element.\n\nNote: The root of this component is a `div` element. You can use the\n`className` prop to override the default styles for the **container**.",displayName:`CalloutBannerIcon`,props:{svg:{defaultValue:null,description:``,name:`svg`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},className:{defaultValue:{value:``},description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),Z,Q,$,ae=t((()=>{Z=e(n(),1),u(),N(),Q=a(),$=(0,Z.forwardRef)(function(e,t){let{size:n}=(0,Z.useContext)(j);return(0,Q.jsx)(d,{ref:t,variant:n===`small`?`small-regular`:`default-regular`,...e})});try{$.displayName=`CalloutBannerText`,$.__docgenInfo={description:"A `Text` component alias for the callout banner that is context-aware,\nadjusting its own `variant` based on the parent `CalloutBanner`'s `size`.",displayName:`CalloutBannerText`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"placeholder"`},{value:`"accentDark"`}]}},strong:{defaultValue:null,description:``,name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"div"`},{value:`"p"`},{value:`"span"`}]}},dataset:{defaultValue:null,description:`@deprecated Pass data attributes as regular props instead`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}}));export{G as a,ie as c,I as d,L as f,X as i,B as l,N as m,ae as n,K as o,M as p,J as r,q as s,$ as t,H as u};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-
|
|
1
|
+
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-at08VF1d.js";import{n as o,t as s}from"./Checkbox-BV4Be-fH.js";var c,l,u,d,f,p,m,h,g,_,v,y;t((()=>{c=e(n(),1),o(),i(),l=r(),{action:u}=__STORYBOOK_MODULE_ACTIONS__,{expect:d,userEvent:f}=__STORYBOOK_MODULE_TEST__,p={title:`components/Checkbox`,component:s,args:{onChange:u(`onChange`),onCheckedChange:u(`onCheckedChange`)}},m={render:function(){return(0,l.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,l.jsx)(a,{variant:`default-regular-italic`,children:`normal`}),(0,l.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,l.jsx)(s,{"aria-label":`checkbox`}),(0,l.jsx)(s,{"aria-label":`checkbox`,checked:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,indeterminate:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,hasError:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,hasError:!0,checked:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,hasError:!0,indeterminate:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,disabled:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,disabled:!0,checked:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,disabled:!0,indeterminate:!0})]}),(0,l.jsx)(a,{variant:`default-regular-italic`,children:`focus`}),(0,l.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},"data-focus":!0,children:[(0,l.jsx)(s,{"aria-label":`checkbox`}),(0,l.jsx)(s,{"aria-label":`checkbox`,checked:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,indeterminate:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,hasError:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,checked:!0,hasError:!0}),(0,l.jsx)(s,{"aria-label":`checkbox`,indeterminate:!0,hasError:!0})]})]})}},m.parameters={pseudo:{focusWithin:`[data-focus="true"] > *`}},h={parameters:{chromatic:{disableSnapshot:!0}},render:function(){return(0,l.jsx)(s,{"aria-label":`checkbox`})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`checkbox`);d(n).not.toHaveAttribute(`aria-checked`),await t(`Initial state"`,async()=>{await f.click(n),d(n).toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)}),await t(`Initial state"`,async()=>{await f.click(n),d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)})}},g={parameters:{chromatic:{disableSnapshot:!0}},render:function(){let[e,t]=(0,c.useState)(!1);return(0,l.jsx)(s,{"aria-label":`checkbox`,checked:e,onCheckedChange:t})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`checkbox`);await t(`Initial state"`,async()=>{d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`)})}},_={parameters:{chromatic:{disableSnapshot:!0}},render:function(){let[e,t]=(0,c.useState)(!1),[n,r]=(0,c.useState)(!1);return(0,l.jsx)(s,{"aria-label":`checkbox`,checked:e,indeterminate:n,onCheckedChange:i=>{e===!1&&n===!1&&i===!0?r(!0):e===!1&&n===!0&&i===!0?(r(!1),t(!0)):e===!0&&n===!1&&i===!1&&t(!1)}})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`checkbox`);if(!(n instanceof HTMLInputElement))throw Error(`Expected Consent all cookies to be an HTMLInputElement`);await t(`Initial state"`,async()=>{d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`),d(n.indeterminate,`Indeterminate check`).toBe(!1)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).not.toBeChecked(),d(n).toHaveAttribute(`aria-checked`,`mixed`),d(n.indeterminate,`Indeterminate check`).toBe(!0)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`),d(n.indeterminate,`Indeterminate check`).toBe(!1)}),await t(`Click the checkbox"`,async()=>{await f.click(n),d(n).not.toBeChecked(),d(n).not.toHaveAttribute(`aria-checked`),d(n.indeterminate,`Indeterminate check`).toBe(!1)})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{"aria-label":`checkbox`},argTypes:{id:{control:`text`},name:{control:`text`},dataset:{control:`object`},checked:{control:`boolean`},disabled:{control:`boolean`},required:{control:`boolean`},hasError:{control:`boolean`},"aria-label":{control:`text`},indeterminate:{control:`boolean`},defaultChecked:{control:`boolean`},"aria-labelledby":{control:`text`}}},m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Story() {
|
|
3
3
|
return <div style={{
|
|
4
4
|
display: 'flex',
|