fix(masthead): support proper icon direction in RTL languages (#12032)

### Related Ticket(s)
https://jsw.ibm.com/browse/ADCMS-6275

### Description

As part of AEM's effort to launch the Arabic geo, we need to add the ability to flip the arrow icons to point in the `inline-end` direction.

<img width="1287" alt="Screenshot 2024-09-16 at 11 49 23 AM" src="https://github.com/user-attachments/assets/aa98c5b4-c2a5-4b65-a7bf-a66e7b2a0815">
<img width="1287" alt="Screenshot 2024-09-16 at 11 49 30 AM" src="https://github.com/user-attachments/assets/b88fefb2-99e9-4aae-a199-1b17dbcd52ec">

This PR updates masthead component files using `ArrowRight` icons to conditionally display `ArrowLeft` icons when `document.dir.toLowerCase === 'rtl'`

### Changelog

**Changed**

- Allow masthead/leftnav components to flip arrow directions for RTL support

packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts

@@ -11,6 +11,7 @@ import { LitElement, html } from 'lit';
 import { state, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ArrowLeft20 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/20.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './masthead.scss';
@@ -49,6 +50,8 @@ class C4DLeftNavMenuCategoryHeading extends LitElement {
   _renderHeading() {
     const { headingText, url } = this;
 
+    const isRTL = document.dir.toLowerCase() === 'rtl';
+
     const headingClasses = {
       [`${prefix}--side-nav__menu-section-title`]: this.boostSize || false,
       [`${prefix}--side-nav__heading-title`]: !url,
@@ -64,7 +67,7 @@ class C4DLeftNavMenuCategoryHeading extends LitElement {
               data-attribute1="headerNav"
               data-attribute2="FlatHdline"
               data-attribute3="${headingText}">
-              ${headingText}${ArrowRight20()}
+              ${headingText}${isRTL ? ArrowLeft20() : ArrowRight20()}
             </a>
           </h2>
         `

packages/web-components/src/components/masthead/left-nav-menu-item.ts

@@ -11,6 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js';
+import ArrowLeft16 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/16.js';
 import CDSSideNavMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-menu-item.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
@@ -54,6 +55,9 @@ class C4DLeftNavMenuItem extends CDSSideNavMenuItem {
   render() {
     const { active, href, title, isHeading, isViewAll } = this;
 
+    const isRTL = document.dir.toLowerCase() === 'rtl';
+    const Arrow = isRTL ? ArrowLeft16 : ArrowRight16;
+
     const linkClasses = classMap({
       [`${prefix}--side-nav__link`]: true,
       [`${prefix}--side-nav__link--current`]: active,
@@ -70,7 +74,7 @@ class C4DLeftNavMenuItem extends CDSSideNavMenuItem {
             data-attribute3="${title}">
             <span part="title" class="${prefix}--side-nav__link-text">
               <slot>${title}</slot>
-              ${isHeading || isViewAll ? ArrowRight16() : ''}
+              ${isHeading || isViewAll ? Arrow() : ''}
             </span>
           </a>
         `

packages/web-components/src/components/masthead/masthead-composite.ts

@@ -11,6 +11,7 @@ import { LitElement, html, TemplateResult } from 'lit';
 import { state, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js';
+import ArrowLeft16 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/16.js';
 import ifNonEmpty from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-empty.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import root from 'window-or-global';
@@ -170,6 +171,11 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
     return this._renderMegaMenuListing(menu, _parentKey);
   }
 
+  protected get ArrowIcon() {
+    const isRTL = document.dir.toLowerCase() === 'rtl';
+    return isRTL ? ArrowLeft16 : ArrowRight16;
+  }
+
   /**
    *  Render MegaMenu content in tabbed layout.
    *
@@ -218,7 +224,9 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
                   href="${viewAll.url}"
                   part="view-all view-all-left"
                   slot="view-all">
-                  <span>${viewAll.title}</span>${ArrowRight16({ slot: 'icon' })}
+                  <span>${viewAll.title}</span>${this.ArrowIcon({
+                    slot: 'icon',
+                  })}
                 </c4d-megamenu-link-with-icon>
               `
             : null}
@@ -267,7 +275,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
                   href="${itemViewAll.url}"
                   part="view-all view-all-right"
                   slot="view-all">
-                  <span>${itemViewAll.title}</span>${ArrowRight16({
+                  <span>${itemViewAll.title}</span>${this.ArrowIcon({
                     slot: 'icon',
                   })}
                 </c4d-megamenu-link-with-icon>
@@ -333,7 +341,9 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
                   href="${viewAll.url}"
                   part="view-all view-all-right"
                   slot="view-all">
-                  <span>${viewAll.title}</span>${ArrowRight16({ slot: 'icon' })}
+                  <span>${viewAll.title}</span>${this.ArrowIcon({
+                    slot: 'icon',
+                  })}
                 </c4d-megamenu-link-with-icon>
               `
             : null}
@@ -343,7 +353,7 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
               <c4d-megamenu-link-with-icon
                 href="${viewAll.url}"
                 part="view-all view-all-bottom">
-                <span>${viewAll.title}</span>${ArrowRight16({ slot: 'icon' })}
+                <span>${viewAll.title}</span>${this.ArrowIcon({ slot: 'icon' })}
               </c4d-megamenu-link-with-icon>
             `
           : null}

packages/web-components/src/components/masthead/masthead-l1-cta.ts

@@ -13,6 +13,7 @@ import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilitie
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16';
+import ArrowLeft16 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/16';
 import Calendar16 from '../../internal/vendor/@carbon/web-components/icons/calendar/16.js';
 import Chat16 from '../../internal/vendor/@carbon/web-components/icons/chat/16.js';
 import Demo16 from '../../internal/vendor/@carbon/web-components/icons/demo/16.js';
@@ -137,7 +138,9 @@ class C4DMastheadL1Cta extends StableSelectorMixin(LitElement) {
     }
 
     if (href) {
-      const icon = isMobileVersion ? ArrowRight16() : '';
+      const isRTL = document.dir.toLowerCase() === 'rtl';
+      const ArrowIcon = isRTL ? ArrowLeft16 : ArrowRight16;
+      const icon = isMobileVersion ? ArrowIcon() : '';
       return html`
         <a part="l1-link" class="${classname}" href="${href}">
           ${desktopWrapper(html`<slot name="cta-text"></slot>${icon}`)}

packages/web-components/src/components/masthead/masthead-l1.ts

@@ -25,6 +25,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import ChevronDown16 from '../../internal/vendor/@carbon/web-components/icons/chevron--down/16.js';
 import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16';
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
+import ArrowLeft16 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/16';
+import ArrowLeft20 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/20';
 import CaretLeft20 from '../../internal/vendor/@carbon/web-components/icons/caret--left/20.js';
 import CaretRight20 from '../../internal/vendor/@carbon/web-components/icons/caret--right/20.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -185,6 +187,16 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
   @queryAll(`.${prefix}--masthead__l1-menu-container-scroller`)
   menuScrollerButtons?: NodeListOf<HTMLButtonElement>;
 
+  protected get Arrow16() {
+    const isRTL = document.dir.toLowerCase() === 'rtl';
+    return isRTL ? ArrowLeft16 : ArrowRight16;
+  }
+
+  protected get Arrow20() {
+    const isRTL = document.dir.toLowerCase() === 'rtl';
+    return isRTL ? ArrowLeft20 : ArrowRight20;
+  }
+
   /**
    * Resize Observer responsible for show/hiding the scrolling buttons.
    */
@@ -530,7 +542,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
                 part="l1-dropdown-viewall"
                 class="${prefix}--masthead__l1-dropdown-viewall"
                 href="${footer.url}"
-                >${footer.title}${ArrowRight16()}</a
+                >${footer.title}${this.Arrow16()}</a
               >`
             : ''}
         </div>
@@ -643,7 +655,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
                 part="l1-dropdown-login-link"
                 class="${prefix}--masthead__l1-dropdown-login"
                 href="${ifDefined(login.url)}">
-                ${login.title}${ArrowRight16()}
+                ${login.title}${this.Arrow16()}
               </a>
             </li>`
           : ''}
@@ -741,7 +753,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
                   class="${prefix}--masthead__l1-dropdown-viewall"
                   href="${footer.url}"
                 >
-                  ${footer.title}${ArrowRight16()}
+                  ${footer.title}${this.Arrow16()}
                 </li>`
             : ''}
         </div>
@@ -953,7 +965,7 @@ class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
             part="l1-dropdown-item-link l1-dropdown-item-link--heading"
             class="${prefix}--masthead__l1-dropdown-item"
             href="${heading.url}">
-            ${heading.title}${isMobileVersion ? ArrowRight16() : ArrowRight20()}
+            ${heading.title}${isMobileVersion ? this.Arrow16() : this.Arrow20()}
           </a>
         `
       : html` ${heading.title} `;

packages/web-components/src/components/masthead/megamenu-category-heading.ts

@@ -9,6 +9,7 @@
 
 import { property } from 'lit/decorators.js';
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ArrowLeft20 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/20.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import C4DMegaMenuHeading from './megamenu-heading';
 import styles from './masthead.scss';
@@ -23,7 +24,10 @@ const { stablePrefix: c4dPrefix } = settings;
  */
 @customElement(`${c4dPrefix}-megamenu-category-heading`)
 class C4DMegaMenuCategoryHeading extends C4DMegaMenuHeading {
-  protected _arrowIcon = ArrowRight20();
+  protected get _arrowIcon() {
+    const isRTL = document.dir.toLowerCase() === 'rtl';
+    return isRTL ? ArrowLeft20() : ArrowRight20();
+  }
 
   @property({ reflect: true, type: Number, attribute: 'heading-level' })
   headingLevel = 3;

packages/web-components/src/components/masthead/megamenu-heading.ts

@@ -10,6 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import ArrowRight24 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/24.js';
+import ArrowLeft24 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/24.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
@@ -49,7 +50,10 @@ class C4DMegaMenuHeading extends HostListenerMixin(LitElement) {
   /**
    * Arrow icon to use when presented as link.
    */
-  protected _arrowIcon = ArrowRight24();
+  protected get _arrowIcon() {
+    const isRTL = document.dir.toLowerCase() === 'rtl';
+    return isRTL ? ArrowLeft24() : ArrowRight24();
+  }
 
   /**
    * Render heading as link.