@salesforcedevs/dx-components 1.28.0 → 1.28.1-banner-1

package/lwc.config.json

@@ -56,6 +56,7 @@
         "dx/featuresListHeader",
         "dx/filterMenu",
         "dx/footer",
+        "dx/footerMfe",
         "dx/formattedDateTime",
         "dx/formattedRichText",
         "dx/grid",
@@ -139,6 +140,9 @@
         "dxUtils/recentSearches",
         "dxUtils/regexps",
         "dxUtils/withTypedRefs",
-        "dxUtils/wordpress"
+        "dxUtils/wordpress",
+        "dxUtils/shiki",
+        "dxUtils/shikiStatic",
+        "dxUtils/shikiCore"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.28.0",
+    "version": "1.28.1-banner-1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "1debd8003256f4071bfd65dffa1f1e5e1acf735d"
+    "gitHead": "66d2158d53e1ed5e503f558021b0e1e0b0206d52"
 }

package/src/modules/dx/alert/alert.css

@@ -4,7 +4,6 @@
 :host {
     --dx-c-alert-top: 0;
     --dx-c-alert-container-align-items: flex-start;
-    --dx-c-alert-horizontal-padding: var(--dx-g-spacing-lg);
     --dx-c-alert-vertical-padding: var(--dx-g-spacing-md);
     --dx-c-alert-success-color: var(--dx-g-green-vibrant-95);
     --dx-c-alert-warning-color: rgb(254 243 217);

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -34,6 +34,7 @@ export default class CodeBlock extends LightningElement {
     private _codeBlockRendered: boolean = false;
     private _showLoadingIndicator: boolean = false;
     private _isCbHeightCalculated: boolean = false;
+    private _plainCodeForCopy: string = "";
     private markupLangs = ["visualforce", "html", "xml"];
     private componentLoaded: boolean = false;
     private showLanguageDropdown: boolean = false;
@@ -290,6 +291,9 @@ export default class CodeBlock extends LightningElement {
                     );
                 }
             }
+            // Get the plain code for copy functionality
+            const codeElement = this.template.querySelector("code");
+            this._plainCodeForCopy = codeElement?.textContent?.trim() ?? "";
             // Add line numbers to each line
             this.addLineNumbers();
         }
@@ -328,12 +332,8 @@ export default class CodeBlock extends LightningElement {
         });
 
         try {
-            const snippetContainer: HTMLElement | null =
-                this.template.querySelector(".code-block-content");
-            if (snippetContainer && snippetContainer.textContent) {
-                await navigator.clipboard.writeText(
-                    snippetContainer.textContent
-                );
+            if (this._plainCodeForCopy) {
+                await navigator.clipboard.writeText(this._plainCodeForCopy);
                 this.copyBtnText = "Copied!";
                 setTimeout(() => {
                     this.copyBtnText = "Click to copy";

package/src/modules/dx/emptyState/emptyState.html

@@ -3,7 +3,7 @@
         <img class={imageClassName} src={imageAssetPath} alt={imageAlt} />
         <img
             class="image-alt-small"
-            src="https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle-small.svg"
+            src="https://developer.salesforce.com/ns-assets/binary-cloud-circle-small.svg"
             alt="Cloud with binary code floating above"
             lwc:if={altVariant}
         />

package/src/modules/dx/emptyState/emptyState.ts

@@ -60,10 +60,10 @@ export default class EmptyState extends LightningElement {
 
     get imageAssetPath() {
         return this.variant === "base"
-            ? `https://a.sfdcstatic.com/developer-website/prod/images/docs-empty-state${
+            ? `https://developer.salesforce.com/ns-assets/docs-empty-state${
                   this.size === "small" ? "-small" : ""
               }.svg`
-            : `https://a.sfdcstatic.com/developer-website/prod/images/binary-cloud-circle${
+            : `https://developer.salesforce.com/ns-assets/binary-cloud-circle${
                   this.size === "small" ? "-small" : ""
               }.svg`;
     }

package/src/modules/dx/error/error.css

@@ -8,9 +8,9 @@
 
 .error_container {
     background-color: #3a49da;
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/bottom-right.svg"),
-        url("https://a.sfdcstatic.com/developer-website/prod/images/lower-left.svg"),
-        url("https://a.sfdcstatic.com/developer-website/prod/images/top-right.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/bottom-right.svg"),
+        url("https://developer.salesforce.com/ns-assets/lower-left.svg"),
+        url("https://developer.salesforce.com/ns-assets/top-right.svg");
     background-position: right bottom, left 90%, right top;
     background-repeat: no-repeat;
     padding: var(--dx-g-spacing-3xl) calc(var(--dx-g-spacing-3xl) + 20px) 130px

package/src/modules/dx/errorFallback/errorFallback.html

@@ -1,7 +1,7 @@
 <template>
     <div class="error-container">
         <img
-            src="https://a.sfdcstatic.com/developer-website/prod/images/error-fallback.svg"
+            src="https://developer.salesforce.com/ns-assets/error-fallback.svg"
             alt="error fallback image"
             class="error-image"
         />

package/src/modules/dx/feature/feature.css

@@ -3,7 +3,7 @@
 
 :host {
     --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgb(0 20 45 / 40%);
-    --dx-c-feature-description-left-img-src: url("https://a.sfdcstatic.com/developer-website/prod/images/feature-backdrop1.svg");
+    --dx-c-feature-description-left-img-src: url("https://developer.salesforce.com/ns-assets/feature-backdrop1.svg");
     --dx-c-feature-description-max-width: 31.75rem;
     --dx-c-feature-img-margin-left: auto;
     --dx-c-feature-img-container-padding: 4rem;
@@ -83,7 +83,7 @@ section {
 
 .description-right .image {
     margin-right: auto;
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/feature-backdrop2.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/feature-backdrop2.svg");
 }
 
 .image-display-container {

package/src/modules/dx/feature/feature.html

@@ -21,7 +21,7 @@
         <div if:true={isDisplay} class="image-display-container">
             <img
                 class="image-display"
-                src="https://a.sfdcstatic.com/developer-website/prod/images/featured-demo-art-blank.svg"
+                src="https://developer.salesforce.com/ns-assets/featured-demo-art-blank.svg"
                 alt={header}
             />
             <div class="image-container">

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -221,8 +221,8 @@
 
 .custom-bg-trial::after {
     content: "";
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/trial-left.svg"),
-        url("https://a.sfdcstatic.com/developer-website/prod/images/trial-right.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/trial-left.svg"),
+        url("https://developer.salesforce.com/ns-assets/trial-right.svg");
     background-position: var(--dx-g-page-padding-horizontal) 50px,
         right 15px top;
     background-repeat: no-repeat;
@@ -235,7 +235,7 @@
 
 @media screen and (max-width: 1024px) {
     .custom-bg-trial::after {
-        background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/trial-left.svg");
+        background-image: url("https://developer.salesforce.com/ns-assets/trial-left.svg");
         background-position: 48px 30px;
         background-size: contain;
     }
@@ -243,7 +243,7 @@
 
 .custom-bg-big-moon::after {
     content: "";
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/big-moon.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/big-moon.svg");
     background-position: top right;
     background-repeat: no-repeat;
     position: absolute;
@@ -258,7 +258,7 @@
     justify-content: center;
     align-items: center;
     position: absolute;
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/blue-circle.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/blue-circle.svg");
     top: 110px;
     right: 230px;
     left: unset;

package/src/modules/dx/featuredContentHeader/svgs.ts

@@ -6,10 +6,10 @@ const treesMobile =
 
 // These codey-* ones are a bit of a hack for now: we were only given a PNG and limited time, so we're wrapping the PNG in an SVG.
 const codeyDesktop =
-    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/prod/images/podcast-bear.png" />';
+    '<svg class="codey-desktop" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://developer.salesforce.com/ns-assets/podcast-bear.png" />';
 
 const codeyMobile =
-    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://a.sfdcstatic.com/developer-website/prod/images/podcast-bear.png" />';
+    '<svg class="codey-mobile" width="381" height="337" viewBox="0 0 381 337" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="381" height="337" xlink:href="https://developer.salesforce.com/ns-assets/podcast-bear.png" />';
 
 const moonDesktop =
     '<svg width="1221" height="507" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482"/><path d="M745.819 45.482c0 24.567-19.915 44.482-44.482 44.482s-44.483-19.915-44.483-44.482C656.854 20.916 676.77 1 701.337 1c24.567 0 44.482 19.916 44.482 44.482Z" stroke="#90D0FE" stroke-width="2"/><path d="M476.154 420.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM99.154 150.627a4.095 4.095 0 1 1-8.191 0 4.095 4.095 0 1 1 8.19 0ZM1210.142 97.587l-1.518 4.1a1.063 1.063 0 0 1-.631.633l-4.102 1.518c-.933.346-.933 1.664 0 2.009l4.102 1.517c.293.109.523.34.63.633l1.519 4.102c.346.93 1.664.93 2.009 0l1.517-4.102c.109-.293.34-.524.633-.633l4.102-1.517c.932-.345.932-1.663 0-2.01l-4.102-1.517a1.068 1.068 0 0 1-.633-.632l-1.517-4.101c-.345-.933-1.663-.933-2.01 0ZM8.142 490.372l-1.518 4.1a1.067 1.067 0 0 1-.632.633l-4.1 1.518c-.934.345-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.1c.345.933 1.664.933 2.01 0l1.516-4.1c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.664 0-2.01l-4.1-1.517a1.071 1.071 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM127.142 115.587l-1.518 4.1a1.064 1.064 0 0 1-.632.633l-4.1 1.518c-.934.346-.934 1.664 0 2.009l4.1 1.517c.293.109.524.34.632.633l1.518 4.102c.345.93 1.664.93 2.01 0l1.516-4.102c.11-.293.34-.524.633-.633l4.101-1.517c.932-.345.932-1.663 0-2.01l-4.1-1.517a1.068 1.068 0 0 1-.634-.632l-1.517-4.101c-.345-.933-1.664-.933-2.009 0ZM909.009 306.108c-5.999-11.612-9.387-24.793-9.387-38.765 0-11.403 2.257-22.279 6.348-32.206M1067.92 255.215c.568 3.96.862 8.01.862 12.129 0 46.713-37.867 84.58-84.58 84.58-28.474 0-53.664-14.071-68.99-35.64M911.555 224.004c14.768-24.701 41.776-41.24 72.647-41.24 38.302 0 70.658 25.459 81.068 60.378M1055.511 147.787l-3.452 9.329a2.439 2.439 0 0 1-1.44 1.44l-9.329 3.452c-2.121.784-2.121 3.784 0 4.569l9.329 3.452a2.436 2.436 0 0 1 1.44 1.44l3.452 9.329c.785 2.12 3.785 2.12 4.569 0l3.452-9.33a2.441 2.441 0 0 1 1.44-1.44l9.329-3.451c2.121-.785 2.121-3.785 0-4.57l-9.329-3.451a2.444 2.444 0 0 1-1.44-1.44l-3.452-9.33c-.784-2.12-3.784-2.12-4.569 0ZM919.251 376.385c0 5.69-4.614 10.304-10.306 10.304-5.69 0-10.305-4.613-10.305-10.305 0-5.692 4.614-10.306 10.305-10.306 5.692 0 10.306 4.615 10.306 10.307Z" stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M984.116 224.502a5.027 5.027 0 1 1-10.054 0 5.027 5.027 0 0 1 10.054 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1046.716 254.771h29.772M1087.929 254.771h7.089M902.279 225.33h23.242M870.108 225.33h10.053"/><path d="M893.055 225.33a2.01 2.01 0 1 1-4.021 0 2.01 2.01 0 0 1 4.02 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M893.425 315.627h31.409"/><path d="M936.898 315.627a2.011 2.011 0 1 1-4.023 0 2.011 2.011 0 0 1 4.023 0" fill="#90D0FE"/><path stroke="#90D0FE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1013.52 292.398v-16.036M1021.537 284.382l-16.051.002"/></g></svg>';

package/src/modules/dx/footer/footer.css

@@ -113,7 +113,7 @@ footer.signup-variant-no-signup {
     height: 112px;
     width: 110px;
     margin-right: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-trees.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/footer-graphic-trees.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -121,7 +121,7 @@ footer.signup-variant-no-signup {
     height: 96px;
     width: 220px;
     margin-right: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-mountains-2.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/footer-graphic-mountains-2.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -132,7 +132,7 @@ footer.signup-variant-no-signup {
     bottom: 0;
     height: 56px;
     width: 100px;
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-mountains-small-2.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/footer-graphic-mountains-small-2.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -140,7 +140,7 @@ footer.signup-variant-no-signup {
     height: 66px;
     width: 52px;
     margin-left: var(--dx-g-spacing-lg);
-    background-image: url("https://a.sfdcstatic.com/developer-website/prod/images/footer-graphic-trees-small.svg");
+    background-image: url("https://developer.salesforce.com/ns-assets/footer-graphic-trees-small.svg");
     filter: var(--dx-g-svg-filter);
 }
 
@@ -275,3 +275,175 @@ footer.signup-variant-no-signup {
         width: 100%;
     }
 }
+
+/*
+================================
+BEGIN OLD FOOTER STYLES -- CAN BE DELETED ONCE FOOTER MFE IS RE-DEPLOYED
+================================
+*/
+.term-icon {
+    width: 35px;
+    margin: 0 var(--dx-g-spacing-xs);
+}
+
+.content-container_middle {
+    display: grid;
+    grid-gap: var(--dx-g-spacing-xl);
+    grid-template:
+        "logo general" auto
+        "socials general" max-content
+        "locales general" max-content / auto max-content;
+    background: var(--dx-footer-themed-background-color);
+    padding-top: var(--dx-g-spacing-4xl);
+    padding-bottom: var(--dx-g-spacing-3xl);
+}
+
+.logo {
+    grid-area: logo;
+    width: max-content;
+    height: var(--dx-g-spacing-4xl);
+}
+
+.logo > img {
+    height: 100%;
+    user-select: none;
+    -webkit-user-drag: none;
+}
+
+.general {
+    grid-area: general;
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-gap: var(--dx-g-spacing-4xl);
+}
+
+.locales {
+    grid-area: locales;
+}
+
+.socials {
+    grid-area: socials;
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-auto-rows: min-content;
+    grid-gap: var(--dx-g-spacing-sm);
+}
+
+.socials > a {
+    border-radius: 50%;
+    height: var(--dx-g-spacing-xl);
+    width: var(--dx-g-spacing-xl);
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.terms a {
+    color: var(--dx-g-blue-vibrant-70);
+    text-decoration: underline;
+}
+
+.terms > span,
+.terms_links > a {
+    margin: var(--dx-g-spacing-sm) 0;
+}
+
+.terms > span > a {
+    display: inline;
+}
+
+.terms a:hover {
+    color: var(--dx-g-blue-vibrant-80);
+}
+
+.socials > a:hover {
+    background: var(--dx-g-blue-vibrant-80);
+}
+
+.socials > a > svg {
+    fill: var(--dx-footer-themed-svg-icon-color);
+    height: 100%;
+}
+
+/* BOTTOM */
+.content-container_bottom {
+    display: flex;
+    background: var(--dx-footer-themed-terms-and-conditions-background-color);
+}
+
+.content-container_bottom a {
+    text-decoration: underline;
+}
+
+.terms {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    margin: var(--dx-g-spacing-md) 0;
+}
+
+.terms > span {
+    padding-right: var(--dx-g-spacing-lg);
+    color: white;
+}
+
+.terms > span > img {
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.terms_links {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.terms_links > *:not(:last-child) {
+    margin-right: var(--dx-g-spacing-lg);
+}
+
+@media screen and (max-width: 1024px) {
+    .content-container_middle {
+        grid-gap: var(--dx-g-spacing-lg);
+        padding-top: var(--dx-g-spacing-2xl);
+        padding-bottom: var(--dx-g-spacing-2xl);
+    }
+
+    .logo {
+        height: var(--dx-g-spacing-2xl);
+    }
+
+    .socials > a {
+        height: var(--dx-g-spacing-lg);
+        width: var(--dx-g-spacing-lg);
+    }
+
+    .socials > a > dx-icon {
+        --dx-c-icon-size: var(--dx-g-icon-size-xs);
+    }
+
+    .socials > a.github > dx-icon {
+        --dx-c-icon-size: var(--dx-g-spacing-lg);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .content-container_middle {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .term-icon {
+        margin-left: 0;
+    }
+}
+
+/*
+================================
+END OLD FOOTER STYLES -- CAN BE DELETED ONCE FOOTER MFE IS RE-DEPLOYED
+================================
+*/

package/src/modules/dx/footer/footer.html

@@ -1,7 +1,7 @@
 <template>
     <footer class={className}>
         <div
-            if:true={showSmallSignup}
+            lwc:if={showSmallSignup}
             class="content-container content-container_top"
         >
             <div class="graphic graphic-trees" alt=""></div>
@@ -14,7 +14,7 @@
             <div class="graphic graphic-trees-small" alt=""></div>
         </div>
         <div
-            if:true={showLargeSignup}
+            lwc:if={showLargeSignup}
             class="content-container content-container_top_large"
         >
             <div class="graphic graphic-large" alt=""></div>
@@ -34,7 +34,7 @@
                 </dx-button>
             </div>
         </div>
-        <div if:true={showLargeNoSignup} class={largeNoSignupClassName}>
+        <div lwc:if={showLargeNoSignup} class={largeNoSignupClassName}>
             <div class="graphic graphic-large" alt=""></div>
             <slot
                 class="large-signup-heading"
@@ -43,8 +43,96 @@
             ></slot>
         </div>
         <dx-footer-mfe
+            lwc:if={useMfe}
             legal-only={showLegalOnly}
             origin={mfeConfigOrigin}
+            home-href={mfeHomeHref}
         ></dx-footer-mfe>
+        <!-- TODO: Probably just remove template below and always render the dx-footer-mfe above once footer MFE supports rendering in non-full-width contexts -->
+        <template lwc:else>
+            <div
+                lwc:if={showContainerMiddle}
+                class="content-container content-container_middle"
+            >
+                <a class="logo" href="/" onclick={handleLogoClick}>
+                    <img
+                        src="https://developer.salesforce.com/ns-assets/salesforce-logo-corporate.svg"
+                        alt="Salesforce logo"
+                    />
+                </a>
+                <div class="socials">
+                    <template for:each={socialLinks} for:item="link">
+                        <a
+                            aria-label={link.label}
+                            href={link.href}
+                            key={link.iconSymbol}
+                            class={link.iconSymbol}
+                            target="_blank"
+                            rel="noopener"
+                            onclick={handleSocialLinkClick}
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                part="svg"
+                                aria-hidden="true"
+                            >
+                                <use xlink:href={link.iconURL}></use>
+                            </svg>
+                        </a>
+                    </template>
+                </div>
+                <div class="general">
+                    <template for:each={generalLinks} for:item="item">
+                        <div class="footer-group" key={item.id}>
+                            <h2 class="subheading">{item.label}</h2>
+                            <template for:each={item.options} for:item="option">
+                                <dx-footer-option
+                                    key={option.id}
+                                    general-label={item.label}
+                                    label={option.label}
+                                    href={option.link.href}
+                                    target={option.link.target}
+                                ></dx-footer-option>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="content-container content-container_bottom">
+                <div class="terms">
+                    <span class="copyright-notice" lwc:dom="manual"></span>
+                    <div class="terms_links">
+                        <template for:each={termsLinks} for:item="term">
+                            <template lwc:if={term.onclick}>
+                                <a
+                                    href={term.href}
+                                    key={term.label}
+                                    rel={term.rel}
+                                    onclick={handleCookiePreferencesClick}
+                                >
+                                    {term.label}
+                                </a>
+                            </template>
+                            <template lwc:else>
+                                <a
+                                    href={term.href}
+                                    key={term.label}
+                                    rel={term.rel}
+                                    onclick={handleTermsClick}
+                                >
+                                    <img
+                                        lwc:if={term.img}
+                                        class="term-icon"
+                                        src={term.img}
+                                        alt="Footer Term Icon"
+                                    />
+                                    {term.label}
+                                </a>
+                            </template>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </template>
     </footer>
 </template>