@salesforcedevs/dx-components 1.28.2 → 1.28.4

package/lwc.config.json

@@ -56,6 +56,7 @@
         "dx/featuresListHeader",
         "dx/filterMenu",
         "dx/footer",
+        "dx/footerMfe",
         "dx/formattedDateTime",
         "dx/formattedRichText",
         "dx/grid",
@@ -93,7 +94,6 @@
         "dx/sidebarOld",
         "dx/sidebarFooterNav",
         "dx/skipNavLink",
-        "dx/socials",
         "dx/spinner",
         "dx/stepSequence",
         "dx/stepSequenceStep",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.28.2",
+    "version": "1.28.4",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "39f762aa6e34b9a3607c0f3ce4c1ad445c79c3bc"
+    "gitHead": "d11123799036226e3b1f23d80cfee54897126dd1"
 }

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

@@ -45,6 +45,7 @@
         <dx-footer-mfe
             legal-only={showLegalOnly}
             origin={mfeConfigOrigin}
+            home-href={mfeHomeHref}
         ></dx-footer-mfe>
     </footer>
 </template>

package/src/modules/dx/footer/footer.ts

@@ -10,6 +10,9 @@ export default class Footer extends LightningElement {
     private signupUrl =
         "https://www.salesforce.com/form/other/role-based-newsletter/?Developer=true";
 
+    @api
+    mfeHomeHref: string = `/${window.location.host}`; // ugly hack: ideally this wouldn't be necessary, but the only way to remove the "See all ways to contact us" link from the footer MFE is to set this to a non-empty value other than "us"; and given the way that the footer works, the non-empty value needs to be something that can be appended to `/` and work correctly
+
     @api
     mfeConfigOrigin: string = `${window.location.origin}/developer/en-us/wp-json`;
 

package/src/modules/dx/footerMfe/footerMfe.ts

@@ -4,6 +4,7 @@ export default class FooterMfe extends LightningElement {
     private footerElement: HTMLElement | null = null;
 
     @api legalOnly = false;
+    @api homeHref: string = `/${window.location.host}`; // ugly hack by default: ideally this wouldn't be necessary, but the only way to remove the "See all ways to contact us" link from the footer MFE is to set this to a non-empty value other than "us"; and given the way that the footer works, the non-empty value needs to be something that can be appended to `/` and work correctly
     @api origin: string = `${window.location.origin}/developer/en-us/wp-json`;
 
     renderedCallback() {

package/src/modules/dx/socials/socials.css

@@ -1,36 +0,0 @@
-:host {
-    display: inline-block;
-}
-
-.details-section {
-    color: var(--dx-g-text-label-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xs);
-    letter-spacing: 0.7px;
-    margin-bottom: var(--dx-g-spacing-sm);
-    text-transform: uppercase;
-}
-
-.details-section span {
-    display: block;
-    line-height: var(--dx-g-spacing-md);
-}
-
-.socials-group {
-    display: flex;
-}
-
-.socials-group a:not(:last-child) {
-    margin-right: var(--dx-g-spacing-md);
-}
-
-dx-icon-badge {
-    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-background-color);
-    --dx-c-icon-badge-color: var(--dx-g-social-svg-icon-color);
-    --dx-c-icon-badge-size: 34px;
-    --dx-c-icon-badge-icon-size: 18px;
-}
-
-dx-icon-badge:hover {
-    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-hover-color);
-}

package/src/modules/dx/socials/socials.html

@@ -1,22 +0,0 @@
-<template>
-    <div class="details-section" if:true={hasDetails}>
-        <template for:each={details} for:item="detail">
-            <span key={detail}>{detail}</span>
-        </template>
-    </div>
-    <div class="socials-group">
-        <template for:each={socials} for:item="social">
-            <a
-                href={social.href}
-                key={social.name}
-                target={linksTarget}
-                title={social.name}
-            >
-                <dx-icon-badge
-                    sprite={spriteName}
-                    symbol={social.symbol}
-                ></dx-icon-badge>
-            </a>
-        </template>
-    </div>
-</template>

package/src/modules/dx/socials/socials.ts

@@ -1,76 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "dxUtils/normalizers";
-
-type Icon = { name: string; symbol: string; baseShareUrl: string };
-
-const URL_TOKEN = "{url}";
-const TEXT_TOKEN = "{text}";
-
-const SOCIAL_ICONS: Array<Icon> = [
-    {
-        name: "Twitter",
-        symbol: "twitter",
-        baseShareUrl: `https://twitter.com/intent/tweet?url=${URL_TOKEN}&text=${TEXT_TOKEN}`
-    },
-    {
-        name: "Linkedin",
-        symbol: "linkedin-in",
-        baseShareUrl: `http://www.linkedin.com/sharing/share-offsite/?url=${URL_TOKEN}`
-    }
-];
-
-const SPRITE_NAME = "brand";
-
-const VALID_TARGETS = ["_self", "_blank", "_parent", "_top", "framename"];
-
-export default class Socials extends LightningElement {
-    private _linksTarget: string = "_blank";
-    private _details: Array<string> = [];
-
-    @api
-    get details() {
-        return this._details;
-    }
-
-    set details(value) {
-        this._details = normalizeToArray(value, "|") as Array<string>;
-    }
-
-    @api
-    get linksTarget(): string {
-        return this._linksTarget;
-    }
-
-    set linksTarget(value: string) {
-        if (value && !VALID_TARGETS.includes(value)) {
-            console.error(
-                `Invalid links target, valid options are: ${VALID_TARGETS.join(
-                    ", "
-                )}`
-            );
-            return;
-        }
-        this._linksTarget = value;
-    }
-
-    get socials() {
-        const url = encodeURIComponent(document.location.href);
-        const text = encodeURIComponent(document.title);
-        return SOCIAL_ICONS.map(({ baseShareUrl, ...value }: Icon) => {
-            return {
-                ...value,
-                href: baseShareUrl
-                    .replace(URL_TOKEN, url)
-                    .replace(TEXT_TOKEN, text)
-            };
-        });
-    }
-
-    get spriteName() {
-        return SPRITE_NAME;
-    }
-
-    get hasDetails() {
-        return this.details && this.details.length > 0;
-    }
-}