docs(examples): renamed cds to c4d

carbon-design-system · Nov 30, 2023 · 034954a · 034954a
1 parent 9d0872a
commit 034954a
Show file tree

Hide file tree

Showing 102 changed files with 1,763 additions and 1,763 deletions.
diff --git a/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx b/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx
@@ -31,17 +31,17 @@ import '@carbon/ibmdotcom-web-components/es/components/back-to-top/index.js';
 
 ### HTML
 
-The `<cds-back-to-top>` component is set to position itself above `<cds-footer>`
+The `<c4d-back-to-top>` component is set to position itself above `<c4d-footer>`
 if it is present – it will not scroll into the footer. For easiest
-implementation place `<cds-back-to-top>` within the page's main content area.
+implementation place `<c4d-back-to-top>` within the page's main content area.
 
 ```html
-<cds-back-to-top></cds-back-to-top>
+<c4d-back-to-top></c4d-back-to-top>
 ```
 
 ## Props
 
-<Props of="cds-back-to-top" />
+<Props of="c4d-back-to-top" />
 
 ## Stable selectors
 
@@ -51,6 +51,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<cds-back-to-top>`     | `data-autoid="cds--back-to-top"` | Component   |
+| `<c4d-back-to-top>`     | `data-autoid="c4d--back-to-top"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/.../web-components/src/components/back-to-top/__stories__/README.stories.react.mdx b/.../web-components/src/components/back-to-top/__stories__/README.stories.react.mdx
@@ -35,12 +35,12 @@ function App() {
 
 ### HTML
 
-The `<cds-back-to-top>` component is set to position itself above `<cds-footer>`
+The `<c4d-back-to-top>` component is set to position itself above `<c4d-footer>`
 if it is present – it will not scroll into the footer. For easiest
-implementation place `<cds-back-to-top>` within the page's main content area.
+implementation place `<c4d-back-to-top>` within the page's main content area.
 
 ```html
-<cds-back-to-top></cds-back-to-top>
+<c4d-back-to-top></c4d-back-to-top>
 ```
 
 ## Props
@@ -55,6 +55,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<cds-back-to-top>`     | `data-autoid="cds--back-to-top"` | Component   |
+| `<c4d-back-to-top>`     | `data-autoid="c4d--back-to-top"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/...s/web-components/src/components/background-media/__stories__/README.stories.mdx b/...s/web-components/src/components/background-media/__stories__/README.stories.mdx
@@ -32,51 +32,51 @@ import '@carbon/ibmdotcom-web-components/es/components/background-media/index.js
 #### With Background Image
 
 ```html
-<cds-background-media
+<c4d-background-media
   gradient-direction="left-to-right"
   alt="Image alt text"
   default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  <cds-image-item
+  <c4d-image-item
     media="(min-width: 1584px)"
     srcset="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width: 1312px)"
     srcset="https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width: 672px)"
     srcset="https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width: 320px)"
     srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-  <cds-image-item
+  </c4d-image-item>
+  <c4d-image-item
     media="(min-width: 0px)"
     srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-  </cds-image-item>
-</cds-background-media>
+  </c4d-image-item>
+</c4d-background-media>
 ```
 
 #### With Background Video
 
 ```html
-<cds-background-media
+<c4d-background-media
   gradient-direction="left-to-right"
   alt="Image alt text"
   default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  <cds-video-player-container
+  <c4d-video-player-container
     playing-mode="inline"
     video-id="0_ibuqxqbe"
     background-mode="true">
-  </cds-video-player-container>
-</cds-background-media>
+  </c4d-video-player-container>
+</c4d-background-media>
 ```
 
 ## Props
 
-<Props of="cds-background-media" />
+<Props of="c4d-background-media" />
 
 ## Stable selectors
 
@@ -86,6 +86,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<cds-background-media>` | `data-autoid="cds--background-media"` | Component   |
+| `<c4d-background-media>` | `data-autoid="c4d--background-media"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/...components/src/components/background-media/__stories__/README.stories.react.mdx b/...components/src/components/background-media/__stories__/README.stories.react.mdx
@@ -97,6 +97,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<cds-background-media>` | `data-autoid="cds--background-media"` | Component   |
+| `<c4d-background-media>` | `data-autoid="c4d--background-media"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button/__stories__/README.stories.mdx b/packages/web-components/src/components/button/__stories__/README.stories.mdx
@@ -33,7 +33,7 @@ import '@carbon/ibmdotcom-web-components/es/components/button/index.js';
 ### HTML
 
 ```html
-<cds-button href="https://example.com">Example</cds-button>
+<c4d-button href="https://example.com">Example</c4d-button>
 ```
 
 ### CTA features
@@ -68,7 +68,7 @@ Notes:
 
 ## Props
 
-<Props of="cds-button" />
+<Props of="c4d-button" />
 
 ## Stable selectors
 
@@ -78,6 +78,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector      | Description |
 | ----------------------- | --------------------------- | ----------- |
-| `<cds-button>`          | `data-autoid="cds--button"` | Component   |
+| `<c4d-button>`          | `data-autoid="c4d--button"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/...ages/web-components/src/components/callout-quote/__stories__/README.stories.mdx b/...ages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
@@ -43,21 +43,21 @@ You can do this for example by adding the following:
 ### HTML
 
 ```html
-<cds-callout-quote mark-type="double-curved">
+<c4d-callout-quote mark-type="double-curved">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus,
   posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum,
   hendrerit augue eu, placerat magna.
-  <cds-quote-source-heading>
+  <c4d-quote-source-heading>
     Lorem ipsum dolor sit amet
-  </cds-quote-source-heading>
-  <cds-quote-source-copy> consectetur adipiscing elit </cds-quote-source-copy>
-  <cds-quote-source-bottom-copy> IBM Cloud </cds-quote-source-bottom-copy>
-</cds-callout-quote>
+  </c4d-quote-source-heading>
+  <c4d-quote-source-copy> consectetur adipiscing elit </c4d-quote-source-copy>
+  <c4d-quote-source-bottom-copy> IBM Cloud </c4d-quote-source-bottom-copy>
+</c4d-callout-quote>
 ```
 
 ## Props
 
-<Props of="cds-callout-quote" />
+<Props of="c4d-callout-quote" />
 
 ## Stable selectors
 
@@ -67,6 +67,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<cds-callout-quote>`   | `data-autoid="cds--callout-quote"` | Component   |
+| `<c4d-callout-quote>`   | `data-autoid="c4d--callout-quote"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/...eb-components/src/components/callout-quote/__stories__/README.stories.react.mdx b/...eb-components/src/components/callout-quote/__stories__/README.stories.react.mdx
@@ -66,4 +66,4 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<cds-callout-quote>`   | `data-autoid="cds--callout-quote"` | Component   |
+| `<c4d-callout-quote>`   | `data-autoid="c4d--callout-quote"` | Component   |
diff --git a/...web-components/src/components/callout-with-media/__stories__/README.stories.mdx b/...web-components/src/components/callout-with-media/__stories__/README.stories.mdx
@@ -55,19 +55,19 @@ You can do this for example by adding the following:
 ### HTML
 
 ```html
-<cds-callout-with-media>
-  <cds-content-block-heading
-    >lorum ipsum dolor sit ameet</cds-content-block-heading
+<c4d-callout-with-media>
+  <c4d-content-block-heading
+    >lorum ipsum dolor sit ameet</c4d-content-block-heading
   >
-  <cds-callout-with-media-copy size="sm"
-    >lorum ipsum dolor sit ameet</cds-callout-with-media-copy
+  <c4d-callout-with-media-copy size="sm"
+    >lorum ipsum dolor sit ameet</c4d-callout-with-media-copy
   >
-  <cds-callout-with-media-image
+  <c4d-callout-with-media-image
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
     heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-  </cds-callout-with-media-image>
-</cds-callout-with-media>
+  </c4d-callout-with-media-image>
+</c4d-callout-with-media>
 ```
 
 ## Callout with Media (Video)
@@ -90,32 +90,32 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callou
 ### HTML
 
 ```html
-<cds-callout-with-media>
-  <cds-content-block-heading
-    >lorum ipsum dolor sit ameet</cds-content-block-heading
+<c4d-callout-with-media>
+  <c4d-content-block-heading
+    >lorum ipsum dolor sit ameet</c4d-content-block-heading
   >
-  <cds-callout-with-media-copy size="sm"
-    >lorum ipsum dolor sit ameet</cds-callout-with-media-copy
+  <c4d-callout-with-media-copy size="sm"
+    >lorum ipsum dolor sit ameet</c4d-callout-with-media-copy
   >
-  <cds-callout-with-media-video
+  <c4d-callout-with-media-video
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
     heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-  </cds-callout-with-media-video>
-</cds-callout-with-media>
+  </c4d-callout-with-media-video>
+</c4d-callout-with-media>
 ```
 
 ## Props
 
-<Props of="cds-content-block-simple" />
+<Props of="c4d-content-block-simple" />
 
-### `<cds-callout-with-media-image>`
+### `<c4d-callout-with-media-image>`
 
-<Props of="cds-callout-with-media-image" />
+<Props of="c4d-callout-with-media-image" />
 
-### `<cds-callout-with-media-video>`
+### `<c4d-callout-with-media-video>`
 
-<Props of="cds-callout-with-media-video" />
+<Props of="c4d-callout-with-media-video" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -126,9 +126,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-callout-with-media>`       | `data-autoid="cds--callout-with-media"`       | Component   |
-| `<cds-callout-with-media-copy>`  | `data-autoid="cds--callout-with-media-copy"`  | Component   |
-| `<cds-callout-with-media-image>` | `data-autoid="cds--callout-with-media-image"` | Component   |
-| `<cds-callout-with-media-video>` | `data-autoid="cds--callout-with-media-video"` | Component   |
+| `<c4d-callout-with-media>`       | `data-autoid="c4d--callout-with-media"`       | Component   |
+| `<c4d-callout-with-media-copy>`  | `data-autoid="c4d--callout-with-media-copy"`  | Component   |
+| `<c4d-callout-with-media-image>` | `data-autoid="c4d--callout-with-media-image"` | Component   |
+| `<c4d-callout-with-media-video>` | `data-autoid="c4d--callout-with-media-video"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/...mponents/src/components/callout-with-media/__stories__/README.stories.react.mdx b/...mponents/src/components/callout-with-media/__stories__/README.stories.react.mdx
@@ -96,9 +96,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<cds-callout-with-media>`       | `data-autoid="cds--callout-with-media"`       | Component   |
-| `<cds-callout-with-media-copy>`  | `data-autoid="cds--callout-with-media-copy"`  | Component   |
-| `<cds-callout-with-media-image>` | `data-autoid="cds--callout-with-media-image"` | Component   |
-| `<cds-callout-with-media-video>` | `data-autoid="cds--callout-with-media-video"` | Component   |
+| `<c4d-callout-with-media>`       | `data-autoid="c4d--callout-with-media"`       | Component   |
+| `<c4d-callout-with-media-copy>`  | `data-autoid="c4d--callout-with-media-copy"`  | Component   |
+| `<c4d-callout-with-media-image>` | `data-autoid="c4d--callout-with-media-image"` | Component   |
+| `<c4d-callout-with-media-video>` | `data-autoid="c4d--callout-with-media-video"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx
@@ -42,15 +42,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <c4d-card-cta-footer slot="footer"> </c4d-card-cta-footer>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
   </c4d-card-group-item>
   <c4d-card-group-item
     cta-type="local"
     href="https://example.com"
     >
     <c4d-card-heading>Top level card link</c4d-card-heading>
-    <c4d-card-cta-footer slot="footer">
-    </c4d-card-cta-footer>
+    <c4d-card-footer slot="footer">
+    </c4d-card-footer>
   </c4d-card-group-item>
 </c4d-card-group>
 ```
@@ -165,14 +165,14 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <c4d-card-cta-footer slot="footer"> </c4d-card-cta-footer>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
   </c4d-card-group-item>
   <c4d-card-group-item
     cta-type="local"
     >
     <c4d-card-heading>Top level card link</c4d-card-heading>
-    <c4d-card-cta-footer slot="footer">
-    </c4d-card-cta-footer>
+    <c4d-card-footer slot="footer">
+    </c4d-card-footer>
   </c4d-card-group-item>
 </c4d-card-group>
 ```
@@ -305,11 +305,11 @@ There are three different options for the `grid-mode` property:
 
 ### `<c4d-card-group>`
 
-<Props of="cds-card-group" />
+<Props of="c4d-card-group" />
 
 ### `<c4d-card-group-item>`
 
-<Props of="cds-card-group-item" />
+<Props of="c4d-card-group-item" />
 
 ## Stable selectors
 
@@ -319,7 +319,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector               | Description |
 | ----------------------- | ------------------------------------ | ----------- |
-| `<c4d-card-group>`      | `data-autoid="cds--card-group"`      | Component   |
-| `<c4d-card-group-item>` | `data-autoid="cds--card-group-item"` | Component   |
+| `<c4d-card-group>`      | `data-autoid="c4d--card-group"`      | Component   |
+| `<c4d-card-group-item>` | `data-autoid="c4d--card-group-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/...s/web-components/src/components/card-group/__stories__/README.stories.react.mdx b/...s/web-components/src/components/card-group/__stories__/README.stories.react.mdx
@@ -256,7 +256,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<cds-card-group>`      | N/A                    | Component   |
-| `<cds-card-group-item>` | N/A                    | Component   |
+| `<c4d-card-group>`      | N/A                    | Component   |
+| `<c4d-card-group-item>` | N/A                    | Component   |
 
 <Description markdown={contributing} />