@sapudex/web-components 2.9.0 → 2.11.0

package/src/Footer.ts

@@ -14,6 +14,8 @@ import UDExButton from "./Button.js";
 import UDExAccordion from "./Accordion.js";
 import UDExLink from "./Link.js";
 import UDExDivider from "./Divider.js";
+import UDExSocialMediaButton from "./SocialMediaButton.js";
+import type { UDExSocialMediaButtonType } from "./types/SocialMediaButtonType.js";
 import type { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
@@ -35,7 +37,6 @@ import {
   QUICK_LINKS,
   SEE_COMPLETE_LIST,
   SITE_INFORMATION,
-  SOCIAL_LINK_ICON,
   TRENDING,
   COPYRIGHT,
   PUBLIC_SECURITY_NETWORK_NUMBER,
@@ -56,9 +57,11 @@ export type FooterLink = {
 };
 
 export type FooterSocialLink = {
+  name?: UDExSocialMediaButtonType;
   url: string;
-  iconUrl: string;
-  target: UDExTarget;
+  target?: UDExTarget;
+  accessibleName?: string;
+  id? : string;
 };
 
 export type FooterContactNumber = {
@@ -106,7 +109,7 @@ type DetailedEvents = "quick-links-click" | "trending-click" | "about-sap-click"
   renderer: litRender,
   styles: [FooterCss],
   template: FooterTemplate,
-  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink],
+  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink, UDExSocialMediaButton],
 })
 /**
  * Triggered on click interaction with logo in footer
@@ -196,7 +199,7 @@ class UDExFooter extends UI5Element {
    * @public
    */
   @property({ type: String })
-    logoTitle: string = "";
+    logoTitle?: string;
 
   /**
    * Defines the Logo URL
@@ -205,7 +208,7 @@ class UDExFooter extends UI5Element {
    * @public
    */
   @property({ type: String })
-    logoUrl: string = "";
+    logoUrl?: string;
 
   /**
    * Defines the optional component href link for the logo.
@@ -216,6 +219,51 @@ class UDExFooter extends UI5Element {
   @property({ type: String })
     logoLink: string = "";
 
+  /**
+   * Defines the tagline alt text.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    taglineAlt?: string;
+
+  /**
+   * Defines the tagline url.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    taglineUrl?: string;
+
+  /**
+   * Defines the chinese tagline url.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseTaglineUrl?: string;
+
+  /**
+   * Defines the chinese logo url
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseLogoUrl?: string;
+
+  /**
+   * Defines the optional component href link for the chinese logo.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseLogoLink?: string;
+
   /**
    * List of the Quick links
    *
@@ -395,10 +443,6 @@ class UDExFooter extends UI5Element {
     window.scrollTo(0, 0);
   }
 
-  get parsedRef(): string | undefined {
-    return (this.logoLink && this.logoLink.length > 0) ? this.logoLink : undefined;
-  }
-
   get quickLinksArray(): FooterLink[] {
     return parseArrayFromString<FooterLink>(this.quickLinks);
   }
@@ -427,10 +471,6 @@ class UDExFooter extends UI5Element {
     return !!this.contactNumbersArray.length || !!this.contactUsLink || !!this.chatWithUsLink;
   }
 
-  get socialIconAccessibleName(): string {
-    return ` ${UDExFooter.i18nBundle.getText(SOCIAL_LINK_ICON)}`;
-  }
-
   get phoneNumberAccessibleName(): string {
     return `${UDExFooter.i18nBundle.getText(PHONE_NUMBER)} `;
   }
@@ -494,6 +534,40 @@ class UDExFooter extends UI5Element {
     return getLanguage()?.toLowerCase() === "zh_cn";
   }
 
+  get hasLogo(): boolean {
+    return !!(this.logoUrl || this.chineseLogoUrl);
+  }
+
+  get hasLogoLink(): boolean {
+    return !!(this.logoLink || this.chineseLogoLink);
+  }
+
+  get currentLogoUrl(): string | undefined {
+    return this.isChineseLang && this.chineseLogoUrl ? this.chineseLogoUrl : this.logoUrl;
+  }
+
+  get logoHref(): string {
+    return this.isChineseLang && this.chineseLogoLink ? this.chineseLogoLink : this.logoLink;
+  }
+
+  get hasTagline(): boolean {
+    return !!(this.taglineUrl || this.chineseTaglineUrl);
+  }
+
+  get currentTaglineUrl(): string | undefined {
+    return this.isChineseLang && this.chineseTaglineUrl ? this.chineseTaglineUrl : this.taglineUrl;
+  }
+
+  get taglineClass(): string {
+    const root = "udex-footer__tagline-image";
+    return this.isChineseLang && this.chineseTaglineUrl ? `${root}-chinese` : root;
+  }
+
+  get logoClass(): string {
+    const root = "udex-footer__logo-image";
+    return this.isChineseLang && this.chineseLogoUrl ? `${root}-chinese` : root;
+  }
+
   _onLogoClick(e: PointerEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }

package/src/HeroBanner.hbs

@@ -38,7 +38,6 @@
     <slot id="udex-hero-banner__content" name="content" part="content"></slot>
 
     {{#if hasAdditionalContent}}
-    <udex-media-player source="http://media.w3.org/2010/05/sintel/trailer.mp4"  aspect-ratio="16:9"></udex-media-player>
         <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
     {{/if}}
 {{/inline}}

package/src/MastheadItem.hbs

@@ -64,8 +64,8 @@
         <ui5-icon
             class="udex-masthead-item__icon"
             name="{{icon}}"
-            show-tooltip="{{iconAlt}}"
-            accessible-name="{{iconAlt}}"
+            show-tooltip="{{iconAltText}}"
+            accessible-name="{{iconAltText}}"
             mode="Decorative">
         </ui5-icon>
     {{else if image}}

package/src/MastheadItem.ts

@@ -285,9 +285,23 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   @slot({ type: HTMLElement, "default": true })
     content?: Array<HTMLElement>;
 
+  /**
+   * Defines the prevents the item from losing focus.
+   *
+   * @private
+   */
+
   @property({ type: Boolean })
     _preventFocusOut!: boolean;
 
+  /**
+   * Defines the item is a menu close button
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMenuCloseBtn?: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -530,6 +544,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.querySelector("[udex-avatar]")!;
   }
 
+  get iconAltText(): string {
+    return this._isMenuCloseBtn ? this.accessibleName || this.icon : this.iconAlt;
+  }
+
   get isRtlDirection(): boolean {
     return this._direction === "rtl";
   }

package/src/MastheadShell.hbs

@@ -121,9 +121,10 @@
                 class="udex-masthead-shell__close-btn"
                 accessible-role="button"
                 icon="decline"
-                accessible-name="close"
+                accessible-name="{{mobileCloseButtonAccessibleName}}"
                 part="menu-close-btn"
-                hide-active-border>
+                hide-active-border
+                _is-menu-close-btn>
             </udex-masthead-item>
         {{/if}}
     </div>

package/src/MastheadShell.ts

@@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -31,7 +32,7 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
-const canvasContentFont = "16px '72 Brand Variable'";
+const canvasContentFont = "14px '72 Brand Variable'";
 type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | UDExMastheadCountrySelector | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
 
@@ -47,6 +48,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
 }
 
 export enum UDExMastheadVariable {
+  itemArrowIconMarginInlineStart = "--udex-masthead-item-arrow-margin-inline-start",
   mobileMenuHeight = "--udex-masthead-shell-mobile-menu-height",
   itemButtonIconSize = "--udex-masthead-item-button-icon-size",
   itemArrowIconSize = "--udex-masthead-item-arrow-icon-size",
@@ -283,7 +285,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines overflow style for the body after clicking mobile menu opener button
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -292,7 +294,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines the visibility of the Search by default.
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -301,7 +303,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines sticky position for component
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -406,6 +408,15 @@ class UDExMastheadShell extends UI5Element {
   @property()
     closeButtonAccessibleName?: string;
 
+  /**
+   * Defines an accessible name for the close mobile menu button
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    mobileCloseButtonAccessibleName?: string;
+
   /**
    * Defines an aria label for the homepage link
    *
@@ -490,7 +501,9 @@ class UDExMastheadShell extends UI5Element {
       this.focusSearchBtn();
     }
 
-    this.updateVisibility();
+    if (this.shouldHandleMobileView) {
+      this.updateVisibility();
+    }
   }
 
   onEnterDOM(): void {
@@ -504,6 +517,12 @@ class UDExMastheadShell extends UI5Element {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
+  onInvalidation({ name }: ChangeInfo): void {
+    if (name === "default" && this.shouldHandleMobileView) {
+      this.handleMobileMode();
+    }
+  }
+
   _handleResize(): void {
     if (this.shouldHandleMobileView) {
       this.handleMobileMode();
@@ -762,7 +781,9 @@ class UDExMastheadShell extends UI5Element {
   }
 
   getItemArrowIconWidth(): number {
-    return this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
+    const arrowIconSize = this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
+    const marginInlineStart = this.getItemIconSize(UDExMastheadVariable.itemArrowIconMarginInlineStart);
+    return arrowIconSize + marginInlineStart;
   }
 
   getMainMenuWidth(): number {
@@ -772,7 +793,7 @@ class UDExMastheadShell extends UI5Element {
       const mainItem = item as UDExMastheadItem;
       const hasArrowIcon = mainItem.hasArrowDown && !mainItem.hideArrowIcon;
       const arrowIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
-      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar) + arrowIconWidth);
+      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar)) + arrowIconWidth;
     }, 0);
   }
 

package/src/PromoTile.ts

@@ -0,0 +1,290 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import PromoTileTemplate from "./PromoTileTemplate.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { PROMO_TILE, PROMO_TILE_ICON } from "./generated/i18n/i18n-defaults.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import type UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import { UDExPromoTileColorSheme, UDExPromoTileMode } from "./types/PromoTile.js";
+
+// Styles
+import PromoTileCss from "./generated/themes/PromoTile.css.js";
+
+export enum UDExOrientation {
+  Vertical = "Vertical",
+  Horizontal = "Horizontal",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-promo-tile</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/PromoTile.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-promo-tile
+ * @public
+ */
+@customElement({
+  tag: "udex-promo-tile",
+  renderer: jsxRenderer,
+  styles: PromoTileCss,
+  template: PromoTileTemplate,
+})
+
+/**
+ * Triggered when the user clicks on the CTA button
+ *
+ * @public
+ */
+@event("button-click", { cancelable: true, bubbles: true })
+
+class UDExPromoTile extends UI5Element {
+  eventDetails!: {
+    "button-click": void,
+  };
+
+  /**
+   * Defines the text content of the Promo Tile.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    content!: Array<HTMLElement>;
+
+  /**
+   * Defines the orientation of the Promo Tile component.
+   *
+   * @type {string}
+   * @defaultvalue "Vertical"
+   * @public
+   */
+  @property({ type: String })
+    orientation: `${UDExOrientation}` = UDExOrientation.Vertical;
+
+  /**
+   * Defines the UI5 icon name in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    icon?: string;
+
+  /**
+   * Defines the image aria label and alt in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    imageLabel?: string;
+
+  /**
+   * Defines the logo URL in the pictogram section.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    logoUrl?: string;
+
+  /**
+   * Defines the header text of the promo tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    header?: string;
+
+  /**
+   * Defines the eyebrow text of the promo tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    eyebrow?: string;
+
+  /**
+   * Defines the CTA button label
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    button?: string;
+
+  /**
+   * Defines the CTA button design
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    buttonDesign?: UDExButtonDesign;
+
+  /**
+   * Defines the color scheme of the Promo Tile.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    colorScheme?: UDExPromoTileColorSheme;
+
+  /**
+   * Defines the accessible name of the component.
+   *
+   * @type {string}
+   * @defaultvalue ""
+   * @public
+   */
+  @property({ type: String })
+    accessibleName?: string;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  _handleResizeBound: ResizeObserverCallback;
+  _button: UDExButton | undefined;
+  _colorMode: UDExPromoTileMode = UDExPromoTileMode.light;
+  _lightModeColors: Array<number> = [1, 2];
+  _darkModeColors: Array<number> = [7, 8, 9, 10];
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering() {
+    this._button = this.getButton();
+    this.applyColorScheme();
+  }
+
+  _handleResize(): void {
+    if (this._button) {
+      this._button.size = this.isMobile ? UDExButtonSize.Medium : UDExButtonSize.Large;
+    }
+  }
+
+  getButton(): UDExButton | undefined {
+    return this.shadowRoot!.querySelector<UDExButton>(
+      "[udex-button]",
+    )!;
+  }
+
+  applyColorScheme(): void {
+    if (!this.colorScheme) {
+      return;
+    }
+
+    this._colorMode = this.checkColorMode(this.colorScheme);
+    const eyebrowColor = this.checkEyebrowColor(this.colorScheme);
+
+    if (this._colorMode === UDExPromoTileMode.dark) {
+      if (this._button) {
+        this._button.design = this.buttonDesign || UDExButtonDesign.Secondary;
+      }
+      this.style.setProperty("--udex-promo-tile-icon-fill-color", `var(--udexCoreTextLight)`);
+    }
+    this.style.setProperty("--udex-promo-tile-background", `var(--udexColor${this.colorScheme})`);
+    this.style.setProperty("--udex-promo-tile-eyebrow-color", `var(--udexColor${eyebrowColor})`);
+  }
+
+  getColorNumber(colorScheme: string): number {
+    const match = colorScheme.match(/\d+/);
+    return match ? parseInt(match[0]) : 0;
+  }
+
+  checkColorMode(colorScheme: string): UDExPromoTileMode {
+    const number = this.getColorNumber(colorScheme);
+
+    if (number && this._darkModeColors.includes(number)) {
+      return UDExPromoTileMode.dark;
+    }
+    return UDExPromoTileMode.light;
+  }
+
+  checkEyebrowColor(colorScheme: string): string {
+    const number = this.getColorNumber(colorScheme);
+    let color: string = UDExPromoTileColorSheme.Blue8;
+
+    if (number === 7) {
+      color = "NeutralWhite";
+    } else if (this._darkModeColors.includes(number)) {
+      color = colorScheme.replace(`${number}`, `${number - 7}`);
+    } else if (this._lightModeColors.includes(number)) {
+      color = colorScheme.replace(`${number}`, `${number + 7}`);
+    }
+    return color;
+  }
+
+  get isMobile(): boolean {
+    return BreakpointUtils.isAtMost("S");
+  }
+
+  get promoTileContainerText(): string {
+    return this.accessibleName || this.header || UDExPromoTile.i18nBundle.getText(PROMO_TILE);
+  }
+
+  get _showPictogram(): boolean {
+    return !!this.icon || !!this.logoUrl;
+  }
+
+  get _showLogo(): boolean {
+    return !this.icon && !!this.logoUrl;
+  }
+
+  get _imageLabel(): string {
+    return this.imageLabel || UDExPromoTile.i18nBundle.getText(PROMO_TILE_ICON);
+  }
+
+  handleCTAButtonClick(e: Event) {
+    e.preventDefault();
+    this.fireDecoratorEvent("button-click");
+  }
+}
+
+UDExPromoTile.define();
+
+export default UDExPromoTile;

package/src/PromoTileTemplate.tsx

@@ -0,0 +1,68 @@
+import type UDExPromoTile from "./PromoTile.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+
+export default function PromoTileTemplate(this: UDExPromoTile) {
+  const rootClass = "udex-promo-tile";
+
+  return (
+    <div
+      role="region"
+      class={`${rootClass}__container ${rootClass}--${this.orientation?.toLowerCase()} ${rootClass}--${this._colorMode}`}
+      aria-label={this.promoTileContainerText}>
+      {this._showPictogram &&
+        <div
+          part="image"
+          class={{
+            "udex-promo-tile__pictogram": true,
+            "udex-promo-tile__pictogram--logo": this.logoUrl
+          }}
+          title={this._imageLabel}>
+          {this.icon &&
+            <UI5Icon
+              class={`${rootClass}__icon`}
+              name={this.icon?.toLowerCase()}
+              mode={IconMode.Decorative}
+              accessibleName={this._imageLabel}>
+            </UI5Icon>}
+          {this._showLogo &&
+            <img
+              src={this.logoUrl}
+              class={`${rootClass}__icon`}
+              aria-label={this._imageLabel}
+              alt={this._imageLabel} />}
+        </div>
+      }
+      <div part="content" class={`${rootClass}__content`}>
+        <div class={`${rootClass}__text`}>
+          {this.eyebrow &&
+            <div class={`${rootClass}__eyebrow eyebrow--l`}>{this.eyebrow}</div>
+          }
+          {this.header &&
+            <div part="header" class={`${rootClass}__header`}>{this.header}</div>
+          }
+          <slot></slot>
+        </div>
+        {!!this.button && footerSection.call(this, rootClass)}
+      </div>
+    </div>
+  );
+}
+function footerSection(this: UDExPromoTile, rootClass: string) {
+  return (
+    <>
+      <div part="footer" class={`${rootClass}__footer`}>
+        <UDExButton class={`${rootClass}__btn`}
+          size={UDExButtonSize.Large}
+          design={this.buttonDesign}
+          onClick={this.handleCTAButtonClick}
+          accessibleRole={UDExButtonAccessibleRole.Button}>
+          {this.button}
+        </UDExButton>
+      </div>
+    </>
+  );
+}