@preply/ds-docs 2.2.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{00.LayoutFlex.stories-DG5XDWWv.js → 00.LayoutFlex.stories-CvLRURcS.js} +1 -1
- package/dist/assets/{00.applications-BwD1yOm-.js → 00.applications-c0ZYJJn9.js} +1 -1
- package/dist/assets/{00.favicons.guide-DYt0ZW7R.js → 00.favicons.guide-D3AV1_bz.js} +1 -1
- package/dist/assets/{00.token-explorer-BnS0ahYH.js → 00.token-explorer-CkT6qey8.js} +1 -1
- package/dist/assets/{00.using-responsive-props-ccRZ9FAw.js → 00.using-responsive-props-BCqw6dGb.js} +1 -1
- package/dist/assets/{01.semantic-tokens-WsdjPcFR.js → 01.semantic-tokens-D1Tew_3C.js} +1 -1
- package/dist/assets/{01.using-shorthand-props-CZaSw8Ue.js → 01.using-shorthand-props-nxXyAVD6.js} +1 -1
- package/dist/assets/{10.Combinations.stories-Ce5YVZgO.js → 10.Combinations.stories-BJHxtOLR.js} +1 -1
- package/dist/assets/{10.fonts.guide-BAJqHFrh.js → 10.fonts.guide-Bgvvb8pw.js} +1 -1
- package/dist/assets/{10.ssr-BxsiLtTL.js → 10.ssr-DzFj_Isy.js} +1 -1
- package/dist/assets/{11.languageFont.explorer-CjxbP58V.js → 11.languageFont.explorer-C97blYpf.js} +1 -1
- package/dist/assets/{11.ssr.app-router-BO-IG2U_.js → 11.ssr.app-router-CKVwpTWN.js} +1 -1
- package/dist/assets/{20.libraries-DnvU5oKZ.js → 20.libraries-B0w5t56u.js} +1 -1
- package/dist/assets/30.icons.explorer-9sEQx8aM.js +72 -0
- package/dist/assets/{30.storybook-CBrD3n6l.js → 30.storybook-Bs2xm9rU.js} +1 -1
- package/dist/assets/{40.illustrations.explorer-Cb9JzUVR.js → 40.illustrations.explorer-CR8ar0fc.js} +1 -1
- package/dist/assets/{90.advanced-CHfBOcDX.js → 90.advanced-9hdW-yh5.js} +1 -1
- package/dist/assets/{AlertDialog.stories-MphIkgeN.js → AlertDialog.stories-BKbQPKy6.js} +1 -1
- package/dist/assets/{Badge.stories-5tMdPyQs.js → Badge.stories-zICtnzrJ.js} +2 -2
- package/dist/assets/{Box.stories-DXZIdmZy.js → Box.stories-2uNGKDGl.js} +1 -1
- package/dist/assets/{Button-nPedvLTz.js → Button-BzRWDefj.js} +1 -1
- package/dist/assets/{Button-J48YOeFZ.css → Button-C6MQP0Gg.css} +1 -1
- package/dist/assets/Button-C89H73Uu.js +20 -0
- package/dist/assets/Button-U6ON1pQl.css +1 -0
- package/dist/assets/{Button.stories-C57aDL8Z.js → Button.stories-CB00Q6ks.js} +17 -9
- package/dist/assets/ButtonBase-D0ZIVzRq.js +8 -0
- package/dist/assets/Checkbox-Bdp0Xs7p.css +1 -0
- package/dist/assets/Checkbox-CA4iZrAT.js +10 -0
- package/dist/assets/{Checkbox.stories-LFJYKcL1.js → Checkbox.stories-CzSrFSp_.js} +2 -2
- package/dist/assets/Checkbox.tests.stories-jyWPjdYZ.js +137 -0
- package/dist/assets/{Chips.stories-B1KWZ8O0.js → Chips.stories-DKp9Fwyf.js} +1 -1
- package/dist/assets/{Color-YHDXOIA2-rhMWY6Az.js → Color-YHDXOIA2-C27uRBAj.js} +1 -1
- package/dist/assets/{Dialog.stories-CmiBli-3.js → Dialog.stories-Crw2R2LP.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-_p2bZewJ.js → DocsRenderer-CFRXHY34-CsoYCySD.js} +1 -1
- package/dist/assets/{FieldLayout-CDdbTwnx.js → FieldLayout-_CFICI44.js} +1 -1
- package/dist/assets/{FieldLayout.stories-B4wQoZi8.js → FieldLayout.stories-CeETFAXO.js} +1 -1
- package/dist/assets/{FieldLayoutBase-BXt4M7sP.js → FieldLayoutBase-DOSetr9A.js} +1 -1
- package/dist/assets/{Heading-B_OcwpW-.js → Heading-BJA2KEAN.js} +1 -1
- package/dist/assets/{Heading.stories-DvwLrpCN.js → Heading.stories-DLmu9UzT.js} +1 -1
- package/dist/assets/{Icon-RSC-w0Nrg6DG.js → Icon-RSC-Bl-bBsbR.js} +1 -1
- package/dist/assets/{Icon-RJMnctrw.js → Icon-TCS4E3Ut.js} +1 -1
- package/dist/assets/{Icon.stories-BsTzZknC.js → Icon.stories-BlDFgK_r.js} +1 -1
- package/dist/assets/{IconButton-Dlgns1pq.js → IconButton-nN3VsXQJ.js} +1 -1
- package/dist/assets/InputText-FNRxz3Ff.js +5 -0
- package/dist/assets/{LayoutFlex-b2QXeA0z.js → LayoutFlex-dzXpor-q.js} +1 -1
- package/dist/assets/{LayoutFlexItem-CJkCBZ-T.js → LayoutFlexItem-DwJhVVPl.js} +1 -1
- package/dist/assets/{LayoutGrid.stories-SyasmoS3.js → LayoutGrid.stories-DOtFrGWL.js} +1 -1
- package/dist/assets/{Link.stories-BciEuIul.js → Link.stories-DXPo6cSR.js} +2 -2
- package/dist/assets/{NumberField.stories-DPJijQab.js → NumberField.stories-DF0UQeFt.js} +3 -3
- package/dist/assets/{ObserveIntersection-DmUYWtw_.js → ObserveIntersection-X9T7s8C_.js} +1 -1
- package/dist/assets/{ObserveIntersection.stories-D9iSLGDs.js → ObserveIntersection.stories-CL2a-4JN.js} +1 -1
- package/dist/assets/{OnboardingTooltip-CqHYNXIu.js → OnboardingTooltip-DNeTE2Nf.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-CzdX3Nw_.js → OnboardingTooltip.stories-DmHsCU2X.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-DQVOHeLl.js → OnboardingTooltip.tests.stories-DQmyU3mJ.js} +1 -1
- package/dist/assets/{OnboardingTour-CFO1Ozmu.js → OnboardingTour-BesctxSp.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-B45PnXtS.js → OnboardingTour.stories-8o0Dq4f0.js} +1 -1
- package/dist/assets/{OnboardingTour.tests.stories-Djzrtw7h.js → OnboardingTour.tests.stories-Ci0Rxq5y.js} +1 -1
- package/dist/assets/PasswordField.stories-CMLHLaUX.js +203 -0
- package/dist/assets/{ProgressBar.stories-PDV2LPZd.js → ProgressBar.stories-C-i-MYk7.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-23NRnaYA.js → ProgressSteps.stories-DDbQ6On7.js} +1 -1
- package/dist/assets/SelectField.stories-vkYj9ARE.js +182 -0
- package/dist/assets/{ShowOnIntersection.stories-DkmJRWg7.js → ShowOnIntersection.stories-kLcUye2N.js} +1 -1
- package/dist/assets/{Steps-CViJWVZa.js → Steps-Bbevuw10.js} +1 -1
- package/dist/assets/{Steps.stories-BjhPim5p.js → Steps.stories-CErVd6Rs.js} +1 -1
- package/dist/assets/{Text-WJLo2jWe.js → Text-B8k9gfOM.js} +1 -1
- package/dist/assets/{Text.stories-BxBe_Syw.js → Text.stories-CoVq2sZs.js} +1 -1
- package/dist/assets/{TextField.stories-BhEhwXEF.js → TextField.stories-Dc9U6fJp.js} +1 -1
- package/dist/assets/{TextHighlighted.stories-rMMoLtzU.js → TextHighlighted.stories-CQsM4aEX.js} +1 -1
- package/dist/assets/{TextInline.stories-CrtAGjeH.js → TextInline.stories-nuefXRFb.js} +1 -1
- package/dist/assets/TextareaField.stories-DGmkn96k.js +221 -0
- package/dist/assets/{Toast.stories-DUvvjdkV.js → Toast.stories-CUHN7nJ1.js} +1 -1
- package/dist/assets/{Tooltip.stories-BDIWPFzK.js → Tooltip.stories-BlrXwmnR.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-XBeLY_cD.js → Tooltip.tests.stories-uM6jvJb0.js} +1 -1
- package/dist/assets/{breakpoints-3NoMMOFH.js → breakpoints-D3Osd5ia.js} +1 -1
- package/dist/assets/{breakpoints-DCOBa27A.js → breakpoints-rq_8diAS.js} +1 -1
- package/dist/assets/{breakpoints-9Ie3Hewk.js → breakpoints-sGqCBEv-.js} +1 -1
- package/dist/assets/{changelog-B4rID9Bq.js → changelog-BIJMaAIY.js} +93 -86
- package/dist/assets/{entry-preview-BvcUTc0o.js → entry-preview-CsadCHYh.js} +1 -1
- package/dist/assets/{getTokenVar-hj8mL9hP.js → getTokenVar-BvNPkk_L.js} +1 -1
- package/dist/assets/{hover-CsuooMFi.js → hover-BBCQuwLQ.js} +1 -1
- package/dist/assets/{hover-Dibwfqgm.js → hover-D5ih0L6J.js} +1 -1
- package/dist/assets/{hover-Dxl9_41k.js → hover-cS9kZjMk.js} +1 -1
- package/dist/assets/{iframe-BL4lww1d.js → iframe-DyQ151Cy.js} +2 -2
- package/dist/assets/{index-uM6_U85L.js → index-C7SPUG0c.js} +1 -1
- package/dist/assets/{index-CObJ2I6U.js → index-CfKvYfkH.js} +3 -3
- package/dist/assets/{intro-DkbagauH.js → intro-Blula3c7.js} +1 -1
- package/dist/assets/{migrating-from-less-Cc54FV0O.js → migrating-from-less-CPQq6ww0.js} +1 -1
- package/dist/assets/playground-BxG9T6DA.css +1 -0
- package/dist/assets/{playground.stories-RDLbHK8z.js → playground.stories-DY0v9063.js} +1 -1
- package/dist/assets/{preview-BuXHQRzI.js → preview-Bj0gjZ64.js} +1 -1
- package/dist/assets/{preview-DCBEprzB.js → preview-BtJWM-Ub.js} +2 -2
- package/dist/assets/{preview-CsDoYzSA.js → preview-CQgqy70b.js} +1 -1
- package/dist/assets/{tokens-DjUxPhCy.js → tokens-B-lBm9m1.js} +1 -1
- package/dist/assets/{tokens-eLBa0fu8.js → tokens-BV-n4-vL.js} +1 -1
- package/dist/assets/{tokens-Cer3Mvss.js → tokens-CJZmVKwi.js} +1 -1
- package/dist/assets/{usePortalElement-BtGB8NZO.js → usePortalElement-DS4vrgrv.js} +1 -1
- package/dist/assets/{welcome-C5k7941o.js → welcome-D-TXgv71.js} +1 -1
- package/dist/assets/{zeroheight-BIqyExuv.js → zeroheight-Bob-R-DS.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/index.json +1 -1
- package/dist/preview-stats.json +1370 -1358
- package/dist/project.json +1 -1
- package/package.json +3 -3
- package/dist/assets/30.icons.explorer-mTnmuuga.js +0 -72
- package/dist/assets/Button-BliYLmDQ.js +0 -20
- package/dist/assets/Button-YKyFdyVc.css +0 -1
- package/dist/assets/ButtonBase-BPK7KgDE.js +0 -8
- package/dist/assets/Checkbox-A4FiIFOZ.js +0 -10
- package/dist/assets/Checkbox-vai6Do9U.css +0 -1
- package/dist/assets/Checkbox.tests.stories-DCrWk5Cz.js +0 -137
- package/dist/assets/InputText-CmkE4Hy1.js +0 -5
- package/dist/assets/PasswordField.stories-z8JIrcLL.js +0 -203
- package/dist/assets/SelectField.stories-CicE2HU3.js +0 -182
- package/dist/assets/TextareaField.stories-BYSJeGAa.js +0 -221
- package/dist/assets/TokyoUICheckmark-DzN1BbFq.js +0 -1
- package/dist/assets/playground-Cya3NPlx.css +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as a}from"./index-Cb9e4tly.js";import{O as i}from"./ObserveIntersection-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as a}from"./index-Cb9e4tly.js";import{O as i}from"./ObserveIntersection-X9T7s8C_.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./componentNames-Y1T_IIlY.js";const g={title:"components/ObserveIntersection",component:i,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},e=()=>{const[o,c]=a.useState(!1);return t.jsxs("div",{tabIndex:0,style:{height:"200px",overflowY:"scroll",position:"relative"},children:[t.jsx("div",{style:{position:"sticky",top:"2px"},children:o?"Intersected":"Scroll down to intersect"}),t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(i,{onIntersect:()=>c(!0),children:"Observer"})})]})};e.storyName="ObserveIntersection";var s,n,r;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:`() => {
|
|
2
2
|
const [isIntersecting, setIsIntersecting] = useState(false);
|
|
3
3
|
return (
|
|
4
4
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as n}from"./index-Cb9e4tly.js";import{R as _,A as q,P as x,C as O,a as N,b as E}from"./index-BOrXX8UK.js";import{F as k}from"./TokyoUIClose-thK8sk63.js";import{I as P}from"./Icon-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as n}from"./index-Cb9e4tly.js";import{R as _,A as q,P as x,C as O,a as N,b as E}from"./index-BOrXX8UK.js";import{F as k}from"./TokyoUIClose-thK8sk63.js";import{I as P}from"./Icon-TCS4E3Ut.js";import{T as j}from"./Text-B8k9gfOM.js";import{B as D}from"./Button-C89H73Uu.js";import{H as T}from"./Heading-BJA2KEAN.js";import{u as S}from"./index-D1pfvbUR.js";import{g as L}from"./shared-strings-Biv7UF3M.js";import{i as M}from"./PortalElementProvider-BRcRijdp.js";import{g as H}from"./index-DdzHuZ-Y.js";import{w as X}from"./componentNames-Y1T_IIlY.js";import{M as J}from"./message-B1DLZQ1U.js";const B="content__KHgp9",F="header__CaLti",U="close__3s-VD",A="footer__X5qXF",G="arrow__0pg-s",o={content:B,header:F,close:U,footer:A,arrow:G},z=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:"auto",block:"nearest",inline:"nearest"})},m=({open:e,onOpenChange:i,disabled:r,title:u,text:s,children:a,side:l,dataset:h,actionLabel:b=t.jsx(J,{id:"preply-ds.onboardingTooltip.actionLabel",defaultMessage:"Got it",description:"Default onboarding tooltip action label. Used to acknowledge and close the tooltip."}),actionOnClick:g,actionHref:y,counter:C,autoScroll:v=!0})=>{const{formatMessage:I}=S(),w=M(),f=n.useId(),V=n.useId(),d=n.useId(),c=n.useRef(null);return n.useEffect(()=>{e&&c.current&&v&&z(c.current)},[v,e]),r?a:t.jsxs(_,{open:e,onOpenChange:i,children:[t.jsx(q,{ref:c,id:d,asChild:!0,children:a}),t.jsx(x,{container:w,children:t.jsxs(O,{onInteractOutside:R=>{R.preventDefault()},side:l,className:o.content,"aria-labelledby":f,"aria-describedby":`${d} ${V}`,...H(h,{preplyDsComponent:X.OnboardingTooltip}),children:[t.jsxs("div",{className:o.header,children:[t.jsx(N,{className:o.close,"aria-label":I(L.close),"data-testid":"close",children:t.jsx(P,{accent:"inverted",svg:k})}),t.jsx(T,{tag:"h1",variant:"small",accent:"inverted",id:f,"aria-describedby":d,children:u})]}),t.jsx(j,{variant:"default-regular",accent:"inverted",children:s}),t.jsxs("div",{className:o.footer,children:[C,t.jsx(D,{variant:"inverted",size:"small",onClick:g,href:y,dataset:{testid:"action"},wrap:!0,children:b})]}),t.jsx(E,{"aria-hidden":!0,className:o.arrow,width:18,height:11})]})})]})},p=e=>{const[i,r]=n.useState(!0),u=a=>{var l;a||(l=e.onClose)==null||l.call(e),r(a)},s=()=>{var a,l;(a=e.actionOnClick)==null||a.call(e),r(!1),(l=e.onClose)==null||l.call(e)};return t.jsx(m,{...e,open:i,onOpenChange:u,actionOnClick:s})};try{m.displayName="InternalOnboardingTooltip",m.__docgenInfo={description:"",displayName:"InternalOnboardingTooltip",props:{title:{defaultValue:null,description:"",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"}]}},text:{defaultValue:null,description:"",name:"text",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"}]}},disabled:{defaultValue:null,description:"Disables tooltip completely",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tooltip is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},actionLabel:{defaultValue:{value:`(
|
|
2
2
|
<FormattedMessage
|
|
3
3
|
id="preply-ds.onboardingTooltip.actionLabel"
|
|
4
4
|
defaultMessage="Got it"
|
package/dist/assets/{OnboardingTooltip.stories-CzdX3Nw_.js → OnboardingTooltip.stories-DmHsCU2X.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{O as u}from"./OnboardingTooltip-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{O as u}from"./OnboardingTooltip-DNeTE2Nf.js";import{I as g}from"./IconButton-nN3VsXQJ.js";import{F as x}from"./TokyoUIFav-DOVerCtW.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-BOrXX8UK.js";import"./PortalElementProvider-BRcRijdp.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-M3hvtcRE.js";import"./tslib.es6-BntfKcQG.js";import"./index-DOA2-rRC.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-TCS4E3Ut.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-Y1T_IIlY.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-B8k9gfOM.js";import"./text-centered-CznToR0o.js";import"./Button-C89H73Uu.js";import"./ButtonBase-D0ZIVzRq.js";import"./Spinner-B2C3RkCF.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./Heading-BJA2KEAN.js";import"./index-D1pfvbUR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-Biv7UF3M.js";import"./message-B1DLZQ1U.js";const te={title:"Components/OnboardingTooltip",component:u,parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},f=t=>[!1,!1],h=t=>a=>{},o=()=>{const[t,a]=f(),v=h();return e.jsx(u,{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:a||t,onClose:()=>v(!0),children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})})};o.storyName="OnboardingTooltip";const r={tags:["!autodocs"],args:{title:"New Feature Available!",text:"We've added an exciting new feature to enhance your experience.",disabled:!1,onClose:()=>{},children:e.jsx(g,{variant:"ghost",svg:e.jsx(x,{}),assistiveText:"Favorite"})},argTypes:{title:{control:"text"},text:{control:"text"},actionLabel:{control:"text"},actionOnClick:{control:!1},actionHref:{control:"text"},disabled:{control:"boolean"},dataset:{control:"object"},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[t=>e.jsx("div",{style:{minHeight:"100vh",display:"flex"},children:e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})})]};var i,n,s,l,c;o.parameters={...o.parameters,docs:{...(i=o.parameters)==null?void 0:i.docs,source:{originalSource:`() => {
|
|
2
2
|
const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');
|
|
3
3
|
const setTooltipSeen = useToggleFeature('new-feature');
|
|
4
4
|
return <OnboardingTooltip title="New Feature Available!" text="We've added an exciting new feature to enhance your experience." disabled={loading || wasTooltipSeen} onClose={() => setTooltipSeen(true)}>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{O as x}from"./OnboardingTooltip-
|
|
1
|
+
import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{O as x}from"./OnboardingTooltip-DNeTE2Nf.js";import{I}from"./IconButton-nN3VsXQJ.js";import{F as f}from"./TokyoUIFav-DOVerCtW.js";import{a as s,w as r,e as n,u as d}from"./index-BVDq5o4N.js";import{B as k}from"./Button-C89H73Uu.js";import{L as F}from"./LayoutFlex-dzXpor-q.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-BOrXX8UK.js";import"./PortalElementProvider-BRcRijdp.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-M3hvtcRE.js";import"./tslib.es6-BntfKcQG.js";import"./index-DOA2-rRC.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-TCS4E3Ut.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-Y1T_IIlY.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Text-B8k9gfOM.js";import"./text-centered-CznToR0o.js";import"./Heading-BJA2KEAN.js";import"./index-D1pfvbUR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-Biv7UF3M.js";import"./message-B1DLZQ1U.js";import"./ButtonBase-D0ZIVzRq.js";import"./Spinner-B2C3RkCF.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const mt={title:"Components/OnboardingTooltip/Tests",component:x,parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[e=>a.jsx("div",{style:{margin:"100px 0"},children:e()})],args:{title:"Title",text:"Body text",actionLabel:"Action label",disabled:!1,onClose:()=>{},dataset:{testid:"tooltip"},children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})}},c={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("close");return d.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}},l={play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("close the tooltip",()=>{const u=s(i.getByTestId("tooltip")).getByTestId("action");return d.click(u)}),await o("wait for tooltip to be hidden",async()=>{await r(()=>{const t=i.queryByTestId("tooltip");return n(t).toBeNull()})})}};function E(e){return new Promise(o=>setTimeout(o,e))}const p={render:e=>a.jsxs(F,{gap:"24",direction:"column",children:[a.jsx(k,{children:"Click outside the tooltip"}),a.jsx(x,{...e,children:a.jsx(I,{svg:a.jsx(f,{}),assistiveText:"Favorite"})})]}),play:async({canvasElement:e,step:o})=>{const i=s(e);await o("wait for tooltip to be visible",async()=>{await r(()=>{const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}),await o("click outside the tooltip",()=>{const t=i.getByText("Click outside the tooltip");return d.click(t)}),await o("check the tooltip remain open",async()=>{await E(1e3);const t=i.getByTestId("tooltip");return n(t).toBeVisible()})}};var m,y,w;c.parameters={...c.parameters,docs:{...(m=c.parameters)==null?void 0:m.docs,source:{originalSource:`{
|
|
2
2
|
play: async ({
|
|
3
3
|
canvasElement,
|
|
4
4
|
step
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{r as l}from"./index-Cb9e4tly.js";import{I as A}from"./OnboardingTooltip-
|
|
1
|
+
import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{r as l}from"./index-Cb9e4tly.js";import{I as A}from"./OnboardingTooltip-DNeTE2Nf.js";import"./index-D1pfvbUR.js";import{M as f}from"./message-B1DLZQ1U.js";const T="counter__ArBS-",j={counter:T},v=({totalSteps:n,nextActionLabel:e=o.jsx(f,{id:"preply-ds.onboardingTour.nextActionLabel",defaultMessage:"Next",description:"Onboarding tour next action label"}),completeActionLabel:a=o.jsx(f,{id:"preply-ds.onboardingTour.completeActionLabel",defaultMessage:"Got it",description:"Onboarding tour complete action label"}),onClose:t,onComplete:r,onStepChange:i,disabled:s,children:p,ctx:x})=>{const[b,u]=l.useState(!0),[d,g]=l.useState(0),c={totalSteps:n,nextActionLabel:e,completeActionLabel:a,onClose:()=>{u(!1),t==null||t()},active:!s&&b,currentStep:d,onActionClick:()=>{if(d===n-1)r==null||r(),u(!1);else{const h=d+1;g(h),i==null||i(h)}}};return o.jsx(x.Provider,{value:c,children:p})},_=({ctx:n,...e})=>{const a=l.useContext(n);if(!a)throw new Error("OnboardingTourContext not found");const{currentStep:t,totalSteps:r,onActionClick:i,onClose:s,active:p,nextActionLabel:x,completeActionLabel:b}=a,u=e.step===r-1,d=e.step===t,g=u?b:x,m=()=>{var c;(c=e.actionOnClick)==null||c.call(e),i()},O=c=>{c||s==null||s()};return o.jsx(A,{...e,counter:o.jsx("p",{className:j.counter,children:o.jsx(f,{id:"preply-ds.onboardingTour.counter",defaultMessage:"{currentStep} of {totalSteps}",description:"Onboarding tour step counter, e.g. '1 of 3'",values:{currentStep:t+1,totalSteps:r}})}),open:p&&d,onOpenChange:O,actionLabel:g,actionOnClick:m})},S=()=>{const n=l.createContext(null);return{Provider:t=>o.jsx(v,{...t,ctx:n}),Step:t=>o.jsx(_,{...t,ctx:n})}};try{S.displayName="createOnboardingTour",S.__docgenInfo={description:`Creates a new onboarding tour.
|
|
2
2
|
|
|
3
3
|
This factory pattern allows multiple independent tours to be nested within each other
|
|
4
4
|
without context conflicts, as each tour maintains its own separate context and state.`,displayName:"createOnboardingTour",props:{}}}catch{}export{S as c};
|
package/dist/assets/{OnboardingTour.stories-B45PnXtS.js → OnboardingTour.stories-8o0Dq4f0.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as b}from"./index-Cb9e4tly.js";import{c as x}from"./OnboardingTour-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as b}from"./index-Cb9e4tly.js";import{c as x}from"./OnboardingTour-BesctxSp.js";import{T as n}from"./Text-B8k9gfOM.js";import{L as y}from"./LayoutFlex-dzXpor-q.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DNeTE2Nf.js";import"./index-BOrXX8UK.js";import"./PortalElementProvider-BRcRijdp.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-M3hvtcRE.js";import"./tslib.es6-BntfKcQG.js";import"./index-DOA2-rRC.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-TCS4E3Ut.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-Y1T_IIlY.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Button-C89H73Uu.js";import"./ButtonBase-D0ZIVzRq.js";import"./Spinner-B2C3RkCF.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./Heading-BJA2KEAN.js";import"./text-centered-CznToR0o.js";import"./index-D1pfvbUR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-Biv7UF3M.js";import"./message-B1DLZQ1U.js";import"./layout-relative.module-ed9bC4H4.js";const l=t=>null,s=t=>null;try{l.displayName="OnboardingTourProvider",l.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
|
|
2
2
|
when they're created with the \`createOnboardingTour\` function.
|
|
3
3
|
|
|
4
4
|
As a workaround, we're manually defining fake components with the same
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{c as I}from"./OnboardingTour-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{c as I}from"./OnboardingTour-BesctxSp.js";import{T as u}from"./Text-B8k9gfOM.js";import{B as m}from"./Button-C89H73Uu.js";import{f as v,a as p,w as c,e as n,u as l}from"./index-BVDq5o4N.js";import{L as C}from"./LayoutFlex-dzXpor-q.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DNeTE2Nf.js";import"./index-BOrXX8UK.js";import"./PortalElementProvider-BRcRijdp.js";import"./index-BPrLDK9Y.js";import"./index-C7hTFOIV.js";import"./index-M3hvtcRE.js";import"./tslib.es6-BntfKcQG.js";import"./index-DOA2-rRC.js";import"./TokyoUIClose-thK8sk63.js";import"./Icon-TCS4E3Ut.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-Y1T_IIlY.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Heading-BJA2KEAN.js";import"./text-centered-CznToR0o.js";import"./index-D1pfvbUR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-Biv7UF3M.js";import"./message-B1DLZQ1U.js";import"./ButtonBase-D0ZIVzRq.js";import"./Spinner-B2C3RkCF.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const d=I(),kt={title:"Components/OnboardingTour/Tests",parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[i=>e.jsx("div",{style:{margin:"100px 0"},children:i()})],args:{onComplete:v(),onClose:v(),onStepChange:v()}},y={render:({onComplete:i,onStepChange:s})=>e.jsx(d.Provider,{totalSteps:3,nextActionLabel:"Next",completeActionLabel:"Got it",onComplete:i,onStepChange:s,children:e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})}),e.jsx(d.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"step-2"},children:e.jsx(u,{children:"Step 2 Content"})}),e.jsx(d.Step,{step:2,title:"Title",text:"Text",dataset:{testid:"step-3"},children:e.jsx(u,{children:"Step 3 Content"})})]})}),play:async({canvasElement:i,step:s,args:t})=>{const a=p(i);await s("First step should be visible initially",async()=>{await c(()=>{const o=a.getByTestId("step-1");n(o).toBeVisible()})}),await s("Click Next to advance to second step",async()=>{const r=p(a.getByTestId("step-1")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-2");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(1)})}),await s("Click Next to advance to final step",async()=>{const r=p(a.getByTestId("step-2")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-3");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(2)})}),await s("Complete tour",async()=>{const r=p(a.getByTestId("step-3")).getByTestId("action");await l.click(r),await c(()=>{const T=a.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(t.onComplete).toHaveBeenCalled()})})}},x={render:({onClose:i})=>e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",onClose:i,children:e.jsx(d.Step,{step:0,title:"First step",text:"Try closing this step",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click close button to close tour",async({args:a})=>{const r=p(t.getByTestId("step-1")).getByTestId("close");await l.click(r),await c(()=>{const T=t.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(a.onClose).toHaveBeenCalled()})})}},B={render:function(){const[s,t]=h.useState(!0);return e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{onClick:()=>t(!s),dataset:{testid:"toggle-button"},children:s?"Enable Tour":"Disable Tour"}),e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",disabled:s,children:e.jsx(d.Step,{step:0,title:"First step",text:"This step should be hidden when disabled",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Tour should be initially disabled",async()=>{const a=t.queryByTestId("step-1");n(a).toBeNull()}),await s("Click enable button to show tour",async()=>{const a=t.getByTestId("toggle-button");await l.click(a),await c(()=>{const o=t.getByTestId("step-1");n(o).toBeVisible()})})}},g=I(),S=I(),w={render:function(){const[s,t]=h.useState(!1),[a,o]=h.useState(!1);return e.jsxs(g.Provider,{totalSteps:2,disabled:!s,nextActionLabel:"Next",completeActionLabel:"Got it",children:[e.jsx(g.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"outer-step-1"},children:e.jsx(m,{onClick:()=>t(!0),dataset:{testid:"start-outer-tour"},children:"Start outer tour"})}),e.jsxs(S.Provider,{totalSteps:2,disabled:!a,nextActionLabel:"Next",completeActionLabel:"Done",children:[e.jsx(g.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"outer-step-2"},children:e.jsx(u,{children:"Outer Tour Step"})}),e.jsx(S.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"inner-step-1"},children:e.jsx(m,{onClick:()=>o(!0),dataset:{testid:"start-inner-tour"},children:"Start inner tour"})}),e.jsx(S.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"inner-step-2"},children:e.jsx(u,{children:"Inner Tour Step"})})]})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Start inner tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-inner-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("inner-step-1");n(o).toBeVisible()})}),await s("Advance inner tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("inner-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-2");n(r).toBeVisible()})}),await s("Complete inner tour",async()=>{const o=p(t.getByTestId("inner-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-1",{exact:!1});n(r).toBeNull()})}),await s("Start outer tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-outer-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("outer-step-1");n(o).toBeVisible()})}),await s("Advance outer tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("outer-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("outer-step-2");n(r).toBeVisible()})}),await s("Complete outer tour",async()=>{const o=p(t.getByTestId("outer-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("-step-",{exact:!1});n(r).toBeNull()})})}};function W(i){return new Promise(s=>setTimeout(s,i))}const b={render:()=>e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{children:"Click outside the tooltip"}),e.jsx(d.Provider,{totalSteps:1,nextActionLabel:"Next",completeActionLabel:"Got it",children:e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click outside the tooltip",()=>{const a=t.getByText("Click outside the tooltip");return l.click(a)}),await s("Wait for tooltip to be hidden",async()=>{await W(1e3);const a=t.getByTestId("step-1");n(a).toBeVisible()})}};var k,j,L;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
|
|
2
2
|
render: ({
|
|
3
3
|
onComplete,
|
|
4
4
|
onStepChange
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import{j as l}from"./jsx-runtime-BTJTZTIL.js";import{r as t}from"./index-Cb9e4tly.js";import{a as s}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{e as i,u as B,w as Ee}from"./index-BVDq5o4N.js";import{B as S}from"./Button-C89H73Uu.js";import{F as Ze}from"./FieldButton-CCz9-7Bu.js";import{F as De}from"./FieldLayout-_CFICI44.js";import{I as _e}from"./Icon-TCS4E3Ut.js";import{u as Ke,I as We,s as Oe}from"./FieldLayoutBase-DOSetr9A.js";import{m as qe}from"./classNames-BUL1Zq7e.js";import{w as p}from"./componentNames-Y1T_IIlY.js";import{I as Ne}from"./InputText-FNRxz3Ff.js";import{u as Ae}from"./useForcedRef--iGFM41p.js";import{u as Ue}from"./usePasswordField-D19lMeqK.js";import{a as $e}from"./useTheme-DpAUb62T.js";import{T as Je}from"./Text-B8k9gfOM.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-D0ZIVzRq.js";import"./Spinner-B2C3RkCF.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-SFH7Mw4x.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./useHostname-Y3PlXofY.js";import"./index-DdzHuZ-Y.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./FieldAdditionalText-Du1TBs7a.js";import"./constants-DL6gdbsq.js";import"./index-D1pfvbUR.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-B1DLZQ1U.js";import"./constants-BaXVdZRV.js";import"./text-centered-CznToR0o.js";const Xe=({onChange:e,onValueChange:a,...n},r)=>{const d=qe(Oe,p.InputPassword),o=Ke(u=>u.target.value,e,a);return l.jsx(We,{...n,ref:r,type:"password",className:d.join(" "),onChange:o,preplyDsComponent:p.InputPassword})},k=t.forwardRef(Xe);try{k.displayName="InputPassword",k.__docgenInfo={description:"",displayName:"InputPassword",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
|
|
2
|
+
@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
|
|
3
|
+
@see aria-hidden
|
|
4
|
+
@see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
|
|
5
|
+
@see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-required":{defaultValue:null,description:"Indicates that user input is required on the element before a form may be submitted.",name:"aria-required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"new-password"'},{value:'"current-password"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const Ye="PasswordField__j0q2B",ze={PasswordField:Ye},Ge=({title:e,titleId:a,...n},r)=>t.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:r,"aria-labelledby":a,...n},e?t.createElement("title",{id:a},e):null,t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M7.64869 7.23448L9.38632 8.9721C10.0868 8.36709 11.0004 8 12 8C14.2091 8 16 9.79086 16 12C16 12.9996 15.6329 13.9132 15.0279 14.6137L16.8567 16.4425C18.1386 15.5694 19.145 14.4662 19.8641 13.5108C20.282 12.9555 20.5954 12.4602 20.8026 12.1069C20.8244 12.0696 20.8451 12.034 20.8646 12C20.7767 11.8466 20.6643 11.6585 20.5277 11.4446C20.1339 10.8282 19.5446 10.0077 18.7644 9.19054C17.1952 7.54692 14.9391 6 12 6C10.3258 6 8.87752 6.50002 7.64869 7.23448ZM16.2096 18.6238L17.2929 19.7071C17.6834 20.0976 18.3166 20.0976 18.7071 19.7071C19.0976 19.3166 19.0976 18.6834 18.7071 18.2929L18.292 17.8778C19.6619 16.8835 20.717 15.7034 21.462 14.7135C21.9338 14.0868 22.2889 13.5259 22.5278 13.1187C22.6473 12.9148 22.7382 12.7486 22.8004 12.631C22.8315 12.5721 22.8554 12.5253 22.8722 12.492L22.8921 12.4521L22.898 12.4401L22.8999 12.436L22.9007 12.4345L22.901 12.4339C22.9011 12.4336 22.9012 12.4334 22 12L22.9012 12.4334C23.0329 12.1595 23.0329 11.8405 22.9012 11.5666L22 12C22.9012 11.5666 22.901 11.5663 22.9009 11.5659L22.9004 11.565L22.8993 11.5626L22.8961 11.5561L22.8859 11.5355C22.8775 11.5184 22.8657 11.4949 22.8505 11.4653C22.8202 11.4062 22.7764 11.3226 22.7192 11.2183C22.6047 11.0097 22.436 10.7169 22.2131 10.3679C21.7685 9.67183 21.1016 8.7423 20.211 7.80946C18.4387 5.95308 15.6949 4 12 4C9.69667 4 7.75788 4.76129 6.19804 5.78382L5.70711 5.29289C5.31658 4.90237 4.68342 4.90237 4.29289 5.29289C3.90237 5.68342 3.90237 6.31658 4.29289 6.70711L15.7842 18.1984C15.7899 18.2095 15.796 18.2205 15.8022 18.2315C15.9012 18.4052 16.0444 18.538 16.2096 18.6238ZM13.6063 13.1921C13.8541 12.8587 14 12.4463 14 12C14 10.8954 13.1046 10 12 10C11.5537 10 11.1413 10.1458 10.8079 10.3937L13.6063 13.1921ZM4.12143 8.87815C4.55691 9.21782 4.63459 9.8462 4.29493 10.2817C3.82421 10.8852 3.47093 11.4326 3.23687 11.8263C3.20005 11.8882 3.16624 11.9463 3.13544 12C3.22333 12.1533 3.33567 12.3415 3.47232 12.5554C3.86611 13.1718 4.4554 13.9923 5.23556 14.8095C6.80475 16.4531 9.06094 18 12 18C12.5523 18 13 18.4477 13 19C13 19.5523 12.5523 20 12 20C8.3051 20 5.56129 18.0469 3.78897 16.1905C2.89837 15.2577 2.23154 14.3282 1.78687 13.6321C1.56395 13.2831 1.39528 12.9903 1.28084 12.7817C1.22359 12.6774 1.17979 12.5938 1.14947 12.5347C1.13431 12.5051 1.1225 12.4816 1.11406 12.4645L1.1039 12.4439L1.10071 12.4374L1.09959 12.435L1.09915 12.4341C1.09896 12.4337 1.09878 12.4334 2 12C1.09878 11.5666 1.09885 11.5665 1.09891 11.5664L1.09906 11.5661L1.09938 11.5654L1.10017 11.5638L1.1023 11.5594L1.10884 11.546L1.13096 11.5017C1.14973 11.4645 1.17655 11.4123 1.21143 11.3467C1.28117 11.2156 1.38328 11.0304 1.51776 10.8042C1.78631 10.3525 2.18624 9.73329 2.7179 9.05165C3.05756 8.61617 3.68595 8.53849 4.12143 8.87815ZM2 12L1.09878 12.4334C0.967073 12.1595 0.967073 11.8405 1.09878 11.5666L2 12Z",fill:"currentColor"})),Qe=t.forwardRef(Ge),ea=({title:e,titleId:a,...n},r)=>t.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:r,"aria-labelledby":a,...n},e?t.createElement("title",{id:a},e):null,t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M3.47232 12.5554C3.33567 12.3415 3.22333 12.1533 3.13544 12C3.22333 11.8466 3.33567 11.6585 3.47232 11.4446C3.86611 10.8282 4.4554 10.0077 5.23556 9.19054C6.80475 7.54692 9.06094 6 12 6C14.9391 6 17.1952 7.54692 18.7644 9.19054C19.5446 10.0077 20.1339 10.8282 20.5277 11.4446C20.6643 11.6585 20.7767 11.8466 20.8646 12C20.7767 12.1533 20.6643 12.3415 20.5277 12.5554C20.1339 13.1718 19.5446 13.9923 18.7644 14.8095C17.1952 16.4531 14.9391 18 12 18C9.06094 18 6.80475 16.4531 5.23556 14.8095C4.4554 13.9923 3.86611 13.1718 3.47232 12.5554ZM22.9009 11.5659C22.901 11.5663 22.9012 11.5666 22 12C22.9012 12.4334 22.901 12.4337 22.9009 12.4341L22.9004 12.435L22.8993 12.4374L22.8961 12.4439L22.8859 12.4645C22.8775 12.4816 22.8657 12.5051 22.8505 12.5347C22.8202 12.5938 22.7764 12.6774 22.7192 12.7817C22.6047 12.9903 22.436 13.2831 22.2131 13.6321C21.7685 14.3282 21.1016 15.2577 20.211 16.1905C18.4387 18.0469 15.6949 20 12 20C8.3051 20 5.56129 18.0469 3.78897 16.1905C2.89837 15.2577 2.23154 14.3282 1.78687 13.6321C1.56395 13.2831 1.39528 12.9903 1.28084 12.7817C1.22359 12.6774 1.17979 12.5938 1.14947 12.5347C1.13431 12.5051 1.1225 12.4816 1.11406 12.4645L1.1039 12.4439L1.10071 12.4374L1.09959 12.435L1.09915 12.4341C1.09896 12.4337 1.09878 12.4334 2 12C1.09878 11.5666 1.09896 11.5663 1.09915 11.5659L1.09959 11.565L1.10071 11.5626L1.1039 11.5561L1.11406 11.5355C1.1225 11.5184 1.13431 11.4949 1.14947 11.4653C1.17979 11.4062 1.22359 11.3226 1.28084 11.2183C1.39528 11.0097 1.56395 10.7169 1.78687 10.3679C2.23154 9.67183 2.89837 8.7423 3.78897 7.80946C5.56129 5.95308 8.3051 4 12 4C15.6949 4 18.4387 5.95308 20.211 7.80946C21.1016 8.7423 21.7685 9.67183 22.2131 10.3679C22.436 10.7169 22.6047 11.0097 22.7192 11.2183C22.7764 11.3226 22.8202 11.4062 22.8505 11.4653C22.8657 11.4949 22.8775 11.5184 22.8859 11.5355L22.8961 11.5561L22.8993 11.5626L22.9004 11.565L22.9009 11.5659ZM22 12L22.9012 11.5666C23.0329 11.8405 23.0329 12.1595 22.9012 12.4334L22 12ZM1.09878 11.5666L2 12L1.09878 12.4334C0.967073 12.1595 0.967073 11.8405 1.09878 11.5666ZM10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8Z",fill:"currentColor"})),aa=t.forwardRef(ea),na=({title:e,titleId:a,...n},r)=>t.createElement("svg",{viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",ref:r,"aria-labelledby":a,...n},e?t.createElement("title",{id:a},e):null,t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8 5C8 2.79086 9.79086 1 12 1C14.2091 1 16 2.79086 16 5V9.10002C18.2822 9.56329 20 11.581 20 14V18C20 20.7614 17.7614 23 15 23H9C6.23858 23 4 20.7614 4 18V14C4 11.581 5.71776 9.56329 8 9.10002V5ZM14 5V9H10V5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5ZM18 14C18 12.3431 16.6569 11 15 11H9C7.34315 11 6 12.3431 6 14V18C6 19.6569 7.34315 21 9 21H15C16.6569 21 18 19.6569 18 18V14ZM12 18C13.1046 18 14 17.1046 14 16C14 14.8954 13.1046 14 12 14C10.8954 14 10 14.8954 10 16C10 17.1046 10.8954 18 12 18Z",fill:"currentColor"})),Ie=t.forwardRef(na),ta=({title:e,titleId:a,...n},r)=>t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:r,"aria-labelledby":a,...n},e?t.createElement("title",{id:a},e):null,t.createElement("path",{fillRule:"evenodd",d:"M3 5.414 4.414 4l14.85 14.85-1.415 1.413-1.936-1.935a9.695 9.695 0 0 1-3.913.806c-7 0-10-7-10-7s1.036-2.416 3.31-4.41L3 5.414Zm9.538 9.538 1.824 1.824a7.789 7.789 0 0 1-2.362.358c-2.764 0-4.77-1.364-6.16-2.86a12.39 12.39 0 0 1-1.543-2.069l-.042-.07.042-.072c.337-.566.85-1.32 1.544-2.068.271-.293.567-.58.886-.853l2.321 2.32a3 3 0 0 0 3.49 3.49Zm5.793-.868a12.455 12.455 0 0 0 1.372-1.879l.042-.07-.042-.072a12.39 12.39 0 0 0-1.544-2.068C16.77 8.5 14.764 7.135 12 7.135c-.203 0-.402.007-.597.02L9.658 5.412A9.869 9.869 0 0 1 12 5.134c7 0 10 7 10 7s-.712 1.662-2.253 3.367l-1.416-1.417ZM3.836 12.927v.002-.002Z",clipRule:"evenodd"})),ra=t.forwardRef(ta),la=({title:e,titleId:a,...n},r)=>t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:r,"aria-labelledby":a,...n},e?t.createElement("title",{id:a},e):null,t.createElement("path",{fillRule:"evenodd",d:"M12 19c-7 0-10-7-10-7s3-7 10-7 10 7 10 7-3 7-10 7Zm-8.164-6.207v.002-.002Zm.46-.864L4.256 12l.042.07c.337.568.85 1.322 1.544 2.07C7.23 15.635 9.236 17 12 17s4.77-1.364 6.16-2.86a12.39 12.39 0 0 0 1.543-2.07l.042-.07-.042-.07a12.39 12.39 0 0 0-1.544-2.07C16.77 8.365 14.764 7 12 7S7.23 8.364 5.84 9.86a12.386 12.386 0 0 0-1.543 2.07ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z",clipRule:"evenodd"})),ua=t.forwardRef(la),sa=({title:e,titleId:a,...n},r)=>t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:r,"aria-labelledby":a,...n},e?t.createElement("title",{id:a},e):null,t.createElement("path",{fillRule:"evenodd",d:"M15 11V8a3 3 0 1 0-6 0v3h6ZM7 8v3H4v10h16V11h-3V8A5 5 0 0 0 7 8Zm-1 5h12v6H6v-6Zm8 4v-2h-4v2h4Z",clipRule:"evenodd"})),Le=t.forwardRef(sa);function P(e,a){switch(a){case"tokyo-ui-eye-hide":return e==="tokyo-ui"?ra:Qe;case"tokyo-ui-eye":return e==="tokyo-ui"?ua:aa;case"tokyo-ui-lock":return e==="tokyo-ui"?Le:Ie;default:throw new Error(`Unknown icon ${a}`)}}const oa=({showIcon:e,revealValue:a,id:n,...r},d)=>{const o=t.useRef(null),u=Ae();t.useImperativeHandle(d,()=>({setFocus:()=>{var c;return(c=u==null?void 0:u.current)==null?void 0:c.setFocus()},scrollIntoView:()=>{var c;return(c=o==null?void 0:o.current)==null?void 0:c.scrollIntoView()}}));const Re=Ue({id:n,...r},p.PasswordField),{layoutProps:Be,inputProps:F}=Re,[v,He]=t.useState(!1),ke=()=>He(!v),{theme:H}=$e(),Te=e?l.jsx(_e,{svg:H.name==="tokyo-ui"?Le:Ie}):void 0,Se=v||a?l.jsx(Ne,{...F,type:"text",ref:u}):l.jsx(k,{...F,ref:u}),Fe=v?P(H.name,"tokyo-ui-eye-hide"):P(H.name,"tokyo-ui-eye"),Pe=v?"Conceal password":"Reveal password",Me=a?void 0:l.jsx(Ze,{onClick:ke,svg:Fe,assistiveText:Pe}),je=qe(ze,p.PasswordField);return l.jsx(De,{...Be,icon:Te,button:Me,className:je.join(" "),input:Se,inputHandle:u.current,ref:o,preplyDsComponent:p.PasswordField})},m=t.forwardRef(oa);try{m.displayName="PasswordField",m.__docgenInfo={description:"By default, this field acts as a controlled field and expects the parent\ncomponent to manage the state, by reacting to user input via the `onChange` or\n`onValueChange` props, and providing the latest state via the `value` prop.\n\nAlternatively, you can use it as an uncontrolled field using the\n`defaultValue` prop instead of the `value` prop.",displayName:"PasswordField",props:{id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",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"}]}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",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"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},wrapLabel:{defaultValue:null,description:"",name:"wrapLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},additionalText:{defaultValue:null,description:"",name:"additionalText",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"}]}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},errorMessage:{defaultValue:null,description:"",name:"errorMessage",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"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<Element>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<Element>"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<Element>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<Element>"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"new-password"'},{value:'"current-password"'}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}},showIcon:{defaultValue:null,description:"",name:"showIcon",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},revealValue:{defaultValue:null,description:"",name:"revealValue",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: InputImperativeHandle | null) => void"},{value:"RefObject<InputImperativeHandle>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const $a={title:"components/PasswordField",component:m,args:{label:"Password",placeholder:"Enter a password",inputDataset:{testid:"input"},defaultValue:"",onChange:s("onChange"),onBlur:s("onBlur"),onFocus:s("onFocus"),onClick:s("onClick"),onCopy:s("onCopy"),onKeyDown:s("onKeyDown"),onKeyUp:s("onKeyUp"),onPaste:s("onPaste"),onValueChange:s("onValueChange")},render:function(a){const n=t.useRef(null);return a.ref=n,l.jsx(m,{...a})}},f={parameters:{docs:{description:{story:"An empty field with a `label` and a `placeholder`."}}}},y={args:{defaultValue:"password"},play:async({canvas:e,step:a})=>{await a("Validate value",()=>{const n=e.getByTestId("input");return i(n).toHaveValue("password")}),await a("Edit and revalidate value",async()=>{const n=e.getByTestId("input");return await B.type(n,"123"),i(n).toHaveValue("password123")}),await a("Check password is concealed",()=>{const n=e.getByTestId("input");return i(n.type).toBe("password")}),await a("Reveal password",()=>{const n=e.getByTitle("Reveal password");return B.click(n)}),await a("Check password is revealed",()=>{const n=e.getByTestId("input");return i(n.type).toBe("text")}),await a("Conceal password",()=>{const n=e.getByTitle("Conceal password");return B.click(n)}),await a("Check password is concealed",()=>{const n=e.getByTestId("input");return i(n.type).toBe("password")})}},h={args:{defaultValue:"password",revealValue:!0}},w={args:{additionalText:"This is additional text"}},g={args:{required:!0}},C={args:{required:!0,requiredLabel:l.jsx(Je,{accent:"critical",variant:"m-bold",children:"Needed"})}},V={args:{hideLabel:!0}},b={args:{hasError:!0}},x={args:{hasError:!0,errorMessage:"This is an error message"}},E={args:{disabled:!0}},q={args:{readOnly:!0}},I={decorators:[(e,{args:a})=>l.jsxs("div",{style:{padding:"8px",margin:"8px"},children:[l.jsxs("p",{children:["You can"," ",l.jsx(S,{variant:"secondary",dataset:{testid:"focus-button"},onClick:()=>{var n,r;return(r=(n=a.ref)==null?void 0:n.current)==null?void 0:r.setFocus()},children:"Focus"})," ","the input imperatively."]}),l.jsx(e,{})]})],play:async({args:e,canvas:a})=>{if(!T(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const n=a.getByTestId("input");await B.click(a.getByTestId("focus-button")),await Ee(()=>i(n).toHaveFocus())}},L={decorators:[(e,{args:a})=>l.jsxs("div",{style:{height:"300px",overflow:"scroll",padding:"8px",margin:"8px"},children:[l.jsxs("p",{children:["You can"," ",l.jsx(S,{variant:"secondary",dataset:{testid:"scroll-button"},onClick:()=>{if(!T(a.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");a.ref.current.scrollIntoView()},children:"Scroll"})," ","the input into view imperatively."]}),l.jsx("div",{style:{height:"1000px",display:"flex",flexDirection:"column",justifyContent:"end",border:"2px dashed lightgray",padding:"16px"},children:l.jsx(e,{})})]})],play:async({args:e,canvas:a})=>{if(!T(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const n=a.getByTestId("input");e.ref.current.scrollIntoView(),await Ee(()=>i(n).toBeVisible())}};function T(e){return typeof e=="object"&&e!==null&&"current"in e&&e.current!==null&&typeof e.current=="object"&&"setFocus"in e.current}const R={tags:["!test"],parameters:{docs:{description:{story:'\nThe following code renders a `PasswordField` with the `required` flag,\n`placeholder` and some `additionalText`.\n\nWhen you click the "Show Password" button, the demo is now in control of the\n`revealValue` prop and the input hides the eye field button.\n'}},chromatic:{disableSnapshot:!0}},render:function(){const[a,n]=t.useState(void 0),[r,d]=t.useState(!1),o=t.useRef(null),u=()=>{d(!r)};return l.jsxs("div",{style:{maxWidth:"500px",display:"flex",flexDirection:"column"},children:[l.jsx(m,{ref:o,label:"Password",showIcon:!0,required:!0,placeholder:"e.g.: abc123%pt0!",additionalText:"Include letters, numbers and symbols",revealValue:r,value:a,onValueChange:n}),l.jsx(S,{onClick:u,children:"Show Password"})]})}};var M,j,Z;f.parameters={...f.parameters,docs:{...(M=f.parameters)==null?void 0:M.docs,source:{originalSource:`{
|
|
6
|
+
parameters: {
|
|
7
|
+
docs: {
|
|
8
|
+
description: {
|
|
9
|
+
story: \`An empty field with a \\\`label\\\` and a \\\`placeholder\\\`.\`
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}`,...(Z=(j=f.parameters)==null?void 0:j.docs)==null?void 0:Z.source}}};var D,_,K;y.parameters={...y.parameters,docs:{...(D=y.parameters)==null?void 0:D.docs,source:{originalSource:`{
|
|
14
|
+
args: {
|
|
15
|
+
defaultValue: 'password'
|
|
16
|
+
},
|
|
17
|
+
play: async ({
|
|
18
|
+
canvas,
|
|
19
|
+
step
|
|
20
|
+
}) => {
|
|
21
|
+
await step('Validate value', () => {
|
|
22
|
+
const input = canvas.getByTestId<HTMLInputElement>('input');
|
|
23
|
+
return expect(input).toHaveValue('password');
|
|
24
|
+
});
|
|
25
|
+
await step('Edit and revalidate value', async () => {
|
|
26
|
+
const input = canvas.getByTestId<HTMLInputElement>('input');
|
|
27
|
+
await userEvent.type(input, '123');
|
|
28
|
+
return expect(input).toHaveValue('password123');
|
|
29
|
+
});
|
|
30
|
+
await step('Check password is concealed', () => {
|
|
31
|
+
const input = canvas.getByTestId<HTMLInputElement>('input');
|
|
32
|
+
return expect(input.type).toBe('password');
|
|
33
|
+
});
|
|
34
|
+
await step('Reveal password', () => {
|
|
35
|
+
const revealButton = canvas.getByTitle('Reveal password');
|
|
36
|
+
return userEvent.click(revealButton);
|
|
37
|
+
});
|
|
38
|
+
await step('Check password is revealed', () => {
|
|
39
|
+
const input = canvas.getByTestId<HTMLInputElement>('input');
|
|
40
|
+
return expect(input.type).toBe('text');
|
|
41
|
+
});
|
|
42
|
+
await step('Conceal password', () => {
|
|
43
|
+
const revealButton = canvas.getByTitle('Conceal password');
|
|
44
|
+
return userEvent.click(revealButton);
|
|
45
|
+
});
|
|
46
|
+
await step('Check password is concealed', () => {
|
|
47
|
+
const input = canvas.getByTestId<HTMLInputElement>('input');
|
|
48
|
+
return expect(input.type).toBe('password');
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
}`,...(K=(_=y.parameters)==null?void 0:_.docs)==null?void 0:K.source}}};var W,O,N;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`{
|
|
52
|
+
args: {
|
|
53
|
+
defaultValue: 'password',
|
|
54
|
+
revealValue: true
|
|
55
|
+
}
|
|
56
|
+
}`,...(N=(O=h.parameters)==null?void 0:O.docs)==null?void 0:N.source}}};var A,U,$;w.parameters={...w.parameters,docs:{...(A=w.parameters)==null?void 0:A.docs,source:{originalSource:`{
|
|
57
|
+
args: {
|
|
58
|
+
additionalText: 'This is additional text'
|
|
59
|
+
}
|
|
60
|
+
}`,...($=(U=w.parameters)==null?void 0:U.docs)==null?void 0:$.source}}};var J,X,Y;g.parameters={...g.parameters,docs:{...(J=g.parameters)==null?void 0:J.docs,source:{originalSource:`{
|
|
61
|
+
args: {
|
|
62
|
+
required: true
|
|
63
|
+
}
|
|
64
|
+
}`,...(Y=(X=g.parameters)==null?void 0:X.docs)==null?void 0:Y.source}}};var z,G,Q;C.parameters={...C.parameters,docs:{...(z=C.parameters)==null?void 0:z.docs,source:{originalSource:`{
|
|
65
|
+
args: {
|
|
66
|
+
required: true,
|
|
67
|
+
requiredLabel: <Text accent="critical" variant="m-bold">
|
|
68
|
+
Needed
|
|
69
|
+
</Text>
|
|
70
|
+
}
|
|
71
|
+
}`,...(Q=(G=C.parameters)==null?void 0:G.docs)==null?void 0:Q.source}}};var ee,ae,ne;V.parameters={...V.parameters,docs:{...(ee=V.parameters)==null?void 0:ee.docs,source:{originalSource:`{
|
|
72
|
+
args: {
|
|
73
|
+
hideLabel: true
|
|
74
|
+
}
|
|
75
|
+
}`,...(ne=(ae=V.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var te,re,le;b.parameters={...b.parameters,docs:{...(te=b.parameters)==null?void 0:te.docs,source:{originalSource:`{
|
|
76
|
+
args: {
|
|
77
|
+
hasError: true
|
|
78
|
+
}
|
|
79
|
+
}`,...(le=(re=b.parameters)==null?void 0:re.docs)==null?void 0:le.source}}};var ue,se,oe;x.parameters={...x.parameters,docs:{...(ue=x.parameters)==null?void 0:ue.docs,source:{originalSource:`{
|
|
80
|
+
args: {
|
|
81
|
+
hasError: true,
|
|
82
|
+
errorMessage: 'This is an error message'
|
|
83
|
+
}
|
|
84
|
+
}`,...(oe=(se=x.parameters)==null?void 0:se.docs)==null?void 0:oe.source}}};var ie,de,ce;E.parameters={...E.parameters,docs:{...(ie=E.parameters)==null?void 0:ie.docs,source:{originalSource:`{
|
|
85
|
+
args: {
|
|
86
|
+
disabled: true
|
|
87
|
+
}
|
|
88
|
+
}`,...(ce=(de=E.parameters)==null?void 0:de.docs)==null?void 0:ce.source}}};var pe,me,ve;q.parameters={...q.parameters,docs:{...(pe=q.parameters)==null?void 0:pe.docs,source:{originalSource:`{
|
|
89
|
+
args: {
|
|
90
|
+
readOnly: true
|
|
91
|
+
}
|
|
92
|
+
}`,...(ve=(me=q.parameters)==null?void 0:me.docs)==null?void 0:ve.source}}};var fe,ye,he;I.parameters={...I.parameters,docs:{...(fe=I.parameters)==null?void 0:fe.docs,source:{originalSource:`{
|
|
93
|
+
decorators: [(Story, {
|
|
94
|
+
args
|
|
95
|
+
}) => <div style={{
|
|
96
|
+
padding: '8px',
|
|
97
|
+
margin: '8px'
|
|
98
|
+
}}>
|
|
99
|
+
<p>
|
|
100
|
+
You can{' '}
|
|
101
|
+
<Button variant="secondary" dataset={{
|
|
102
|
+
testid: 'focus-button'
|
|
103
|
+
}} onClick={() =>
|
|
104
|
+
// @ts-expect-error - This will fail gracefully,
|
|
105
|
+
// and the \`play\` function will assert it properly
|
|
106
|
+
args.ref?.current?.setFocus()}>
|
|
107
|
+
Focus
|
|
108
|
+
</Button>{' '}
|
|
109
|
+
the input imperatively.
|
|
110
|
+
</p>
|
|
111
|
+
<Story />
|
|
112
|
+
</div>],
|
|
113
|
+
play: async ({
|
|
114
|
+
args,
|
|
115
|
+
canvas
|
|
116
|
+
}) => {
|
|
117
|
+
if (!isImperativeHandleRef(args.ref)) {
|
|
118
|
+
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
119
|
+
}
|
|
120
|
+
const input = canvas.getByTestId('input');
|
|
121
|
+
await userEvent.click(canvas.getByTestId('focus-button'));
|
|
122
|
+
await waitFor(() => expect(input).toHaveFocus());
|
|
123
|
+
}
|
|
124
|
+
}`,...(he=(ye=I.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var we,ge,Ce;L.parameters={...L.parameters,docs:{...(we=L.parameters)==null?void 0:we.docs,source:{originalSource:`{
|
|
125
|
+
decorators: [(Story, {
|
|
126
|
+
args
|
|
127
|
+
}) => <div style={{
|
|
128
|
+
height: '300px',
|
|
129
|
+
overflow: 'scroll',
|
|
130
|
+
padding: '8px',
|
|
131
|
+
margin: '8px'
|
|
132
|
+
}}>
|
|
133
|
+
<p>
|
|
134
|
+
You can{' '}
|
|
135
|
+
<Button variant="secondary" dataset={{
|
|
136
|
+
testid: 'scroll-button'
|
|
137
|
+
}} onClick={() => {
|
|
138
|
+
if (!isImperativeHandleRef(args.ref)) {
|
|
139
|
+
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
140
|
+
}
|
|
141
|
+
args.ref.current.scrollIntoView();
|
|
142
|
+
}}>
|
|
143
|
+
Scroll
|
|
144
|
+
</Button>{' '}
|
|
145
|
+
the input into view imperatively.
|
|
146
|
+
</p>
|
|
147
|
+
<div style={{
|
|
148
|
+
height: '1000px',
|
|
149
|
+
display: 'flex',
|
|
150
|
+
flexDirection: 'column',
|
|
151
|
+
justifyContent: 'end',
|
|
152
|
+
border: '2px dashed lightgray',
|
|
153
|
+
padding: '16px'
|
|
154
|
+
}}>
|
|
155
|
+
<Story />
|
|
156
|
+
</div>
|
|
157
|
+
</div>],
|
|
158
|
+
play: async ({
|
|
159
|
+
args,
|
|
160
|
+
canvas
|
|
161
|
+
}) => {
|
|
162
|
+
if (!isImperativeHandleRef(args.ref)) {
|
|
163
|
+
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
164
|
+
}
|
|
165
|
+
const input = canvas.getByTestId('input');
|
|
166
|
+
args.ref.current.scrollIntoView();
|
|
167
|
+
await waitFor(() => expect(input).toBeVisible());
|
|
168
|
+
}
|
|
169
|
+
}`,...(Ce=(ge=L.parameters)==null?void 0:ge.docs)==null?void 0:Ce.source}}};var Ve,be,xe;R.parameters={...R.parameters,docs:{...(Ve=R.parameters)==null?void 0:Ve.docs,source:{originalSource:`{
|
|
170
|
+
tags: ['!test'],
|
|
171
|
+
parameters: {
|
|
172
|
+
docs: {
|
|
173
|
+
description: {
|
|
174
|
+
story: \`
|
|
175
|
+
The following code renders a \\\`PasswordField\\\` with the \\\`required\\\` flag,
|
|
176
|
+
\\\`placeholder\\\` and some \\\`additionalText\\\`.
|
|
177
|
+
|
|
178
|
+
When you click the "Show Password" button, the demo is now in control of the
|
|
179
|
+
\\\`revealValue\\\` prop and the input hides the eye field button.
|
|
180
|
+
\`
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
chromatic: {
|
|
184
|
+
disableSnapshot: true
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
render: function Story() {
|
|
188
|
+
const [value, setValue] = useState<string | undefined>(undefined);
|
|
189
|
+
const [revealValue, setRevealValue] = useState(false);
|
|
190
|
+
const fieldRef = useRef(null);
|
|
191
|
+
const handleClick = () => {
|
|
192
|
+
setRevealValue(!revealValue);
|
|
193
|
+
};
|
|
194
|
+
return <div style={{
|
|
195
|
+
maxWidth: '500px',
|
|
196
|
+
display: 'flex',
|
|
197
|
+
flexDirection: 'column'
|
|
198
|
+
}}>
|
|
199
|
+
<PasswordField ref={fieldRef} label="Password" showIcon required placeholder="e.g.: abc123%pt0!" additionalText="Include letters, numbers and symbols" revealValue={revealValue} value={value} onValueChange={setValue} />
|
|
200
|
+
<Button onClick={handleClick}>Show Password</Button>
|
|
201
|
+
</div>;
|
|
202
|
+
}
|
|
203
|
+
}`,...(xe=(be=R.parameters)==null?void 0:be.docs)==null?void 0:xe.source}}};const Ja=["Basic","WithValue","ValueAlwaysRevealed","WithAdditionalText","Required","RequiredWithCustomLabel","WithHiddenLabel","HasError","HasErrorWithMessage","Disabled","ReadOnly","ImperativeSetFocus","ImperativeScrollIntoView","Example"];export{f as Basic,E as Disabled,R as Example,b as HasError,x as HasErrorWithMessage,L as ImperativeScrollIntoView,I as ImperativeSetFocus,q as ReadOnly,g as Required,C as RequiredWithCustomLabel,h as ValueAlwaysRevealed,w as WithAdditionalText,V as WithHiddenLabel,y as WithValue,Ja as __namedExportsOrder,$a as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as C}from"./index-Cb9e4tly.js";import{g as I}from"./index-DdzHuZ-Y.js";import{w}from"./componentNames-Y1T_IIlY.js";import{I as g}from"./IconButton-
|
|
1
|
+
import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{r as C}from"./index-Cb9e4tly.js";import{g as I}from"./index-DdzHuZ-Y.js";import{w}from"./componentNames-Y1T_IIlY.js";import{I as g}from"./IconButton-nN3VsXQJ.js";import{L as F}from"./LayoutFlex-dzXpor-q.js";import{F as M,a as T}from"./TokyoUIMinus-RacYe9uc.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-D0ZIVzRq.js";import"./Spinner-B2C3RkCF.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-SFH7Mw4x.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const k="ProgressBar__-Ss9D",q={ProgressBar:k},l=({min:a=0,max:s=100,value:t,"aria-label":r,dataset:o})=>{const p=I(o,{preplyDsComponent:w.ProgressBar}),c=(t-a)/(s-a)*100,d=`${Math.max(0,Math.min(100,c))}%`;return e.jsx("div",{...p,className:q.ProgressBar,role:"progressbar","aria-label":r,"aria-valuetext":d,"aria-valuenow":t,"aria-valuemin":a,"aria-valuemax":s,style:{"--progress-percentage":d}})};try{l.displayName="ProgressBar",l.__docgenInfo={description:"A component that visually displays continuous progress.\n\nFor a series of discrete progress steps, use the `ProgressSteps` component instead.",displayName:"ProgressBar",props:{min:{defaultValue:{value:"0"},description:"The minimum value of the progress bar.",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:{value:"100"},description:"The maximum value of the progress bar.",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"The current value of the progress bar.",name:"value",required:!0,type:{name:"number"}},"aria-label":{defaultValue:null,description:`A description of the progress bar for screen readers.
|
|
2
2
|
@example 'Onboarding', 'Checkout', 'Survey', etc.`,name:"aria-label",required:!0,type:{name:"string"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const ae={title:"Components/ProgressBar",component:l,parameters:{docs:{description:{component:"A component that visually indicates progress through a range of values."}}},decorators:[a=>e.jsx("div",{style:{padding:"32px",width:"500px"},children:e.jsx(a,{})})],args:{"aria-label":"Story"}},n={tags:["!test"],args:{value:10,min:0,max:100},render:function({value:s,...t}){const[r,o]=C.useState(s),p=()=>o(Math.min(r+10,100)),c=()=>o(Math.max(r-10,0));return e.jsxs(F,{alignItems:"center",gap:"12",children:[e.jsx(g,{svg:M,assistiveText:"Subtract",onClick:c}),e.jsx("div",{style:{width:150},children:e.jsx(l,{...t,value:r})}),e.jsx(g,{svg:T,assistiveText:"Add",onClick:p})]})}},i={args:{value:0,min:0,max:100}},u={args:{value:100,min:0,max:100}},m={args:{value:2,min:1,max:5}};var v,x,f;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.docs,source:{originalSource:`{
|
|
3
3
|
tags: ['!test'],
|
|
4
4
|
args: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{P as v}from"./ProgressSteps-DQ0i9Vaf.js";import{L as y}from"./LayoutFlex-
|
|
1
|
+
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as h}from"./index-Cb9e4tly.js";import{P as v}from"./ProgressSteps-DQ0i9Vaf.js";import{L as y}from"./LayoutFlex-dzXpor-q.js";import{I as c}from"./IconButton-nN3VsXQJ.js";import{F as b,a as L}from"./TokyoUIMinus-RacYe9uc.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-D1pfvbUR.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./componentNames-Y1T_IIlY.js";import"./filterHTMLAttributes-DYdLqcvH.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-D0ZIVzRq.js";import"./Spinner-B2C3RkCF.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-Y3PlXofY.js";import"./index-CC6DAVyL.js";const W={title:"Components/ProgressSteps",component:v,decorators:[a=>t.jsx("div",{style:{padding:"32px",width:"500px"},children:t.jsx(a,{})})],args:{"aria-label":"Story"}},r={tags:["!test"],args:{currentStep:6,totalSteps:6},render:function({currentStep:C,totalSteps:p,...j}){const[o,n]=h.useState(C),F=()=>n(Math.min(o+1,p)),I=()=>n(Math.max(o-1,1));return t.jsxs(y,{alignItems:"center",gap:"12",children:[t.jsx(c,{svg:b,assistiveText:"Subtract",onClick:I}),t.jsx(v,{...j,currentStep:o,totalSteps:p}),t.jsx(c,{svg:L,assistiveText:"Add",onClick:F})]})}},e={args:{currentStep:1,totalSteps:6}},s={args:{currentStep:6,totalSteps:6}};var i,m,u;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
|
|
2
2
|
tags: ['!test'],
|
|
3
3
|
args: {
|
|
4
4
|
currentStep: 6,
|