@deriv-web-design/ui 0.1.15 → 0.1.17

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",
@@ -2415,7 +2415,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 +2773,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 */