Merge branch 'main' into supportQACountry

Author: marcelojcs

packages/styles/scss/components/carousel/_carousel.scss

@@ -183,3 +183,11 @@
     }
   }
 }
+
+// AEM nav space for last carousel when hr is hidden
+body[data-fullwidthtemplate='true']
+  .table-of-contents
+  .carousel:last-of-type:not(:has(.#{$prefix}--grid > [horizontal-ruler]))
+  #{$c4d-prefix}-carousel::part(navigation) {
+  margin-block-end: $spacing-06;
+}

packages/web-components/src/components/content-block-cards/content-block-cards.ts

@@ -8,11 +8,16 @@
  */
 
 import { css, Part } from 'lit';
+import { state } from 'lit/decorators.js';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import C4DContentBlock from '../content-block/content-block';
 import styles from './content-block-cards.scss';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import MediaQueryMixin, {
+  MQBreakpoints,
+  MQDirs,
+} from '../../component-mixins/media-query/media-query';
 
 const { prefix, stablePrefix: c4dPrefix } = settings;
 
@@ -22,7 +27,15 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
  * @element c4d-content-block-cards
  */
 @customElement(`${c4dPrefix}-content-block-cards`)
-class C4DContentBlockCards extends StableSelectorMixin(C4DContentBlock) {
+class C4DContentBlockCards extends MediaQueryMixin(
+  StableSelectorMixin(C4DContentBlock),
+  {
+    [MQBreakpoints.MD]: MQDirs.MAX,
+  }
+) {
+  @state()
+  private _isMobileOrMedium = this.carbonBreakpoints.md.matches;
+
   /**
    * The CSS class list for the container (grid) node.
    */
@@ -35,6 +48,61 @@ class C4DContentBlockCards extends StableSelectorMixin(C4DContentBlock) {
     return `${c4dPrefix}--content-block-cards`;
   }
 
+  protected setSameHeightOnMobile() {
+    requestAnimationFrame(() => {
+      let maxHeightHeading = 0;
+      let maxHeightParagraph = 0;
+
+      const blockCards = this.querySelectorAll(`${c4dPrefix}-card-group-item`);
+
+      blockCards.forEach((card) => {
+        const heading = card.querySelector('c4d-card-heading') as HTMLElement;
+        const para =
+          card.querySelector('p') ||
+          card?.shadowRoot?.querySelector('div.cds--card__copy');
+
+        let headingHeight = 0;
+        let paraHeight = 0;
+
+        if (heading && para) {
+          headingHeight = heading?.getBoundingClientRect().height;
+          paraHeight = para?.getBoundingClientRect().height;
+        }
+
+        maxHeightHeading =
+          maxHeightHeading > headingHeight ? maxHeightHeading : headingHeight;
+
+        maxHeightParagraph =
+          maxHeightParagraph > paraHeight ? maxHeightParagraph : paraHeight;
+      });
+
+      for (const card of blockCards) {
+        const heading = card.querySelector('c4d-card-heading');
+        const para =
+          card.querySelector('p') ||
+          card?.shadowRoot?.querySelector('div.cds--card__copy');
+        if (heading && para) {
+          heading.setAttribute(
+            'style',
+            `height: ${maxHeightHeading}px; display: block;`
+          );
+          para.setAttribute(
+            'style',
+            `height: ${maxHeightParagraph}px; display: block;`
+          );
+        }
+      }
+    });
+  }
+
+  firstUpdated() {
+    window.addEventListener('load', () => {
+      if (this._isMobileOrMedium) {
+        this.setSameHeightOnMobile();
+      }
+    });
+  }
+
   connectedCallback() {
     super.connectedCallback();
 

packages/web-components/src/components/video-player/video-player-container.ts

@@ -29,6 +29,7 @@ import ConnectMixin from '../../globals/mixins/connect';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import C4DVideoPlayerComposite from './video-player-composite';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { LocaleAPI } from '@carbon/ibmdotcom-services/es/services/Locale/index';
 
 const { stablePrefix: c4dPrefix } = settings;
 
@@ -115,9 +116,18 @@ export const C4DVideoPlayerContainerMixin = <
     // Not using TypeScript `private` due to: microsoft/TypeScript#17744
     _requestsEmbedVideo: { [videoId: string]: Promise<any> } = {};
 
+    /**
+     * Custom video name
+     */
     @property({ type: String, attribute: 'customvideoname' })
     customVideoName = '';
 
+    /**
+     * Language code
+     */
+    @property()
+    lc = '';
+
     /**
      * Sets the state that the API call for embedding the video for the given video ID is in progress.
      *
@@ -193,7 +203,14 @@ export const C4DVideoPlayerContainerMixin = <
        * <c4d-video-player-container customVideoName="overwritten media title here">...
        *
        */
-      const mediaTitle = this?.['customVideoName'] || this?.['caption'];
+
+      let mediaTitle: string;
+
+      if (this.lc.toLowerCase() === 'en') {
+        mediaTitle = this?.['customVideoName'] || this?.['caption'];
+      } else {
+        mediaTitle = ' ';
+      }
 
       let playerOptions = {};
       const autoplayPreference = this._getAutoplayPreference();
@@ -324,7 +341,7 @@ export const C4DVideoPlayerContainerMixin = <
     /**
      * Calls the data-* attribute transpose function to target `c4d-video-player`'s button element.
      */
-    firstUpdated() {
+    async firstUpdated() {
       window.requestAnimationFrame(() => {
         const button =
           this.querySelector('c4d-video-player')?.shadowRoot?.querySelector(
@@ -338,6 +355,10 @@ export const C4DVideoPlayerContainerMixin = <
         }
         this.transposeAttributes(button, ['href']);
       });
+
+      //get LC
+      const { lc } = await LocaleAPI.getLocale();
+      this.lc = lc;
     }
 
     prefersAutoplayStorageKey = `${c4dPrefix}-background-video-prefers-autoplay`;