@deriv-web-design/ui 0.1.26 → 0.1.28

package/block-registry.json

@@ -5822,8 +5822,8 @@
     "name": "Sticky Market Cards",
     "component": "StickyMarketCards",
     "category": "cards",
-    "description": "Scroll-driven stack of overlapping, text-first market cards that pile up via position sticky, scaling and dimming as each card slides over the previous one.",
-    "purpose": "A scroll-driven stack of overlapping, text-first market cards. Each card piles on top of the previous one via `position: sticky` as the user scrolls, scaling down and dimming the card underneath for a layered depth effect. This block is designed to showcase a list of markets, products, or benefits one at a time as the user scrolls, with a maximum of 4 cards visibly stacked at once regardless of total count.",
+    "description": "Scroll-driven stack of overlapping market cards that pile up via position sticky, scaling and dimming as each card slides over the previous one. Default cards use a tinted background image; the lottie variant places a manual-play animation beside stacked title and copy (tactical indices).",
+    "purpose": "A scroll-driven stack of overlapping, text-first market cards. Each card piles on top of the previous one via `position: sticky` as the user scrolls, scaling down and dimming the card underneath for a layered depth effect. This block is designed to showcase a list of markets, products, or benefits one at a time as the user scrolls, with a maximum of 4 cards visibly stacked at once regardless of total count. The `lottie` variant swaps the background image for a manual-play animation panel beside the copy — the same pattern as tactical indices cards on the live site.",
     "keywords": [
       "sticky",
       "cards",
@@ -5837,7 +5837,10 @@
       "synthetics",
       "cfd",
       "trading",
-      "deriv"
+      "deriv",
+      "lottie",
+      "tactical",
+      "animation"
     ],
     "sectionType": "sticky-cards",
     "global": false,
@@ -5846,10 +5849,12 @@
       "items"
     ],
     "optionalFields": [
-      "sectionDescription"
+      "sectionDescription",
+      "variant"
     ],
     "variants": [
-      "default"
+      "default",
+      "lottie"
     ],
     "recommendedPosition": 3,
     "placement": [
@@ -5868,15 +5873,21 @@
       "cardImage": true,
       "cardThemes": true,
       "scrollAnimation": true,
+      "lottie": true,
+      "manualPlayback": true,
       "primaryButton": false,
       "secondaryButton": false,
       "badge": false,
       "avatar": false
     },
     "imageRoles": [
-      "card-background"
+      "card-background",
+      "animation",
+      "poster"
     ],
-    "defaultValues": {},
+    "defaultValues": {
+      "variant": "default"
+    },
     "fields": {
       "items": {
         "type": "array",
@@ -5885,11 +5896,22 @@
           "description": {
             "type": "string",
             "required": true,
-            "maxLength": 150
+            "maxLength": 300
           },
           "imageUrl": {
             "type": "image",
-            "required": false
+            "required": false,
+            "description": "Background image for the default variant. Ignored when variant is \"lottie\"."
+          },
+          "lottiePosterUrl": {
+            "type": "image",
+            "required": false,
+            "description": "Optional still frame while the Lottie is paused or loading."
+          },
+          "lottieSrc": {
+            "type": "string",
+            "required": false,
+            "description": "`.lottie` URL for the media panel when variant is \"lottie\"."
           },
           "theme": {
             "type": "string",
@@ -5919,6 +5941,16 @@
         "type": "string",
         "required": true,
         "maxLength": 80
+      },
+      "variant": {
+        "type": "string",
+        "required": false,
+        "default": "default",
+        "enum": [
+          "default",
+          "lottie"
+        ],
+        "description": "Card layout mode. \"default\" uses a background image with title | description columns; \"lottie\" uses a solid theme card with a manual-play Lottie panel and stacked copy (tactical-indices)."
       }
     }
   },

package/components.manifest.json

@@ -3357,7 +3357,17 @@
             "imageUrl": {
               "type": "string",
               "required": false,
-              "description": "URL of the card's hero image."
+              "description": "URL of the card's hero image (default variant). Ignored when the section `variant` is `\"lottie\"`."
+            },
+            "lottiePosterUrl": {
+              "type": "string",
+              "required": false,
+              "description": "Optional still frame shown while the Lottie is paused / loading (`variant: \"lottie\"` only)."
+            },
+            "lottieSrc": {
+              "type": "string",
+              "required": false,
+              "description": "`.lottie` (or animation-hosting `.json`) URL for the card media panel. Used when the section `variant` is `\"lottie\"`."
             },
             "theme": {
               "type": "StickyMarketCardTheme",
@@ -3380,6 +3390,12 @@
           "type": "string",
           "required": true,
           "description": "Section heading rendered as H2"
+        },
+        "variant": {
+          "type": "StickyMarketCardsVariant",
+          "required": false,
+          "description": "Card layout mode.",
+          "default": "default"
         }
       }
     },

package/dist/index.css

@@ -6326,6 +6326,15 @@
     246,
     247,
     248;
+  --smc-lottie-min-height: 18.75rem;
+  --smc-lottie-aspect: 1312 / 854;
+  --smc-lottie-panel-bg: transparent;
+  --smc-lottie-radius: var(--radius-xl);
+  --smc-lottie-gap: var(--spacing-32);
+  --smc-control-bg: var(--color-slate-50);
+  --smc-control-color: var(--color-slate-1200);
+  --smc-scrim: rgb(0 0 0 / 10%);
+  --smc-focus: var(--border-focus);
 }
 .smc {
   width: 100%;
@@ -6460,6 +6469,106 @@
 .smc__card-desc-wrap {
   flex: 1;
 }
+.smc__card-inner--lottie {
+  padding: var(--smc-lottie-gap);
+  min-height: var(--smc-lottie-min-height);
+  align-items: stretch;
+}
+.smc__card-content--lottie {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
+  align-items: stretch;
+  gap: var(--smc-lottie-gap);
+}
+.smc__card-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  height: 100%;
+  min-width: 0;
+}
+.smc__lottie {
+  position: relative;
+  isolation: isolate;
+  align-self: start;
+  width: 100%;
+  min-width: 0;
+  aspect-ratio: var(--smc-lottie-aspect);
+  overflow: hidden;
+  border-radius: var(--smc-lottie-radius);
+  background-color: var(--smc-lottie-panel-bg);
+}
+.smc__lottie-media {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+}
+.smc__lottie-media > *,
+.smc__lottie-player {
+  width: 100% !important;
+  height: 100% !important;
+}
+.smc__lottie-player {
+  display: flex !important;
+  align-items: stretch !important;
+  justify-content: stretch !important;
+}
+.smc__lottie-media canvas,
+.smc__lottie-player canvas {
+  width: 100% !important;
+  height: 100% !important;
+  display: block;
+}
+.smc__lottie-media img,
+.smc__lottie-poster {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+.smc__lottie-poster {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+}
+.smc__playback-toggle {
+  position: absolute;
+  z-index: 3;
+  display: grid;
+  inset: 0;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  background: var(--smc-scrim);
+  cursor: pointer;
+}
+.smc__playback-toggle--playing {
+  background: transparent;
+}
+.smc__playback-toggle:focus-visible {
+  outline: 2px solid var(--smc-focus);
+  outline-offset: -4px;
+}
+.smc__control-icon {
+  width: 64px;
+  height: 64px;
+  transition: opacity 150ms ease;
+}
+.smc__playback-toggle--playing .smc__control-icon {
+  opacity: 0;
+}
+.smc__playback-toggle--playing:hover .smc__control-icon,
+.smc__playback-toggle--playing:focus-visible .smc__control-icon {
+  opacity: 1;
+}
+.smc__control-disc {
+  fill: var(--smc-control-bg);
+  fill-opacity: 0.88;
+}
+.smc__control-glyph {
+  fill: var(--smc-control-color);
+}
 .smc__card-title {
   margin: 0;
   font-family: var(--font-family-base);
@@ -6481,11 +6590,18 @@
   .smc__card-inner {
     padding: var(--spacing-24) var(--spacing-32);
   }
+  .smc__card-inner--lottie {
+    padding: var(--spacing-24);
+  }
   .smc__card-content {
     grid-template-columns: 1fr;
     align-items: flex-start;
     gap: var(--spacing-24);
   }
+  .smc__card-content--lottie {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-24);
+  }
 }
 
 /* templates/Table/Table.css */