@sapudex/web-components 2.14.0 → 2.16.0

package/src/FooterTemplate.tsx

@@ -0,0 +1,410 @@
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UI5LinkDesign from "@ui5/webcomponents/dist/types/LinkDesign.js";
+
+import headset from "@ui5/webcomponents-icons/dist/headset.js";
+import email from "@ui5/webcomponents-icons/dist/email.js";
+import backToTop from "@ui5/webcomponents-icons/dist/back-to-top.js";
+import discussion from "@ui5/webcomponents-icons/dist/discussion-2.js";
+
+import type Footer from "./Footer.js";
+import UDExLink from "./Link.js";
+import UDExDivider from "./Divider.js";
+import UDExSocialMediaButton from "./SocialMediaButton.js";
+import UDExAccordion from "./Accordion.js";
+import UDExAccordionItem from "./AccordionItem.js";
+import UDExButton from "./Button.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+
+export default function FooterTemplate(this: Footer) {
+  const rootClass = "udex-footer";
+
+  return (
+    <footer className={rootClass}>
+      <div className={`${rootClass}__content`}>
+        <div className={`${rootClass}__contact-social`}>
+          {this.hasLogo && (
+            <div className={`${rootClass}__logo`}>
+              {this.hasLogoLink ? (
+                <a
+                  href={this.logoHref}
+                  onClick={this._onLogoClick}
+                  title={this.logoTitle}
+                  aria-label={this.logoAriaLabel}>
+                  <img
+                    id={`${rootClass}__logo-image`}
+                    src={this.currentLogoUrl}
+                    className={this.logoClass}
+                    alt={this.logoAlt}
+                  />
+                </a>
+              ) : (
+                <img
+                  id={`${rootClass}__logo-image`}
+                  src={this.currentLogoUrl}
+                  className={this.logoClass}
+                  alt={this.logoAlt}
+                />
+              )}
+              {this.hasTagline && (
+                <img
+                  id={`${rootClass}__tagline-image`}
+                  src={this.currentTaglineUrl}
+                  className={this.taglineClass}
+                  alt={this.taglineAlt}
+                />
+              )}
+            </div>
+          )}
+          {this.isContactContainerVisible && (
+            <div className={`${rootClass}__contact`}>
+              {this.contactNumbersArray.length > 0 && (
+                <div className={`${rootClass}__numbers`}>
+                  <div className={`${rootClass}__icon-container`}>
+                    <UI5Icon
+                      class={`${rootClass}__icon`}
+                      name={headset}
+                      mode={IconMode.Decorative}
+                    ></UI5Icon>
+                  </div>
+                  <div>
+                    <div className={`${rootClass}__numbers-wrapper`}>
+                      {this.contactNumbersArray.map((contact, index) => (
+                        <div key={index}>
+                          <span
+                            className="hidden"
+                            aria-hidden
+                            id={`${rootClass}__${index}_phone-label`}>
+                            {`${this.phoneNumberAccessibleName} ${contact.country} : ${contact.number}`}
+                          </span>
+                          <p className={`${rootClass}__country`}>{contact.country}</p>
+                          <a
+                            href={`tel:${contact.number}`}
+                            className={`${rootClass}__number`}
+                            onClick={this._onContactPhoneClick}
+                            aria-labelledby={`${rootClass}__${index}_phone-label`}>
+                            {contact.number}
+                          </a>
+                        </div>
+                      ))}
+                    </div>
+                    {this.localCountryNumbersLink && (
+                      <p className={`${rootClass}__remark`}>
+                        {this.completeListTitle}
+                        <UDExLink
+                          class={`${rootClass}__remark-link`}
+                          onClick={this._onContactPhoneLocalNumbersClick}
+                          href={this.localCountryNumbersLink}
+                          design={UI5LinkDesign.Subtle}>
+                          {this.localCountryTitle}.
+                        </UDExLink>
+                      </p>
+                    )}
+                  </div>
+                </div>
+              )}
+              {this.contactUsLink && (
+                <div className={`${rootClass}__contact-us`}>
+                  <div className={`${rootClass}__icon-container`}>
+                    <UI5Icon
+                      class={`${rootClass}__icon`}
+                      name={email}
+                      mode={IconMode.Decorative}>
+                    </UI5Icon>
+                  </div>
+                  <span
+                    className="hidden"
+                    aria-hidden
+                    id={`${rootClass}__contact-us-label`}>
+                    {this.contactUsAccessibleLabel}
+                  </span>
+                  <a
+                    href={this.contactUsLink}
+                    className={`${rootClass}__contact-us-link`}
+                    aria-labelledby={`${rootClass}__contact-us-label`}
+                    onClick={this._onContactEmailClick}>
+                    {this.contactUsAccessibleName}
+                  </a>
+                </div>
+              )}
+              {this.chatWithUsLink && (
+                <div className={`${rootClass}__chat-with-us`}>
+                  <div className={`${rootClass}__icon-container`}>
+                    <UI5Icon
+                      class={`${rootClass}__icon`}
+                      name={discussion}
+                      mode={IconMode.Decorative}>
+                    </UI5Icon>
+                  </div>
+                  <a
+                    href={this.chatWithUsLink}
+                    className={`${rootClass}__chat-with-us-link`}
+                    onClick={this._onContactChatClick}>
+                    {this.chatWithUsAccessibleName}
+                  </a>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {this.isContactContainerVisible && (
+          <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
+        )}
+
+        {this._shouldRenderMobileMenu ? (
+          mobileNavigation.call(this, rootClass)
+        ) : (
+          desktopNavigation.call(this, rootClass)
+        )}
+
+        <UDExDivider class={`${rootClass}__divider`}></UDExDivider>
+      </div>
+
+      <div className={`${rootClass}__copyright`}>
+        {this.isChineseLang && (
+          <span className={`${rootClass}__copyright-chinese-text`}>
+            <a
+              href={this.chineseIcpNumberLink}
+              title={this.chineseICPNumber}
+              className={`${rootClass}__copyright-chinese-link`}
+              target="_blank"
+              rel="noopener noreferrer">
+              {this.chineseICPNumber}
+            </a>
+            {this.chineseSecurityNetworkNumber}
+          </span>
+        )}
+        <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>
+      </div>
+
+      {this.socialLinksArray.length > 0 && (
+        <div className={`${rootClass}__social-container`}>
+          {this.socialLinksArray.map((social, index) => (
+            <UDExSocialMediaButton
+              key={index}
+              type={social.name}
+              url={social.url}
+              target={social.target}
+              accessible-name={social.accessibleName}
+              data-name={social.name}
+              data-id={social.id}
+              onui5-click={this._onSocialMediaLinkClick}>
+            </UDExSocialMediaButton>
+          ))}
+        </div>
+      )}
+
+      <UDExButton
+        class={`${rootClass}__back-to-top-button`}
+        icon={backToTop}
+        onClick={this.onBackToTopClick}
+        design={UDExButtonDesign.Tertiary}
+        size={UDExButtonSize.Large}
+        accessibleName="back to top">
+      </UDExButton>
+    </footer>
+  );
+}
+
+function mobileNavigation(this: Footer, rootClass: string) {
+  return (
+    <UDExAccordion class={`${rootClass}__accordion`}>
+      {this.quickLinksArray.length > 0 && (
+        <>
+          <UDExAccordionItem label={this._quickLinksTitle} class={`${rootClass}__action-item`}>
+            <ul className={`${rootClass}__links-list udex-footer__links-list--mobile`}>
+              {this.quickLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__quick-links`}
+                    href={link.url}
+                    data-id={link.id}
+                    onClick={this._onQuickLinksClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__quick-links`}>
+              {this._quickLinksTitle}
+            </h3>
+          </UDExAccordionItem>
+        </>
+      )}
+
+      {this.trendingLinksArray.length > 0 && (
+        <>
+          <UDExAccordionItem label={this._trendingTitle} class={`${rootClass}__action-item`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>
+              {this.trendingLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__footer__trending`}
+                    href={link.url}
+                    data-id={link.id}
+                    onClick={this._onTrendingClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__trending`}>
+              {this._trendingTitle}
+            </h3>
+          </UDExAccordionItem>
+        </>
+      )}
+
+      {this.aboutLinksArray.length > 0 && (
+        <>
+          <UDExAccordionItem label={this._aboutSapTitle} class={`${rootClass}__action-item`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>
+              {this.aboutLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__about`}
+                    href={link.url}
+                    data-id={link.id}
+                    onClick={this._onAboutSapClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__about`}>
+              {this._aboutSapTitle}
+            </h3>
+          </UDExAccordionItem>
+        </>
+      )}
+
+      {this.siteInformationLinksArray.length > 0 && (
+        <>
+          <UDExAccordionItem label={this._siteInformationTitle} class={`${rootClass}__action-item`}>
+            <ul className={`${rootClass}__links-list rootClass__links-list--mobile`}>
+              {this.siteInformationLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__site-information`}
+                    href={link.url}
+                    data-id={link.id}
+                    onClick={this._onSiteInformationClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+            <h3 className={`${rootClass}__links-item hidden`} aria-hidden="true" id={`${rootClass}__site-information`}>
+              {this._siteInformationTitle}
+            </h3>
+          </UDExAccordionItem>
+        </>
+      )}
+    </UDExAccordion>
+  );
+}
+
+function desktopNavigation(this: Footer, rootClass: string) {
+  return (
+    <div className={`${rootClass}__links`}>
+      {this.quickLinksArray.length > 0 && (
+        <div className={`${rootClass}__links-group ${rootClass}__quick-links`}>
+          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__quick-links`}>
+            {this._quickLinksTitle}
+          </h3>
+          <nav aria-labelledby={`${rootClass}__quick-links`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+              {this.quickLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__quick-links`}
+                    data-id={link.id}
+                    href={link.url}
+                    onClick={this._onQuickLinksClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      )}
+      {this.trendingLinksArray.length > 0 && (
+        <div className={`${rootClass}__links-group ${rootClass}__trending-links`}>
+          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__trending`}>
+            {this._trendingTitle}
+          </h3>
+          <nav aria-labelledby={`${rootClass}__trending`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+              {this.trendingLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__footer__trending`}
+                    data-id={link.id}
+                    href={link.url}
+                    onClick={this._onTrendingClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      )}
+      {this.aboutLinksArray.length > 0 && (
+        <div className={`${rootClass}__links-group ${rootClass}__about-links`}>
+          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__about`}>
+            {this._aboutSapTitle}
+          </h3>
+          <nav aria-labelledby={`${rootClass}__about`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+              {this.aboutLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__about`}
+                    data-id={link.id}
+                    href={link.url}
+                    onClick={this._onAboutSapClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      )}
+      {this.siteInformationLinksArray.length > 0 && (
+        <div className={`${rootClass}__links-group ${rootClass}__site-information-links`}>
+          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__site-information`}>
+            {this._siteInformationTitle}
+          </h3>
+          <nav aria-labelledby={`${rootClass}__site-information`}>
+            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>
+              {this.siteInformationLinksArray.map((link, index) => (
+                <li key={index}>
+                  <a
+                    target={link.target}
+                    aria-describedby={`${rootClass}__site-information`}
+                    data-id={link.id}
+                    href={link.url}
+                    onClick={this._onSiteInformationClick}>
+                    {link.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/HeroBanner.ts

@@ -2,12 +2,12 @@ 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/media-play.js";
 import "@ui5/webcomponents-icons/dist/media-pause.js";
-import HeroBannerTemplate from "./generated/templates/HeroBannerTemplate.lit.js";
+import HeroBannerTemplate from "./HeroBannerTemplate.js";
 
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
@@ -27,7 +27,7 @@ export enum UDExImageLoadingStrategies {
  */
 @customElement({
   tag: "udex-hero-banner",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: HeroBannerCss,
   template: HeroBannerTemplate,
   dependencies: [Icon],
@@ -148,7 +148,7 @@ class UDExHeroBanner extends UI5Element {
   }
 
   get wrapperBackgroundImage(): string {
-    return this.backgroundGradient ? `background-image:${this.backgroundGradient}` : "";
+    return this.backgroundGradient ? this.backgroundGradient : "";
   }
 
   /**

package/src/HeroBannerTemplate.tsx

@@ -0,0 +1,101 @@
+import type HeroBanner from "./HeroBanner.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function HeroBannerTemplate(this: HeroBanner) {
+  const rootClass = "udex-hero-banner";
+
+  return (
+    <div
+      className={this.heroBannerClasses}
+      part="wrapper"
+      style={{
+        backgroundColor: this.wrapperBackgroundColor,
+        ...(this.wrapperBackgroundImage ? { backgroundImage: this.wrapperBackgroundImage } : {})
+      }}>
+      {this.hasBackgroundVideo ? (
+        <div
+          className={`${rootClass}__background-video-wrapper`}
+          tabIndex={0}
+          onKeyDown={this._handleKeydown}>
+          <video
+            autoPlay={this.shouldVideoAutoplay}
+            muted
+            loop
+            playsInline
+            part="background-video"
+            className={`${rootClass}__background-video`}
+            aria-label={this.backgroundVideoLabel}>
+            <source src={this.backgroundVideo} type="video/mp4" />
+          </video>
+          <div className={`${rootClass}__background-video-overlay`}></div>
+          {this.hasBackgroundImage && (
+            <picture>
+              <img
+                loading={this.backgroundImageLoadingStrategy}
+                src={this.backgroundImage}
+                part="background-image"
+                className={`${rootClass}__background-image`}
+                alt={this.backgroundImageLabel}/>
+            </picture>
+          )}
+          <div className={`${rootClass}__content-container`}>
+            <slot
+              id={`${rootClass}__content`}
+              name="content"
+              part="content">
+            </slot>
+            <slot
+              id={`${rootClass}__additionalContent`}
+              name="additionalContent"
+              part="additionalContent">
+            </slot>
+          </div>
+          <button
+            className={`${rootClass}__media-button`}
+            aria-label="Play / Pause button"
+            role="button"
+            onClick={this._toggleMediaButton}>
+            <UI5Icon name={this.mediaButtonIconName}></UI5Icon>
+          </button>
+        </div>
+      ) : (
+        <div className={`${rootClass}__container`}>
+          {this.hasCustomBackgroundPicture ? (
+            <slot name="backgroundPicture"></slot>
+          ) : this.hasBackgroundImage ? (
+            <picture>
+              <img
+                loading={this.backgroundImageLoadingStrategy}
+                src={this.backgroundImage}
+                part="background-image"
+                className={`${rootClass}__background-image`}
+                alt={this.backgroundImageLabel}
+              />
+            </picture>
+          ) : null}
+          <div className={`${rootClass}__content-container`}>
+            <slot
+              id={`${rootClass}__content`}
+              name="content"
+              part="content">
+            </slot>
+            {this.hasAdditionalContent && (
+              <slot
+                id={`${rootClass}__additionalContent`}
+                name="additionalContent"
+                part="additionalContent">
+              </slot>
+            )}
+          </div>
+        </div>
+      )}
+      {this.hasMediaContent && (
+        <slot
+          id={`${rootClass}__mediaContent`}
+          name="mediaContent"
+          part="mediaContent">
+        </slot>
+      )}
+    </div>
+  );
+}

package/src/InputGroup.ts

@@ -1,13 +1,13 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import type UDExCheckbox from "./Checkbox.js";
 import type UDExRadioButton from "./RadioButton.js";
 import UDExStatusMessage from "./StatusMessage.js";
-import InputGroupTemplate from "./generated/templates/InputGroupTemplate.lit.js";
+import InputGroupTemplate from "./InputGroupTemplate.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
@@ -49,7 +49,7 @@ export enum UDExOrientation {
 
 @customElement({
   tag: "udex-input-group",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: InputGroupCss,
   template: InputGroupTemplate,
   dependencies: [Icon, UDExStatusMessage],
@@ -119,10 +119,6 @@ class UDExInputGroup extends UI5Element {
     };
   }
 
-  get hasValueState(): boolean {
-    return this.valueState !== "Standard";
-  }
-
   get valueStateText(): string | undefined {
     return this.supportingText || this.valueStateTypeMappings[this.valueState];
   }

package/src/InputGroupTemplate.tsx

@@ -0,0 +1,31 @@
+import type UDExInputGroup from "./InputGroup.js";
+import UDExStatusMessage from "./StatusMessage.js";
+
+export default function InputGroupTemplate(this: UDExInputGroup) {
+  const rootClass = "udex-input-group";
+
+  return (
+    <>
+      <div id={`${this._id}-input-group`}
+        class={`${rootClass}__container`}
+        role="group"
+        aria-describedby={`${this._id}-valueStateDesc`}>
+        <div class={`${rootClass}__content`}>
+          {this._items.map((itemInfo, index) => (
+            <div key={index} class={`${rootClass}__item`}>
+              <slot name={`${itemInfo.item._individualSlot}`}></slot>
+            </div>
+          ))}
+        </div>
+        {this.valueStateText && (
+          <>
+            <UDExStatusMessage supporting-text={this.valueStateText} value-state={this.valueState}></UDExStatusMessage>
+            <span id={`${this._id}-valueStateDesc`} class="hidden-text">
+              {this.valueStateText}
+            </span>
+          </>
+        )}
+      </div>
+    </>
+  );
+}

package/src/MastheadMobileMenu.ts

@@ -532,7 +532,7 @@ class UDExMastheadMobileMenu extends UI5Element {
       }
     }
 
-    if (isExploreMode) {
+    if (isExploreMode && this.hasExploreBtnSlot) {
       analyticsPath.unshift(this.exploreItem.label);
     }
 

package/src/RatingBar.ts

@@ -1,13 +1,13 @@
 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { STARS } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
-import RatingBarTemplate from "./generated/templates/RatingBarTemplate.lit.js";
+import RatingBarTemplate from "./RatingBarTemplate.js";
 
 // Styles
 import RatingBarCss from "./generated/themes/RatingBar.css.js";
@@ -31,7 +31,7 @@ import RatingBarCss from "./generated/themes/RatingBar.css.js";
  */
 @customElement({
   tag: "udex-rating-bar",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: RatingBarCss,
   template: RatingBarTemplate,
   dependencies: [Icon],

package/src/RatingBarTemplate.tsx

@@ -0,0 +1,38 @@
+import type RatingBar from "./RatingBar.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
+
+export default function RatingBarTemplate(this: RatingBar) {
+  const rootClass = "udex-rating-bar";
+
+  return (
+    <div className={`${rootClass}__container`}>
+      <div
+        aria-hidden="true"
+        className={`${rootClass}__rating`}>
+        {this.validatedRating}
+      </div>
+      <UI5Icon
+        aria-labelledby="ratingDescription"
+        name={favorite}
+        class={`${rootClass}__icon`}>
+      </UI5Icon>
+      <div className={`${rootClass}__track`}>
+        <div className={`${rootClass}__progress`}></div>
+      </div>
+      {this.showPercentage && (
+        <div
+          role="note"
+          className={`${rootClass}__percentage`}
+          aria-label={this.validatedPercentage}>
+          {this.validatedPercentage}
+        </div>
+      )}
+      <span
+        id="ratingDescription"
+        className="hidden-text">
+        {this._ratingDescription}
+      </span>
+    </div>
+  );
+}