Merge branch 'main' into dependabot/npm_and_yarn/express-4.19.2

carbon-design-system · Apr 5, 2024 · 3557e79 · 3557e79
2 parents 322b082 + 856b2b6
commit 3557e79
Show file tree

Hide file tree

Showing 46 changed files with 641 additions and 502 deletions.
diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -588,7 +588,7 @@ $feature-flags: (
     }
 
     &[size='large'] {
-      .dds-ce--card__footer ::slotted(svg[slot='icon']) {
+      .#{$c4d-prefix}-ce--card__footer ::slotted(svg[slot='icon']) {
         @include breakpoint(max) {
           block-size: $spacing-10;
           inline-size: $spacing-10;

diff --git a/packages/web-components/src/components/back-to-top/__stories__/data/content.ts b/packages/web-components/src/components/back-to-top/__stories__/data/content.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -273,9 +273,9 @@ export const StoryContent = () =>
                   Linux on IBM mainframes lets you transform your application
                   and data portfolio with data privacy, security, and cyber
                   resiliency.
-                  <c4d-card-cta-footer slot="footer">
+                  <c4d-card-footer>
                     ${ArrowRight20({ slot: 'icon' })}
-                  </c4d-card-cta-footer>
+                  </c4d-card-footer>
                 </c4d-card-group-item>
                 <c4d-card-group-item href="https://example.com">
                   <c4d-card-heading>Linux OS on LinuxONE</c4d-card-heading>
@@ -284,9 +284,9 @@ export const StoryContent = () =>
                     innovative data privacy, security and cyber resiliency
                     capabilities, plus minimal downtime.
                   </p>
-                  <c4d-card-cta-footer slot="footer">
+                  <c4d-card-footer>
                     ${ArrowRight20({ slot: 'icon' })}
-                  </c4d-card-cta-footer>
+                  </c4d-card-footer>
                 </c4d-card-group-item>
                 <c4d-card-group-item href="https://example.com">
                   <c4d-card-heading>Linux OS on Power Systems</c4d-card-heading>
@@ -295,9 +295,9 @@ export const StoryContent = () =>
                     cost-effectively on an open, scalable infrastructure with
                     built-in acceleration.
                   </p>
-                  <c4d-card-cta-footer slot="footer">
+                  <c4d-card-footer>
                     ${ArrowRight20({ slot: 'icon' })}
-                  </c4d-card-cta-footer>
+                  </c4d-card-footer>
                 </c4d-card-group-item>
               </c4d-card-group>
             </c4d-card-section-simple>

diff --git a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
 
@@ -20,48 +25,52 @@ Here's a quick example to get you started.
 import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/index.js';
 
 function App() {
-  return (
-    <DDSButton href="https://example.com">Example</DDSButton>
-  );
+  return <DDSButton href="https://example.com">Example</DDSButton>;
 }
 ```
 
 ### CTA features
 
-The `cta-type` attribute allows every type of CTA and icon available in the Carbon for IBM.com library. 
-The default CTA style is `local`, which provides a basic link and arrow icon.
-
-In order to use the desired type, modify the `cta-type` attribute to one of the following:
-
-* local
-* jump
-* external
-* new tab
-* download
-* video
-* pdf
-* blog
-* email
-* schedule
-* chat
-* call
-
-Notes: 
-* When using `video`, you need to pass the video ID as the `href` attribute.
-* The Button component will need to be wrapped within a `DDSVideoCTAContainer` components for videos to play.
-* Custom icons can replace the built-in ones within `DDSCardFooter`, they only need to be assigned to the `icon` slot.
-
+The `cta-type` attribute allows every type of CTA and icon available in the
+Carbon for IBM.com library. The default CTA style is `local`, which provides a
+basic link and arrow icon.
+
+In order to use the desired type, modify the `cta-type` attribute to one of the
+following:
+
+- local
+- jump
+- external
+- new tab
+- download
+- video
+- pdf
+- blog
+- email
+- schedule
+- chat
+- call
+
+Notes:
+
+- When using `video`, you need to pass the video ID as the `href` attribute.
+- The Button component will need to be wrapped within a `DDSVideoCTAContainer`
+  components for videos to play.
+- Custom icons can replace the built-in ones within `DDSCardFooter`, they only
+  need to be assigned to the `icon` slot.
 
 ## Props
 
 <Props of={PropTypesRef} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector   | Compatibility selector                 | Description |
-| ------------------------- | -------------------------------------- | ----------- |
-| `<dds-button>`      | `data-autoid="dds--button"`      | Component   |
+| Web Components selector | Compatibility selector      | Description |
+| ----------------------- | --------------------------- | ----------- |
+| `<c4d-button>`          | `data-autoid="c4d--button"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button/__stories__/button.stories.react.tsx b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -27,14 +27,14 @@ import {
   types,
 } from '../../cta/__stories__/ctaTypeConfig';
 
-export const Default = args => {
+export const Default = (args) => {
   const { copy, customVideoTitle, ctaType, disabled, download, href } =
     args?.Button ?? {};
 
   let videoCopy;
 
   if (ctaType === CTA_TYPE.VIDEO) {
-    const button = document.querySelector('dds-button') as any;
+    const button = document.querySelector('cds-button') as any;
     const duration = button?.videoTitle?.match(/\((.*)\)/)?.pop();
 
     if (!customVideoTitle) {
@@ -48,7 +48,11 @@ export const Default = args => {
 
   return (
     <DDSVideoCTAContainer>
-      <DDSButton disabled={disabled || undefined} href={href} download={download} cta-type={ctaType}>
+      <DDSButton
+        disabled={disabled || undefined}
+        href={href}
+        download={download}
+        cta-type={ctaType}>
         {videoCopy ?? copy}
       </DDSButton>
     </DDSVideoCTAContainer>
@@ -97,11 +101,13 @@ Default.story = {
 export default {
   title: 'Components/Button',
   decorators: [
-    story => {
+    (story) => {
       return (
         <div className="cds--grid">
           <div className="cds--row">
-            <div className="cds--col-sm-16 cds--col-md-6 cds--col-lg-16">{story()}</div>
+            <div className="cds--col-sm-16 cds--col-md-6 cds--col-lg-16">
+              {story()}
+            </div>
           </div>
         </div>
       );

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,28 +42,20 @@ 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-footer slot="footer"> </c4d-card-footer>
+    <c4d-card-footer> </c4d-card-footer>
   </c4d-card-group-item>
-  <c4d-card-group-item
-    cta-type="local"
-    href="https://example.com"
-    >
+  <c4d-card-group-item cta-type="local" href="https://example.com">
     <c4d-card-heading>Top level card link</c4d-card-heading>
-    <c4d-card-footer slot="footer">
-    </c4d-card-footer>
+    <c4d-card-footer> </c4d-card-footer>
   </c4d-card-group-item>
 </c4d-card-group>
 ```
 
 ### HTML (with Card pictogram)
 
 ```html
-
 <c4d-card-group>
-  <c4d-card-group-item
-    href="https://example.com"
-    pictogram-placement="bottom"
-    >
+  <c4d-card-group-item href="https://example.com" pictogram-placement="bottom">
     <c4d-card-heading>Aerospace and defence</c4d-card-heading>
     <p>
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -90,10 +82,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
   18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
     </svg>
   </c4d-card-group-item>
-  <c4d-card-group-item
-    href="https://example.com"
-    pictogram-placement="bottom"
-    >
+  <c4d-card-group-item href="https://example.com" pictogram-placement="bottom">
     <c4d-card-heading>Aerospace and defence</c4d-card-heading>
     <p>
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -120,10 +109,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
   18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
     </svg>
   </c4d-card-group-item>
-  <c4d-card-group-item
-    href="https://example.com"
-    pictogram-placement="bottom"
-    >
+  <c4d-card-group-item href="https://example.com" pictogram-placement="bottom">
     <c4d-card-heading>Aerospace and defence</c4d-card-heading>
     <p>
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -149,9 +135,8 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
   0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
   18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
     </svg>
-  </c4d-card-group-item>    
+  </c4d-card-group-item>
 </c4d-card-group>
-
 ```
 
 ### HTML (with Card static)
@@ -165,14 +150,11 @@ 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-footer slot="footer"> </c4d-card-footer>
+    <c4d-card-footer> </c4d-card-footer>
   </c4d-card-group-item>
-  <c4d-card-group-item
-    cta-type="local"
-    >
+  <c4d-card-group-item cta-type="local">
     <c4d-card-heading>Top level card link</c4d-card-heading>
-    <c4d-card-footer slot="footer">
-    </c4d-card-footer>
+    <c4d-card-footer> </c4d-card-footer>
   </c4d-card-group-item>
 </c4d-card-group>
 ```
@@ -188,7 +170,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
     pattern-background>
     <c4d-card-heading>IBM Developer - Card 01</c4d-card-heading>
     <p>Learn, code and connect with your community</p>
-    <c4d-card-footer slot="footer"> </c4d-card-footer>
+    <c4d-card-footer> </c4d-card-footer>
   </c4d-card-group-card-link-item>
 
   <c4d-card-group-item
@@ -198,7 +180,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
     pattern-background>
     <c4d-card-heading>IBM Developer - Card 02</c4d-card-heading>
     <p>Learn, code and connect with your community</p>
-    <c4d-card-footer slot="footer"> </c4d-card-footer>
+    <c4d-card-footer> </c4d-card-footer>
   </c4d-card-group-item>
 
   <c4d-card-group-item
@@ -208,7 +190,7 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
     pattern-background>
     <c4d-card-heading>IBM Developer - Card 03</c4d-card-heading>
     <p>Learn, code and connect with your community</p>
-    <c4d-card-footer slot="footer"> </c4d-card-footer>
+    <c4d-card-footer> </c4d-card-footer>
   </c4d-card-group-item>
 </c4d-card-group>
 ```
@@ -288,7 +270,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <c4d-card-footer slot="footer"> </c4d-card-footer>
+    <c4d-card-footer> </c4d-card-footer>
   </c4d-card-group-item>
 </c4d-card-group>
 ```
@@ -297,9 +279,9 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
 
 There are three different options for the `grid-mode` property:
 
-* Default (32px gap)
-* Condensed (16px gap)
-* Collapsed (no gap)
+- Default (32px gap)
+- Condensed (16px gap)
+- Collapsed (no gap)
 
 ## Props