@salesforcedevs/dx-components 1.3.251-alpha.1 → 1.3.251-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.251-alpha.1",
+    "version": "1.3.251-alpha.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/cardContent/cardContent.css

@@ -29,37 +29,6 @@
     margin-bottom: 0 !important;
 }
 
-dx-hr {
-    --dx-c-hr-padding-horizontal: 0;
-    --dx-c-hr-color: var(--dx-g-gray-80);
-    --dx-c-stroke-width: 1px;
-
-    margin-top: -20px;
-}
-
-.profile-container {
-    display: flex;
-    align-items: center;
-}
-
-.profile-image {
-    height: 48px;
-    width: 48px;
-    border-radius: 48px;
-}
-
-.profile-text-container {
-    margin-left: 10px;
-}
-
-.profile-text-container p {
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-dx-icon-badge {
-    margin-left: auto;
-}
-
 /* mobile responsiveness */
 
 @media screen and (max-width: 768px) {

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

@@ -63,24 +63,5 @@
                 ></slot>
             </span>
         </div>
-        <dx-hr lwc:if={hasSocial} spacing="smd"></dx-hr>
-        <div class="profile-container" lwc:if={hasSocial}>
-            <img
-                class="profile-image"
-                src={socialProfileImgSrc}
-                alt="user profile picture"
-            />
-            <div class="profile-text-container">
-                <p class="dx-text-display-8">{socialName}</p>
-                <p class="dx-text-body-3">{socialJobTitle}</p>
-            </div>
-            <dx-icon-badge
-                symbol={socialPlatform}
-                sprite="brand"
-                background-color="blue-vibrant-20"
-                icon-size="medium"
-                background-size="medium"
-            ></dx-icon-badge>
-        </div>
     </div>
 </template>

package/src/modules/dx/cardContent/cardContent.ts

@@ -20,11 +20,6 @@ export default class CardContent extends LightningElement {
     @api title!: string;
     @api hrefClick: any = null;
     @api contentType: string | null = null;
-    @api hasSocial?: boolean = false;
-    @api socialName?: string;
-    @api socialJobTitle?: string;
-    @api socialProfileImgSrc?: string;
-    @api socialPlatform?: string;
     @api
     get authors() {
         if (this._authors && this._authors.length) {

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -8,15 +8,10 @@
         layout={layout}
         target={target}
         title={title}
-        has-social={hasSocial}
-        social-name={socialName}
-        social-job-title={socialJobTitle}
-        social-platform={socialPlatform}
-        social-profile-img-src={socialProfileImgSrc}
     >
         <dx-icon-badge
             class="dx-play-button"
-            symbol={overlayIcon}
+            symbol="play"
             background-color="white"
             slot="image-badge"
         ></dx-icon-badge>

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -10,10 +10,4 @@ export default class CardVideoPreview extends LightningElement {
     @api target?: string | null = null;
     @api layout: "vertical" | "horizontal" = "vertical";
     @api title!: string;
-    @api hasSocial?: boolean = false;
-    @api socialName?: string;
-    @api socialJobTitle?: string;
-    @api socialPlatform?: string;
-    @api socialProfileImgSrc?: string;
-    @api overlayIcon? = "play";
 }

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

@@ -0,0 +1,33 @@
+@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: flex;
+    align-items: center;
+}
+
+.profile-text {
+    margin-left: 10px;
+}
+
+.profile-text p {
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+dx-icon-badge {
+    margin-left: auto;
+}

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

@@ -0,0 +1,49 @@
+<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-icon-badge
+                    symbol={socialPlatform}
+                    sprite="brand"
+                    background-color="blue-vibrant-20"
+                    icon-size="medium"
+                    background-size="medium"
+                ></dx-icon-badge>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,36 @@
+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 socialPlatform?: string;
+    @api socialName?: string;
+    @api socialJobTitle?: string;
+    @api socialProfileImgSrc?: 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}`;
+    }
+}