docs(web-components): adding code links for web components (#2588)

* docs(web-components): adding code links for web components * fix(components): fixing quotes for web components * docs(components): adding web components links to usage tabs Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 21, 2021 · 4f7d48f · 4f7d48f · vercel · Oct 21, 2021
1 parent 6e8a4ee
commit 4f7d48f
Show file tree

Hide file tree

Showing 66 changed files with 468 additions and 0 deletions.
diff --git a/src/pages/components/UI-shell-header/code.mdx b/src/pages/components/UI-shell-header/code.mdx
@@ -46,6 +46,16 @@ the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-ui-shell--header"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Demo

diff --git a/src/pages/components/UI-shell-left-panel/code.mdx b/src/pages/components/UI-shell-left-panel/code.mdx
@@ -46,6 +46,16 @@ see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-ui-shell--side-nav"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Demo

diff --git a/src/pages/components/accordion/code.mdx b/src/pages/components/accordion/code.mdx
@@ -47,6 +47,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -72,6 +82,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=accordion',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default',
     }}>
     {`
   <Accordion>

diff --git a/src/pages/components/accordion/usage.mdx b/src/pages/components/accordion/usage.mdx
@@ -69,6 +69,7 @@ extra click; instead use a full scrolling page with normal headers.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvaccordion--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=accordion',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-accordion--default',
     }}>
     {`
   <Accordion>

diff --git a/src/pages/components/breadcrumb/code.mdx b/src/pages/components/breadcrumb/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}>{`
 <Breadcrumb noTrailingSlash>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
@@ -85,6 +96,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}>{`
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>

diff --git a/src/pages/components/breadcrumb/usage.mdx b/src/pages/components/breadcrumb/usage.mdx
@@ -79,6 +79,7 @@ type used should be consistent across a product.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}>{`
 <Breadcrumb noTrailingSlash>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
@@ -96,6 +97,7 @@ type used should be consistent across a product.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbreadcrumb--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=breadcrumb',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
     }}>{`
 <Breadcrumb>
   <BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>

diff --git a/src/pages/components/button/code.mdx b/src/pages/components/button/code.mdx
@@ -48,6 +48,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-button--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -81,6 +91,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}>{`
       <Button>Button</Button>
     `}</ComponentVariant>
@@ -97,6 +108,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}>{`
       <Button renderIcon={Add16}>Button</Button>
     `}</ComponentVariant>
@@ -113,6 +125,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--icon-only',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}>{`
       <Button
         hasIconOnly

diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx
@@ -111,6 +111,7 @@ import { Add16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}>{`
       <Button>Button</Button>
     `}</ComponentVariant>
@@ -127,6 +128,7 @@ import { Add16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
     }}>{`
       <Button renderIcon={Add16}>Button</Button>
     `}</ComponentVariant>
@@ -143,6 +145,7 @@ import { Add16 } from '@carbon/icons-react';
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvbutton--icon-only',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=button',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
     }}>{`
       <Button
         hasIconOnly

diff --git a/src/pages/components/checkbox/code.mdx b/src/pages/components/checkbox/code.mdx
@@ -46,6 +46,16 @@ documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -68,6 +78,7 @@ documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=checkbox',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
     }}>{`
 <fieldset className="bx--fieldset">
   <legend className="bx--label">Checkbox heading</legend>

diff --git a/src/pages/components/checkbox/usage.mdx b/src/pages/components/checkbox/usage.mdx
@@ -107,6 +107,7 @@ set whereas radio buttons allow the user to select only one option.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcheckbox--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=checkbox',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
     }}>{`
 <fieldset className="bx--fieldset">
   <legend className="bx--label">Checkbox heading</legend>

diff --git a/src/pages/components/code-snippet/code.mdx b/src/pages/components/code-snippet/code.mdx
@@ -46,6 +46,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -82,6 +92,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
     }}>{`
     <CodeSnippet type="single">
     ${codeSnippetSingle}
@@ -98,6 +109,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}>{`
     <CodeSnippet type="multi">
     ${codeSnippet}
@@ -114,6 +126,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
     }}>{`
     <CodeSnippet type="inline">${codeSnippetSingle}</CodeSnippet>
 `}</ComponentVariant>

diff --git a/src/pages/components/code-snippet/usage.mdx b/src/pages/components/code-snippet/usage.mdx
@@ -87,6 +87,7 @@ length use cases—inline, single line, and multi-line.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
     }}>{`
     <CodeSnippet type="single">${codeSnippetSingle}</CodeSnippet>
 `}</ComponentVariant>
@@ -101,6 +102,7 @@ length use cases—inline, single line, and multi-line.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
     }}>{`
     <CodeSnippet type="multi">
     {codeSnippet}
@@ -117,6 +119,7 @@ length use cases—inline, single line, and multi-line.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcodesnippet--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=code-snippet',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
     }}>{`
     <CodeSnippet type="inline">${codeSnippetSingle}</CodeSnippet>
 `}</ComponentVariant>

diff --git a/src/pages/components/content-switcher/code.mdx b/src/pages/components/content-switcher/code.mdx
@@ -47,6 +47,16 @@ code usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -73,6 +83,7 @@ code usage documentation, see the Storybooks for each framework below.
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default',
       Vanilla:
         'https://the-carbon-components.netlify.com/?nav=content-switcher',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
     }}>{`
 <ContentSwitcher onChange={console.log}>
   <Switch name={'first'} text='First section' />

diff --git a/src/pages/components/content-switcher/usage.mdx b/src/pages/components/content-switcher/usage.mdx
@@ -86,6 +86,7 @@ binary decision.
         'http://vue.carbondesignsystem.com/?path=/story/components-cvcontentswitcher--default',
       Vanilla:
         'https://the-carbon-components.netlify.com/?nav=content-switcher',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
     }}>{`
 <ContentSwitcher onChange={console.log}>
   <Switch name={'first'} text='First section' />

diff --git a/src/pages/components/data-table/code.mdx b/src/pages/components/data-table/code.mdx
@@ -53,6 +53,16 @@ usage documentation, see the Storybooks for each framework below.
 
   </ResourceCard>
 </Column>
+<Column colLg={4} colMd={4} noGutterSm>
+  <ResourceCard
+      subTitle="Web Components (Community)"
+      href="https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default"
+      >
+
+<MdxIcon name="webcomponents" />
+
+  </ResourceCard>
+</Column>
 </Row>
 
 ## Live demo
@@ -88,6 +98,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--minimal',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({ rows, headers, getHeaderProps, getTableProps }) => (
@@ -127,6 +138,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({
@@ -175,6 +187,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--slotted-expanding-data',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--expandable',
     }}>
     {`<DataTable
   rows={rowData}
@@ -223,6 +236,7 @@ usage documentation, see the Storybooks for each framework below.
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({

diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx
@@ -96,6 +96,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--minimal',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({ rows, headers, getHeaderProps, getTableProps }) => (
@@ -135,6 +136,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({
@@ -183,6 +185,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--slotted-expanding-data',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--expandable',
     }}>
     {`<DataTable
   rows={rowData}
@@ -231,6 +234,7 @@ import {
       Vue:
         'http://vue.carbondesignsystem.com/?path=/story/components-cvdatatable--default',
       Vanilla: 'https://the-carbon-components.netlify.com/?nav=data-table',
+      "Web Components": 'https://web-components.carbondesignsystem.com/?path=/story/components-data-table--default',
     }}>
     {`<DataTable rows={rowData} headers={headerData}>
   {({