@salesforcedevs/dx-components 1.28.5 → 1.28.6

package/lwc.config.json

@@ -94,6 +94,7 @@
         "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.5",
+    "version": "1.28.6",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
         "luxon": "3.4.4",
         "msw": "^2.12.4"
     },
-    "gitHead": "2fa9927fc99914ec55e4f8322cec0b8b95d31a68"
+    "gitHead": "586d42fe6b5363288a0b2a0661d740991a53aa68"
 }

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

@@ -0,0 +1,36 @@
+: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

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,76 @@
+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;
+    }
+}