@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/RangeSlider.stories-BS4-l1u4.js

@@ -1,117 +0,0 @@
-import{j as w,r as V}from"./iframe-B_74HtSc.js";import{R as E}from"./RangeSlider-MZqvjtBp.js";import"./preload-helper-Dp1pzeXC.js";import"./Slider-B8ndK7PX.js";import"./componentNames-hc9KR2nX.js";import"./index-Cnv20V_M.js";import"./index-DIqvfT2b.js";const{action:S}=__STORYBOOK_MODULE_ACTIONS__,{expect:a,fn:N,userEvent:r,within:m}=__STORYBOOK_MODULE_TEST__,s=N(S("change")),T={title:"Components/Slider/RangeSlider",component:E,decorators:[o=>w.jsx("div",{style:{padding:"32px",maxWidth:"400px"},children:w.jsx(o,{})})],args:{"aria-label":"Sample",onValueChange:s}},l={play:async({canvasElement:o,step:n})=>{const i=m(o),[t,e]=i.getAllByRole("slider");a(t).not.toBeNull(),a(e).not.toBeNull(),await n("Initial state",async()=>{a(t).toHaveAttribute("aria-valuenow","0"),a(e).toHaveAttribute("aria-valuenow","100")}),await n("Move first thumb and verify value updates",async()=>{t.focus(),await r.keyboard("{ArrowRight}"),a(t).toHaveAttribute("aria-valuenow","1"),a(s).toBeCalledWith([1,100])}),await n("Move second thumb and verify value updates",async()=>{e.focus(),await r.keyboard("{ArrowLeft}"),a(e).toHaveAttribute("aria-valuenow","99"),a(s).toBeCalledWith([1,99])})}},u={args:{defaultValue:[25,75]},play:async({canvasElement:o,step:n})=>{const i=m(o),[t,e]=i.getAllByRole("slider");a(t).not.toBeNull(),a(e).not.toBeNull(),await n("Initial state",async()=>{a(t).toHaveAttribute("aria-valuenow","25"),a(e).toHaveAttribute("aria-valuenow","75")}),await n("Move first thumb and verify value updates",async()=>{t.focus(),await r.keyboard("{ArrowRight}"),a(t).toHaveAttribute("aria-valuenow","26"),a(s).toBeCalledWith([26,75])}),await n("Move second thumb and verify value updates",async()=>{e.focus(),await r.keyboard("{ArrowLeft}"),a(e).toHaveAttribute("aria-valuenow","74"),a(s).toBeCalledWith([26,74])})}},c={render:function(n){const[i,t]=V.useState([25,75]);return w.jsx(E,{...n,value:i,onValueChange:e=>{var d;t(e),(d=n.onValueChange)==null||d.call(n,e)}})},play:async({canvasElement:o,step:n})=>{const i=m(o),[t,e]=i.getAllByRole("slider");a(t).not.toBeNull(),a(e).not.toBeNull(),await n("Initial state",async()=>{a(t).toHaveAttribute("aria-valuenow","25"),a(e).toHaveAttribute("aria-valuenow","75")}),await n("Move first thumb and verify value updates",async()=>{t.focus(),await r.keyboard("{ArrowRight}"),a(t).toHaveAttribute("aria-valuenow","26"),a(s).toBeCalledWith([26,75])}),await n("Move second thumb and verify value updates",async()=>{e.focus(),await r.keyboard("{ArrowLeft}"),a(e).toHaveAttribute("aria-valuenow","74"),a(s).toBeCalledWith([26,74])})}},v={args:{defaultValue:[1,4],minStepsBetweenThumbs:2,step:1},play:async({canvasElement:o,step:n})=>{const i=m(o),[t,e]=i.getAllByRole("slider");await a(t).not.toBeNull(),await a(e).not.toBeNull(),await n("Initial state with minimum steps",async()=>{await a(t).toHaveAttribute("aria-valuenow","1"),await a(e).toHaveAttribute("aria-valuenow","4")}),await n("Verify minimum steps constraint",async()=>{t.focus(),await r.keyboard("{ArrowRight}".repeat(3)),await a(t).toHaveAttribute("aria-valuenow","2"),e.focus(),await r.keyboard("{ArrowLeft}"),await a(e).toHaveAttribute("aria-valuenow","4"),await a(s).toHaveBeenNthCalledWith(1,[2,4])})}};var p,y,x;l.parameters={...l.parameters,docs:{...(p=l.parameters)==null?void 0:p.docs,source:{originalSource:`{
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    const canvas = within(canvasElement);
-    const [min, max] = canvas.getAllByRole('slider');
-    expect(min).not.toBeNull();
-    expect(max).not.toBeNull();
-    await step('Initial state', async () => {
-      expect(min).toHaveAttribute('aria-valuenow', '0');
-      expect(max).toHaveAttribute('aria-valuenow', '100');
-    });
-    await step('Move first thumb and verify value updates', async () => {
-      min.focus();
-      await userEvent.keyboard('{ArrowRight}');
-      expect(min).toHaveAttribute('aria-valuenow', '1');
-      expect(onValueChange).toBeCalledWith([1, 100]);
-    });
-    await step('Move second thumb and verify value updates', async () => {
-      max.focus();
-      await userEvent.keyboard('{ArrowLeft}');
-      expect(max).toHaveAttribute('aria-valuenow', '99');
-      expect(onValueChange).toBeCalledWith([1, 99]);
-    });
-  }
-}`,...(x=(y=l.parameters)==null?void 0:y.docs)==null?void 0:x.source}}};var h,b,A;u.parameters={...u.parameters,docs:{...(h=u.parameters)==null?void 0:h.docs,source:{originalSource:`{
-  args: {
-    defaultValue: [25, 75]
-  },
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    const canvas = within(canvasElement);
-    const [min, max] = canvas.getAllByRole('slider');
-    expect(min).not.toBeNull();
-    expect(max).not.toBeNull();
-    await step('Initial state', async () => {
-      expect(min).toHaveAttribute('aria-valuenow', '25');
-      expect(max).toHaveAttribute('aria-valuenow', '75');
-    });
-    await step('Move first thumb and verify value updates', async () => {
-      min.focus();
-      await userEvent.keyboard('{ArrowRight}');
-      expect(min).toHaveAttribute('aria-valuenow', '26');
-      expect(onValueChange).toBeCalledWith([26, 75]);
-    });
-    await step('Move second thumb and verify value updates', async () => {
-      max.focus();
-      await userEvent.keyboard('{ArrowLeft}');
-      expect(max).toHaveAttribute('aria-valuenow', '74');
-      expect(onValueChange).toBeCalledWith([26, 74]);
-    });
-  }
-}`,...(A=(b=u.parameters)==null?void 0:b.docs)==null?void 0:A.source}}};var f,B,g;c.parameters={...c.parameters,docs:{...(f=c.parameters)==null?void 0:f.docs,source:{originalSource:`{
-  render: function Render(args) {
-    const [value, setValue] = useState<RangeSliderValue>([25, 75]);
-    return <RangeSlider {...args} value={value} onValueChange={value => {
-      setValue(value);
-      args.onValueChange?.(value);
-    }} />;
-  },
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    const canvas = within(canvasElement);
-    const [min, max] = canvas.getAllByRole('slider');
-    expect(min).not.toBeNull();
-    expect(max).not.toBeNull();
-    await step('Initial state', async () => {
-      expect(min).toHaveAttribute('aria-valuenow', '25');
-      expect(max).toHaveAttribute('aria-valuenow', '75');
-    });
-    await step('Move first thumb and verify value updates', async () => {
-      min.focus();
-      await userEvent.keyboard('{ArrowRight}');
-      expect(min).toHaveAttribute('aria-valuenow', '26');
-      expect(onValueChange).toBeCalledWith([26, 75]);
-    });
-    await step('Move second thumb and verify value updates', async () => {
-      max.focus();
-      await userEvent.keyboard('{ArrowLeft}');
-      expect(max).toHaveAttribute('aria-valuenow', '74');
-      expect(onValueChange).toBeCalledWith([26, 74]);
-    });
-  }
-}`,...(g=(B=c.parameters)==null?void 0:B.docs)==null?void 0:g.source}}};var H,C,R;v.parameters={...v.parameters,docs:{...(H=v.parameters)==null?void 0:H.docs,source:{originalSource:`{
-  args: {
-    defaultValue: [1, 4],
-    minStepsBetweenThumbs: 2,
-    step: 1
-  },
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    const canvas = within(canvasElement);
-    const [min, max] = canvas.getAllByRole('slider');
-    await expect(min).not.toBeNull();
-    await expect(max).not.toBeNull();
-    await step('Initial state with minimum steps', async () => {
-      await expect(min).toHaveAttribute('aria-valuenow', '1');
-      await expect(max).toHaveAttribute('aria-valuenow', '4');
-    });
-    await step('Verify minimum steps constraint', async () => {
-      min.focus();
-      await userEvent.keyboard('{ArrowRight}'.repeat(3));
-      await expect(min).toHaveAttribute('aria-valuenow', '2');
-      max.focus();
-      await userEvent.keyboard('{ArrowLeft}');
-      await expect(max).toHaveAttribute('aria-valuenow', '4');
-      await expect(onValueChange).toHaveBeenNthCalledWith(1, [2, 4]);
-    });
-  }
-}`,...(R=(C=v.parameters)==null?void 0:C.docs)==null?void 0:R.source}}};const U=["Uncontrolled","UncontrolledWithDefault","Controlled","WithMinStepsBetweenThumbs"];export{c as Controlled,l as Uncontrolled,u as UncontrolledWithDefault,v as WithMinStepsBetweenThumbs,U as __namedExportsOrder,T as default};

package/dist/assets/Rating.stories-wHsrBw3w.js

@@ -1,116 +0,0 @@
-import{u as C,v as N,j as e,g as A}from"./iframe-B_74HtSc.js";import{u as D,s as O,S as q,r as B}from"./Stars-BSTkfC0i.js";import{w as P}from"./componentNames-hc9KR2nX.js";import"./preload-helper-Dp1pzeXC.js";import"./index-DIqvfT2b.js";import"./TokyoUIStarFilled-CF0iG37X.js";import"./render-icon-MT6RlyNs.js";const t=function({size:a="large",value:l,dataset:z}){const d=B(l),{ariaValueText:w}=D(d),T=C(O,"rating",[N("size",a)]);return e.jsx("div",{className:T.join(" "),...A(z,{preplyDsComponent:P.Rating}),role:"img","aria-label":w,children:e.jsx(q,{filledPerc:d/5})})};try{t.displayName="Rating",t.__docgenInfo={description:"A component that visualizes the current rating.",displayName:"Rating",props:{value:{defaultValue:null,description:"Can be half values.",name:"value",required:!0,type:{name:"number"}},size:{defaultValue:{value:"large"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:'ResponsiveProp<"large" | "medium" | "small">'}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
-@example <Rating dataset={{ 'qa-id': 'accept-conditions' }} /> // will add data-qa-id="accept-conditions" to the HTML element`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const{expect:E}=__STORYBOOK_MODULE_TEST__,k={title:"components/Rating",component:t,args:{}},o={parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"}}}},render:function(){return e.jsx("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"small"}),e.jsx("td",{children:e.jsx(t,{value:2.5,size:"small"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"medium"}),e.jsx("td",{children:e.jsx(t,{value:2.5,size:"medium"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"large"}),e.jsx("td",{children:e.jsx(t,{value:2.5,size:"large"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Responsive"}),e.jsx("td",{children:e.jsx(t,{value:2.5,size:{_:"small","medium-s":"large"}})})]})]})})}},n={render:function(){function a({value:l}){return e.jsx("tbody",{children:e.jsxs("tr",{children:[e.jsx("td",{children:l}),e.jsx("td",{children:e.jsx(t,{value:l})})]})})}return e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx(a,{value:0}),e.jsx(a,{value:.5}),e.jsx(a,{value:1}),e.jsx(a,{value:1.5}),e.jsx(a,{value:2}),e.jsx(a,{value:2.5}),e.jsx(a,{value:3}),e.jsx(a,{value:3.5}),e.jsx(a,{value:4}),e.jsx(a,{value:4.5}),e.jsx(a,{value:5})]})}},s={render:function(){return e.jsx(t,{value:4})},play:async({canvas:r})=>{const a=await r.findByRole("img",{name:/4 out of 5/});E(a).toBeVisible()}},i={parameters:{chromatic:{disableSnapshot:!0}},argTypes:{dataset:{control:"object"},value:{control:"select",options:[0,.5,1,1.5,2,2.5,3,3.5,4,4.5,5]},size:{control:"select",options:["small","medium","large"]}}};var u,c,m;o.parameters={...o.parameters,docs:{...(u=o.parameters)==null?void 0:u.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      modes: {
-        'narrow-l': {
-          viewport: 'narrow-l'
-        },
-        'medium-s': {
-          viewport: 'medium-s'
-        }
-      }
-    }
-  },
-  render: function Story() {
-    return <table style={{
-      borderCollapse: 'separate',
-      borderSpacing: '16px'
-    }}>
-                <tbody>
-                    <tr>
-                        <td>small</td>
-                        <td>
-                            <Rating value={2.5} size="small" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>medium</td>
-                        <td>
-                            <Rating value={2.5} size="medium" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>large</td>
-                        <td>
-                            <Rating value={2.5} size="large" />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Responsive</td>
-                        <td>
-                            <Rating value={2.5} size={{
-              _: 'small',
-              'medium-s': 'large'
-            }} />
-                        </td>
-                    </tr>
-                </tbody>
-            </table>;
-  }
-}`,...(m=(c=o.parameters)==null?void 0:c.docs)==null?void 0:m.source}}};var p,v,g,x,j;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`{
-  render: function Story() {
-    function RenderValue({
-      value
-    }: {
-      value: number;
-    }) {
-      return <tbody>
-                    <tr>
-                        <td>{value}</td>
-                        <td>
-                            <Rating value={value} />
-                        </td>
-                    </tr>
-                </tbody>;
-    }
-    return <table style={{
-      borderCollapse: 'separate',
-      borderSpacing: '16px'
-    }}>
-                <RenderValue value={0} />
-                <RenderValue value={0.5} />
-                <RenderValue value={1} />
-                <RenderValue value={1.5} />
-                <RenderValue value={2} />
-                <RenderValue value={2.5} />
-                <RenderValue value={3} />
-                <RenderValue value={3.5} />
-                <RenderValue value={4} />
-                <RenderValue value={4.5} />
-                <RenderValue value={5} />
-            </table>;
-  }
-}`,...(g=(v=n.parameters)==null?void 0:v.docs)==null?void 0:g.source},description:{story:"All the supported decimal values.",...(j=(x=n.parameters)==null?void 0:x.docs)==null?void 0:j.description}}};var y,b,h,R,f;s.parameters={...s.parameters,docs:{...(y=s.parameters)==null?void 0:y.docs,source:{originalSource:`{
-  render: function Story() {
-    return <Rating value={4} />;
-  },
-  play: async ({
-    canvas
-  }) => {
-    const rating = await canvas.findByRole('img', {
-      name: /4 out of 5/
-    });
-    expect(rating).toBeVisible();
-  }
-}`,...(h=(b=s.parameters)==null?void 0:b.docs)==null?void 0:h.source},description:{story:`The component includes all the ARIA attributes to be announced meaningfully, and it's role is "img".`,...(f=(R=s.parameters)==null?void 0:R.docs)==null?void 0:f.description}}};var S,V,_;i.parameters={...i.parameters,docs:{...(S=i.parameters)==null?void 0:S.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  argTypes: {
-    dataset: {
-      control: 'object'
-    },
-    value: {
-      // Type range doesn't respect min/max/step 🤷
-      control: 'select',
-      options: [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large']
-    }
-  }
-}`,...(_=(V=i.parameters)==null?void 0:V.docs)==null?void 0:_.source}}};const F=["Sizes","Values","Accessibility","Playground"];export{s as Accessibility,i as Playground,o as Sizes,n as Values,F as __namedExportsOrder,k as default};