@salesforcedevs/docs-components 1.27.18 → 1.27.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.27.18",
+    "version": "1.27.19",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "39f762aa6e34b9a3607c0f3ce4c1ad445c79c3bc"
+    "gitHead": "e8a07ec5b69da0c6e7f65c2da19e6d6a64573047"
 }

package/src/modules/doc/amfReference/amfReference.html

@@ -3,6 +3,8 @@
         lwc:if={isVersionFetched}
         class="content-type content-type-reference"
         breadcrumbs={breadcrumbs}
+        share-title={shareTitle}
+        share-twitter-via={twitterVia}
         sidebar-header={sidebarHeader}
         sidebar-value={selectedSidebarValue}
         sidebar-content={navigation}

package/src/modules/doc/amfReference/amfReference.ts

@@ -41,6 +41,8 @@ type NavigationItem = {
 
 export default class AmfReference extends LightningElement {
     @api breadcrumbs: string | null = null;
+    /** Optional Twitter "via" handle (e.g. SalesforceDevs) for social share; passed to doc-content-layout. */
+    @api twitterVia: string | null = null;
     @api sidebarHeader!: string;
     @api tocTitle?: string;
     @api tocOptions?: string;
@@ -1482,6 +1484,11 @@ export default class AmfReference extends LightningElement {
         return undefined;
     }
 
+    /** Article name from breadcrumbs, used as share title (e.g. for social share). */
+    get shareTitle(): string {
+        return this.getArticleName() ?? "";
+    }
+
     handleSelectedItem(): void {
         // update topic view
         const { referenceId, amfId, type } = this.selectedTopic!;

package/src/modules/doc/contentLayout/contentLayout.html

@@ -25,10 +25,11 @@
             </div>
             <div class="content-body-container">
                 <div class="content-body">
-                    <doc-breadcrumbs
-                        lwc:if={showBreadcrumbs}
-                        breadcrumbs={breadcrumbs}
-                    ></doc-breadcrumbs>
+                    <div class="breadcrumb-row" lwc:if={showBreadcrumbs}>
+                        <doc-breadcrumbs
+                            breadcrumbs={breadcrumbs}
+                        ></doc-breadcrumbs>
+                    </div>
                     <div class="read" lwc:if={showReadingTime}>
                         <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -44,6 +45,13 @@
                         </svg>
                         {readingTime} minute read
                     </div>
+                    <div class="share-below-read" lwc:if={showSocialShare}>
+                        <doc-social-share
+                            title={shareTitle}
+                            url={shareUrl}
+                            twitter-via={shareTwitterVia}
+                        ></doc-social-share>
+                    </div>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
                         lwc:if={shouldDisplayFeedback}

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -47,6 +47,15 @@ export default class ContentLayout extends LightningElement {
 
     @api readingTime?: number;
 
+    /** Optional document title for social share (e.g. article name from breadcrumbs). When set, share icons are shown on the breadcrumb row. */
+    @api shareTitle: string | null = null;
+
+    /** Optional URL for social share; defaults to current page URL when not set. */
+    @api shareUrl: string | null = null;
+
+    /** Optional Twitter "via" handle (e.g. SalesforceDevs) passed through to doc-social-share. */
+    @api shareTwitterVia: string | null = null;
+
     @api
     get breadcrumbs() {
         return this._breadcrumbs;
@@ -145,6 +154,11 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
+    /** Social share icons are only shown when twitter-via is set. */
+    get showSocialShare(): boolean {
+        return this.showBreadcrumbs && !!this.shareTwitterVia;
+    }
+
     get showReadingTime(): boolean {
         return this.readingTime != null && this.readingTime > 1;
     }

package/src/modules/doc/socialShare/socialShare.css

@@ -0,0 +1,43 @@
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+
+.actions {
+    align-items: center;
+    display: grid;
+    grid-auto-flow: column;
+    grid-column-gap: var(--dx-g-spacing-sm, 12px);
+}
+
+.actions a {
+    margin-right: var(--dx-g-spacing-sm, 12px);
+    color: var(--dx-g-gray-30, #3e3e3c);
+}
+
+.actions a:last-of-type {
+    margin-right: 0;
+}
+
+.actions svg {
+    height: 1rem;
+    width: 1rem;
+}
+
+.actions svg.fill {
+    fill: currentcolor;
+}
+
+.actions svg.fill:hover {
+    fill: var(--dx-g-blue-vibrant-50, #0176d3);
+}
+
+.actions svg.stroke {
+    stroke: currentcolor;
+    fill: currentcolor;
+}
+
+.actions svg.stroke:hover {
+    stroke: var(--dx-g-blue-vibrant-50, #0176d3);
+    fill: var(--dx-g-blue-vibrant-50, #0176d3);
+}

package/src/modules/doc/socialShare/socialShare.html

@@ -0,0 +1,62 @@
+<template>
+    <div class="actions">
+        <a
+            class="fill"
+            href={shareTwitter}
+            target="_blank"
+            rel="noopener noreferrer"
+            id="Share-on-Twitter"
+            name="Share on Twitter"
+            aria-label="Share on Twitter (opens new tab)"
+            onclick={handleClick}
+        >
+            <svg
+                viewBox="0 0 18 14"
+                class="fill"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M17.308 2.325a7.333 7.333 0 01-2.041.52 3.396 3.396 0 001.565-1.836 7.374 7.374 0 01-2.258.808c-.33-.33-.73-.595-1.176-.775a3.767 3.767 0 00-1.412-.274 3.75 3.75 0 00-2.518.995A3.218 3.218 0 008.43 4.108c.002.254.033.507.094.755A10.658 10.658 0 014.46 3.847a9.912 9.912 0 01-3.256-2.471 3.128 3.128 0 00-.39 2.419c.205.823.738 1.544 1.494 2.017A3.678 3.678 0 01.72 5.39a.124.124 0 000 .053c.005.767.294 1.509.82 2.101.525.592 1.254 1 2.065 1.153-.326.071-.66.1-.995.087a4.39 4.39 0 01-.671 0 3.36 3.36 0 001.265 1.638c.594.412 1.31.645 2.052.666a7.475 7.475 0 01-4.413 1.423 8.92 8.92 0 01-.844-.08 10.571 10.571 0 005.445 1.49c6.526 0 10.096-5.057 10.096-9.446v-.434a6.933 6.933 0 001.767-1.717z"
+                ></path>
+            </svg>
+        </a>
+        <a
+            href={shareLinkedIn}
+            target="_blank"
+            rel="noopener noreferrer"
+            id="Share-on-LinkedIn"
+            name="Share on LinkedIn"
+            aria-label="Share on LinkedIn (opens new tab)"
+            onclick={handleClick}
+        >
+            <svg
+                viewBox="0 0 16 17"
+                class="fill"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M15.923 10.187v6.428H12.51v-5.998c0-1.506-.493-2.535-1.729-2.535-.943 0-1.504.693-1.75 1.364-.09.24-.114.573-.114.908v6.261H5.503s.046-10.158 0-11.21h3.414v1.588l-.023.037h.023v-.037c.453-.762 1.263-1.852 3.076-1.852 2.246 0 3.93 1.602 3.93 5.046zM1.932 0C.764 0 0 .837 0 1.937c0 1.076.742 1.938 1.887 1.938h.022c1.19 0 1.931-.862 1.931-1.938C3.818.837 3.1 0 1.932 0zM.202 16.615h3.413V5.405H.203v11.21z"
+                ></path>
+            </svg>
+        </a>
+        <a
+            href={shareFacebook}
+            target="_blank"
+            rel="noopener noreferrer"
+            id="Share-on-Facebook"
+            name="Share on Facebook"
+            aria-label="Share on Facebook (opens new tab)"
+            onclick={handleClick}
+        >
+            <svg
+                viewBox="0 0 9 18"
+                class="stroke"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M6.115 0c-2.173 0-3.66 1.5-3.66 4.23v2.363H0v3.195h2.455V18h2.926V9.788h2.45l.37-3.195H5.38V4.545c0-.922.236-1.545 1.42-1.545h1.507V.128A18.2 18.2 0 006.115 0z"
+                ></path>
+            </svg>
+        </a>
+    </div>
+</template>

package/src/modules/doc/socialShare/socialShare.ts

@@ -0,0 +1,73 @@
+import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
+
+/**
+ * Social share links for Twitter, LinkedIn, and Facebook.
+ * Renders share URLs that open in a new tab; intended to sit on the same row as breadcrumbs.
+ */
+export default class SocialShare extends LightningElement {
+    /** Page/document title used for Twitter share text. */
+    @api title: string = "";
+
+    /** URL to share; defaults to current page URL when not set. */
+    @api url: string = "";
+
+    /** Optional Twitter "via" handle (e.g. SalesforceArchs, SalesforceDevs). */
+    @api twitterVia: string = "";
+
+    private get shareUrl(): string {
+        return (
+            this.url ||
+            (typeof window !== "undefined" ? window.location.href : "")
+        );
+    }
+
+    get shareTwitter(): string {
+        const text = encodeURIComponent(this.title || document?.title || "");
+        const urlParam = encodeURIComponent(this.shareUrl);
+        const via = this.twitterVia
+            ? `&via=${encodeURIComponent(this.twitterVia)}`
+            : "";
+        return `https://twitter.com/intent/tweet/?text=${text}&url=${urlParam}${via}`;
+    }
+
+    get shareLinkedIn(): string {
+        return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI(
+            this.shareUrl
+        )}`;
+    }
+
+    get shareFacebook(): string {
+        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(
+            this.shareUrl
+        )}`;
+    }
+
+    handleClick(event: Event): void {
+        const anchor = event.currentTarget as HTMLAnchorElement;
+        const platform =
+            anchor?.id === "Share-on-Twitter"
+                ? "Twitter"
+                : anchor?.id === "Share-on-LinkedIn"
+                ? "LinkedIn"
+                : anchor?.id === "Share-on-Facebook"
+                ? "Facebook"
+                : "Unknown";
+
+        track(this.template.host, "custEv_socialShare", {
+            share_platform: platform,
+            share_url: this.shareUrl,
+            share_title:
+                this.title ||
+                (typeof document !== "undefined" ? document.title : "")
+        });
+
+        this.dispatchEvent(
+            new CustomEvent("socialshareclick", {
+                bubbles: true,
+                composed: true,
+                detail: { platform }
+            })
+        );
+    }
+}

package/src/modules/doc/xmlContent/xmlContent.css

@@ -8,6 +8,24 @@ doc-content-layout {
     --dx-c-sidebar-height: calc(100vh - var(--dx-g-global-header-height));
 }
 
+.breadcrumb-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--dx-g-spacing-md);
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.breadcrumb-row doc-breadcrumbs {
+    flex: 1;
+    min-width: 0;
+    margin-bottom: 0;
+}
+
+.breadcrumb-row doc-social-share {
+    flex-shrink: 0;
+}
+
 doc-breadcrumbs {
     --dx-c-popover-z-index: 5;
 

package/src/modules/doc/xmlContent/xmlContent.html

@@ -33,11 +33,17 @@
                 hide-badge={previewVersion}
             ></doc-version-picker>
         </div>
-        <doc-breadcrumbs
-            lwc:if={showBreadcrumbs}
-            breadcrumbs={breadcrumbs}
-            pixel-per-character={breadcrumbPixelPerCharacter}
-        ></doc-breadcrumbs>
+        <div class="breadcrumb-row" lwc:if={showBreadcrumbs}>
+            <doc-breadcrumbs
+                breadcrumbs={breadcrumbs}
+                pixel-per-character={breadcrumbPixelPerCharacter}
+            ></doc-breadcrumbs>
+            <doc-social-share
+                lwc:if={showSocialShare}
+                title={shareTitle}
+                twitter-via={twitterVia}
+            ></doc-social-share>
+        </div>
         <doc-content
             docs-data={docContent}
             page-reference={pageReference}

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -42,6 +42,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     @api apiDomain = "https://developer.salesforce.com";
     @api hideFooter = false;
     @api displayReadingTime = false;
+    /** Optional Twitter "via" handle (e.g. SalesforceDevs) for social share. */
+    @api twitterVia: string | null = null;
 
     @api
     get allLanguages(): Array<Language> {
@@ -679,6 +681,16 @@ export default class DocXmlContent extends LightningElementWithState<{
         return this.breadcrumbs.map((crumb) => crumb.label).join("/");
     }
 
+    /** Article name from breadcrumbs, used as share title (e.g. for social share). */
+    get shareTitle(): string {
+        return this.getArticleName() ?? "";
+    }
+
+    /** Social share icons are only shown when twitter-via is set. */
+    get showSocialShare(): boolean {
+        return !!this.twitterVia;
+    }
+
     private buildBreadcrumbs(): void {
         const { contentDocumentId } = this.pageReference;
         if (!contentDocumentId) {

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -17,6 +17,20 @@
     display: block;
 }
 
+.breadcrumb-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--dx-g-spacing-md);
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
+.breadcrumb-row doc-breadcrumbs {
+    flex: 1;
+    min-width: 0;
+    margin-bottom: 0;
+}
+
 doc-breadcrumbs {
     --dx-c-popover-z-index: 5;
 
@@ -37,6 +51,11 @@ doc-breadcrumbs {
     flex-shrink: 0;
 }
 
+.share-below-read {
+    margin-top: var(--dx-g-spacing-sm, 12px);
+    margin-bottom: var(--dx-g-spacing-lg, 16px);
+}
+
 dx-sidebar,
 dx-sidebar-old {
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);