@deriv-web-design/ui 0.1.15 → 0.1.17

package/dist/index.mjs

@@ -47,6 +47,7 @@ var Link = ({
   colorScheme = "coral",
   label,
   icon,
+  iconPosition = "left",
   showChevron = true,
   disabled = false,
   children,
@@ -78,8 +79,9 @@ var Link = ({
       onClick: handleClick,
       ...props,
       children: [
-        hasIcon && /* @__PURE__ */ jsx2("span", { className: "icon", children: icon }),
+        hasIcon && iconPosition === "left" && /* @__PURE__ */ jsx2("span", { className: "icon", children: icon }),
         /* @__PURE__ */ jsx2("span", { className: "label", children: label ?? children }),
+        hasIcon && iconPosition === "right" && /* @__PURE__ */ jsx2("span", { className: "icon", children: icon }),
         !hasIcon && showChevron && /* @__PURE__ */ jsx2("span", { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(ChevronIcon, {}) })
       ]
     }
@@ -8251,6 +8253,66 @@ var MasterPartner = ({
     ] }, index)) })
   ] }) });
 };
+
+// templates/ResourceBanner/ResourceBanner.tsx
+import { jsx as jsx62, jsxs as jsxs58 } from "react/jsx-runtime";
+var DEFAULT_LINKS = [{ label: "Learn more", href: "#" }];
+var RESOURCE_BANNER_DERIV_CONTENT = {
+  title: "Learn more about staying safe",
+  description: "Read our guide on secure and responsible trading for more on protecting your account.",
+  links: [
+    {
+      id: "responsible",
+      label: "Secure and responsible trading",
+      href: "/responsible",
+      external: true
+    }
+  ]
+};
+var ExternalLinkIcon2 = () => /* @__PURE__ */ jsx62("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx62(
+  "path",
+  {
+    d: "M4.5 11.5 11.5 4.5M5.5 4.5h6v6",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ResourceBanner = ({
+  title = "Section title goes here",
+  description = "Explain how this specific feature helps your user.",
+  links,
+  headingLevel: HeadingTag = "h2",
+  className,
+  ...props
+}) => {
+  const resolvedLinks = links && links.length > 0 ? links : DEFAULT_LINKS;
+  const rootClass = ["rsb", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx62("section", { className: rootClass, ...props, children: /* @__PURE__ */ jsx62("div", { className: "rsb__inner", children: /* @__PURE__ */ jsx62("div", { className: "rsb__card", children: /* @__PURE__ */ jsxs58("div", { className: "rsb__grid", children: [
+    /* @__PURE__ */ jsxs58("div", { className: "rsb__content", children: [
+      /* @__PURE__ */ jsx62(HeadingTag, { className: "rsb__title", children: title }),
+      description && /* @__PURE__ */ jsx62("p", { className: "rsb__description", children: description })
+    ] }),
+    /* @__PURE__ */ jsx62("ul", { className: "rsb__links", children: resolvedLinks.map((link, i) => {
+      const isExternal = link.external ?? true;
+      return /* @__PURE__ */ jsx62("li", { className: "rsb__links-item", children: /* @__PURE__ */ jsx62(
+        Link,
+        {
+          className: "rsb__link",
+          colorScheme: "white",
+          href: link.href,
+          label: link.label,
+          icon: isExternal ? /* @__PURE__ */ jsx62(ExternalLinkIcon2, {}) : void 0,
+          iconPosition: "right",
+          showChevron: !isExternal,
+          target: isExternal ? "_blank" : void 0,
+          rel: isExternal ? "noopener noreferrer" : void 0
+        }
+      ) }, link.id ?? i);
+    }) })
+  ] }) }) }) });
+};
 export {
   AVATAR_DATA,
   Accordion,
@@ -8311,6 +8373,8 @@ export {
   ParallaxBanner,
   PartnersPayout,
   PeopleGrid,
+  RESOURCE_BANNER_DERIV_CONTENT,
+  ResourceBanner,
   STEPS_DATA,
   SearchField,
   Stats,