Deploy Storybook to GitHub Pages

IgniteUI · Jan 5, 2024 · f8bc10b · f8bc10b
commit f8bc10b
Show file tree

Hide file tree

Showing 140 changed files with 10,181 additions and 0 deletions.
diff --git a/assets/Color-6VNJS4EI.h8LHufh8.js b/assets/Color-6VNJS4EI.h8LHufh8.js
diff --git a/assets/DocsRenderer-NNNQARDV.AzgjHeP2.js b/assets/DocsRenderer-NNNQARDV.AzgjHeP2.js
diff --git a/assets/WithTooltip-V3YHNWJZ.6s0Fwver.js b/assets/WithTooltip-V3YHNWJZ.6s0Fwver.js
diff --git a/assets/accordion.stories.UjBAkFzA.js b/assets/accordion.stories.UjBAkFzA.js
@@ -0,0 +1,84 @@
+import{x as t}from"./lit-element.hxXYC90a.js";import{o as l}from"./range.rYPJk54W.js";import{d as p,I as c}from"./defineComponents.1OQ9MTb8.js";import"./directive-helpers.U3YKUR2M.js";import"./iframe-W9aCq36Y.js";import"../sb-preview/runtime.js";import"./config.75lCSUlC.js";p(c);const r={title:"Accordion",component:"igc-accordion",parameters:{docs:{description:{component:`The Accordion is a container-based component that can house multiple expansion panels
+and offers keyboard navigation.`}}},argTypes:{singleExpand:{type:"boolean",description:"Allows only one panel to be expanded at a time.",control:"boolean",table:{defaultValue:{summary:!1}}}},args:{singleExpand:!1}};Object.assign(r.parameters,{actions:{handles:["igcOpening","igcOpened","igcClosing","igcClosed"]}});const i={render:s=>t`
+    <igc-accordion ?single-expand=${s.singleExpand}>
+      ${Array.from(l(1,4)).map(e=>t` <igc-expansion-panel>
+            <h1 slot="title">Title ${e}</h1>
+            <h2 slot="subtitle">Subtitle ${e}</h2>
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi
+              adipisci, ratione ut praesentium qui, similique molestiae
+              voluptate at excepturi, a animi quam blanditiis. Tenetur tempore
+              explicabo blanditiis harum ut delectus!
+            </p>
+          </igc-expansion-panel>`)}
+      <igc-expansion-panel>
+        <h1 slot="title">Title 4</h1>
+        <h2 slot="subtitle">Subtitle 4</h2>
+        <igc-accordion>
+          <igc-expansion-panel>
+            <h1 slot="title">Title 4.1 title</h1>
+            <h2 slot="subtitle">Subtitle 4.1 subtitle</h2>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum quia
+              placeat natus illo voluptatum, praesentium similique excepturi
+              corporis sequi at earum labore provident asperiores dolorem fugit
+              explicabo ipsa distinctio doloremque?
+            </p>
+          </igc-expansion-panel>
+          <igc-expansion-panel>
+            <h1 slot="title">Title 4.2</h1>
+            <h2 slot="subtitle">Subtitle 4.2</h2>
+            <igc-input placeholder="Your feedback"></igc-input>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+              Similique modi, cumque consequuntur omnis quis odio id facere
+              placeat amet velit quos natus ipsam quasi, consequatur qui impedit
+              ullam officiis earum.
+            </p>
+          </igc-expansion-panel>
+        </igc-accordion>
+      </igc-expansion-panel>
+    </igc-accordion>
+  `};var n,o,a;i.parameters={...i.parameters,docs:{...(n=i.parameters)==null?void 0:n.docs,source:{originalSource:`{
+  render: args => html\`
+    <igc-accordion ?single-expand=\${args.singleExpand}>
+      \${Array.from(range(1, 4)).map(i => html\` <igc-expansion-panel>
+            <h1 slot="title">Title \${i}</h1>
+            <h2 slot="subtitle">Subtitle \${i}</h2>
+            <p>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi
+              adipisci, ratione ut praesentium qui, similique molestiae
+              voluptate at excepturi, a animi quam blanditiis. Tenetur tempore
+              explicabo blanditiis harum ut delectus!
+            </p>
+          </igc-expansion-panel>\`)}
+      <igc-expansion-panel>
+        <h1 slot="title">Title 4</h1>
+        <h2 slot="subtitle">Subtitle 4</h2>
+        <igc-accordion>
+          <igc-expansion-panel>
+            <h1 slot="title">Title 4.1 title</h1>
+            <h2 slot="subtitle">Subtitle 4.1 subtitle</h2>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum quia
+              placeat natus illo voluptatum, praesentium similique excepturi
+              corporis sequi at earum labore provident asperiores dolorem fugit
+              explicabo ipsa distinctio doloremque?
+            </p>
+          </igc-expansion-panel>
+          <igc-expansion-panel>
+            <h1 slot="title">Title 4.2</h1>
+            <h2 slot="subtitle">Subtitle 4.2</h2>
+            <igc-input placeholder="Your feedback"></igc-input>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+              Similique modi, cumque consequuntur omnis quis odio id facere
+              placeat amet velit quos natus ipsam quasi, consequatur qui impedit
+              ullam officiis earum.
+            </p>
+          </igc-expansion-panel>
+        </igc-accordion>
+      </igc-expansion-panel>
+    </igc-accordion>
+  \`
+}`,...(a=(o=i.parameters)==null?void 0:o.docs)==null?void 0:a.source}}};const q=["Default"];export{i as Default,q as __namedExportsOrder,r as default};
diff --git a/assets/avatar.stories.j7kkb67q.js b/assets/avatar.stories.j7kkb67q.js
diff --git a/assets/axe.4CgmM7F9.js b/assets/axe.4CgmM7F9.js
diff --git a/assets/badge.stories.kDxlcmpH.js b/assets/badge.stories.kDxlcmpH.js
@@ -0,0 +1,44 @@
+import{x as o}from"./lit-element.hxXYC90a.js";import{d as m,b as l,c as u}from"./defineComponents.1OQ9MTb8.js";import"./directive-helpers.U3YKUR2M.js";import"./iframe-W9aCq36Y.js";import"../sb-preview/runtime.js";import"./config.75lCSUlC.js";m(u,l);const w={title:"Badge",component:"igc-badge",parameters:{docs:{description:{component:`The badge is a component indicating a status on a related item or an area
+where some active indication is required.`}}},argTypes:{variant:{type:'"primary" | "info" | "success" | "warning" | "danger"',description:"The type of badge.",options:["primary","info","success","warning","danger"],control:{type:"select"},table:{defaultValue:{summary:"primary"}}},outlined:{type:"boolean",description:"Sets whether to draw an outlined version of the badge.",control:"boolean",table:{defaultValue:{summary:!1}}},shape:{type:'"rounded" | "square"',description:"The shape of the badge.",options:["rounded","square"],control:{type:"inline-radio"},table:{defaultValue:{summary:"rounded"}}}},args:{variant:"primary",outlined:!1,shape:"rounded"}};function b(e){return["primary","info","success","warning","danger"].map((a,t)=>o`
+      <igc-tab>
+        <span>
+          ${a.toUpperCase()}
+          <igc-badge
+            variant=${a}
+            ?outlined=${e.outlined}
+            shape=${e.shape}
+            >${t+1}</igc-badge
+          >
+        </span>
+      </igc-tab>
+    `)}const r={render:({outlined:e,shape:a,variant:t})=>o`
+    <igc-badge ?outlined=${e} shape=${a} variant=${t}>
+      1
+    </igc-badge>
+  `},n={render:e=>o` <style>
+        igc-badge {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      </style>
+      <igc-tabs>${b(e)}</igc-tabs>`};var s,i,d;r.parameters={...r.parameters,docs:{...(s=r.parameters)==null?void 0:s.docs,source:{originalSource:`{
+  render: ({
+    outlined,
+    shape,
+    variant
+  }) => html\`
+    <igc-badge ?outlined=\${outlined} shape=\${shape} variant=\${variant}>
+      1
+    </igc-badge>
+  \`
+}`,...(d=(i=r.parameters)==null?void 0:i.docs)==null?void 0:d.source}}};var p,c,g;n.parameters={...n.parameters,docs:{...(p=n.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  render: args => html\` <style>
+        igc-badge {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      </style>
+      <igc-tabs>\${renderTabs(args)}</igc-tabs>\`
+}`,...(g=(c=n.parameters)==null?void 0:c.docs)==null?void 0:g.source}}};const V=["Basic","Variants"];export{r as Basic,n as Variants,V as __namedExportsOrder,w as default};
diff --git a/assets/bootstrap.1LhO8NYy.js b/assets/bootstrap.1LhO8NYy.js
@@ -0,0 +1 @@
+const t="";export{t as default};
diff --git a/assets/bootstrap.CrCWDkdT.js b/assets/bootstrap.CrCWDkdT.js
diff --git a/assets/bootstrap.dark.1LhO8NYy.js b/assets/bootstrap.dark.1LhO8NYy.js
@@ -0,0 +1 @@
+const t="";export{t as default};
diff --git a/assets/bootstrap.yZ2SH5vQ.js b/assets/bootstrap.yZ2SH5vQ.js
diff --git a/assets/button-group.stories.HOuFvuFY.js b/assets/button-group.stories.HOuFvuFY.js
@@ -0,0 +1,61 @@
+import{x as r}from"./lit-element.hxXYC90a.js";import{d as m,r as b,e as p,f as d}from"./defineComponents.1OQ9MTb8.js";import"./directive-helpers.U3YKUR2M.js";import"./iframe-W9aCq36Y.js";import"../sb-preview/runtime.js";import"./config.75lCSUlC.js";m(d,p);const S={title:"ButtonGroup",component:"igc-button-group",parameters:{docs:{description:{component:"The `igc-button-group` groups a series of `igc-toggle-button`s together, exposing features such as layout and selection."}},actions:{handles:["igcSelect","igcDeselect"]}},argTypes:{disabled:{type:"boolean",description:"Disables all buttons inside the group.",control:"boolean",table:{defaultValue:{summary:!1}}},alignment:{type:'"horizontal" | "vertical"',description:"Sets the orientation of the buttons in the group.",options:["horizontal","vertical"],control:{type:"inline-radio"},table:{defaultValue:{summary:"horizontal"}}},selection:{type:'"single" | "single-required" | "multiple"',description:"Controls the mode of selection for the button group.",options:["single","single-required","multiple"],control:{type:"inline-radio"},table:{defaultValue:{summary:"single"}}}},args:{disabled:!1,alignment:"horizontal",selection:"single"}},h=[{name:"bold",url:"https://unpkg.com/[email protected]/editor/svg/production/ic_format_bold_24px.svg"},{name:"italic",url:"https://unpkg.com/[email protected]/editor/svg/production/ic_format_italic_24px.svg"},{name:"underline",url:"https://unpkg.com/[email protected]/editor/svg/production/ic_format_underlined_24px.svg"}];h.forEach(t=>{b(t.name,t.url,"material")});const v=({selection:t,disabled:u,alignment:s})=>r`
+    <igc-button-group
+      .selection=${t}
+      .disabled=${u}
+      .alignment=${s}
+    >
+      <igc-toggle-button value="left">Left</igc-toggle-button>
+      <igc-toggle-button value="center">Center</igc-toggle-button>
+      <igc-toggle-button value="right">Right</igc-toggle-button>
+      <igc-toggle-button value="top">Top</igc-toggle-button>
+      <igc-toggle-button value="bottom">Bottom</igc-toggle-button>
+    </igc-button-group>
+  `,f=()=>r`
+    <igc-button-group selection="multiple">
+      <igc-toggle-button aria-label="Bold" value="bold">
+        <igc-icon name="bold" collection="material"></igc-icon>
+      </igc-toggle-button>
+
+      <igc-toggle-button aria-label="Italic" value="italic">
+        <igc-icon name="italic" collection="material"></igc-icon>
+      </igc-toggle-button>
+
+      <igc-toggle-button aria-label="Underline" value="underline">
+        <igc-icon name="underline" collection="material"></igc-icon>
+      </igc-toggle-button>
+    </igc-button-group>
+  `,e=v.bind({}),o=f.bind({});var n,i,l;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:`({
+  selection,
+  disabled,
+  alignment
+}: IgcButtonGroupArgs) => {
+  return html\`
+    <igc-button-group
+      .selection=\${selection}
+      .disabled=\${disabled}
+      .alignment=\${alignment}
+    >
+      <igc-toggle-button value="left">Left</igc-toggle-button>
+      <igc-toggle-button value="center">Center</igc-toggle-button>
+      <igc-toggle-button value="right">Right</igc-toggle-button>
+      <igc-toggle-button value="top">Top</igc-toggle-button>
+      <igc-toggle-button value="bottom">Bottom</igc-toggle-button>
+    </igc-button-group>
+  \`;
+}`,...(l=(i=e.parameters)==null?void 0:i.docs)==null?void 0:l.source}}};var g,a,c;o.parameters={...o.parameters,docs:{...(g=o.parameters)==null?void 0:g.docs,source:{originalSource:`() => {
+  return html\`
+    <igc-button-group selection="multiple">
+      <igc-toggle-button aria-label="Bold" value="bold">
+        <igc-icon name="bold" collection="material"></igc-icon>
+      </igc-toggle-button>
+
+      <igc-toggle-button aria-label="Italic" value="italic">
+        <igc-icon name="italic" collection="material"></igc-icon>
+      </igc-toggle-button>
+
+      <igc-toggle-button aria-label="Underline" value="underline">
+        <igc-icon name="underline" collection="material"></igc-icon>
+      </igc-toggle-button>
+    </igc-button-group>
+  \`;
+}`,...(c=(a=o.parameters)==null?void 0:a.docs)==null?void 0:c.source}}};const T=["Basic","SlottedContent"];export{e as Basic,o as SlottedContent,T as __namedExportsOrder,S as default};
diff --git a/assets/button.stories.25qIiesH.js b/assets/button.stories.25qIiesH.js
@@ -0,0 +1,100 @@
+import{x as i}from"./lit-element.hxXYC90a.js";import{d as k,g as x}from"./defineComponents.1OQ9MTb8.js";import"./directive-helpers.U3YKUR2M.js";import"./iframe-W9aCq36Y.js";import"../sb-preview/runtime.js";import"./config.75lCSUlC.js";k(x);const U={title:"Button",component:"igc-button",parameters:{docs:{description:{component:`Represents a clickable button, used to submit forms or anywhere in a
+document for accessible, standard button functionality.`}},actions:{handles:["igcFocus","igcBlur"]}},argTypes:{variant:{type:'"flat" | "contained" | "outlined" | "fab"',description:"Sets the variant of the button.",options:["flat","contained","outlined","fab"],control:{type:"select"},table:{defaultValue:{summary:"contained"}}},type:{type:'"button" | "reset" | "submit"',description:"The type of the button. Defaults to `button`.",options:["button","reset","submit"],control:{type:"inline-radio"},table:{defaultValue:{summary:"button"}}},href:{type:"string",description:"The URL the button points to.",control:"text"},download:{type:"string",description:"Prompts to save the linked URL instead of navigating to it.",control:"text"},target:{type:'"_blank" | "_parent" | "_self" | "_top"',description:"Where to display the linked URL, as the name for a browsing context.",options:["_blank","_parent","_self","_top"],control:{type:"select"}},rel:{type:"string",description:`The relationship of the linked URL.
+See https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types`,control:"text"},disabled:{type:"boolean",description:"The disabled state of the component",control:"boolean",table:{defaultValue:{summary:!1}}}},args:{variant:"contained",type:"button",disabled:!1}},a={render:({disabled:t,variant:n,type:e})=>i`
+    <igc-button ?disabled=${t} variant=${n} type=${e}>
+      Basic button
+    </igc-button>
+  `},o={render:({disabled:t,variant:n,type:e})=>i`
+    <igc-button ?disabled=${t} variant=${n} type=${e}>
+      <span slot="prefix">+</span>
+      Click me
+      <span slot="suffix">-</span>
+    </igc-button>
+  `},r={args:{href:"https://www.infragistics.com/products/ignite-ui-web-components"},render:({disabled:t,download:n,href:e,rel:d,target:c,variant:l})=>i`<igc-button
+      ?disabled=${t}
+      download=${n}
+      href=${e}
+      rel=${d}
+      target=${c}
+      variant=${l}
+    >
+      Basic link button
+    </igc-button>`},s={args:{href:"https://www.infragistics.com/products/ignite-ui-web-components",target:"_blank"},render:({disabled:t,download:n,href:e,rel:d,target:c,variant:l})=>i`<igc-button
+      ?disabled=${t}
+      download=${n}
+      href=${e}
+      rel=${d}
+      target=${c}
+      variant=${l}
+    >
+      <span slot="prefix">+</span>
+      Open in new tab
+      <span slot="suffix">-</span>
+    </igc-button>`};var p,u,b;a.parameters={...a.parameters,docs:{...(p=a.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  render: ({
+    disabled,
+    variant,
+    type
+  }) => html\`
+    <igc-button ?disabled=\${disabled} variant=\${variant} type=\${type}>
+      Basic button
+    </igc-button>
+  \`
+}`,...(b=(u=a.parameters)==null?void 0:u.docs)==null?void 0:b.source}}};var m,g,f;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`{
+  render: ({
+    disabled,
+    variant,
+    type
+  }) => html\`
+    <igc-button ?disabled=\${disabled} variant=\${variant} type=\${type}>
+      <span slot="prefix">+</span>
+      Click me
+      <span slot="suffix">-</span>
+    </igc-button>
+  \`
+}`,...(f=(g=o.parameters)==null?void 0:g.docs)==null?void 0:f.source}}};var h,$,w;r.parameters={...r.parameters,docs:{...(h=r.parameters)==null?void 0:h.docs,source:{originalSource:`{
+  args: {
+    href: 'https://www.infragistics.com/products/ignite-ui-web-components'
+  },
+  render: ({
+    disabled,
+    download,
+    href,
+    rel,
+    target,
+    variant
+  }) => html\`<igc-button
+      ?disabled=\${disabled}
+      download=\${download}
+      href=\${href}
+      rel=\${rel}
+      target=\${target}
+      variant=\${variant}
+    >
+      Basic link button
+    </igc-button>\`
+}`,...(w=($=r.parameters)==null?void 0:$.docs)==null?void 0:w.source}}};var y,v,B;s.parameters={...s.parameters,docs:{...(y=s.parameters)==null?void 0:y.docs,source:{originalSource:`{
+  args: {
+    href: 'https://www.infragistics.com/products/ignite-ui-web-components',
+    target: '_blank'
+  },
+  render: ({
+    disabled,
+    download,
+    href,
+    rel,
+    target,
+    variant
+  }) => html\`<igc-button
+      ?disabled=\${disabled}
+      download=\${download}
+      href=\${href}
+      rel=\${rel}
+      target=\${target}
+      variant=\${variant}
+    >
+      <span slot="prefix">+</span>
+      Open in new tab
+      <span slot="suffix">-</span>
+    </igc-button>\`
+}`,...(B=(v=s.parameters)==null?void 0:v.docs)==null?void 0:B.source}}};const C=["BasicButton","ButtonWithSlots","BasicLinkButton","LinkButtonWithSlots"];export{a as BasicButton,r as BasicLinkButton,o as ButtonWithSlots,s as LinkButtonWithSlots,C as __namedExportsOrder,U as default};