@deriv-web-design/ui 0.1.12 → 0.1.14

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: [
@@ -5504,13 +5508,8 @@ var TrustpilotTestimonial = ({
               "button",
               {
                 type: "button",
-                className: [
-                  "testimonial__tp-nav-btn",
-                  !canPrev ? "testimonial__tp-nav-btn--hidden" : ""
-                ].filter(Boolean).join(" "),
+                className: "testimonial__tp-nav-btn",
                 "aria-label": "Show previous testimonials",
-                "aria-hidden": !canPrev,
-                tabIndex: canPrev ? 0 : -1,
                 disabled: !canPrev,
                 onClick: () => scrollByCard(-1),
                 children: /* @__PURE__ */ jsx44(ArrowIcon, { direction: "prev" })
@@ -5520,13 +5519,8 @@ var TrustpilotTestimonial = ({
               "button",
               {
                 type: "button",
-                className: [
-                  "testimonial__tp-nav-btn",
-                  !canNext ? "testimonial__tp-nav-btn--hidden" : ""
-                ].filter(Boolean).join(" "),
+                className: "testimonial__tp-nav-btn",
                 "aria-label": "Show next testimonials",
-                "aria-hidden": !canNext,
-                tabIndex: canNext ? 0 : -1,
                 disabled: !canNext,
                 onClick: () => scrollByCard(1),
                 children: /* @__PURE__ */ jsx44(ArrowIcon, { direction: "next" })
@@ -6865,6 +6859,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 +6888,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 +6897,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);