@deriv-web-design/ui 0.1.15 → 0.1.18

package/block-registry.json

@@ -4523,6 +4523,116 @@
       }
     }
   },
+  "resource-banner": {
+    "id": "resource-banner",
+    "name": "Resource Banner",
+    "component": "ResourceBanner",
+    "category": "cta",
+    "description": "Rounded dark card with a heading and supporting paragraph on the left and a vertically-stacked list of external resource links on the right.",
+    "purpose": "Use this template to point readers at related guides, policies, or reference pages at the end of an informational section — the \"here's where to read more\" block.",
+    "keywords": [
+      "resources",
+      "banner",
+      "links",
+      "external links",
+      "learn more",
+      "guides",
+      "further reading",
+      "help",
+      "safety",
+      "fraud",
+      "deriv"
+    ],
+    "sectionType": "cta",
+    "global": false,
+    "requiredFields": [],
+    "optionalFields": [
+      "title",
+      "description",
+      "links",
+      "headingLevel"
+    ],
+    "variants": [
+      "default"
+    ],
+    "recommendedPosition": 9,
+    "placement": [
+      "middle",
+      "bottom"
+    ],
+    "layout": {
+      "alignment": "left",
+      "gridColumns": "1-2",
+      "contentWidth": "wide",
+      "background": true,
+      "overlay": false
+    },
+    "supports": {
+      "backgroundImage": false,
+      "backgroundVideo": false,
+      "foregroundImage": false,
+      "primaryButton": false,
+      "secondaryButton": false,
+      "sectionLink": true,
+      "multipleLinks": true,
+      "icons": true
+    },
+    "imageRoles": [],
+    "defaultValues": {
+      "headingLevel": "h2"
+    },
+    "fields": {
+      "description": {
+        "type": "string",
+        "required": false,
+        "maxLength": 200,
+        "default": "Explain how this specific feature helps your user."
+      },
+      "headingLevel": {
+        "type": "string",
+        "required": false,
+        "default": "h2",
+        "enum": [
+          "h2",
+          "h3",
+          "h4"
+        ],
+        "description": "Heading tag. Demote when the page already owns the heading hierarchy."
+      },
+      "links": {
+        "type": "array",
+        "required": false,
+        "description": "Resource links, rendered as a vertical stack at every breakpoint. No fixed maximum.",
+        "itemFields": {
+          "external": {
+            "type": "boolean",
+            "required": false,
+            "default": true,
+            "description": "Opens in a new tab and shows the external-link icon instead of the chevron."
+          },
+          "href": {
+            "type": "url",
+            "required": true
+          },
+          "id": {
+            "type": "string",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": true,
+            "maxLength": 80
+          }
+        }
+      },
+      "title": {
+        "type": "string",
+        "required": false,
+        "default": "Section title goes here",
+        "maxLength": 80
+      }
+    }
+  },
   "stats-carousel": {
     "id": "stats-carousel",
     "name": "Stats Carousel",

package/components.manifest.json

@@ -1,7 +1,7 @@
 {
   "$comment": "Generated by scripts/generate-component-manifest.ts from the TypeScript types. Do not edit by hand. Props inherited from React HTMLAttributes are intentionally omitted. `default` is the value declared in the component's own parameter destructuring; a prop whose effective default is applied further down the tree (e.g. cards[].showLink) has no `default` here — see block-registry.json `fields` for documented effective defaults.",
   "package": "@deriv-web-design/ui",
-  "componentCount": 55,
+  "componentCount": 56,
   "components": {
     "Accordion": {
       "name": "Accordion",
@@ -891,7 +891,7 @@
       "name": "DotLottieInView",
       "source": "components/DotLottieInView/DotLottieInView.tsx",
       "props": {},
-      "description": "Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view. When it enters view again, it plays once more. Set `enabled={false}` to force stop (e.g. hidden slides) without relying on geometry alone."
+      "description": "Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view. When it enters view again, it plays once more. Set `enabled={false}` to force stop (e.g. hidden slides) without relying on geometry alone. The player itself is fetched lazily, the first time this instance is both enabled and in view — so a page with no animation never downloads it, and a below-the-fold band does not pay for it during initial load."
     },
     "DownloadBadge": {
       "name": "DownloadBadge",
@@ -1836,6 +1836,11 @@
               "required": true,
               "description": "URL to the .lottie file or any image asset (png, jpg, svg, webp…)"
             },
+            "posterUrl": {
+              "type": "string",
+              "required": false,
+              "description": "Still frame painted while an animation's player and engine are loading. Only used when the item resolves to `\"lottie\"`. The WebAssembly engine is ~630 KB compressed and one engine serves every animation on the page, so on a cold visit over a slow connection the first animated band can sit empty for seconds. A poster turns that into a progressive load instead of a hole in the layout. Ignored once the animation is playing."
+            },
             "title": {
               "type": "string",
               "required": true,
@@ -1843,6 +1848,16 @@
             }
           }
         },
+        "mediaRootMargin": {
+          "type": "string",
+          "required": false,
+          "description": "`rootMargin` for the observer that decides when an animation's player may load and play. Forwarded to `DotLottieInView`. The default starts the work only once a band is actually on screen, which is the safe choice: the engine is large, and fetching it earlier competes with whatever the visitor is currently looking at — including the LCP image. Widen it (e.g. `\"600px 0px\"`) on pages where the animated band sits well below the fold and you would rather it were ready on arrival."
+        },
+        "mediaThreshold": {
+          "type": "number | number[]",
+          "required": false,
+          "description": "`threshold` for that same observer. Forwarded to `DotLottieInView`."
+        },
         "variant": {
           "type": "\"media-left\" | \"media-right\"",
           "required": false,
@@ -2415,7 +2430,13 @@
         "icon": {
           "type": "ReactNode",
           "required": false,
-          "description": "Optional left icon. When provided, the chevron is hidden and the label underlines on hover/active."
+          "description": "Optional icon. When provided, the chevron is hidden and the label underlines on hover/active."
+        },
+        "iconPosition": {
+          "type": "\"left\" | \"right\"",
+          "required": false,
+          "description": "Which side the `icon` sits on. Only takes effect when `icon` is provided.",
+          "default": "left"
         },
         "label": {
           "type": "string",
@@ -2767,6 +2788,35 @@
       },
       "description": "Dark partner-payout section with a responsive metric grid and globe image, modeled after the \"Top partner payouts\" section on deriv.com/partners."
     },
+    "ResourceBanner": {
+      "name": "ResourceBanner",
+      "source": "templates/ResourceBanner/ResourceBanner.tsx",
+      "props": {
+        "description": {
+          "type": "string",
+          "required": false,
+          "description": "Supporting paragraph below the heading",
+          "default": "Explain how this specific feature helps your user."
+        },
+        "headingLevel": {
+          "type": "ResourceBannerHeadingLevel",
+          "required": false,
+          "description": "Heading tag to render. Use a lower level when the surrounding page already owns the heading hierarchy.",
+          "default": "h2"
+        },
+        "links": {
+          "type": "ResourceBannerLink[]",
+          "required": false,
+          "description": "Resource links, rendered as a vertical stack on every breakpoint. Any number is supported — there is no fixed maximum."
+        },
+        "title": {
+          "type": "string",
+          "required": false,
+          "description": "Heading text",
+          "default": "Section title goes here"
+        }
+      }
+    },
     "Stats": {
       "name": "Stats",
       "source": "templates/Stats/StatsV2.tsx",

package/dist/index.css

@@ -11194,4 +11194,115 @@
   color: var(--master-partner-step-desc-color);
   margin: 0;
 }
+
+/* templates/ResourceBanner/ResourceBanner.css */
+:root {
+  --rsb-card-bg: var(--color-slate-1200);
+  --rsb-section-bg: var(--color-slate-75);
+  --rsb-title-color: var(--color-slate-50);
+  --rsb-body-color: var(--color-slate-50);
+  --rsb-max-width: 1280px;
+  --rsb-card-radius: var(--radius-2xl);
+  --rsb-section-padding-block: var(--spacing-56);
+  --rsb-section-padding-inline: var(--spacing-16);
+  --rsb-card-padding: var(--spacing-24);
+  --rsb-grid-gap: var(--spacing-24);
+  --rsb-content-gap: var(--spacing-16);
+  --rsb-links-gap: var(--spacing-16);
+}
+.rsb {
+  display: block;
+  width: 100%;
+  background-color: var(--rsb-section-bg);
+}
+.rsb__inner {
+  max-width: var(--rsb-max-width);
+  margin: 0 auto;
+  padding: var(--rsb-section-padding-block) var(--rsb-section-padding-inline);
+  box-sizing: border-box;
+}
+.rsb__card {
+  border-radius: var(--rsb-card-radius);
+  padding: var(--rsb-card-padding);
+  background-color: var(--rsb-card-bg);
+  box-sizing: border-box;
+}
+.rsb__grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--rsb-grid-gap);
+  align-items: center;
+}
+.rsb__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: var(--rsb-content-gap);
+}
+.rsb__title {
+  margin: 0;
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
+  letter-spacing: var(--typography-h2-letter-spacing);
+  color: var(--rsb-title-color);
+}
+.rsb__description {
+  margin: 0;
+  font-family: var(--typography-body-md-font-family);
+  font-size: var(--typography-body-md-font-size);
+  font-weight: var(--typography-body-md-font-weight);
+  line-height: var(--typography-body-md-line-height);
+  color: var(--rsb-body-color);
+}
+.rsb__links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rsb-links-gap);
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.rsb__links-item {
+  display: flex;
+  max-width: 100%;
+}
+.rsb__link {
+  white-space: normal;
+  align-items: flex-start;
+  text-align: left;
+}
+@media (min-width: 480px) {
+  :root {
+    --rsb-card-padding: var(--spacing-48);
+  }
+}
+@media (min-width: 768px) {
+  :root {
+    --rsb-section-padding-inline: var(--spacing-24);
+    --rsb-grid-gap: var(--spacing-32);
+    --rsb-content-gap: var(--spacing-24);
+  }
+  .rsb__grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  .rsb__links {
+    align-items: center;
+    justify-content: center;
+  }
+}
+@media (min-width: 992px) {
+  :root {
+    --rsb-section-padding-block: var(--spacing-112);
+    --rsb-grid-gap: var(--spacing-80);
+    --rsb-content-gap: var(--spacing-32);
+  }
+  .rsb__grid {
+    grid-template-columns: 2fr 1fr;
+  }
+}
 /*# sourceMappingURL=index.css.map */