@preply/ds-docs 11.3.0 → 11.4.0
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/.storybook/main.ts +8 -0
- package/dist/assets/{00.LayoutFlex.stories-oDygdYoI.js → 00.LayoutFlex.stories-BPok5Gmm.js} +1 -1
- package/dist/assets/{00.applications-CYsULPew.js → 00.applications-BGZaoKgL.js} +1 -1
- package/dist/assets/{00.favicons.guide-CH6Gi2mg.js → 00.favicons.guide-D5wPncOn.js} +1 -1
- package/dist/assets/{00.token-explorer-C_Go53CA.js → 00.token-explorer-BDLlwhc6.js} +1 -1
- package/dist/assets/{00.using-responsive-props-JIrga6ab.js → 00.using-responsive-props-BRxnFd5i.js} +1 -1
- package/dist/assets/{01.semantic-tokens-3BaDr39t.js → 01.semantic-tokens-CFudZ7pc.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-BXu4Nck4.js → 01.using-shorthand-props-DchZCZhq.js} +1 -1
- package/dist/assets/{10.Combinations.stories-SaJOx9D-.js → 10.Combinations.stories-BN4qNVGI.js} +1 -1
- package/dist/assets/{10.fonts.guide-DkOyZCNQ.js → 10.fonts.guide-BWS-fMyC.js} +1 -1
- package/dist/assets/{10.ssr-D-0bM4ee.js → 10.ssr-DFhHeGSZ.js} +1 -1
- package/dist/assets/{11.fonts.explorer-D6KIcb2q.js → 11.fonts.explorer-BS1XxSRj.js} +1 -1
- package/dist/assets/{11.ssr.app-router-DWtYqFlx.js → 11.ssr.app-router-CWuMPO3g.js} +1 -1
- package/dist/assets/{20.libraries-BlqbfWjy.js → 20.libraries-J4C2b4WP.js} +1 -1
- package/dist/assets/{2025-q4-ds-cleanup-BUrvo7oQ.js → 2025-q4-ds-cleanup-DzhmHakd.js} +1 -1
- package/dist/assets/30.icons.explorer-DkBObzh_.js +72 -0
- package/dist/assets/{30.storybook-CNvYWdc7.js → 30.storybook-1O5EtrKp.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-CAYAdo7r.js → 40.illustrations.explorer-C_NqekHv.js} +1 -1
- package/dist/assets/{60.components-odtQau37.js → 60.components-CxzcTHHY.js} +1 -1
- package/dist/assets/{90.advanced-nCsVunZT.js → 90.advanced-J2ehdLM6.js} +1 -1
- package/dist/assets/{Accordion-grHCnfbZ.js → Accordion-CWMWW-O5.js} +1 -1
- package/dist/assets/{Accordion.stories-CTbvRFnt.js → Accordion.stories-DDqM6MXv.js} +1 -1
- package/dist/assets/{Accordion.tests.stories-B6g6Kr6m.js → Accordion.tests.stories-DN9L-q3H.js} +1 -1
- package/dist/assets/{AlertBanner.primitives.stories-D4-bo1JS.js → AlertBanner.primitives.stories-mKVHs8FF.js} +1 -1
- package/dist/assets/{AlertBanner.stories-BrNGGvfj.js → AlertBanner.stories-BV3lnGPY.js} +1 -1
- package/dist/assets/{AlertBannerAction-DvbUWtiW.js → AlertBannerAction-DU-Yr-4k.js} +9 -9
- package/dist/assets/{AlertDialog-Da2sPT1D.js → AlertDialog-CFUnhRAx.js} +1 -1
- package/dist/assets/{AlertDialog.stories-D7ALUucQ.js → AlertDialog.stories-DovmfFOJ.js} +1 -1
- package/dist/assets/{AvatarWithStatus-D02yNzQm.js → AvatarWithStatus-D83AKEVT.js} +2 -2
- package/dist/assets/{AvatarWithStatus.stories-CxBQAt3x.js → AvatarWithStatus.stories-D-ttnLWy.js} +1 -1
- package/dist/assets/{Badge-Ba7-qf6a.js → Badge-DeL8OM1F.js} +2 -2
- package/dist/assets/{Badge.stories-Dzxsvo2o.js → Badge.stories-BemzPh97.js} +1 -1
- package/dist/assets/{Box--iQMFWAl.js → Box-CcR4H93c.js} +1 -1
- package/dist/assets/{Box.stories-D0JGgXyX.js → Box.stories-B4Kkg_Wz.js} +1 -1
- package/dist/assets/{BubbleCounter-C7jrl0BR.js → BubbleCounter-CfdjWlAV.js} +1 -1
- package/dist/assets/{BubbleCounter.stories-C28ZYRgB.js → BubbleCounter.stories-DRq0-Or2.js} +1 -1
- package/dist/assets/{Button-DagS5hxP.js → Button--WTUF97E.js} +2 -2
- package/dist/assets/{Button.stories-CTvHtk-S.js → Button.stories-B5ddris9.js} +1 -1
- package/dist/assets/{ButtonBase-CMR6iWFG.js → ButtonBase-CMQthdSK.js} +1 -1
- package/dist/assets/{CalloutBanner.stories-BbHi-g9a.js → CalloutBanner.stories-C60JgqC0.js} +1 -1
- package/dist/assets/{CalloutBannerText-DP2O2LqI.js → CalloutBannerText-DDPb7LsF.js} +4 -4
- package/dist/assets/{Checkbox.stories-BWfWlkM3.js → Checkbox.stories-D6wUFMNN.js} +1 -1
- package/dist/assets/{Checkbox.tests.stories-iLD_cClo.js → Checkbox.tests.stories-FLl_ZNDM.js} +1 -1
- package/dist/assets/{Chips.stories-BikTAQab.js → Chips.stories-BfLNlLSh.js} +1 -1
- package/dist/assets/{Color-6BZIO3FS-BqH2EFjf.js → Color-6BZIO3FS-CcuLIbdP.js} +1 -1
- package/dist/assets/{ComposingDialogs.stories-ei_TWBhw.js → ComposingDialogs.stories-Bwtla9z9.js} +1 -1
- package/dist/assets/{ComposingPopovers.stories-DEmACL7_.js → ComposingPopovers.stories-BdgYJQKE.js} +1 -1
- package/dist/assets/{CountryFlag-DXTijnBa.js → CountryFlag-D1d90EPT.js} +1 -1
- package/dist/assets/{CountryFlag.stories-r9szKDdv.js → CountryFlag.stories-B0_35WJ9.js} +1 -1
- package/dist/assets/{CountryFlag.test.stories-DS8v3a4U.js → CountryFlag.test.stories-DGoCByQP.js} +1 -1
- package/dist/assets/{Dialog-a74MpEoC.js → Dialog-BT0Kd0KN.js} +1 -1
- package/dist/assets/{Dialog.primitives.stories-CkKykon1.js → Dialog.primitives.stories-DNe9f6uf.js} +1 -1
- package/dist/assets/{Dialog.stories-CoTCFYpz.js → Dialog.stories-C0BUsh4I.js} +1 -1
- package/dist/assets/{Dialog.test.stories-aF_5M6-z.js → Dialog.test.stories-BapfC0Yd.js} +1 -1
- package/dist/assets/{DialogActions-BsCqS7W7.js → DialogActions-BDIzA8PJ.js} +1 -1
- package/dist/assets/{DialogCloseButton-Df1XDsMW.js → DialogCloseButton-CAY9jDgH.js} +3 -3
- package/dist/assets/{DismissibleChips-QUmF1DlO.js → DismissibleChips-CMpz1ljr.js} +1 -1
- package/dist/assets/{DismissibleChips.stories-BbLkTYXP.js → DismissibleChips.stories-D8vGzcJU.js} +1 -1
- package/dist/assets/{DocsRenderer-LL677BLK-D55zMWRu.js → DocsRenderer-LL677BLK-DZVr0WqC.js} +1 -1
- package/dist/assets/{DropdownMenu-CEFQwkft.js → DropdownMenu-DJWxVTCB.js} +9 -9
- package/dist/assets/{DropdownMenu.stories-Bwd2yU64.js → DropdownMenu.stories-CejSoUQc.js} +1 -1
- package/dist/assets/{FormControl-C_Mh5dfi.js → FormControl-DoNLVcw2.js} +1 -1
- package/dist/assets/{FormControl.stories-Bs2ISm2I.js → FormControl.stories-CM0O-z49.js} +1 -1
- package/dist/assets/{Heading-Xmy4HTvU.js → Heading-B3jb_-J8.js} +1 -1
- package/dist/assets/{Heading.stories-6Dgn_J8U.js → Heading.stories-DjrU1PaC.js} +1 -1
- package/dist/assets/{Icon-C-oDFSRH.js → Icon-Dqr2b6tP.js} +1 -1
- package/dist/assets/{Icon-RSC-Ch-QtBFc.js → Icon-RSC-CIkzpnfO.js} +1 -1
- package/dist/assets/{Icon.stories-DA2UaTGv.js → Icon.stories-1leYoSZM.js} +1 -1
- package/dist/assets/IconButton-CQGXuX8O.js +9 -0
- package/dist/assets/{IconTile.stories-C4MpGbZs.js → IconTile.stories-C3MYzhR1.js} +1 -1
- package/dist/assets/{IntegrationWithReactHookForm.stories-6kdmvmQr.js → IntegrationWithReactHookForm.stories-7-TsLOR4.js} +1 -1
- package/dist/assets/{IntlFormattedCurrency.stories-DFdfoYCv.js → IntlFormattedCurrency.stories-C_afrVTI.js} +1 -1
- package/dist/assets/{IntlFormattedDateTime.stories-CHRJCN68.js → IntlFormattedDateTime.stories-DAllZCk9.js} +1 -1
- package/dist/assets/{LayoutFlex-CpktYRVX.js → LayoutFlex-BlWwmFhv.js} +1 -1
- package/dist/assets/{LayoutFlexItem-Dvv_cK8l.js → LayoutFlexItem-Ck-D8viJ.js} +1 -1
- package/dist/assets/{LayoutGrid-DvHLpq-e.js → LayoutGrid-BCMSACUf.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-DCTuVuVw.js → LayoutGrid.stories-Dg8aAm6_.js} +1 -1
- package/dist/assets/{LayoutGridItem-n0bW9yG3.js → LayoutGridItem-BbJwYcHo.js} +1 -1
- package/dist/assets/{Link-DLL8OonN.js → Link-DbeaGxmu.js} +1 -1
- package/dist/assets/{Link.stories-D_FvQngK.js → Link.stories-HNRLDW5Y.js} +1 -1
- package/dist/assets/{MultiSelectChips-DSeV2AIy.js → MultiSelectChips-Bs8MJsJe.js} +2 -2
- package/dist/assets/{MultiSelectChips.stories-CKax5hXL.js → MultiSelectChips.stories-0xhNcMZn.js} +1 -1
- package/dist/assets/{NativeSelectField.stories-D3-RNzbp.js → NativeSelectField.stories-D27xdDZT.js} +4 -4
- package/dist/assets/{NumberField-CNBfsJCY.js → NumberField-WzHWHpwG.js} +4 -4
- package/dist/assets/{NumberField.stories-CHVQ_b9k.js → NumberField.stories-CKWwzkFc.js} +1 -1
- package/dist/assets/{ObserveIntersection-CR4IhuYz.js → ObserveIntersection-zL3YLMv6.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-D1FkxcMY.js → ObserveIntersection.stories-BXlW-mL4.js} +1 -1
- package/dist/assets/{OnboardingTooltip-BNwId6Jx.js → OnboardingTooltip-BzkMbW-Q.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-npBmAhu4.js → OnboardingTooltip.stories-DpuZirIf.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-oxLHDwgd.js → OnboardingTooltip.tests.stories-DVqN90Ec.js} +1 -1
- package/dist/assets/{OnboardingTour-RWyquFZd.js → OnboardingTour-Ba_vMjzP.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-CsdqirC3.js → OnboardingTour.stories-CU5yOTSQ.js} +1 -1
- package/dist/assets/{OnboardingTour.tests.stories-DkBfD2kH.js → OnboardingTour.tests.stories-CPyK1i_w.js} +1 -1
- package/dist/assets/{PasswordField-B2PnHIH1.js → PasswordField-D3gN_VbU.js} +4 -4
- package/dist/assets/{PasswordField.stories-CcnDrvIB.js → PasswordField.stories-B_DbiPEY.js} +1 -1
- package/dist/assets/{ProgressBar.stories-DtKBuyeU.js → ProgressBar.stories-BVBwLJ_h.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-CCDOfqG3.js → ProgressSteps.stories-DpVfrFPk.js} +1 -1
- package/dist/assets/{PromoDialog-CdaXJHkH.js → PromoDialog-BpgSaMl7.js} +1 -1
- package/dist/assets/{RangeSlider-Eo2dw_WW.js → RangeSlider-CQsn2ggM.js} +1 -1
- package/dist/assets/{RangeSlider.stories-DAd-xGsP.js → RangeSlider.stories-B16rODmY.js} +1 -1
- package/dist/assets/{RatingInput.stories-0bwrwiHs.js → RatingInput.stories-D07FYTPA.js} +1 -1
- package/dist/assets/{SelectField-qBhGOYdK.js → SelectField-CtnC30IK.js} +5 -5
- package/dist/assets/{SelectField.stories-Iz2YZ_Bs.js → SelectField.stories-cV1joVTk.js} +1 -1
- package/dist/assets/{ShowOnIntersection-BMR5nazA.js → ShowOnIntersection-hAmOOTIR.js} +2 -2
- package/dist/assets/{ShowOnIntersection.stories-CSSgxbfv.js → ShowOnIntersection.stories-VS4hG4Et.js} +1 -1
- package/dist/assets/{SingleSelectChips-CFj7aR84.js → SingleSelectChips-lT5C7a2D.js} +2 -2
- package/dist/assets/{SingleSelectChips.stories-CJ3zaafZ.js → SingleSelectChips.stories-Du0LL0gN.js} +1 -1
- package/dist/assets/{Slider-Bxzp79ts.js → Slider-BgB4xT6m.js} +1 -1
- package/dist/assets/{Slider.stories-C872-jZV.js → Slider.stories-B0uFs4_2.js} +1 -1
- package/dist/assets/{Steps-CNOQ424q.js → Steps-Ny6Xdpfg.js} +1 -1
- package/dist/assets/{Steps.stories-GHgF9EAg.js → Steps.stories-y16vX2RP.js} +1 -1
- package/dist/assets/{Switch.stories-Dz3BYhCT.js → Switch.stories-D0M0AXLP.js} +1 -1
- package/dist/assets/{Text-Bj49UVGS.js → Text-Cy08WP3t.js} +1 -1
- package/dist/assets/{Text.stories-DjSvZaCW.js → Text.stories-kbD1oPtH.js} +1 -1
- package/dist/assets/{TextField-B4F8szIu.js → TextField-DtzGGo-n.js} +5 -5
- package/dist/assets/{TextField.stories-ZNn7FBmC.js → TextField.stories-BfnbdAlj.js} +1 -1
- package/dist/assets/{TextHighlighted-DPLkdIhv.js → TextHighlighted-BLFuNeOz.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-CEPLsjw4.js → TextHighlighted.stories--iY-wUQl.js} +1 -1
- package/dist/assets/{TextInline-DVOlWF4R.js → TextInline-kNMy4GiU.js} +1 -1
- package/dist/assets/{TextInline.stories-DVE70fjR.js → TextInline.stories-B4fTBAXp.js} +1 -1
- package/dist/assets/{TextareaField-G733luKs.js → TextareaField-BAawMK2x.js} +4 -4
- package/dist/assets/{TextareaField.stories-Bqzxd-3e.js → TextareaField.stories-uB9XCMh4.js} +1 -1
- package/dist/assets/{Toast-CTlQ5Kx4.js → Toast-DtwiCXf7.js} +1 -1
- package/dist/assets/{Toast.stories-DcPkMFFv.js → Toast.stories-DaMiazCZ.js} +1 -1
- package/dist/assets/{Tooltip-DCzQmBi_.js → Tooltip-BKkZoXDV.js} +1 -1
- package/dist/assets/{Tooltip.stories-duE4AOVl.js → Tooltip.stories-wUZg70QA.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-BsQ0I33Q.js → Tooltip.tests.stories-CJYW12Q0.js} +1 -1
- package/dist/assets/{ai-integration-CUld8nBB.js → ai-integration-CmKZr_5q.js} +1 -1
- package/dist/assets/{breakpoints-CDLTCEqT.js → breakpoints-BL8wVg74.js} +1 -1
- package/dist/assets/{breakpoints-DyVmNUf9.js → breakpoints-BSvP6IHz.js} +1 -1
- package/dist/assets/{breakpoints-D3C_qtqX.js → breakpoints-vEwFHkjC.js} +1 -1
- package/dist/assets/{changelog-CY7pOlLk.js → changelog-wnfuTaGI.js} +11 -1
- package/dist/assets/{constants-Ce2rgJrk.js → constants-BRk8fyp8.js} +1 -5
- package/dist/assets/{createRequiredContext-dSBuii-4.js → createRequiredContext-BQNdOBzE.js} +2 -2
- package/dist/assets/{dist-nghRgjCb.js → dist-dJR9l15z.js} +1 -1
- package/dist/assets/{esm-BYGpffIq.js → esm-QYJ12Nr4.js} +1 -1
- package/dist/assets/{fonts-explorer.stories-DpO5HxZ3.js → fonts-explorer.stories-DLPdV7wh.js} +1 -1
- package/dist/assets/{getTokenVar-DG0TGXYc.js → getTokenVar-lvBbQceM.js} +1 -1
- package/dist/assets/{gradientBorders-C2jt5p-C.js → gradientBorders-DODVBPY0.js} +1 -1
- package/dist/assets/{hover-D6mzisaD.js → hover-Cc8ZlfuU.js} +1 -1
- package/dist/assets/{hover-DfbppVmU.js → hover-DgEYlXBi.js} +1 -1
- package/dist/assets/{hover-BCzGbPFV.js → hover-yxmGi-zx.js} +1 -1
- package/dist/assets/{iframe-kBDSpxRI.js → iframe-BuOXI2w6.js} +4 -4
- package/dist/assets/{intro-DQpyhoTG.js → intro-B-CaE2_E.js} +1 -1
- package/dist/assets/{migrating-from-less-V1oeKlSf.js → migrating-from-less-ClH17s_P.js} +1 -1
- package/dist/assets/{tokens-Bw3658eU.js → tokens-BF6xltNI.js} +1 -1
- package/dist/assets/{tokens-Yf07x_wA.js → tokens-DLKIEc5T.js} +1 -1
- package/dist/assets/{tokens-D1eOr0iV.js → tokens-DOxuMF98.js} +1 -1
- package/dist/assets/{usePortalElement-CzAPYwMj.js → usePortalElement-Cqy1sSsS.js} +1 -1
- package/dist/assets/{welcome-CCU104Dv.js → welcome-CA82uuQ9.js} +1 -1
- package/dist/assets/{zeroheight-I34niHYD.js → zeroheight-BZmC6gtY.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +15479 -15467
- package/dist/project.json +1 -1
- package/package.json +5 -5
- package/pages/30.guides/70.assets/constants/icon-imports.ts +2 -0
- package/dist/assets/30.icons.explorer-BKujlrNJ.js +0 -72
- package/dist/assets/IconButton-Qo4r7KAR.js +0 -9
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-
|
|
1
|
+
import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-BuOXI2w6.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/Storybook`}),`
|
|
2
2
|
`,(0,c.jsx)(t.h1,{id:`installation-storybook`,children:`Installation: Storybook`}),`
|
|
3
3
|
`,(0,c.jsxs)(t.p,{children:[`This guide applies to Storybook setups that document Preply components libraries, and assumes you have read and followed the steps outlined in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-libraries--page`,children:`Installation: Libaries`}),` guide.`]}),`
|
|
4
4
|
`,(0,c.jsx)(t.h2,{id:`packages`,children:`Packages`}),`
|
package/dist/assets/{40.illustrations.explorer-CAYAdo7r.js → 40.illustrations.explorer-C_NqekHv.js}
RENAMED
|
@@ -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,et as a,t as o,w as s}from"./dist-DtfJeYQK.js";import{t as c}from"./jsx-runtime-C2wGStra.js";import{l,o as u}from"./iframe-
|
|
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,et as a,t as o,w as s}from"./dist-DtfJeYQK.js";import{t as c}from"./jsx-runtime-C2wGStra.js";import{l,o as u}from"./iframe-BuOXI2w6.js";import{r as d}from"./react-B8jdHdWa.js";import{t as f}from"./mdx-react-shim-BUTq3l7l.js";import{a as p,t as m}from"./dist-dJR9l15z.js";import{r as h,t as g}from"./styled-components.browser.esm-C-pLV-H4.js";var _,v,y,b,x,S=t((()=>{s(),o(),m(),e(n()),h(),_=c(),v=`https://static.preply.com/ds/illustrations/tokyo-ui/airplain.svg,https://static.preply.com/ds/illustrations/tokyo-ui/arrow.svg,https://static.preply.com/ds/illustrations/tokyo-ui/arrows-multiple.svg,https://static.preply.com/ds/illustrations/tokyo-ui/arrows-upwards.svg,https://static.preply.com/ds/illustrations/tokyo-ui/artist.svg,https://static.preply.com/ds/illustrations/tokyo-ui/awesome.svg,https://static.preply.com/ds/illustrations/tokyo-ui/back-to-school.svg,https://static.preply.com/ds/illustrations/tokyo-ui/bar-graph.svg,https://static.preply.com/ds/illustrations/tokyo-ui/bell.svg,https://static.preply.com/ds/illustrations/tokyo-ui/booking-a-lesson.svg,https://static.preply.com/ds/illustrations/tokyo-ui/books.svg,https://static.preply.com/ds/illustrations/tokyo-ui/books-2.svg,https://static.preply.com/ds/illustrations/tokyo-ui/books-3.svg,https://static.preply.com/ds/illustrations/tokyo-ui/brain.svg,https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-chromium.svg,https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-safari.svg,https://static.preply.com/ds/illustrations/tokyo-ui/bubbles.svg,https://static.preply.com/ds/illustrations/tokyo-ui/calendar.svg,https://static.preply.com/ds/illustrations/tokyo-ui/calendar-2.svg,https://static.preply.com/ds/illustrations/tokyo-ui/checkmark.svg,https://static.preply.com/ds/illustrations/tokyo-ui/clock.svg,https://static.preply.com/ds/illustrations/tokyo-ui/clock-yellow.svg,https://static.preply.com/ds/illustrations/tokyo-ui/clocks.svg,https://static.preply.com/ds/illustrations/tokyo-ui/coins.svg,https://static.preply.com/ds/illustrations/tokyo-ui/committed.svg,https://static.preply.com/ds/illustrations/tokyo-ui/confetti.svg,https://static.preply.com/ds/illustrations/tokyo-ui/cosmopolite.svg,https://static.preply.com/ds/illustrations/tokyo-ui/desk.svg,https://static.preply.com/ds/illustrations/tokyo-ui/desk-supplies.svg,https://static.preply.com/ds/illustrations/tokyo-ui/discount-badge.svg,https://static.preply.com/ds/illustrations/tokyo-ui/disco-ball.svg,https://static.preply.com/ds/illustrations/tokyo-ui/dog.svg,https://static.preply.com/ds/illustrations/tokyo-ui/first-steps.svg,https://static.preply.com/ds/illustrations/tokyo-ui/game-on.svg,https://static.preply.com/ds/illustrations/tokyo-ui/getting-started-down.svg,https://static.preply.com/ds/illustrations/tokyo-ui/getting-started.svg,https://static.preply.com/ds/illustrations/tokyo-ui/globe-spot.svg,https://static.preply.com/ds/illustrations/tokyo-ui/great-homework.svg,https://static.preply.com/ds/illustrations/tokyo-ui/growth.svg,https://static.preply.com/ds/illustrations/tokyo-ui/guitar.svg,https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-1.svg,https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-2.svg,https://static.preply.com/ds/illustrations/tokyo-ui/heart.svg,https://static.preply.com/ds/illustrations/tokyo-ui/it-guru.svg,https://static.preply.com/ds/illustrations/tokyo-ui/lamp-and-books.svg,https://static.preply.com/ds/illustrations/tokyo-ui/language-flash-cards.svg,https://static.preply.com/ds/illustrations/tokyo-ui/laptop.svg,https://static.preply.com/ds/illustrations/tokyo-ui/laptop-2.svg,https://static.preply.com/ds/illustrations/tokyo-ui/magnifying-glass.svg,https://static.preply.com/ds/illustrations/tokyo-ui/making-progress.svg,https://static.preply.com/ds/illustrations/tokyo-ui/map.svg,https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor-2.svg,https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor.svg,https://static.preply.com/ds/illustrations/tokyo-ui/messages.svg,https://static.preply.com/ds/illustrations/tokyo-ui/messaging.svg,https://static.preply.com/ds/illustrations/tokyo-ui/mobile-app.svg,https://static.preply.com/ds/illustrations/tokyo-ui/notes.svg,https://static.preply.com/ds/illustrations/tokyo-ui/open-book.svg,https://static.preply.com/ds/illustrations/tokyo-ui/pause-button.svg,https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen-2.svg,https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen.svg,https://static.preply.com/ds/illustrations/tokyo-ui/pig.svg,https://static.preply.com/ds/illustrations/tokyo-ui/play-button.svg,https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-2.svg,https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-pink.svg,https://static.preply.com/ds/illustrations/tokyo-ui/polyglot.svg,https://static.preply.com/ds/illustrations/tokyo-ui/present.svg,https://static.preply.com/ds/illustrations/tokyo-ui/professional.svg,https://static.preply.com/ds/illustrations/tokyo-ui/progress-steps.svg,https://static.preply.com/ds/illustrations/tokyo-ui/quote.svg,https://static.preply.com/ds/illustrations/tokyo-ui/rising-arrows.svg,https://static.preply.com/ds/illustrations/tokyo-ui/rock-on.svg,https://static.preply.com/ds/illustrations/tokyo-ui/routine-master.svg,https://static.preply.com/ds/illustrations/tokyo-ui/serious-learner.svg,https://static.preply.com/ds/illustrations/tokyo-ui/sheet.svg,https://static.preply.com/ds/illustrations/tokyo-ui/smiley.svg,https://static.preply.com/ds/illustrations/tokyo-ui/speech-bubble.svg,https://static.preply.com/ds/illustrations/tokyo-ui/star_coin.svg,https://static.preply.com/ds/illustrations/tokyo-ui/stop-button.svg,https://static.preply.com/ds/illustrations/tokyo-ui/stopwatch.svg,https://static.preply.com/ds/illustrations/tokyo-ui/system-permissions.svg,https://static.preply.com/ds/illustrations/tokyo-ui/testing-the-water.svg,https://static.preply.com/ds/illustrations/tokyo-ui/three-arrows.svg,https://static.preply.com/ds/illustrations/tokyo-ui/thumbs-up.svg,https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg,https://static.preply.com/ds/illustrations/tokyo-ui/warning.svg,https://static.preply.com/ds/illustrations/tokyo-ui/flashcards.svg,https://static.preply.com/ds/illustrations/tokyo-ui/abc-dice.svg,https://static.preply.com/ds/illustrations/tokyo-ui/rocket.svg`.split(`,`),y=g.div`
|
|
2
2
|
padding: ${r(a[12])};
|
|
3
3
|
-webkit-background-size: 50px 50px;
|
|
4
4
|
-moz-background-size: 50px 50px;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-
|
|
1
|
+
import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-BuOXI2w6.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,h1:`h1`,li:`li`,p:`p`,ul:`ul`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Custom Components/Introduction`}),`
|
|
2
2
|
`,(0,c.jsx)(t.h1,{id:`developing-custom-components-with-ds-primitives`,children:`Developing custom components with DS primitives`}),`
|
|
3
3
|
`,(0,c.jsx)(t.p,{children:`The DS provides lower level primitives for building custom components that you can use
|
|
4
4
|
if existing DS components are not enough to implement complex or unique designs.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-
|
|
1
|
+
import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-BuOXI2w6.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/Advanced`}),`
|
|
2
2
|
`,(0,c.jsx)(t.h1,{id:`installation-advanced`,children:`Installation: Advanced`}),`
|
|
3
3
|
`,(0,c.jsxs)(t.p,{children:[`This page is about rolling out your own alternative to `,(0,c.jsx)(t.code,{children:`<RootProvider/>`}),` (advanced usage).`]}),`
|
|
4
4
|
`,(0,c.jsxs)(t.p,{children:[`If you are looking for how to install, refer to the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-applications--page`,children:`installation guides`}),` instead.`]}),`
|
|
@@ -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"./TokyoUIChevronDown-CS0lTt7n.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.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"./TokyoUIChevronDown-CS0lTt7n.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./Icon-Dqr2b6tP.js";import{n as f,t as p}from"./Text-Cy08WP3t.js";import{n as m,t as h}from"./useMergeRefs-BZP37fIn.js";var g,_,v=t((()=>{g=`accordion__OKb-C`,_={accordion:g}}));function y({ref:e,onOpenChange:t}){let n=(0,b.useRef)(null),r=m(n,e);return(0,b.useEffect)(()=>{if(!n.current)return;let e=n.current,r=()=>{t?.(e.open)};return e&&e.addEventListener(`toggle`,r),()=>{e&&e.removeEventListener(`toggle`,r)}},[t]),{mergedRef:t||e?r:null}}var b,x=t((()=>{b=e(n(),1),h()})),S,C,w,T,E,D,O=t((()=>{S=e(n(),1),i(),o(),l(),u(),f(),v(),x(),C=a(),w=({dataset:e,children:t,"aria-label":n})=>(0,C.jsx)(`div`,{className:_.accordion,"aria-label":n,...r(e),"data-preply-ds-component":c.Accordion,children:t}),T=(0,S.forwardRef)(function({open:e,name:t,dataset:n,children:i,onOpenChange:a},o){let{mergedRef:s}=y({ref:o,onOpenChange:a});return(0,C.jsx)(`details`,{ref:s,name:t,open:e,...r(n),children:i})}),E=(0,S.forwardRef)(function({dataset:e,children:t,onClick:n},i){return(0,C.jsxs)(`summary`,{ref:i,...r(e),onClick:n,children:[(0,C.jsx)(p,{variant:`default-semibold`,children:t}),(0,C.jsx)(d,{svg:s})]})}),D=(0,S.forwardRef)(function({dataset:e,children:t},n){return(0,C.jsx)(p,{tag:`div`,variant:`small-regular`,ref:n,...r(e),children:t})});try{w.displayName=`Accordion`,w.__docgenInfo={description:`An Accordion container.
|
|
2
2
|
|
|
3
3
|
Add \`AccordionItem\` children to render a list of disclosable contents.`,displayName:`Accordion`,props:{dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
|
|
4
4
|
@example <Accordion dataset={{ 'qa-id': 'benefits' }} /> // will add data-qa-id="benefits" to the HTML element.`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{T.displayName=`AccordionItem`,T.__docgenInfo={description:"A single `Accordion` item, the wrapper of AccordionHeader and AccordionContent.",displayName:`AccordionItem`,props:{onOpenChange:{defaultValue:null,description:"Called whenever the users open/close the Accordion item (mapped to the internal HTML Details's\n`toggle` event).",name:`onOpenChange`,required:!1,type:{name:`enum`,value:[{value:`(open: boolean) => void`}]}},name:{defaultValue:null,description:`Allows to create exclusive Accordions. Just pass the same \`name\` to all the AccordionItem
|
|
@@ -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-Cy08WP3t.js";import{a as o,i as s,n as c,r as l,t as u}from"./Accordion-CWMWW-O5.js";import{n as d,t as f}from"./Heading-B3jb_-J8.js";import{n as p,t as m}from"./Button--WTUF97E.js";var h,g,_,v,y,b,x,S,C;t((()=>{e(n(),1),o(),i(),d(),p(),h=r(),g={title:`components/Accordion`,component:u,args:{}},_={render:function(){return(0,h.jsxs)(u,{children:[(0,h.jsxs)(s,{children:[(0,h.jsx)(l,{children:`Is Preply the best platform for learning a language?`}),(0,h.jsx)(c,{children:`Of course it is!`})]}),(0,h.jsxs)(s,{children:[(0,h.jsx)(l,{children:`Why?`}),(0,h.jsx)(c,{children:`If you are wondering, it means you have not tried it out yet!`})]})]})}},v={render:function(){return(0,h.jsxs)(u,{children:[(0,h.jsxs)(s,{open:!0,children:[(0,h.jsx)(l,{children:`Is Preply the best platform for learning a language?`}),(0,h.jsx)(c,{children:`Of course it is!`})]}),(0,h.jsxs)(s,{open:!0,children:[(0,h.jsx)(l,{children:`Why?`}),(0,h.jsx)(c,{children:`If you are wondering, it means you have not tried it out yet!`})]})]})}},y={render:function(){return(0,h.jsxs)(u,{children:[(0,h.jsxs)(s,{children:[(0,h.jsx)(l,{children:`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}),(0,h.jsx)(c,{children:`Lorem ipsum`})]}),(0,h.jsxs)(s,{children:[(0,h.jsx)(l,{children:`Lorem ipsum`}),(0,h.jsx)(c,{children:`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`})]}),(0,h.jsxs)(s,{open:!0,children:[(0,h.jsx)(l,{children:`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}),(0,h.jsx)(c,{children:`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`})]})]})}},b={render:function(){return(0,h.jsx)(u,{children:(0,h.jsxs)(s,{open:!0,children:[(0,h.jsx)(l,{children:`Is Preply the best platform for learning a language?`}),(0,h.jsxs)(c,{children:[(0,h.jsx)(f,{variant:`large`,tag:`div`,children:`Yes!`}),(0,h.jsx)(a,{variant:`large-regular-italic`,children:`What are you waiting for?`}),(0,h.jsx)(m,{children:`Book a lesson now!`})]})]})})}},x={render:function(){return(0,h.jsxs)(u,{children:[(0,h.jsxs)(s,{name:`choose-subscription-duration`,children:[(0,h.jsx)(l,{children:`Two-week subscription`}),(0,h.jsx)(c,{children:`We will charge you every two weeks.`})]}),(0,h.jsxs)(s,{name:`choose-subscription-duration`,children:[(0,h.jsx)(l,{children:`Four-week subscription`}),(0,h.jsx)(c,{children:`We will charge you every four weeks.`})]})]})}},S={parameters:{pseudo:{focusVisible:`[data-focus="true"]`}},render:function(){return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,h.jsx)(a,{variant:`default-regular-italic`,children:`closed`}),(0,h.jsx)(`div`,{style:{display:`flex`,gap:`16px`},children:(0,h.jsx)(u,{children:(0,h.jsxs)(s,{children:[(0,h.jsx)(l,{children:`Header`}),(0,h.jsx)(c,{children:`Content`})]})})})]}),(0,h.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,h.jsx)(a,{variant:`default-regular-italic`,children:`open`}),(0,h.jsx)(`div`,{style:{display:`flex`,gap:`16px`},children:(0,h.jsx)(u,{children:(0,h.jsxs)(s,{open:!0,children:[(0,h.jsx)(l,{children:`Header`}),(0,h.jsx)(c,{children:`Content`})]})})})]}),(0,h.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,h.jsx)(a,{variant:`default-regular-italic`,children:`focus`}),(0,h.jsx)(`div`,{style:{display:`flex`,gap:`16px`},children:(0,h.jsx)(u,{children:(0,h.jsxs)(s,{children:[(0,h.jsx)(l,{dataset:{focus:!0},children:`Header`}),(0,h.jsx)(c,{children:`Content`})]})})})]})]})}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
render: function Story() {
|
|
3
3
|
return <Accordion>
|
|
4
4
|
<AccordionItem>
|
package/dist/assets/{Accordion.tests.stories-B6g6Kr6m.js → Accordion.tests.stories-DN9L-q3H.js}
RENAMED
|
@@ -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{a as i,i as a,n as o,r as s,t as c}from"./Accordion-
|
|
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{a as i,i as a,n as o,r as s,t as c}from"./Accordion-CWMWW-O5.js";import{n as l,t as u}from"./OnboardingTour-Ba_vMjzP.js";import{r as d,t as f}from"./styled-components.browser.esm-BF2I7YPU.js";var p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k;t((()=>{e(n(),1),i(),l(),d(),p=r(),{userEvent:m,expect:h,within:g,waitFor:_,fn:v}=__STORYBOOK_MODULE_TEST__,y={title:`Components/Accordion/Tests`,component:c,parameters:{controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`]},b={render:function(){return(0,p.jsx)(c,{"aria-label":`accordionLabel`,children:(0,p.jsxs)(a,{children:[(0,p.jsx)(s,{children:`Is Preply the best platform for learning a language?`}),(0,p.jsx)(o,{children:`Of course it is!`})]})})},play:async({canvasElement:e})=>{h(g(e).getByLabelText(`accordionLabel`)).toBeVisible()}},x={args:{},render:function(){return(0,p.jsxs)(c,{children:[(0,p.jsxs)(a,{children:[(0,p.jsx)(s,{children:`Is Preply the best platform for learning a language?`}),(0,p.jsx)(o,{children:`Of course it is!`})]}),(0,p.jsxs)(a,{children:[(0,p.jsx)(s,{children:`Why?`}),(0,p.jsx)(o,{children:`If you are wondering, it means you have not tried it out yet!`})]})]})},play:async({canvas:e,step:t})=>{let n=e.getByText(`Is Preply the best platform for learning a language?`),r=e.getByText(`Of course it is!`),i=e.getByText(`Why?`),a=e.getByText(`If you are wondering, it means you have not tried it out yet!`);await t(`Contents are hidden`,async()=>{h(r).not.toBeVisible(),h(a).not.toBeVisible()}),await t(`Content 1 is revelable`,async()=>{await m.click(n),h(r).toBeVisible()}),await t(`Content 2 is revelable`,async()=>{await m.click(i),h(a).toBeVisible()}),await t(`Both contents are visible (non-exclusivity check)`,async()=>{h(r).toBeVisible(),h(a).toBeVisible()}),await t(`Item 1 is hidable`,async()=>{await m.click(n),h(r).not.toBeVisible()}),await t(`Item 2 is hidable`,async()=>{await m.click(i),h(a).not.toBeVisible()})}},S=f.div`
|
|
2
2
|
details[open]::details-content {
|
|
3
3
|
block-size: initial;
|
|
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{t as i}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{t as i}from"./Button--WTUF97E.js";import{n as a,t as o}from"./TokyoUISparkle-5ta_MRge.js";import{_ as s,f as c,g as l,h as u,m as d,n as f,p,r as m,t as h,v as g}from"./AlertBannerAction-DU-Yr-4k.js";var _,v,y=t((()=>{_=`customBanner__WPfsi`,v={customBanner:_}})),b,x,S,C;t((()=>{e(n(),1),a(),f(),u(),s(),p(),y(),m(),b=r(),x={title:`Components/AlertBanner/Primitives`,component:l,subcomponents:{AlertBannerIcon:d,AlertBannerRoot:l,AlertBannerAction:h,AlertBannerText:c},parameters:{layout:`padded`,docs:{source:{type:`dynamic`}}},decorators:[e=>(0,b.jsx)(`div`,{style:{width:`500px`},children:(0,b.jsx)(e,{})})]},S=()=>(0,b.jsx)(g,{children:(0,b.jsxs)(l,{variant:`critical`,className:v.customBanner,children:[(0,b.jsx)(d,{svg:o}),(0,b.jsx)(c,{children:`Custom banner built with primitives.`}),(0,b.jsx)(h,{children:(0,b.jsx)(i,{variant:`onColor`,size:`large`,children:`Custom action`})})]})}),S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`() => {
|
|
2
2
|
const variant: AlertBannerVariant = 'critical';
|
|
3
3
|
return <AlertBannerProvider>
|
|
4
4
|
<AlertBannerRoot variant={variant} className={customStyles.customBanner}>
|
|
@@ -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{t as i}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{t as i}from"./Button--WTUF97E.js";import{d as a,r as o,u as s,v as c,y as l}from"./AlertBannerAction-DU-Yr-4k.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C;t((()=>{e(n(),1),a(),l(),o(),u=r(),{action:d}=__STORYBOOK_MODULE_ACTIONS__,{userEvent:f,expect:p,fn:m}=__STORYBOOK_MODULE_TEST__,h={title:`components/AlertBanner`,component:s,subcomponents:{AlertBannerProvider:c},args:{}},g={actionOnClick:m(d(`onCLicked`))},_={args:{},parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-l":{viewport:`medium-l`}}}},render:function(){return(0,u.jsxs)(c,{children:[(0,u.jsx)(s,{variant:`critical`,description:`We can't renew your subscription.`,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:`Try again`})}),(0,u.jsx)(s,{variant:`warning`,description:`Your credit card is about to expire.`,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:`Change payment method`})}),(0,u.jsx)(s,{variant:`positive`,description:`Your subscription has been renewed successfully.`,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:`Book the next lesson`})})]})},play:async({canvas:e,step:t})=>{let n=await e.findByRole(`button`,{name:/Try again/});await t(`actionOnClick is not called`,async()=>{p(g.actionOnClick).not.toBeCalled()}),await t(`actionOnClick is called`,async()=>{await f.click(n),p(g.actionOnClick).toBeCalled()})}},v={render:function(){return(0,u.jsxs)(c,{children:[(0,u.jsx)(s,{variant:`critical`,description:`We can't renew your subscription.`,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:`Try again`}),dataset:{testId:`subscriptionAlert`}}),(0,u.jsx)(s,{variant:`warning`,description:`Your credit card is about to expire.`,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:`Change payment method`}),dataset:{testid:`paymentWarning`}}),(0,u.jsx)(s,{variant:`positive`,description:`Your subscription has been renewed successfully.`,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:`Book the next lesson`}),dataset:{testid:`subscriptionRenewed`}})]})},play:async({canvas:e,step:t})=>{await t(`Alert banners are prefixed with "Alert:" to allow screen reader users to recall the alerts region`,async()=>{await p(await e.findByTestId(`subscriptionAlert`)).toHaveTextContent(`Alert: We can't renew your subscription.Try again`)}),await t(`Warning banners are prefixed with "Warning:" to allow screen reader users to recall the alerts region`,async()=>{await p(await e.findByTestId(`paymentWarning`)).toHaveTextContent(`Warning: Your credit card is about to expire.Change payment method`)}),await t(`Positive banners are prefixed with "Update:" to allow screen reader users to recall the updates region`,async()=>{await p(await e.findByTestId(`subscriptionRenewed`)).toHaveTextContent(`Update: Your subscription has been renewed successfully.Book the next lesson`)})}},y={render:function(){return(0,u.jsxs)(c,{"data-testid":`alertBannerHostId`,children:[(0,u.jsx)(`div`,{id:`pageContents`,children:`Page contents`}),(0,u.jsx)(s,{variant:`critical`,description:`We can't renew your subscription.`,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:`Try again`}),dataset:{testId:`subscriptionAlert`}})]})},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`alertBannerHostId`);await t(`The host is announced as "Alerts, warnings, and updates"`,async()=>{await p(n).toHaveAccessibleName(`Alerts, warnings, and updates`)}),await t(`The host renders an aria-live region`,async()=>{await p(n).toHaveAttribute(`aria-live`),await p(n).toHaveAttribute(`aria-atomic`,`false`),await p(n).toHaveRole(`region`)}),await t(`Alert banners are rendered at the top of the page`,async()=>{let t=document.getElementById(`pageContents`);if(!t)throw Error(`Page contents element not found`);let n=await e.findByTestId(`subscriptionAlert`);p(!!(n.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)).toBe(!0)})}},b=`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,x=`Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt.`,S={render:function(){return(0,u.jsxs)(c,{children:[(0,u.jsx)(s,{variant:`warning`,description:b,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:`Try again`})}),(0,u.jsx)(s,{variant:`warning`,description:`We can't renew your subscription.`,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:x})}),(0,u.jsx)(s,{variant:`warning`,description:b,action:(0,u.jsx)(i,{onClick:g.actionOnClick,children:x})})]})}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
|
|
2
2
|
args: {},
|
|
3
3
|
parameters: {
|
|
4
4
|
chromatic: {
|
|
@@ -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-Dqr2b6tP.js";import{n as te,t as ne}from"./Text-Cy08WP3t.js";import{n as re}from"./Heading-B3jb_-J8.js";import{n as ie,t as ae}from"./Button--WTUF97E.js";import{r as oe}from"./OnboardingTooltip-BzkMbW-Q.js";import{i as d,o as se,r as ce}from"./lib-8ue2PVWI.js";import{n as le}from"./AlertDialog-CFUnhRAx.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-CQGXuX8O.js";import{n as be}from"./Checkbox-BV4Be-fH.js";import{r as xe}from"./SingleSelectChips-lT5C7a2D.js";import{r as Se}from"./MultiSelectChips-Bs8MJsJe.js";import{r as Ce}from"./DismissibleChips-CMpz1ljr.js";import{l as f,u as we}from"./DialogCloseButton-CAY9jDgH.js";import{n as Te}from"./Dialog-BT0Kd0KN.js";import{a as Ee,o as De}from"./DialogActions-BDIzA8PJ.js";import{n as Oe,r as ke,t as p}from"./Steps-Ny6Xdpfg.js";import{u as Ae}from"./DropdownMenu-DJWxVTCB.js";import{n as je}from"./FormControl-DoNLVcw2.js";import{n as Me}from"./LayoutFlex-BlWwmFhv.js";import{n as Ne}from"./NumberField-WzHWHpwG.js";import{n as Pe}from"./PasswordField-D3gN_VbU.js";import{i as Fe}from"./SelectField-CtnC30IK.js";import{r as Ie}from"./Slider-BgB4xT6m.js";import{n as Le}from"./RangeSlider-CQsn2ggM.js";import{n as Re}from"./Switch-DyKTsO1c.js";import{n as ze}from"./TextareaField-BAawMK2x.js";import{n as Be}from"./TextField-DtzGGo-n.js";import{n as Ve}from"./Tooltip-BKkZoXDV.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:`"critical"`},{value:`"positive"`},{value:`"warning"`}]}},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:`"
|
|
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:`"critical"`},{value:`"positive"`},{value:`"warning"`}]}},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:`"placeholder"`},{value:`"accentDark"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"inverted"`},{value:`"positive"`},{value:`"warning"`},{value:`"info"`}]}},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:`"critical"`},{value:`"positive"`},{value:`"warning"`}]}},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:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,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`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"critical"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"inverted"`},{value:`"newFeature"`}]}},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`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},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>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
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`}]}},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:`"large"`},{value:`"medium"`},{value:`ResponsiveProp<ButtonSize>`}]}},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`}]}},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:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,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`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"critical"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"inverted"`},{value:`"newFeature"`}]}},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`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},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>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
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`}]}},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:`"large"`},{value:`"medium"`},{value:`ResponsiveProp<ButtonSize>`}]}},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`}]}},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,14 +106,14 @@ 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:{
|
|
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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},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:`"base"`},{value:`"small"`},{value:`"large"`},{value:`"medium"`}]}},tone:{defaultValue:{value:`neutral`},description:``,name:`tone`,required:!1,type:{name:`enum`,value:[{value:`"neutral"`},{value:`"ai"`},{value:`"critical"`},{value:`"positive"`},{value:`"warning"`},{value:`"info"`}]}}}}}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:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,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`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"critical"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"inverted"`},{value:`"newFeature"`}]}},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`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},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>>`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},
|
|
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`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},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:`"large"`},{value:`"medium"`},{value:`ResponsiveProp<ButtonSize>`}]}},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`}]}},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.
|
|
117
117
|
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
|
|
118
118
|
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';
|
|
119
119
|
|
|
@@ -124,4 +124,4 @@ or
|
|
|
124
124
|
|
|
125
125
|
<Button trailingSvgIcon={TokyoUITag}>Button</Button>
|
|
126
126
|
or
|
|
127
|
-
<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>>`}]}}
|
|
127
|
+
<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{}}));export{k as _,nt as a,H as c,Ye as d,z as f,O as g,Ke as h,Y as i,Xe as l,I as m,$ as n,G as o,Je as p,X as r,W as s,Q as t,V as u,b as v,w as y};
|
|
@@ -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-BuOXI2w6.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./Heading-B3jb_-J8.js";import{n as f,t as p}from"./Button--WTUF97E.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-QYJ12Nr4.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--WTUF97E.js";import{n as o,t as s}from"./AlertDialog-CFUnhRAx.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,6 +1,6 @@
|
|
|
1
1
|
import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{_ as r,b as i,ht as a,t as o,w as s,x as c,y as l}from"./dist-DtfJeYQK.js";import{t as u}from"./jsx-runtime-C2wGStra.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{n as p,t as m}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as h,t as g}from"./Avatar-D6oXWjq1.js";var _,v,y=t((()=>{_=`AvatarWithStatus__z8Zik`,v={AvatarWithStatus:_,"AvatarWithStatus--indicator":`AvatarWithStatus--indicator__dsdXa`,"AvatarWithStatus--online":`AvatarWithStatus--online__pGAFw`,"AvatarWithStatus--size-64":`AvatarWithStatus--size-64__vG-kB`,"AvatarWithStatus--size-96":`AvatarWithStatus--size-96__Dgqc1`,"AvatarWithStatus--size-160":`AvatarWithStatus--size-160__7gCR7`}})),b,x,S,C=t((()=>{s(),f(),o(),b=e(n(),1),p(),h(),y(),x=u(),S=(0,b.forwardRef)(function({online:e=!1,size:t=`64`,dataset:n,alt:o,crossOrigin:s,src:u,...f},p){let h=l(v,d.AvatarWithStatus,[r(`online`,void 0,e),c(`size`,t)]),_=[...i(v,d.AvatarWithStatus,[`indicator`])];return(0,x.jsxs)(`div`,{...m(f),ref:p,className:h.join(` `),...a(n,{preplyDsComponent:d.AvatarWithStatus}),children:[(0,x.jsx)(`span`,{className:_.join(` `)}),(0,x.jsx)(`div`,{children:(0,x.jsx)(g,{alt:o,crossOrigin:s,src:u,size:t??`32`})})]})});try{S.displayName=`AvatarWithStatus`,S.__docgenInfo={description:``,displayName:`AvatarWithStatus`,props:{dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
|
|
2
|
-
@example <Avatar dataset={{ 'qa-id': 'user-avatar' }} /> // will add data-qa-id="user-avatar" to the HTML element`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},
|
|
2
|
+
@example <Avatar dataset={{ 'qa-id': 'user-avatar' }} /> // will add data-qa-id="user-avatar" to the HTML element`,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},alt:{defaultValue:null,description:`A description of the image.
|
|
3
3
|
This is recommended for accessibility purposes, specifically for users
|
|
4
4
|
of screen readers.
|
|
5
5
|
@example <Avatar src={...} alt="Foobar's profile" />`,name:`alt`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},src:{defaultValue:null,description:`The avatar image URL.
|
|
6
|
-
If not provided, the default placeholder image is used instead.`,name:`src`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},online:{defaultValue:{value:`false`},description:`Controls the status of the visual indicator.`,name:`online`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},size:{defaultValue:{value:`64`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"64"`},{value:`"96"`},{value:`"160"`},{value:`ResponsiveProp<AvatarWithStatusSize>`}]}}}}}catch{}}));export{C as n,S as t};
|
|
6
|
+
If not provided, the default placeholder image is used instead.`,name:`src`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},crossOrigin:{defaultValue:null,description:`CORS policy for the image.`,name:`crossOrigin`,required:!1,type:{name:`enum`,value:[{value:`""`},{value:`"anonymous"`},{value:`"use-credentials"`}]}},online:{defaultValue:{value:`false`},description:`Controls the status of the visual indicator.`,name:`online`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},size:{defaultValue:{value:`64`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"64"`},{value:`"96"`},{value:`"160"`},{value:`ResponsiveProp<AvatarWithStatusSize>`}]}}}}}catch{}}));export{C as n,S as t};
|
package/dist/assets/{AvatarWithStatus.stories-CxBQAt3x.js → AvatarWithStatus.stories-D-ttnLWy.js}
RENAMED
|
@@ -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"./AvatarWithStatus-
|
|
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"./AvatarWithStatus-D83AKEVT.js";var o,s,c,l,u;t((()=>{e(n(),1),i(),o=r(),s={title:`components/AvatarWithStatus`,component:a},c=()=>(0,o.jsxs)(`div`,{style:{display:`flex`,gap:`8px`},children:[(0,o.jsx)(a,{size:`64`,online:!0}),(0,o.jsx)(a,{size:`64`,online:!1})]}),l={parameters:{chromatic:{disableSnapshot:!0}},args:{size:`64`,src:`./assets/avatar-1.png`,online:!1,dataset:{qaid:`avatar-with-status`}},argTypes:{src:{control:`text`},dataset:{control:`object`},alt:{control:`text`},online:{control:`boolean`}}},c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`() => <div style={{
|
|
2
2
|
display: 'flex',
|
|
3
3
|
gap: '8px'
|
|
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-Dqr2b6tP.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:`"s"`},{value:`"small"`},{value:`"large"`},{value:`"medium"`},{value:`"xs"`},{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>
|
|
@@ -7,4 +7,4 @@ or
|
|
|
7
7
|
|
|
8
8
|
Hides badge label visually, but keeps it in the accessibility tree.
|
|
9
9
|
Use this prop to implement icons-only badges.
|
|
10
|
-
@example <Badge leadingSvgIcon={<TokyoUITag />} hideLabel>Badge</Badge>`,name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},assistiveText:{defaultValue:null,description:`@deprecated badge children should have all necessary information`,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},type:{defaultValue:{value:`neutral`},description:`The type of the badge.`,name:`type`,required:!1,type:{name:`enum`,value:[{value:`"
|
|
10
|
+
@example <Badge leadingSvgIcon={<TokyoUITag />} hideLabel>Badge</Badge>`,name:`hideLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},assistiveText:{defaultValue:null,description:`@deprecated badge children should have all necessary information`,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},type:{defaultValue:{value:`neutral`},description:`The type of the badge.`,name:`type`,required:!1,type:{name:`enum`,value:[{value:`"neutral"`},{value:`"ai"`},{value:`"critical"`},{value:`"positive"`},{value:`"warning"`},{value:`"info"`}]}},accent:{defaultValue:null,description:"@deprecated Use `type` instead.",name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"tertiary"`},{value:`"critical"`},{value:`"positive"`},{value:`"warning"`},{value:`"accent"`},{value:`"info"`}]}},inverted:{defaultValue:null,description:`@deprecated inverted badge is deprecated & will be removed in the future releases`,name:`inverted`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}}));export{b as n,y 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"./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-DeL8OM1F.js";import{n as o,t as s}from"./LayoutFlex-BlWwmFhv.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:`"disabled"`},{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:`"disabled"`},{value:`"accentDark"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{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:`"article"`},{value:`"caption"`},{value:`"div"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"figure"`},{value:`"footer"`},{value:`"header"`},{value:`"li"`},{value:`"main"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"table"`},{value:`"tbody"`},{value:`"td"`},{value:`"tfoot"`},{value:`"th"`},{value:`"thead"`},{value:`"tr"`},{value:`"ul"`}]}},padding:{defaultValue:{value:`24`},description:``,name:`padding`,required:!1,type:{name:`enum`,value:[{value:`"0"`},{value:`"1"`},{value:`"2"`},{value:`"4"`},{value:`"6"`},{value:`"8"`},{value:`"12"`},{value:`"16"`},{value:`"20"`},{value:`"24"`},{value:`"32"`},{value:`"48"`},{value:`"64"`},{value:`"96"`},{value:`"160"`},{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-Cy08WP3t.js";import{n as o,t as s}from"./Heading-B3jb_-J8.js";import{n as c,t as l}from"./Box-CcR4H93c.js";import{n as u,t as d}from"./LayoutFlex-BlWwmFhv.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-CQGXuX8O.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:`"large"`},{value:`"medium"`}]}},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
|