@preply/ds-docs 2.2.2 → 2.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/dist/assets/{00.LayoutFlex.stories-DG5XDWWv.js → 00.LayoutFlex.stories-D9Mbli09.js} +1 -1
- package/dist/assets/{00.applications-D9LRSiJ2.js → 00.applications-h3eU30x1.js} +1 -1
- package/dist/assets/{00.favicons.guide-Ckn8Ny70.js → 00.favicons.guide-BAXqiQQX.js} +1 -1
- package/dist/assets/{00.token-explorer-r_cr8B1c.js → 00.token-explorer-Dm9UX3N0.js} +8 -8
- package/dist/assets/{00.using-responsive-props-C6sHJ8kz.js → 00.using-responsive-props-CzuKWDWH.js} +1 -1
- package/dist/assets/01.semantic-tokens-BJHIZq-S.js +2 -0
- package/dist/assets/{01.using-shorthand-props-C9Ntfrh8.js → 01.using-shorthand-props-w68fjJ1S.js} +1 -1
- package/dist/assets/10.Combinations.stories-DpIFw2ZH.js +144 -0
- package/dist/assets/{10.fonts.guide-e6UD4uLu.js → 10.fonts.guide-Dy8ifEG0.js} +1 -1
- package/dist/assets/{10.ssr-CVR5x6k2.js → 10.ssr-CTf7FA6T.js} +1 -1
- package/dist/assets/{11.languageFont.explorer-D-2_ljwo.js → 11.languageFont.explorer-CzzsAo_-.js} +4 -4
- package/dist/assets/{11.ssr.app-router-DCaas1Jg.js → 11.ssr.app-router-1a1bLSxS.js} +1 -1
- package/dist/assets/{20.libraries-DaFUTy97.js → 20.libraries-cfFMZ5jt.js} +1 -1
- package/dist/assets/30.icons.explorer-DkDUlAAs.js +73 -0
- package/dist/assets/{30.storybook-CNA1zJjZ.js → 30.storybook-Df7y_pEg.js} +1 -1
- package/dist/assets/40.illustrations.explorer-Cp-KWsVv.js +21 -0
- package/dist/assets/{90.advanced-CR3aXZf3.js → 90.advanced-hQWASLuO.js} +1 -1
- package/dist/assets/{AlertDialog.stories-CB_cqbh2.js → AlertDialog.stories-BYaM3Dmh.js} +1 -1
- package/dist/assets/Avatar-BhXAiEHx.js +1 -0
- package/dist/assets/Avatar-DB1aMzdM.js +6 -0
- package/dist/assets/{Avatar.stories--exyM3AW.js → Avatar.stories-DjqCRDPm.js} +1 -1
- package/dist/assets/{AvatarWithStatus.stories-DoxREpBO.js → AvatarWithStatus.stories-BZuSG4Su.js} +2 -2
- package/dist/assets/{Badge.stories-CkfGCM6P.js → Badge.stories-DUeSVdhy.js} +2 -2
- package/dist/assets/Box.stories-Nfk41bTN.js +44 -0
- package/dist/assets/{Button-Ua3wdhT5.js → Button-BwzVXfnD.js} +1 -1
- package/dist/assets/Button-DBRxFdD6.js +1 -0
- package/dist/assets/{Button.stories-Ch27R8oX.js → Button.stories-Ds7LLJCv.js} +1 -1
- package/dist/assets/ButtonBase-fjWfWc99.js +8 -0
- package/dist/assets/Checkbox-CLpuKQf1.js +10 -0
- package/dist/assets/{Checkbox.stories-D3hadrXr.js → Checkbox.stories-BpslrBRV.js} +1 -1
- package/dist/assets/Checkbox.tests.stories-CunSiMPy.js +137 -0
- package/dist/assets/{Chips.stories-DRsHKMsQ.js → Chips.stories-BpSsn1sj.js} +4 -4
- package/dist/assets/{Color-YHDXOIA2-B7l-M1yz.js → Color-YHDXOIA2-nYlMi6NW.js} +1 -1
- package/dist/assets/{Dialog.stories-DxdwCMLf.js → Dialog.stories-BjLQxUlw.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-CwOeTrS1.js → DocsRenderer-CFRXHY34-E44rqLii.js} +1 -1
- package/dist/assets/FieldButton-BcfNDhpZ.js +1 -0
- package/dist/assets/FieldButton.stories-DiyzxI51.js +1 -0
- package/dist/assets/{FieldLayout-BTyC7lWj.js → FieldLayout-Df4DLDsB.js} +1 -1
- package/dist/assets/{FieldLayout.stories-CuEj0T8M.js → FieldLayout.stories-XL0oFgId.js} +1 -1
- package/dist/assets/{FieldLayoutBase-F3pRKFiA.js → FieldLayoutBase-anE7xqIx.js} +2 -2
- package/dist/assets/Heading-Iho_snJl.js +2 -0
- package/dist/assets/{Heading.stories-D8_2U4kZ.js → Heading.stories-BmAkaflC.js} +1 -1
- package/dist/assets/Icon-BlrxZqIa.js +1 -0
- package/dist/assets/Icon-CzZtXwMO.js +8 -0
- package/dist/assets/{Icon-RSC-Vg8p_sFp.js → Icon-RSC-FCfhIsMz.js} +1 -1
- package/dist/assets/{Icon.stories-D8MBZIDN.js → Icon.stories-B1XRazs6.js} +1 -1
- package/dist/assets/{IconButton-BUDpAbUP.js → IconButton-BXhZQuQT.js} +1 -1
- package/dist/assets/InputText-DsxbN3CG.js +5 -0
- package/dist/assets/LayoutFlex-B25JvLRp.js +1 -0
- package/dist/assets/LayoutFlex-DVn5GUOH.js +1 -0
- package/dist/assets/{Text-BjBJEVRG.css → LayoutFlex-a_rYMhDk.css} +1 -1
- package/dist/assets/LayoutFlexItem-BoPow6tI.js +1 -0
- package/dist/assets/LayoutGrid-BPWOaksx.js +1 -0
- package/dist/assets/LayoutGrid.stories-DDK_v_6q.js +88 -0
- package/dist/assets/LayoutGridItem-DbVmH61j.js +1 -0
- package/dist/assets/{Link.stories-D970H-zX.js → Link.stories-BV1DTHIx.js} +6 -6
- package/dist/assets/Loader.stories-BtMhSe5v.js +37 -0
- package/dist/assets/{NumberField.stories-CmsQI4vK.js → NumberField.stories-DLUFUbhI.js} +2 -2
- 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-CBrKU8Xk.js → OnboardingTooltip-BPM5tdAw.js} +1 -1
- package/dist/assets/{OnboardingTooltip.stories-Co4Xw1ei.js → OnboardingTooltip.stories-Ddrm-Vy0.js} +1 -1
- package/dist/assets/{OnboardingTooltip.tests.stories-BNTOBN_G.js → OnboardingTooltip.tests.stories-BHVQqSnl.js} +1 -1
- package/dist/assets/{OnboardingTour-D3bCOYvo.js → OnboardingTour-CoyXtu8b.js} +1 -1
- package/dist/assets/{OnboardingTour.stories-IjbV5XsB.js → OnboardingTour.stories-vU8ghqhL.js} +2 -2
- package/dist/assets/{OnboardingTour.tests.stories-EupxMCzm.js → OnboardingTour.tests.stories-vXlx1Tk2.js} +1 -1
- package/dist/assets/PasswordField.stories-BGY7rjXV.js +203 -0
- package/dist/assets/PreplyLogo.stories-_fxAXZGE.js +97 -0
- package/dist/assets/{ProgressBar.stories-uMqhJXI-.js → ProgressBar.stories-BclbcX02.js} +1 -1
- package/dist/assets/{ProgressSteps.stories-CD8imjKH.js → ProgressSteps.stories-_F3izKgu.js} +1 -1
- package/dist/assets/SelectField.stories-_QOq1bZM.js +182 -0
- package/dist/assets/{ShowOnIntersection.stories-DkmJRWg7.js → ShowOnIntersection.stories-kLcUye2N.js} +1 -1
- package/dist/assets/{Steps-D250tL4K.js → Steps-Dhp0iBn3.js} +1 -1
- package/dist/assets/{Steps.stories-D87rOP2-.js → Steps.stories-Bte8vve5.js} +1 -1
- package/dist/assets/Text-C6Y3rIRK.js +1 -0
- package/dist/assets/{Text.stories-DGPV9-zq.js → Text.stories-X4B6SOqs.js} +1 -1
- package/dist/assets/TextField.stories-BNT31zf0.js +178 -0
- package/dist/assets/TextHighlighted-BzUuo56x.js +1 -0
- package/dist/assets/TextHighlighted.stories-BnvdwfAX.js +32 -0
- package/dist/assets/TextInline.stories-BlmLch3R.js +37 -0
- package/dist/assets/TextareaField.stories-DGd7H0kt.js +221 -0
- package/dist/assets/{Toast.stories-C11cgX_6.js → Toast.stories-BrR9WTSV.js} +1 -1
- package/dist/assets/{Tooltip.stories-Dq5PJhdA.js → Tooltip.stories-C5jfWW6M.js} +1 -1
- package/dist/assets/{Tooltip.tests.stories-Cie8T0vz.js → Tooltip.tests.stories-D6ZXwY8n.js} +1 -1
- package/dist/assets/{breakpoints-DUiEWk32.js → breakpoints-BRV2oI45.js} +1 -1
- package/dist/assets/{breakpoints-Kkq9QlyD.js → breakpoints-CZRP5Alm.js} +1 -1
- package/dist/assets/{breakpoints-BRdPP1TZ.js → breakpoints-sSFugu-b.js} +1 -1
- package/dist/assets/{changelog-cNICkEng.js → changelog-B1t0y4q9.js} +124 -110
- package/dist/assets/{entry-preview-1hDLzyVO.js → entry-preview-gixUDv64.js} +1 -1
- package/dist/assets/filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js +1 -0
- package/dist/assets/filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js +1 -0
- package/dist/assets/{getTokenVar-Dcfo1be_.js → getTokenVar-CybtM9M1.js} +1 -1
- package/dist/assets/{hover-BGigwCNJ.js → hover-BiJvfb0v.js} +1 -1
- package/dist/assets/{hover-Cyb6UrgY.js → hover-D4e5NPL-.js} +1 -1
- package/dist/assets/{hover-DtM1J8qe.js → hover-swm44S6H.js} +1 -1
- package/dist/assets/{iframe-BH3uiHBc.js → iframe-D-owUXoQ.js} +2 -2
- package/dist/assets/{index-Ck13yCbr.js → index-DR0BJ77C.js} +3 -3
- package/dist/assets/{index-BS21oJwQ.js → index-DaKSiyPo.js} +1 -1
- package/dist/assets/{intro-CSxtP1xn.js → intro-BmEWNarv.js} +1 -1
- package/dist/assets/{migrating-from-less-ippcIs1q.js → migrating-from-less-OVTYMVPH.js} +1 -1
- package/dist/assets/{playground.stories-DL5fpOBd.js → playground.stories-BXB-tnbw.js} +4 -4
- package/dist/assets/{preview-_3frqnfu.js → preview-DBV_6kXj.js} +1 -1
- package/dist/assets/{preview-CM4C4-L-.js → preview-DfxRAFJo.js} +2 -2
- package/dist/assets/{preview-D_fhqkVz.js → preview-_QLeU3Ae.js} +1 -1
- package/dist/assets/text-centered-C0V1O_Sd.js +1 -0
- package/dist/assets/{text-accent-CDvOoGdV.css → text-centered-fslmi4MP.css} +1 -1
- package/dist/assets/{tokens-xt6pG3U-.js → tokens-2b0Aegc5.js} +1 -1
- package/dist/assets/{tokens-CJ63pfRL.js → tokens-B5EFsLtR.js} +1 -1
- package/dist/assets/{tokens-C1MGvdIw.js → tokens-CvzHiOXz.js} +1 -1
- package/dist/assets/{usePortalElement-2c19axHO.js → usePortalElement-DnCZkF76.js} +1 -1
- package/dist/assets/useToken-BExS62AK.js +1 -0
- package/dist/assets/{welcome-CT5T3CAe.js → welcome-BjgujnHV.js} +1 -1
- package/dist/assets/{zeroheight-5br1IU2I.js → zeroheight-DeWlsak-.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +1154 -1127
- package/dist/project.json +1 -1
- package/package.json +3 -3
- package/dist/assets/01.semantic-tokens-CrBTxkww.js +0 -2
- package/dist/assets/10.Combinations.stories-Ce5YVZgO.js +0 -144
- package/dist/assets/30.icons.explorer-C9gwiQSc.js +0 -72
- package/dist/assets/40.illustrations.explorer-CE4NkG7U.js +0 -21
- package/dist/assets/Avatar-CH0_UrRN.js +0 -6
- package/dist/assets/Avatar-Iyph9-aQ.js +0 -1
- package/dist/assets/Box.stories-BmdIAENY.js +0 -44
- package/dist/assets/Button-BzRWDefj.js +0 -1
- package/dist/assets/ButtonBase-D0ZIVzRq.js +0 -8
- package/dist/assets/Checkbox-BxvcX_wW.js +0 -10
- package/dist/assets/Checkbox.tests.stories-1YpjlZVu.js +0 -137
- package/dist/assets/FieldButton-CCz9-7Bu.js +0 -1
- package/dist/assets/FieldButton.stories-Cf4ZQ0zO.js +0 -1
- package/dist/assets/Heading-CQ-2lErO.js +0 -2
- package/dist/assets/Icon-CcRUbFZa.js +0 -1
- package/dist/assets/Icon-CsccYTZ-.js +0 -8
- package/dist/assets/InputText-D9JhNXoc.js +0 -5
- package/dist/assets/LayoutFlex-7DoB3s9X.css +0 -1
- package/dist/assets/LayoutFlex-BHnRSdTL.js +0 -1
- package/dist/assets/LayoutFlex-b2QXeA0z.js +0 -1
- package/dist/assets/LayoutFlexItem-CJkCBZ-T.js +0 -1
- package/dist/assets/LayoutGrid-CvUo6BcD.js +0 -1
- package/dist/assets/LayoutGrid.stories-SyasmoS3.js +0 -88
- package/dist/assets/LayoutGridItem-CxfS8XlV.js +0 -1
- package/dist/assets/Loader.stories-BYeEl9cb.js +0 -37
- package/dist/assets/PasswordField.stories-BF8iWcu_.js +0 -203
- package/dist/assets/PreplyLogo.stories-Cb304jZX.js +0 -97
- package/dist/assets/SelectField.stories-pGSDbpvG.js +0 -182
- package/dist/assets/Text-D7kiVARi.js +0 -1
- package/dist/assets/Text-QKoyPmSP.js +0 -1
- package/dist/assets/TextField.stories-CNsyGMQ7.js +0 -178
- package/dist/assets/TextHighlighted-DMdISSz2.js +0 -1
- package/dist/assets/TextHighlighted.stories-CbkTjtVw.js +0 -32
- package/dist/assets/TextInline.stories-DTtJTDzJ.js +0 -37
- package/dist/assets/TextareaField.stories-D6Ov6Kwe.js +0 -221
- package/dist/assets/filterHTMLAttributes-DYdLqcvH.js +0 -1
- package/dist/assets/filterHTMLAttributes-UOns5Q7s.js +0 -1
- package/dist/assets/text-accent-CZD2Hmtq.js +0 -1
- package/dist/assets/text-centered-Bk7GkK8R.js +0 -1
- package/dist/assets/text-centered-DN9XHxjM.css +0 -1
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{r as j}from"./index-Cb9e4tly.js";import{g as D,a as q}from"./text-accent-DZDDtpIt.js";import{m as p,s as L,b as V}from"./classNames-BUL1Zq7e.js";import{f as A}from"./filterHTMLAttributes-DYdLqcvH.js";import{w as i}from"./componentNames-Y1T_IIlY.js";import{g as M}from"./index-DdzHuZ-Y.js";import{h as k,j as S}from"./defaults-B1rzzf6M.js";import{T as R}from"./Text-QKoyPmSP.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-centered-CznToR0o.js";const G="TextWeight__tMRbd",H={TextWeight:G,"TextWeight--weight-400":"TextWeight--weight-400__EopTe","TextWeight--weight-500":"TextWeight--weight-500__wlyrw","TextWeight--weight-700":"TextWeight--weight-700__sVSfY","TextWeight--weight-normal":"TextWeight--weight-normal__M5PxM","TextWeight--weight-medium":"TextWeight--weight-medium__8f3CD","TextWeight--weight-bold":"TextWeight--weight-bold__MG-yF"},P="TextWeight",F=e=>p(H,P,[L("weight",e)]),O="TextInline__fMaqi",U={TextInline:O,"TextInline--italic":"TextInline--italic__yG-Qj"},l=j.forwardRef(function({children:g,accent:r,color:h,weight:T=S,italic:f=!1,tag:x=k,dataset:y,..._},w){const b=p(U,i.TextInline,[V("italic",void 0,f)]),s=r?void 0:h,I=D(!s,r),W=q(s),N=F(T),C=[...b,...I,...W,...N],E={...A(_),ref:w,className:C.join(" "),...M(y,{preplyDsComponent:i.TextInline})};return t.jsx(x,{...E,children:g})});try{l.displayName="TextInline",l.__docgenInfo={description:"",displayName:"TextInline",props:{accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"critical"'},{value:'"inverted"'},{value:'"disabled"'},{value:'"selected"'},{value:'"accent"'},{value:'"accentDark"'},{value:'"placeholder"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"branded"'},{value:'"error"'}]}},color:{defaultValue:null,description:"@deprecated Use accent instead.",name:"color",required:!1,type:{name:"enum",value:[{value:'"white"'},{value:'"gray-100"'},{value:'"gray-200"'},{value:'"gray-300"'},{value:'"gray-400"'},{value:'"gray-500"'},{value:'"gray-600"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"green-100"'},{value:'"green-200"'},{value:'"green-300"'},{value:'"green-400"'},{value:'"green-500"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"magenta-100"'},{value:'"magenta-200"'},{value:'"magenta-300"'},{value:'"magenta-400"'},{value:'"magenta-500"'}]}},weight:{defaultValue:{value:"normal"},description:"",name:"weight",required:!1,type:{name:"enum",value:[{value:'"medium"'},{value:'"bold"'},{value:'"normal"'},{value:'"400"'},{value:'"500"'},{value:'"700"'}]}},italic:{defaultValue:{value:"false"},description:"",name:"italic",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"strong"'},{value:'"span"'},{value:'"em"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const ne={title:"components/TextInline",component:l},a=()=>t.jsxs("p",{children:["Lorem ",t.jsx(l,{children:"ipsum"})]});a.storyName="TextInline";const n={parameters:{chromatic:{disableSnapshot:!0}},render:e=>t.jsxs(R,{children:["Lorem ipsum ",t.jsx(l,{...e})]}),args:{children:"dolor sit amet",accent:"accentDark",tag:"span",dataset:{qaid:"text-inline"}},argTypes:{dataset:{control:"object"},children:{control:"text"},italic:{control:"boolean"},color:{table:{disable:!0}}}};var o,u,c;a.parameters={...a.parameters,docs:{...(o=a.parameters)==null?void 0:o.docs,source:{originalSource:`() => <p>
|
|
2
|
-
Lorem <TextInline>ipsum</TextInline>
|
|
3
|
-
</p>`,...(c=(u=a.parameters)==null?void 0:u.docs)==null?void 0:c.source}}};var m,d,v;n.parameters={...n.parameters,docs:{...(m=n.parameters)==null?void 0:m.docs,source:{originalSource:`{
|
|
4
|
-
parameters: {
|
|
5
|
-
chromatic: {
|
|
6
|
-
disableSnapshot: true
|
|
7
|
-
}
|
|
8
|
-
},
|
|
9
|
-
render: args => <Text>
|
|
10
|
-
Lorem ipsum <TextInline {...args} />
|
|
11
|
-
</Text>,
|
|
12
|
-
args: {
|
|
13
|
-
children: 'dolor sit amet',
|
|
14
|
-
accent: 'accentDark',
|
|
15
|
-
tag: 'span',
|
|
16
|
-
dataset: {
|
|
17
|
-
qaid: 'text-inline'
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
argTypes: {
|
|
21
|
-
dataset: {
|
|
22
|
-
control: 'object'
|
|
23
|
-
},
|
|
24
|
-
children: {
|
|
25
|
-
control: 'text'
|
|
26
|
-
},
|
|
27
|
-
italic: {
|
|
28
|
-
control: 'boolean'
|
|
29
|
-
},
|
|
30
|
-
// Disable deprecated props
|
|
31
|
-
color: {
|
|
32
|
-
table: {
|
|
33
|
-
disable: true
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}`,...(v=(d=n.parameters)==null?void 0:d.docs)==null?void 0:v.source}}};const re=["Base","Playground"];export{a as Base,n as Playground,re as __namedExportsOrder,ne as default};
|
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
import{j as n}from"./jsx-runtime-BTJTZTIL.js";import{r as s}from"./index-Cb9e4tly.js";import{a as r}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{e as i,u as Fe,w as Re}from"./index-BVDq5o4N.js";import{B as j}from"./Button-Ua3wdhT5.js";import{F as Be}from"./FieldLayout-BTyC7lWj.js";import{s as ke,u as je,I as _e}from"./FieldLayoutBase-F3pRKFiA.js";import{m as ze,s as De}from"./classNames-BUL1Zq7e.js";import{w as p}from"./componentNames-Y1T_IIlY.js";import{u as Le}from"./useForcedRef--iGFM41p.js";import{u as We}from"./useTextareaField-BP4f3uTe.js";import{T as Ke}from"./Text-QKoyPmSP.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"./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-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";const z=({onChange:e,onValueChange:a,resize:t="vertical",...l},o)=>{const d=ze(ke,p.Textarea,[De("resize",t)]),u=je(c=>c.target.value,e,a);return n.jsx(_e,{...l,ref:o,type:"textarea",className:d.join(" "),onChange:u,preplyDsComponent:p.Textarea})},B=s.forwardRef(z);try{z.displayName="TextareaLocal",z.__docgenInfo={description:"",displayName:"TextareaLocal",props:{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<Element>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},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"}]}},"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"'}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},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>"}]}},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>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:{value:"vertical"},description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"ValueChangeEventHandler<string>"}]}}}}}catch{}try{B.displayName="Textarea",B.__docgenInfo={description:"",displayName:"Textarea",props:{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<Element>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},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.
|
|
6
|
-
@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"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
|
|
7
|
-
@see aria-hidden
|
|
8
|
-
@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.
|
|
9
|
-
@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"'}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},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>"}]}},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>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:{value:"vertical"},description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},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 Ne="TextareaField__Wpx9P",Me={TextareaField:Ne},Pe=({id:e,...a},t)=>{const l=s.useRef(null),o=Le();s.useImperativeHandle(t,()=>({setFocus:()=>{var m;return(m=l==null?void 0:l.current)==null?void 0:m.setFocus()},scrollIntoView:()=>{var m;return(m=l==null?void 0:l.current)==null?void 0:m.scrollIntoView()}}));const{layoutProps:d,inputProps:u}=We({id:e,...a},p.TextareaField),c=ze(Me,p.TextareaField),f=n.jsx(B,{...u,ref:o});return n.jsx(Be,{...d,className:c.join(" "),input:f,inputHandle:o.current,ref:l,preplyDsComponent:p.TextareaField})},v=s.forwardRef(Pe);try{v.displayName="TextareaField",v.__docgenInfo={description:"",displayName:"TextareaField",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"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<Element>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"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>"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},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>"}]}},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>"}]}},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>"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"vertical"'},{value:'"horizontal"'},{value:'"both"'}]}},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 Ea={title:"components/TextareaField",component:v,args:{label:"Textarea",defaultValue:"",placeholder:"Enter text here",inputDataset:{testid:"input"},onChange:r("onChange"),onBlur:r("onBlur"),onFocus:r("onFocus"),onClick:r("onClick"),onCopy:r("onCopy"),onKeyDown:r("onKeyDown"),onKeyUp:r("onKeyUp"),onPaste:r("onPaste"),onValueChange:r("onValueChange")},render:function(a){const t=s.useRef(null);return a.ref=t,n.jsx(v,{...a})}},y={parameters:{docs:{description:{story:"An empty field with a `label` and a `placeholder`."}}}},h={args:{defaultValue:"Hey, you!"},play:async({canvas:e})=>{const a=e.getByTestId("input");return await i(a).toHaveValue("Hey, you!"),await Fe.type(a," How's it going?"),i(a).toHaveValue("Hey, you! How's it going?")}},g={args:{defaultValue:"Hey, you!",resize:"both"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"both"})}},b={args:{defaultValue:"Hey, you!",resize:"vertical"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"vertical"})}},V={args:{defaultValue:"Hey, you!",resize:"horizontal"},play:({canvas:e})=>{const a=e.getByTestId("input");i(a).toHaveStyle({resize:"horizontal"})}},x={args:{additionalText:"This is additional text"}},q={args:{required:!0}},E={args:{required:!0,requiredLabel:n.jsx(Ke,{accent:"critical",variant:"m-bold",children:"Needed"})}},w={args:{hideLabel:!0}},H={args:{hasError:!0}},C={args:{hasError:!0,errorMessage:"This is an error message"}},I={args:{disabled:!0}},T={args:{readOnly:!0}},S={decorators:[(e,{args:a})=>n.jsxs("div",{style:{padding:"8px",margin:"8px"},children:[n.jsxs("p",{children:["You can"," ",n.jsx(j,{variant:"secondary",dataset:{testid:"focus-button"},onClick:()=>{var t,l;return(l=(t=a.ref)==null?void 0:t.current)==null?void 0:l.setFocus()},children:"Focus"})," ","the input imperatively."]}),n.jsx(e,{})]})],play:async({args:e,canvas:a})=>{if(!k(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const t=a.getByTestId("input");await Fe.click(a.getByTestId("focus-button")),await Re(()=>i(t).toHaveFocus())}},F={decorators:[(e,{args:a})=>n.jsxs("div",{style:{height:"300px",overflow:"scroll",padding:"8px",margin:"8px"},children:[n.jsxs("p",{children:["You can"," ",n.jsx(j,{variant:"secondary",dataset:{testid:"scroll-button"},onClick:()=>{if(!k(a.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");a.ref.current.scrollIntoView()},children:"Scroll"})," ","the input into view imperatively."]}),n.jsx("div",{style:{height:"1000px",display:"flex",flexDirection:"column",justifyContent:"end",border:"2px dashed lightgray",padding:"16px"},children:n.jsx(e,{})})]})],play:async({args:e,canvas:a})=>{if(!k(e.ref))throw new Error("Expected ref.current to be an InputImperativeHandle");const t=a.getByTestId("input");e.ref.current.scrollIntoView(),await Re(()=>i(t).toBeVisible())}};function k(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 `TextareaField` with the `required` flag, a\n`button`, `placeholder` and some `additionalText`.\n\nWhen you click the "Submit" button, and the input `value` is empty:\n\n- Displays feedback via the `errorMessage` prop;\n- Brings the focus back to the field.\n'}},chromatic:{disableSnapshot:!0}},render:function(){const[a,t]=s.useState(""),[l,o]=s.useState(!1),d=l&&!a&&"Please provide your full name",u=s.useRef(null),c=()=>{var f;o(!0),a||(f=u==null?void 0:u.current)==null||f.setFocus()};return n.jsxs("div",{style:{maxWidth:"500px",display:"flex",flexDirection:"column"},children:[n.jsx(v,{value:a,label:"Full name",required:!0,placeholder:"e.g.: Mary Williams",additionalText:"Will be shown in your profile",onValueChange:t,errorMessage:d,ref:u,resize:"horizontal"}),n.jsx(j,{onClick:c,children:"Submit"})]})}};var _,D,L;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`{
|
|
10
|
-
parameters: {
|
|
11
|
-
docs: {
|
|
12
|
-
description: {
|
|
13
|
-
story: \`An empty field with a \\\`label\\\` and a \\\`placeholder\\\`.\`
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}`,...(L=(D=y.parameters)==null?void 0:D.docs)==null?void 0:L.source}}};var W,K,N;h.parameters={...h.parameters,docs:{...(W=h.parameters)==null?void 0:W.docs,source:{originalSource:`{
|
|
18
|
-
args: {
|
|
19
|
-
defaultValue: 'Hey, you!'
|
|
20
|
-
},
|
|
21
|
-
play: async ({
|
|
22
|
-
canvas
|
|
23
|
-
}) => {
|
|
24
|
-
const input = canvas.getByTestId('input');
|
|
25
|
-
await expect(input).toHaveValue('Hey, you!');
|
|
26
|
-
await userEvent.type(input, " How's it going?");
|
|
27
|
-
return expect(input).toHaveValue("Hey, you! How's it going?");
|
|
28
|
-
}
|
|
29
|
-
}`,...(N=(K=h.parameters)==null?void 0:K.docs)==null?void 0:N.source}}};var M,P,O;g.parameters={...g.parameters,docs:{...(M=g.parameters)==null?void 0:M.docs,source:{originalSource:`{
|
|
30
|
-
args: {
|
|
31
|
-
defaultValue: 'Hey, you!',
|
|
32
|
-
resize: 'both'
|
|
33
|
-
},
|
|
34
|
-
play: ({
|
|
35
|
-
canvas
|
|
36
|
-
}) => {
|
|
37
|
-
const textarea = canvas.getByTestId('input');
|
|
38
|
-
expect(textarea).toHaveStyle({
|
|
39
|
-
resize: 'both'
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
}`,...(O=(P=g.parameters)==null?void 0:P.docs)==null?void 0:O.source}}};var U,A,J;b.parameters={...b.parameters,docs:{...(U=b.parameters)==null?void 0:U.docs,source:{originalSource:`{
|
|
43
|
-
args: {
|
|
44
|
-
defaultValue: 'Hey, you!',
|
|
45
|
-
resize: 'vertical'
|
|
46
|
-
},
|
|
47
|
-
play: ({
|
|
48
|
-
canvas
|
|
49
|
-
}) => {
|
|
50
|
-
const textarea = canvas.getByTestId('input');
|
|
51
|
-
expect(textarea).toHaveStyle({
|
|
52
|
-
resize: 'vertical'
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
}`,...(J=(A=b.parameters)==null?void 0:A.docs)==null?void 0:J.source}}};var X,Y,$;V.parameters={...V.parameters,docs:{...(X=V.parameters)==null?void 0:X.docs,source:{originalSource:`{
|
|
56
|
-
args: {
|
|
57
|
-
defaultValue: 'Hey, you!',
|
|
58
|
-
resize: 'horizontal'
|
|
59
|
-
},
|
|
60
|
-
play: ({
|
|
61
|
-
canvas
|
|
62
|
-
}) => {
|
|
63
|
-
const textarea = canvas.getByTestId('input');
|
|
64
|
-
expect(textarea).toHaveStyle({
|
|
65
|
-
resize: 'horizontal'
|
|
66
|
-
});
|
|
67
|
-
}
|
|
68
|
-
}`,...($=(Y=V.parameters)==null?void 0:Y.docs)==null?void 0:$.source}}};var G,Q,Z;x.parameters={...x.parameters,docs:{...(G=x.parameters)==null?void 0:G.docs,source:{originalSource:`{
|
|
69
|
-
args: {
|
|
70
|
-
additionalText: 'This is additional text'
|
|
71
|
-
}
|
|
72
|
-
}`,...(Z=(Q=x.parameters)==null?void 0:Q.docs)==null?void 0:Z.source}}};var ee,ae,ne;q.parameters={...q.parameters,docs:{...(ee=q.parameters)==null?void 0:ee.docs,source:{originalSource:`{
|
|
73
|
-
args: {
|
|
74
|
-
required: true
|
|
75
|
-
}
|
|
76
|
-
}`,...(ne=(ae=q.parameters)==null?void 0:ae.docs)==null?void 0:ne.source}}};var te,le,re;E.parameters={...E.parameters,docs:{...(te=E.parameters)==null?void 0:te.docs,source:{originalSource:`{
|
|
77
|
-
args: {
|
|
78
|
-
required: true,
|
|
79
|
-
requiredLabel: <Text accent="critical" variant="m-bold">
|
|
80
|
-
Needed
|
|
81
|
-
</Text>
|
|
82
|
-
}
|
|
83
|
-
}`,...(re=(le=E.parameters)==null?void 0:le.docs)==null?void 0:re.source}}};var ue,se,ie;w.parameters={...w.parameters,docs:{...(ue=w.parameters)==null?void 0:ue.docs,source:{originalSource:`{
|
|
84
|
-
args: {
|
|
85
|
-
hideLabel: true
|
|
86
|
-
}
|
|
87
|
-
}`,...(ie=(se=w.parameters)==null?void 0:se.docs)==null?void 0:ie.source}}};var oe,de,ce;H.parameters={...H.parameters,docs:{...(oe=H.parameters)==null?void 0:oe.docs,source:{originalSource:`{
|
|
88
|
-
args: {
|
|
89
|
-
hasError: true
|
|
90
|
-
}
|
|
91
|
-
}`,...(ce=(de=H.parameters)==null?void 0:de.docs)==null?void 0:ce.source}}};var me,pe,ve;C.parameters={...C.parameters,docs:{...(me=C.parameters)==null?void 0:me.docs,source:{originalSource:`{
|
|
92
|
-
args: {
|
|
93
|
-
hasError: true,
|
|
94
|
-
errorMessage: 'This is an error message'
|
|
95
|
-
}
|
|
96
|
-
}`,...(ve=(pe=C.parameters)==null?void 0:pe.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:`{
|
|
97
|
-
args: {
|
|
98
|
-
disabled: true
|
|
99
|
-
}
|
|
100
|
-
}`,...(he=(ye=I.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var ge,be,Ve;T.parameters={...T.parameters,docs:{...(ge=T.parameters)==null?void 0:ge.docs,source:{originalSource:`{
|
|
101
|
-
args: {
|
|
102
|
-
readOnly: true
|
|
103
|
-
}
|
|
104
|
-
}`,...(Ve=(be=T.parameters)==null?void 0:be.docs)==null?void 0:Ve.source}}};var xe,qe,Ee;S.parameters={...S.parameters,docs:{...(xe=S.parameters)==null?void 0:xe.docs,source:{originalSource:`{
|
|
105
|
-
decorators: [(Story, {
|
|
106
|
-
args
|
|
107
|
-
}) => <div style={{
|
|
108
|
-
padding: '8px',
|
|
109
|
-
margin: '8px'
|
|
110
|
-
}}>
|
|
111
|
-
<p>
|
|
112
|
-
You can{' '}
|
|
113
|
-
<Button variant="secondary" dataset={{
|
|
114
|
-
testid: 'focus-button'
|
|
115
|
-
}} onClick={() =>
|
|
116
|
-
// @ts-expect-error - This will fail gracefully,
|
|
117
|
-
// and the \`play\` function will assert it properly
|
|
118
|
-
args.ref?.current?.setFocus()}>
|
|
119
|
-
Focus
|
|
120
|
-
</Button>{' '}
|
|
121
|
-
the input imperatively.
|
|
122
|
-
</p>
|
|
123
|
-
<Story />
|
|
124
|
-
</div>],
|
|
125
|
-
play: async ({
|
|
126
|
-
args,
|
|
127
|
-
canvas
|
|
128
|
-
}) => {
|
|
129
|
-
if (!isImperativeHandleRef(args.ref)) {
|
|
130
|
-
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
131
|
-
}
|
|
132
|
-
const input = canvas.getByTestId('input');
|
|
133
|
-
await userEvent.click(canvas.getByTestId('focus-button'));
|
|
134
|
-
await waitFor(() => expect(input).toHaveFocus());
|
|
135
|
-
}
|
|
136
|
-
}`,...(Ee=(qe=S.parameters)==null?void 0:qe.docs)==null?void 0:Ee.source}}};var we,He,Ce;F.parameters={...F.parameters,docs:{...(we=F.parameters)==null?void 0:we.docs,source:{originalSource:`{
|
|
137
|
-
decorators: [(Story, {
|
|
138
|
-
args
|
|
139
|
-
}) => <div style={{
|
|
140
|
-
height: '300px',
|
|
141
|
-
overflow: 'scroll',
|
|
142
|
-
padding: '8px',
|
|
143
|
-
margin: '8px'
|
|
144
|
-
}}>
|
|
145
|
-
<p>
|
|
146
|
-
You can{' '}
|
|
147
|
-
<Button variant="secondary" dataset={{
|
|
148
|
-
testid: 'scroll-button'
|
|
149
|
-
}} onClick={() => {
|
|
150
|
-
if (!isImperativeHandleRef(args.ref)) {
|
|
151
|
-
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
152
|
-
}
|
|
153
|
-
args.ref.current.scrollIntoView();
|
|
154
|
-
}}>
|
|
155
|
-
Scroll
|
|
156
|
-
</Button>{' '}
|
|
157
|
-
the input into view imperatively.
|
|
158
|
-
</p>
|
|
159
|
-
<div style={{
|
|
160
|
-
height: '1000px',
|
|
161
|
-
display: 'flex',
|
|
162
|
-
flexDirection: 'column',
|
|
163
|
-
justifyContent: 'end',
|
|
164
|
-
border: '2px dashed lightgray',
|
|
165
|
-
padding: '16px'
|
|
166
|
-
}}>
|
|
167
|
-
<Story />
|
|
168
|
-
</div>
|
|
169
|
-
</div>],
|
|
170
|
-
play: async ({
|
|
171
|
-
args,
|
|
172
|
-
canvas
|
|
173
|
-
}) => {
|
|
174
|
-
if (!isImperativeHandleRef(args.ref)) {
|
|
175
|
-
throw new Error('Expected ref.current to be an InputImperativeHandle');
|
|
176
|
-
}
|
|
177
|
-
const input = canvas.getByTestId('input');
|
|
178
|
-
args.ref.current.scrollIntoView();
|
|
179
|
-
await waitFor(() => expect(input).toBeVisible());
|
|
180
|
-
}
|
|
181
|
-
}`,...(Ce=(He=F.parameters)==null?void 0:He.docs)==null?void 0:Ce.source}}};var Ie,Te,Se;R.parameters={...R.parameters,docs:{...(Ie=R.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
|
|
182
|
-
tags: ['!test'],
|
|
183
|
-
parameters: {
|
|
184
|
-
docs: {
|
|
185
|
-
description: {
|
|
186
|
-
story: \`
|
|
187
|
-
The following code renders a \\\`TextareaField\\\` with the \\\`required\\\` flag, a
|
|
188
|
-
\\\`button\\\`, \\\`placeholder\\\` and some \\\`additionalText\\\`.
|
|
189
|
-
|
|
190
|
-
When you click the "Submit" button, and the input \\\`value\\\` is empty:
|
|
191
|
-
|
|
192
|
-
- Displays feedback via the \\\`errorMessage\\\` prop;
|
|
193
|
-
- Brings the focus back to the field.
|
|
194
|
-
\`
|
|
195
|
-
}
|
|
196
|
-
},
|
|
197
|
-
chromatic: {
|
|
198
|
-
disableSnapshot: true
|
|
199
|
-
}
|
|
200
|
-
},
|
|
201
|
-
render: function Story() {
|
|
202
|
-
const [value, setValue] = useState('');
|
|
203
|
-
const [submited, setSubmitted] = useState(false);
|
|
204
|
-
const errorMessage = submited && !value && 'Please provide your full name';
|
|
205
|
-
const fieldRef = useRef<InputImperativeHandle>(null);
|
|
206
|
-
const handleClick = () => {
|
|
207
|
-
setSubmitted(true);
|
|
208
|
-
if (!value) {
|
|
209
|
-
fieldRef?.current?.setFocus();
|
|
210
|
-
}
|
|
211
|
-
};
|
|
212
|
-
return <div style={{
|
|
213
|
-
maxWidth: '500px',
|
|
214
|
-
display: 'flex',
|
|
215
|
-
flexDirection: 'column'
|
|
216
|
-
}}>
|
|
217
|
-
<TextareaField value={value} label="Full name" required placeholder="e.g.: Mary Williams" additionalText="Will be shown in your profile" onValueChange={setValue} errorMessage={errorMessage} ref={fieldRef} resize="horizontal" />
|
|
218
|
-
<Button onClick={handleClick}>Submit</Button>
|
|
219
|
-
</div>;
|
|
220
|
-
}
|
|
221
|
-
}`,...(Se=(Te=R.parameters)==null?void 0:Te.docs)==null?void 0:Se.source}}};const wa=["Basic","WithValue","WithResize","WithVerticalResize","WithHorizontalResize","WithAdditionalText","Required","RequiredWithCustomLabel","WithHiddenLabel","HasError","HasErrorWithMessage","Disabled","ReadOnly","ImperativeSetFocus","ImperativeScrollIntoView","Example"];export{y as Basic,I as Disabled,R as Example,H as HasError,C as HasErrorWithMessage,F as ImperativeScrollIntoView,S as ImperativeSetFocus,T as ReadOnly,q as Required,E as RequiredWithCustomLabel,x as WithAdditionalText,w as WithHiddenLabel,V as WithHorizontalResize,g as WithResize,h as WithValue,b as WithVerticalResize,wa as __namedExportsOrder,Ea as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const n=["aria-describedby","onPointerMove","onPointerLeave","onPointerDown","onFocus","onBlur","onClick","onTouchStart","onTouchEnd","id"],t=new Set(n),r=o=>Object.fromEntries(Object.entries(o).filter(([e])=>t.has(e)));export{r as f};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const n=["aria-describedby","onPointerMove","onPointerLeave","onPointerDown","onFocus","onBlur","onClick","onTouchStart","onTouchEnd","id"],t=new Set(n),r=o=>Object.fromEntries(Object.entries(o).filter(([e])=>t.has(e)));export{r as f};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{m as e,s as r}from"./classNames-BUL1Zq7e.js";const l="Color__vfkGX",t={Color:l,"Color--color-white":"Color--color-white__dhbZ3","Color--color-gray-100":"Color--color-gray-100__Zk7WH","Color--color-gray-200":"Color--color-gray-200__4aiJx","Color--color-gray-300":"Color--color-gray-300__hUHAT","Color--color-gray-400":"Color--color-gray-400__UnFMY","Color--color-gray-500":"Color--color-gray-500__1rqHI","Color--color-gray-600":"Color--color-gray-600__OsCla","Color--color-teal-100":"Color--color-teal-100__n8JqM","Color--color-teal-200":"Color--color-teal-200__D4x1O","Color--color-teal-300":"Color--color-teal-300__odYHD","Color--color-teal-400":"Color--color-teal-400__ohehv","Color--color-teal-500":"Color--color-teal-500__qyXlt","Color--color-green-100":"Color--color-green-100__qlOe0","Color--color-green-200":"Color--color-green-200__XMVsX","Color--color-green-300":"Color--color-green-300__FUTe6","Color--color-green-400":"Color--color-green-400__542BR","Color--color-green-500":"Color--color-green-500__HbJM5","Color--color-yellow-100":"Color--color-yellow-100__ZKwzt","Color--color-yellow-200":"Color--color-yellow-200__NjvdT","Color--color-yellow-300":"Color--color-yellow-300__JWkj-","Color--color-yellow-400":"Color--color-yellow-400__trxJ5","Color--color-yellow-500":"Color--color-yellow-500__dXsSN","Color--color-red-100":"Color--color-red-100__FdHtS","Color--color-red-200":"Color--color-red-200__7ufdo","Color--color-red-300":"Color--color-red-300__D4ZuC","Color--color-red-400":"Color--color-red-400__1uYf6","Color--color-red-500":"Color--color-red-500__03-KE","Color--color-blue-100":"Color--color-blue-100__BCBQU","Color--color-blue-200":"Color--color-blue-200__wG3gg","Color--color-blue-300":"Color--color-blue-300__fPIft","Color--color-blue-400":"Color--color-blue-400__4qSYd","Color--color-blue-500":"Color--color-blue-500__ICwnS","Color--color-magenta-100":"Color--color-magenta-100__Ioa9Q","Color--color-magenta-200":"Color--color-magenta-200__uzkgK","Color--color-magenta-300":"Color--color-magenta-300__-jxy-","Color--color-magenta-400":"Color--color-magenta-400__MHtx9","Color--color-magenta-500":"Color--color-magenta-500__UqKyb"},n="Color",x=o=>e(t,n,[r("color",o)]),a="TextAccent__AfPNQ",_={TextAccent:a,"TextAccent--accent-default":"TextAccent--accent-default__rjbSO","TextAccent--accent-primary":"TextAccent--accent-primary__y2VJp","TextAccent--accent-secondary":"TextAccent--accent-secondary__EN2MG","TextAccent--accent-tertiary":"TextAccent--accent-tertiary__Di2P9","TextAccent--accent-accentDark":"TextAccent--accent-accentDark__k9Bg2","TextAccent--accent-placeholder":"TextAccent--accent-placeholder__s77sy","TextAccent--accent-inverted":"TextAccent--accent-inverted__pOSYS","TextAccent--accent-positive":"TextAccent--accent-positive__znwvO","TextAccent--accent-info":"TextAccent--accent-info__rneu6","TextAccent--accent-warning":"TextAccent--accent-warning__cNFBg","TextAccent--accent-critical":"TextAccent--accent-critical__-RJ-l","TextAccent--accent-branded":"TextAccent--accent-branded__1Gtaj","TextAccent--accent-error":"TextAccent--accent-error__qYNyj","TextAccent--accent-selected":"TextAccent--accent-selected__SR-sK","TextAccent--accent-disabled":"TextAccent--accent-disabled__HZyzf","TextAccent--accent-accent":"TextAccent--accent-accent__4Sp61"},C="TextAccent",T=(o,c)=>e(_,C,[r("accent",c??(o?"default":void 0))]);export{x as a,T as g};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{m as t,b as n}from"./classNames-BUL1Zq7e.js";const d="TextCentered__7KaTF",i={TextCentered:d,"TextCentered--centered":"TextCentered--centered__4f-qW","TextCentered--initial":"TextCentered--initial__zx7nV","TextCentered--narrow-l--centered":"TextCentered--narrow-l--centered__9h4So","TextCentered--narrow-l--initial":"TextCentered--narrow-l--initial__45Rim","TextCentered--medium-s--centered":"TextCentered--medium-s--centered__-x8lC","TextCentered--medium-s--initial":"TextCentered--medium-s--initial__gI0a7","TextCentered--medium-l--centered":"TextCentered--medium-l--centered__OBRt2","TextCentered--medium-l--initial":"TextCentered--medium-l--initial__WN00-","TextCentered--wide-s--centered":"TextCentered--wide-s--centered__UwUjF","TextCentered--wide-s--initial":"TextCentered--wide-s--initial__tWQv7","TextCentered--wide-l--centered":"TextCentered--wide-l--centered__XvD5D","TextCentered--wide-l--initial":"TextCentered--wide-l--initial__80dUb"},r="TextCentered",l=e=>t(i,r,[n("centered","initial",e)]);export{l as g};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.TextCentered__7KaTF.TextCentered--centered__4f-qW{text-align:center}.TextCentered__7KaTF.TextCentered--initial__zx7nV{text-align:left;text-align:initial}@media (min-width: 400px){.TextCentered__7KaTF.TextCentered--narrow-l--centered__9h4So{text-align:center}.TextCentered__7KaTF.TextCentered--narrow-l--initial__45Rim{text-align:left;text-align:initial}}@media (min-width: 700px){.TextCentered__7KaTF.TextCentered--medium-s--centered__-x8lC{text-align:center}.TextCentered__7KaTF.TextCentered--medium-s--initial__gI0a7{text-align:left;text-align:initial}}@media (min-width: 880px){.TextCentered__7KaTF.TextCentered--medium-l--centered__OBRt2{text-align:center}.TextCentered__7KaTF.TextCentered--medium-l--initial__WN00-{text-align:left;text-align:initial}}@media (min-width: 1200px){.TextCentered__7KaTF.TextCentered--wide-s--centered__UwUjF{text-align:center}.TextCentered__7KaTF.TextCentered--wide-s--initial__tWQv7{text-align:left;text-align:initial}}@media (min-width: 1900px){.TextCentered__7KaTF.TextCentered--wide-l--centered__XvD5D{text-align:center}.TextCentered__7KaTF.TextCentered--wide-l--initial__80dUb{text-align:left;text-align:initial}}
|