@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/Dialog.stories-87tBh-R6.js

@@ -0,0 +1,267 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-CfZyHxyH.js";import{n as o,t as s}from"./Button-DnVrHohm.js";import{n as c,r as l}from"./OnboardingTooltip-D8NhfEzc.js";import{c as ee,i as u,l as d,o as f,r as p,s as m}from"./AlertBannerAction-BSNrnhbi.js";import{n as te,t as ne}from"./Avatar-LEDcSb51.js";import{n as h,t as g}from"./TokyoUIInfo-B-CriP10.js";import{t as _}from"./Checkbox-DEB6VLYS.js";import{c as v,n as re,s as y,t as b}from"./DialogCloseButton-dPdpMifg.js";import{n as x,t as S}from"./Dialog-DCPUOQU4.js";import{n as ie,t as C}from"./DialogActions-BuK-fnKs.js";import{n as ae,t as oe}from"./NumberField-BAofx_Ni.js";var w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{w=e(n(),1),x(),re(),v(),o(),te(),h(),ae(),i(),l(),p(),d(),ie(),T=r(),{action:E}=__STORYBOOK_MODULE_ACTIONS__,{expect:D,fn:O,userEvent:k,waitFor:A,within:j}=__STORYBOOK_MODULE_TEST__,M=()=>(0,T.jsx)(`div`,{style:{width:`100%`,height:`200px`,background:`linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)`}}),N=()=>{},P=(e,t)=>{let[n,r]=(0,w.useState)(t.args.open);N=()=>r(!1);let i=()=>{r(!1),t.args.onClose?.()};return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(s,{dataset:{testid:`trigger`},onClick:()=>r(!0),children:`Open`}),(0,T.jsx)(e,{args:{...t.args,open:n,onClose:i}})]})},F={title:`Components/Dialog`,component:S,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[P],args:{open:!1,onClose:O(),children:(0,T.jsx)(M,{}),dataset:{testid:`dialog`}},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()})})}},I={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"wide-s":{viewport:`wide-s`}}}},args:{title:`Dialog title`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:()=>{E(`Primary button clicked`),N()},children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},L=()=>{let[e,t]=(0,w.useState)(1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(oe,{label:`Child count`,value:e,onChange:e=>t(parseInt(e.target.value)),required:!0}),(0,T.jsx)(`br`,{}),Array.from({length:e},(e,t)=>(0,T.jsx)(M,{},t))]})},R={args:{title:`Height Responsiveness`,description:`Change the number of children to see the Dialog style respond to the height change`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(L,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},z={args:{title:`Height Respects Component Outlines`,description:`Height respect, by leaving space for , components' outline created through the dedicated outline tokens.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,T.jsx)(_,{checked:!0,dsInternalSimulation:`focus`}),(0,T.jsx)(_,{checked:!0,dsInternalSimulation:`focus`})]}),(0,T.jsx)(M,{}),(0,T.jsxs)(`div`,{style:{display:`flex`,justifyContent:`space-between`},children:[(0,T.jsx)(_,{checked:!0,dsInternalSimulation:`focus`}),(0,T.jsx)(_,{checked:!0,dsInternalSimulation:`focus`})]}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},B={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},args:{title:`Mobile Full Height`,mobileFullHeight:!0}},V={args:{title:`Dialog Title`,description:`This is the dialog description.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`})})]})}},H={args:{title:`Dialog Title`,description:`This is the dialog description.`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(C,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`}),secondaryButton:(0,T.jsx)(s,{size:`medium`,variant:`tertiary`,onClick:E(`Secondary button clicked`),children:`Secondary`})})]})}},U=()=>(0,T.jsxs)(y,{open:!0,dataset:{testid:`dialog`},children:[(0,T.jsx)(b,{}),(0,T.jsx)(T.Fragment,{children:(0,T.jsxs)(m,{"aria-label":`Onboarding Steps`,children:[(0,T.jsx)(f,{title:`Profile`,description:`Tell us more about yourself`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(f,{title:`Subject`,description:`What do you want to learn?`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(f,{title:`Availability`,description:`When are you available?`,children:(0,T.jsx)(M,{})}),(0,T.jsx)(ee,{primaryButton:(0,T.jsx)(s,{size:`medium`,variant:`primary`,onClick:E(`Primary button clicked`),children:`Primary`})})]})})]}),U.play=async e=>{let{canvas:t,step:n}=e;await n(`Dialog should be visible`,async()=>{await A(()=>{D(t.getByTestId(`dialog`)).toBeVisible()})}),await n(`Initially, only next button is present`,async()=>{D(t.queryByRole(`button`,{name:`Next`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Previous`})).not.toBeInTheDocument(),D(t.queryByRole(`button`,{name:`Primary`})).not.toBeInTheDocument()}),await n(`Navigate to the next step. Previous/Next buttons are visible`,async()=>{await k.click(t.getByRole(`button`,{name:`Next`})),D(t.queryByRole(`button`,{name:`Previous`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Next`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Primary`})).not.toBeInTheDocument()}),await n(`Navigate to the last step. Previous/Primary buttons are visible`,async()=>{await k.click(t.getByRole(`button`,{name:`Next`})),D(t.queryByRole(`button`,{name:`Previous`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Primary`})).toBeVisible(),D(t.queryByRole(`button`,{name:`Next`})).not.toBeInTheDocument()})},W={args:{leadingElement:(0,T.jsx)(a,{size:`32`,svg:g}),title:`Information Dialog`}},G={args:{leadingElement:(0,T.jsx)(u,{size:`medium`,svg:g}),title:`Information Dialog`}},K={args:{leadingElement:(0,T.jsx)(ne,{size:`48`,alt:`User`}),title:`User Profile`,description:`This dialog shows a user profile with an avatar in the title`}},q=e=>((0,w.useEffect)(()=>(document.body.style.setProperty(`--ds-dialog-overlay-z-index-override`,`88`),document.body.style.setProperty(`--ds-dialog-content-z-index-override`,`77`),()=>{document.body.style.removeProperty(`--ds-dialog-overlay-z-index-override`),document.body.style.removeProperty(`--ds-dialog-content-z-index-override`)}),[]),(0,T.jsx)(`div`,{style:{position:`relative`,zIndex:99},children:(0,T.jsx)(S,{...e,title:`ZIndex Override`})})),q.parameters={docs:{source:{type:`code`}}},q.play=async({canvas:e,step:t})=>{await t(`Open alert`,async()=>(await k.click(e.getByTestId(`trigger`)),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()}))),await t(`Check content's computed z-index`,async()=>{let t=e.getByTestId(`dialog`);D(getComputedStyle(t).zIndex).toBe(`77`)}),await t(`Check overlay's computed z-index`,async()=>{let t=e.getByTestId(`dialog-overlay`);if(!t)throw Error(`The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.`);D(getComputedStyle(t).zIndex).toBe(`88`)})},J={uncontrolled:O(E(`uncontrolled`)),controlled:O(E(`controlled`))},Y=()=>{let[e,t]=(0,w.useState)(!1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(c,{dataset:{testid:`uncontrolled-tooltip`},actionOnClick:J.uncontrolled,title:`Uncontrolled`,text:`text`,children:(0,T.jsx)(s,{children:`Uncontrolled`})}),(0,T.jsx)(c,{dataset:{testid:`controlled-tooltip`},actionOnClick:J.controlled,title:`Controlled`,text:`text`,disabled:!e,onClose:()=>t(!1),children:(0,T.jsx)(s,{onClick:()=>t(!0),children:`Open tooltip`})})]})},X={tags:[`!autodocs`],args:{children:(0,T.jsx)(Y,{})},play:async e=>{await F.play?.(e);let{canvas:t,step:n}=e,r=t.getByTestId(`uncontrolled-tooltip`);await n(`Uncontrolled tooltip should be visible`,async()=>{await A(()=>{D(r).toBeVisible()})}),await n(`Click on uncontrolled tooltip action`,async()=>{await k.click(j(r).getByTestId(`action`)),D(J.uncontrolled).toHaveBeenCalledOnce()}),await n(`Open controlled tooltip`,async()=>{await k.click(t.getByRole(`button`,{name:`Open tooltip`})),await A(()=>{D(t.getByTestId(`controlled-tooltip`)).toBeVisible()})}),await n(`Click on controlled tooltip action`,async()=>{await k.click(j(t.getByTestId(`controlled-tooltip`)).getByTestId(`action`)),D(J.controlled).toHaveBeenCalledOnce()})}},Z=({number:e,children:t})=>{let[n,r]=(0,w.useState)(!1);return(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(s,{onClick:()=>r(!0),dataset:{testid:`trigger-${e}`},children:`Open`}),(0,T.jsx)(S,{open:n,onClose:()=>r(!1),title:`Dialog ${e}`,description:void 0,leadingElement:void 0,dataset:{testid:`dialog-${e}`},children:t})]})},Q={parameters:{chromatic:{modes:{"narrow-l":{viewport:`narrow-l`},"medium-s":{viewport:`medium-s`},"medium-l":{viewport:`medium-l`}}}},args:{title:`Dialog 1`,children:(0,T.jsxs)(T.Fragment,{children:[(0,T.jsx)(M,{}),(0,T.jsx)(`br`,{}),(0,T.jsx)(Z,{number:2,children:(0,T.jsx)(Z,{number:3})})]})},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog`)).toBeVisible()})}),await t(`Open dialog 2`,async()=>{let t=e.getByTestId(`trigger-2`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog-2`)).toBeVisible()})}),await t(`Open dialog 3`,async()=>{let t=e.getByTestId(`trigger-3`);return await k.click(t),A(()=>{D(e.getByTestId(`dialog-3`)).toBeVisible()})})}},I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'wide-s': {
+          viewport: 'wide-s'
+        }
+      }
+    }
+  },
+  args: {
+    title: 'Dialog title',
+    children: <>
+                <DummyContent />
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={() => {
+        action('Primary button clicked');
+        closeDialog();
+      }}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...I.parameters?.docs?.source}}},R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Height Responsiveness',
+    description: 'Change the number of children to see the Dialog style respond to the height change',
+    children: <>
+                <DynamicChildren />
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...R.parameters?.docs?.source}}},z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: \`Height Respects Component Outlines\`,
+    description: \`Height respect, by leaving space for , components' outline created through the dedicated outline tokens.\`,
+    children: <>
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between'
+      }}>
+                    <Checkbox checked dsInternalSimulation="focus" />
+                    <Checkbox checked dsInternalSimulation="focus" />
+                </div>
+                <DummyContent />
+                <div style={{
+        display: 'flex',
+        justifyContent: 'space-between'
+      }}>
+                    <Checkbox checked dsInternalSimulation="focus" />
+                    <Checkbox checked dsInternalSimulation="focus" />
+                </div>
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...z.parameters?.docs?.source}}},B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        },
+        'medium-l': {
+          viewport: 'medium-l'
+        }
+      }
+    }
+  },
+  args: {
+    title: 'Mobile Full Height',
+    mobileFullHeight: true
+  }
+}`,...B.parameters?.docs?.source}}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog Title',
+    description: 'This is the dialog description.',
+    children: <>
+                <DummyContent />
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} />
+            </>
+  }
+}`,...V.parameters?.docs?.source}}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Dialog Title',
+    description: 'This is the dialog description.',
+    children: <>
+                <DummyContent />
+                <DialogActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                            Primary
+                        </Button>} secondaryButton={<Button size="medium" variant="tertiary" onClick={action('Secondary button clicked')}>
+                            Secondary
+                        </Button>} />
+            </>
+  }
+}`,...H.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`() => {
+  return <DialogRoot open={true} dataset={{
+    testid: \`dialog\`
+  }}>
+            <DialogCloseButton />
+
+            <>
+                <DialogSteps aria-label="Onboarding Steps">
+                    <DialogStep title="Profile" description="Tell us more about yourself">
+                        <DummyContent />
+                    </DialogStep>
+                    <DialogStep title="Subject" description="What do you want to learn?">
+                        <DummyContent />
+                    </DialogStep>
+                    <DialogStep title="Availability" description="When are you available?">
+                        <DummyContent />
+                    </DialogStep>
+                    <DialogStepsActions primaryButton={<Button size="medium" variant="primary" onClick={action('Primary button clicked')}>
+                                Primary
+                            </Button>} />
+                </DialogSteps>
+            </>
+        </DialogRoot>;
+}`,...U.parameters?.docs?.source},description:{story:`The Dialog component can be used with the Steps component to create multi-step flows. This
+demonstrates how to use DialogRoot to build custom dialogs (in this case, a header-free dialog).`,...U.parameters?.docs?.description}}},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <Icon size="32" svg={InfoIcon} />,
+    title: 'Information Dialog'
+  }
+}`,...W.parameters?.docs?.source},description:{story:`A dialog with an Icon component in the title. This demonstrates how to use React elements in the title.`,...W.parameters?.docs?.description}}},G.parameters={...G.parameters,docs:{...G.parameters?.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <IconTile size="medium" svg={InfoIcon} />,
+    title: 'Information Dialog'
+  }
+}`,...G.parameters?.docs?.source},description:{story:`A dialog with an IconTile component in the title. This demonstrates how to use React elements in the title.`,...G.parameters?.docs?.description}}},K.parameters={...K.parameters,docs:{...K.parameters?.docs,source:{originalSource:`{
+  args: {
+    leadingElement: <Avatar size="48" alt="User" />,
+    title: 'User Profile',
+    description: 'This dialog shows a user profile with an avatar in the title'
+  }
+}`,...K.parameters?.docs?.source},description:{story:`A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title.`,...K.parameters?.docs?.description}}},q.parameters={...q.parameters,docs:{...q.parameters?.docs,source:{originalSource:`args => {
+  useEffect(() => {
+    document.body.style.setProperty('--ds-dialog-overlay-z-index-override', '88');
+    document.body.style.setProperty('--ds-dialog-content-z-index-override', '77');
+    return () => {
+      document.body.style.removeProperty('--ds-dialog-overlay-z-index-override');
+      document.body.style.removeProperty('--ds-dialog-content-z-index-override');
+    };
+  }, []);
+  return <div style={{
+    position: 'relative',
+    zIndex: 99
+  }}>
+            <Dialog {...args} title="ZIndex Override" />
+        </div>;
+}`,...q.parameters?.docs?.source},description:{story:`The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:
+
+- \\\`--ds-dialog-overlay-z-index-override\\\`: Controls the overlay's z-index
+- \\\`--ds-dialog-content-z-index-override\\\`: Controls the content's z-index
+
+These should only be used when necessary, as proper stacking context isolation is preferred.
+
+In the following example, the stacking order of the dialog trigger, overlay, and content are
+reveresed using the above CSS properties.
+
+Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.`,...q.parameters?.docs?.description}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    children: <ContentWithOnboardingTooltip />
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step
+    } = ctx;
+    const uncontrolledTooltip = canvas.getByTestId('uncontrolled-tooltip');
+    await step('Uncontrolled tooltip should be visible', async () => {
+      await waitFor(() => {
+        expect(uncontrolledTooltip).toBeVisible();
+      });
+    });
+    await step('Click on uncontrolled tooltip action', async () => {
+      await userEvent.click(within(uncontrolledTooltip).getByTestId('action'));
+      expect(onboardingTooltipCallbacks.uncontrolled).toHaveBeenCalledOnce();
+    });
+    await step('Open controlled tooltip', async () => {
+      await userEvent.click(canvas.getByRole('button', {
+        name: 'Open tooltip'
+      }));
+      await waitFor(() => {
+        expect(canvas.getByTestId('controlled-tooltip')).toBeVisible();
+      });
+    });
+    await step('Click on controlled tooltip action', async () => {
+      await userEvent.click(within(canvas.getByTestId('controlled-tooltip')).getByTestId('action'));
+      expect(onboardingTooltipCallbacks.controlled).toHaveBeenCalledOnce();
+    });
+  }
+}`,...X.parameters?.docs?.source}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        },
+        'medium-l': {
+          viewport: 'medium-l'
+        }
+      }
+    }
+  },
+  args: {
+    title: 'Dialog 1',
+    children: <>
+                <DummyContent />
+                <br />
+                <NestedDialogsLayer number={2}>
+                    <NestedDialogsLayer number={3} />
+                </NestedDialogsLayer>
+            </>
+  },
+  play: async ({
+    canvas,
+    step
+  }) => {
+    await step('Open dialog', async () => {
+      const triggerButton = canvas.getByTestId('trigger');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog')).toBeVisible();
+      });
+    });
+    await step('Open dialog 2', async () => {
+      const triggerButton = canvas.getByTestId('trigger-2');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog-2')).toBeVisible();
+      });
+    });
+    await step('Open dialog 3', async () => {
+      const triggerButton = canvas.getByTestId('trigger-3');
+      await userEvent.click(triggerButton);
+      return waitFor(() => {
+        expect(canvas.getByTestId('dialog-3')).toBeVisible();
+      });
+    });
+  }
+}`,...Q.parameters?.docs?.source},description:{story:`Each nested \`Dialog\` will be opened in a new stacking context, meaning that
+they will maintain their own focus, keyboard navigation, and light dismiss
+behavior without affecting the parent dialog
+
+They will each also have their own backdrop overlay.`,...Q.parameters?.docs?.description}}},$=[`Default`,`HeightResponsiveness`,`HeightRespectsComponentOutlines`,`MobileFullHeight`,`WithPrimaryAction`,`WithSecondaryAction`,`WithSteps`,`WithIcon`,`WithIconTile`,`WithAvatar`,`WithZIndexOverride`,`WithOnboardingTooltipInside`,`NestedDialogs`]}))();export{I as Default,z as HeightRespectsComponentOutlines,R as HeightResponsiveness,B as MobileFullHeight,Q as NestedDialogs,K as WithAvatar,W as WithIcon,G as WithIconTile,X as WithOnboardingTooltipInside,V as WithPrimaryAction,H as WithSecondaryAction,U as WithSteps,q as WithZIndexOverride,$ as __namedExportsOrder,F as default};

package/dist/assets/Dialog.test.stories-B4pw7sJ3.js

@@ -0,0 +1,146 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-DnVrHohm.js";import{n as o,t as s}from"./Dialog-DCPUOQU4.js";var c,l,u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E,D;t((()=>{c=e(n(),1),i(),o(),l=r(),{expect:u,fn:d,userEvent:f,waitFor:p}=__STORYBOOK_MODULE_TEST__,m=()=>(0,l.jsx)(`div`,{style:{width:`100%`,height:`200px`,background:`linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)`}}),h=(e,t)=>{let[n,r]=(0,c.useState)(t.args.open),i=()=>{r(!1),t.args.onClose?.()};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(a,{dataset:{testid:`trigger`},onClick:()=>r(!0),children:`Open`}),(0,l.jsx)(e,{args:{...t.args,open:n,onClose:i}})]})},g={title:`Components/Dialog/Tests`,component:s,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:600}}},decorators:[h],args:{open:!1,onClose:d(),children:(0,l.jsx)(m,{}),dataset:{testid:`dialog`}},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{let t=e.getByTestId(`trigger`);return await f.click(t),p(()=>{u(e.getByTestId(`dialog`)).toBeVisible()})})}},_={tags:[`!autodocs`],args:{size:`xs`,title:`Extra Small Dialog`}},v={tags:[`!autodocs`],args:{size:`sm`,title:`Small Dialog`}},y={tags:[`!autodocs`],args:{size:`md`,title:`Medium Dialog`}},b={tags:[`!autodocs`],args:{size:`lg`,title:`Large Dialog`}},x={tags:[`!autodocs`],args:{size:{_:`lg`,"wide-s":`xs`},title:`Width Responsiveness`,description:`Change the window width to see the Dialog width respond to it`}},S={tags:[`!autodocs`],args:{title:`Test Close Overlay`},play:async e=>{await g.play?.(e);let{canvas:t,step:n,args:r}=e;await n(`Close dialog by clicking overlay`,async()=>{let e=t.getByTestId(`dialog-overlay`);return await f.click(e),p(async()=>(await u(t.queryByTestId(`dialog`)).not.toBeInTheDocument(),u(r.onClose).toHaveBeenCalledOnce()))})}},C={tags:[`!autodocs`],args:{title:`Test Close Focus`},play:async e=>{await g.play?.(e);let{canvas:t,step:n,args:r}=e;await n(`Close dialog by pressing space`,async()=>(await f.keyboard(`{Enter}`),p(async()=>(await u(t.queryByTestId(`dialog`)).not.toBeInTheDocument(),u(r.onClose).toHaveBeenCalledOnce()))))}},w={tags:[`!autodocs`],args:{title:`Test Close Keyboard`},play:async e=>{await g.play?.(e);let{canvas:t,step:n,args:r}=e;await n(`Close dialog using escape key`,async()=>(await f.keyboard(`{Escape}`),p(()=>{u(t.queryByTestId(`dialog`)).not.toBeInTheDocument(),u(r.onClose).toHaveBeenCalledOnce()})))}},T={tags:[`!autodocs`],args:{title:`Test Close Button`},play:async e=>{await g.play?.(e);let{canvas:t,step:n,args:r}=e;await n(`Close dialog using close button`,async()=>{let e=await t.findByLabelText(`Close`);return await f.click(e),p(async()=>(await u(t.queryByTestId(`dialog`)).not.toBeInTheDocument(),u(r.onClose).toHaveBeenCalledOnce()))})}},E={tags:[`!autodocs`],args:{title:`Test Close Button`},play:async e=>{await g.play?.(e);let{canvas:t,step:n}=e;await n(`Close dialog using close button`,async()=>{let e=await t.findByTestId(`dialog-close`);return await f.click(e),p(async()=>{await u(t.queryByTestId(`dialog`)).not.toBeInTheDocument()})})}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: 'xs',
+    title: 'Extra Small Dialog'
+  }
+}`,..._.parameters?.docs?.source}}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: 'sm',
+    title: 'Small Dialog'
+  }
+}`,...v.parameters?.docs?.source}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: 'md',
+    title: 'Medium Dialog'
+  }
+}`,...y.parameters?.docs?.source}}},b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: 'lg',
+    title: 'Large Dialog'
+  }
+}`,...b.parameters?.docs?.source}}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    size: {
+      _: 'lg',
+      'wide-s': 'xs'
+    },
+    title: 'Width Responsiveness',
+    description: 'Change the window width to see the Dialog width respond to it'
+  }
+}`,...x.parameters?.docs?.source},description:{story:`The Dialog component adapts to different screen sizes through responsive size props.
+Use an object with breakpoints as keys to specify different sizes at different viewport widths:
+
+\`\`\`tsx
+<Dialog
+  size={{
+    _: 'lg',
+    'wide-s': 'xs',
+  }}
+/>
+\`\`\``,...x.parameters?.docs?.description}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    title: 'Test Close Overlay'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step,
+      args
+    } = ctx;
+    await step('Close dialog by clicking overlay', async () => {
+      const overlay = canvas.getByTestId('dialog-overlay');
+      await userEvent.click(overlay);
+      return waitFor(async () => {
+        await expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...S.parameters?.docs?.source}}},C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    title: 'Test Close Focus'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step,
+      args
+    } = ctx;
+    await step('Close dialog by pressing space', async () => {
+      await userEvent.keyboard('{Enter}');
+      return waitFor(async () => {
+        await expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...C.parameters?.docs?.source}}},w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    title: 'Test Close Keyboard'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step,
+      args
+    } = ctx;
+    await step('Close dialog using escape key', async () => {
+      await userEvent.keyboard('{Escape}');
+      return waitFor(() => {
+        expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+        expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...w.parameters?.docs?.source}}},T.parameters={...T.parameters,docs:{...T.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    title: 'Test Close Button'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step,
+      args
+    } = ctx;
+    await step('Close dialog using close button', async () => {
+      const closeButton = await canvas.findByLabelText('Close');
+      await userEvent.click(closeButton);
+      return waitFor(async () => {
+        await expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+        return expect(args.onClose).toHaveBeenCalledOnce();
+      });
+    });
+  }
+}`,...T.parameters?.docs?.source}}},E.parameters={...E.parameters,docs:{...E.parameters?.docs,source:{originalSource:`{
+  tags: ['!autodocs'],
+  args: {
+    title: 'Test Close Button'
+  },
+  play: async ctx => {
+    await meta.play?.(ctx);
+    const {
+      canvas,
+      step
+    } = ctx;
+    await step('Close dialog using close button', async () => {
+      const closeButton = await canvas.findByTestId('dialog-close');
+      await userEvent.click(closeButton);
+      return waitFor(async () => {
+        await expect(canvas.queryByTestId('dialog')).not.toBeInTheDocument();
+      });
+    });
+  }
+}`,...E.parameters?.docs?.source}}},D=[`ExtraSmall`,`Small`,`Medium`,`Large`,`WidthResponsiveness`,`TestCloseOverlay`,`TestCloseFocus`,`TestCloseKeyboard`,`TestCloseButton`,`TestCloseButtonTestId`]}))();export{_ as ExtraSmall,b as Large,y as Medium,v as Small,T as TestCloseButton,E as TestCloseButtonTestId,C as TestCloseFocus,w as TestCloseKeyboard,S as TestCloseOverlay,x as WidthResponsiveness,D as __namedExportsOrder,g as default};