@salesforcedevs/dw-components 1.3.235-alpha.1 → 1.3.235-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.235-alpha.1",
+    "version": "1.3.235-alpha.2",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {

package/src/modules/dw/videoGrid/types.ts

@@ -1,14 +1,12 @@
 export type VideoCardsData = {
-    key: number;
-    body: string;
-    href: string;
-    imgAlt: string;
-    imgSrc: string;
     title: string;
-    target: string;
+    body: string;
     hasSocial: boolean;
     socialName: string;
     socialJobTitle: string;
     socialPlatform: "linkedin-in" | "twitter";
     socialProfileImgSrc: "string";
+    isLinkedin: boolean | undefined;
+    isTwitter: boolean | undefined;
+    videoId: string;
 };

package/src/modules/dw/videoGrid/videoGrid.css

@@ -1,5 +1,24 @@
+.container {
+    display: grid;
+    grid-template-columns: 382px;
+    gap: 27px;
+    justify-content: center;
+}
+
 .pagination-container {
     display: flex;
     justify-content: center;
     margin-top: 36px;
 }
+
+@media (min-width: 790px) {
+    .container {
+        grid-template-columns: repeat(2, 382px);
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        grid-template-columns: repeat(3, 382px);
+    }
+}

package/src/modules/dw/videoGrid/videoGrid.html

@@ -1,23 +1,36 @@
 <template>
-    <dx-grid columns="dynamic">
+    <div class="container">
         <template for:each={currentPageData} for:item="cardData">
-            <dx-card-video-preview
-                key={cardData.id}
-                body={cardData.body}
-                href={cardData.href}
-                img-alt={cardData.imgAlt}
-                img-src={cardData.imgSrc}
-                title={cardData.title}
-                target={cardData.target}
-                has-social={cardData.hasSocial}
-                social-name={cardData.socialName}
-                social-job-title={cardData.socialJobTitle}
-                social-platform={cardData.socialPlatform}
-                social-profile-img-src={cardData.socialProfileImgSrc}
-                overlay-icon="new_window"
-            ></dx-card-video-preview>
+            <template lwc:if={cardData.isTwitter}>
+                <dx-embedded-video
+                    key={cardData.id}
+                    type="twitter"
+                    video-id={cardData.videoId}
+                    title={cardData.title}
+                    body={cardData.body}
+                    has-social={cardData.hasSocial}
+                    social-platform={cardData.socialPlatform}
+                    social-name={cardData.socialName}
+                    social-job-title={cardData.socialJobTitle}
+                    social-profile-img-src={cardData.socialProfileImgSrc}
+                ></dx-embedded-video>
+            </template>
+            <template lwc:elseif={cardData.isLinkedin}>
+                <dx-embedded-video
+                    key={cardData.id}
+                    type="linkedin"
+                    video-id={cardData.videoId}
+                    title={cardData.title}
+                    body={cardData.body}
+                    has-social={cardData.hasSocial}
+                    social-platform={cardData.socialPlatform}
+                    social-name={cardData.socialName}
+                    social-job-title={cardData.socialJobTitle}
+                    social-profile-img-src={cardData.socialProfileImgSrc}
+                ></dx-embedded-video>
+            </template>
         </template>
-    </dx-grid>
+    </div>
     <div class="pagination-container">
         <dx-pagination
             current-page={page}