@deriv-web-design/ui 0.1.11 → 0.1.13

package/dist/index.mjs

@@ -4619,13 +4619,17 @@ var Steps = ({
   steps,
   image,
   imageAlt = "",
-  imagePosition = "left"
+  imagePosition = "left",
+  embedded = false,
+  titleId
 }) => {
   const containerClass = [
     "steps__container",
     imagePosition === "right" ? "steps__container--image-right" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx36("section", { className: "steps", children: /* @__PURE__ */ jsxs32("div", { className: containerClass, children: [
+  const wrapperClass = ["steps", embedded ? "steps--embedded" : ""].filter(Boolean).join(" ");
+  const Wrapper = embedded ? "div" : "section";
+  return /* @__PURE__ */ jsx36(Wrapper, { className: wrapperClass, children: /* @__PURE__ */ jsxs32("div", { className: containerClass, children: [
     image && /* @__PURE__ */ jsx36("div", { className: "steps__image-wrapper", children: /* @__PURE__ */ jsx36(
       "img",
       {
@@ -4635,7 +4639,7 @@ var Steps = ({
       }
     ) }),
     /* @__PURE__ */ jsxs32("div", { className: "steps__content", children: [
-      /* @__PURE__ */ jsx36("h2", { className: "steps__title", children: title }),
+      /* @__PURE__ */ jsx36("h2", { className: "steps__title", id: titleId, children: title }),
       /* @__PURE__ */ jsx36("ol", { className: "steps__list", children: steps.map((step, index) => /* @__PURE__ */ jsx36("li", { className: "steps__item", children: /* @__PURE__ */ jsxs32("div", { className: "steps__item-inner", children: [
         /* @__PURE__ */ jsx36("span", { className: "steps__number", "aria-hidden": "true", children: index + 1 }),
         /* @__PURE__ */ jsxs32("div", { className: "steps__item-body", children: [
@@ -6865,6 +6869,9 @@ var renderBlock2 = (block, index, headingIds) => {
       block.caption && /* @__PURE__ */ jsx54("figcaption", { className: "fbp-blockCaption", children: block.caption })
     ] }, index);
   }
+  if (block.type === "steps") {
+    return /* @__PURE__ */ jsx54("div", { className: "fbp-blockSteps", children: /* @__PURE__ */ jsx54(Steps, { embedded: true, steps: block.steps ?? [], title: block.text ?? "", titleId: headingIds.get(index) }) }, index);
+  }
   return /* @__PURE__ */ jsx54("p", { className: "fbp-blockParagraph", children: block.text }, index);
 };
 var FeatureBlogPage = ({
@@ -6891,7 +6898,7 @@ var FeatureBlogPage = ({
     const seen = /* @__PURE__ */ new Map();
     const ids = /* @__PURE__ */ new Map();
     content.forEach((block, i) => {
-      if (block.type !== "heading") return;
+      if (block.type !== "heading" && block.type !== "steps") return;
       const base = block.id ?? (slugify(block.text ?? "") || `section-${i}`);
       const count = seen.get(base) ?? 0;
       seen.set(base, count + 1);
@@ -6900,7 +6907,9 @@ var FeatureBlogPage = ({
     return ids;
   }, [content]);
   const headings = useMemo6(
-    () => content.map((block, i) => ({ block, i })).filter(({ block }) => block.type === "heading" && (block.level ?? 2) === 2).map(({ block, i }) => ({ id: headingIds.get(i), text: block.text ?? "" })),
+    () => content.map((block, i) => ({ block, i })).filter(
+      ({ block }) => block.type === "steps" || block.type === "heading" && (block.level ?? 2) === 2
+    ).map(({ block, i }) => ({ id: headingIds.get(i), text: block.text ?? "" })),
     [content, headingIds]
   );
   const [activeId, setActiveId] = useState20(null);