@salesforcedevs/dx-components 1.3.260 → 1.3.261

package/lwc.config.json

@@ -38,6 +38,7 @@
         "dx/codeBlock",
         "dx/coveoRecommendations",
         "dx/dropdown",
+        "dx/embeddedVideo",
         "dx/emptyState",
         "dx/faq",
         "dx/feature",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.260",
+    "version": "1.3.261",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,5 +45,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "b839cf5e249f61097ec60de9f07257c7ddbdf0e5"
+    "gitHead": "8f326de081fbbef38ac44074ed4f54190e6416c1"
 }

package/src/modules/dx/cardContent/cardContent.html

@@ -23,10 +23,7 @@
             />
         </a>
         <div
-            class="
-                dx-card-base_section-vertical dx-card-base_column
-                card_section-text
-            "
+            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
             <span if:true={label} part="label" class="label dx-text-label-3">
                 {label}

package/src/modules/dx/embeddedVideo/embeddedVideo.css

@@ -0,0 +1,35 @@
+@import "dxHelpers/text";
+@import "dxHelpers/reset";
+
+iframe {
+    border-radius: 16px;
+}
+
+h2 {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.profile-image {
+    height: 48px;
+    width: 48px;
+    border-radius: 48px;
+}
+
+.profile-container {
+    display: grid;
+    grid-template-columns: 48px 1fr 100px;
+    align-items: center;
+}
+
+.profile-text {
+    margin-left: 10px;
+}
+
+.profile-text p {
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+dx-icon {
+    display: inline;
+    margin: 0 6px;
+}

package/src/modules/dx/embeddedVideo/embeddedVideo.html

@@ -0,0 +1,56 @@
+<template>
+    <div class="container">
+        <template lwc:if={isTwitter}>
+            <iframe
+                scrolling="no"
+                frameborder="0"
+                allowfullscreen="true"
+                title="X Post"
+                src={twitterSrc}
+                height="215"
+                width="382"
+            ></iframe>
+        </template>
+        <template lwc:if={isLinkedin}>
+            <iframe
+                scrolling="no"
+                src={linkedinSrc}
+                height="215"
+                width="382"
+                frameborder="0"
+                allowfullscreen=""
+                title="Embedded post"
+            ></iframe>
+        </template>
+        <h2 class="dx-text-display-6">{title}</h2>
+        <p class="dx-text-body-2">{body}</p>
+        <div lwc:if={hasSocial}>
+            <dx-hr no-padding="true" spacing="smd"></dx-hr>
+            <div class="profile-container">
+                <img
+                    class="profile-image"
+                    src={socialProfileImgSrc}
+                    alt={socialProfileImgAlt}
+                />
+                <div class="profile-text">
+                    <p class="dx-text-display-8">{socialName}</p>
+                    <p class="dx-text-body-3">{socialJobTitle}</p>
+                </div>
+                <dx-button
+                    variant="inline"
+                    icon-symbol="new_window"
+                    target="_blank"
+                    href={href}
+                >
+                    View on
+                    <dx-icon
+                        sprite="brand"
+                        symbol={type}
+                        color={socialIconColor}
+                        size="large"
+                    ></dx-icon>
+                </dx-button>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/embeddedVideo/embeddedVideo.ts

@@ -0,0 +1,40 @@
+import { LightningElement, api } from "lwc";
+
+export default class EmbeddedVideo extends LightningElement {
+    @api type: "twitter" | "linkedin" = "twitter";
+    @api videoId!: string;
+    @api compact = false;
+
+    @api title = "";
+    @api body = "";
+
+    @api hasSocial? = false;
+    @api socialName?: string;
+    @api socialJobTitle?: string;
+    @api socialProfileImgSrc?: string;
+    @api href?: string;
+
+    get isTwitter() {
+        return this.type === "twitter";
+    }
+
+    get twitterSrc() {
+        return `https://platform.twitter.com/embed/Tweet.html?dnt=false&features=eyJ0ZndfdGltZWxpbmVfbGlzdCI6eyJidWNrZXQiOltdLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2ZvbGxvd2VyX2NvdW50X3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9iYWNrZW5kIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19yZWZzcmNfc2Vzc2lvbiI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfZm9zbnJfc29mdF9pbnRlcnZlbnRpb25zX2VuYWJsZWQiOnsiYnVja2V0Ijoib24iLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X21peGVkX21lZGlhXzE1ODk3Ijp7ImJ1Y2tldCI6InRyZWF0bWVudCIsInZlcnNpb24iOm51bGx9LCJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3Nob3dfYmlyZHdhdGNoX3Bpdm90c19lbmFibGVkIjp7ImJ1Y2tldCI6Im9uIiwidmVyc2lvbiI6bnVsbH0sInRmd19kdXBsaWNhdGVfc2NyaWJlc190b19zZXR0aW5ncyI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdXNlX3Byb2ZpbGVfaW1hZ2Vfc2hhcGVfZW5hYmxlZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9LCJ0ZndfdmlkZW9faGxzX2R5bmFtaWNfbWFuaWZlc3RzXzE1MDgyIjp7ImJ1Y2tldCI6InRydWVfYml0cmF0ZSIsInZlcnNpb24iOm51bGx9LCJ0ZndfbGVnYWN5X3RpbWVsaW5lX3N1bnNldCI6eyJidWNrZXQiOnRydWUsInZlcnNpb24iOm51bGx9LCJ0ZndfdHdlZXRfZWRpdF9mcm9udGVuZCI6eyJidWNrZXQiOiJvbiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&frame=false&hideCard=false&hideThread=false&id=${this.videoId}&lang=en&maxWidth=318px&origin=https%3A%2F%2Fpublish.twitter.com%2F%23&sessionId=89704af49f57022abd058f0b4cff7b8ed0d9e820&theme=light&widgetsVersion=2615f7e52b7e0%3A1702314776716&width=318px`;
+    }
+
+    get isLinkedin() {
+        return this.type === "linkedin";
+    }
+
+    get linkedinSrc() {
+        return `https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:${this.videoId}?compact=1`;
+    }
+
+    get socialProfileImgAlt() {
+        return `headshot of ${this.socialName}`;
+    }
+
+    get socialIconColor() {
+        return this.type === "twitter" ? "black" : "blue-vibrant-50";
+    }
+}

package/src/modules/dx/section/section.css

@@ -12,6 +12,8 @@
     --dx-c-section-cta-color: var(--dx-g-blue-vibrant-50);
     --dx-c-section-cta-inline-hover-color: var(--dx-g-blue-vibrant-30);
     --dx-c-section-position: relative;
+    --dx-c-section-graphic-margin-top: var(--graphic-height);
+    --dx-c-section-graphic-margin-bottom: var(--graphic-height);
 }
 
 .section {
@@ -34,11 +36,11 @@
 }
 
 .section.graphic-top:not(.graphic-overlap) {
-    margin-top: var(--graphic-height);
+    margin-top: var(--dx-c-section-graphic-margin-top);
 }
 
 .section.graphic-bottom:not(.graphic-overlap) {
-    margin-bottom: var(--graphic-height);
+    margin-bottom: var(--dx-c-section-graphic-margin-bottom);
 }
 
 .background-graphic {