@deriv-web-design/ui 0.1.11 → 0.1.13

package/dist/index.d.mts

@@ -1083,9 +1083,23 @@ interface StepsProps {
      * On mobile the image always stacks above the content.
      */
     imagePosition?: StepsImagePosition;
+    /**
+     * Render without the standalone page-section shell (no section
+     * background, no section-level block padding, and a `<div>` instead of
+     * a `<section>` landmark) for embedding inline inside another
+     * template's content flow, e.g. `FeatureBlogPage`'s article body
+     * (default: false).
+     */
+    embedded?: boolean;
+    /**
+     * Anchor id applied to the title `<h2>` instead of the section wrapper —
+     * lets an embedding parent (e.g. a table of contents) scroll-target the
+     * heading itself.
+     */
+    titleId?: string;
 }
 
-declare const Steps: ({ title, steps, image, imageAlt, imagePosition, }: StepsProps) => react_jsx_runtime.JSX.Element;
+declare const Steps: ({ title, steps, image, imageAlt, imagePosition, embedded, titleId, }: StepsProps) => react_jsx_runtime.JSX.Element;
 
 type DownloadBannerStyle = "light" | "light-2" | "dark";
 interface DownloadBannerProps {
@@ -1756,11 +1770,17 @@ interface HelpCenterPageProps {
 
 declare const HelpCenterPage: ({ categoryTitle, questions, activeQuestionId, defaultActiveQuestionId, onQuestionSelect, contentTitle, content, searchPlaceholder, searchAriaLabel, onSearchChange, searchNoResultsText, articlesSheetTitle, className, }: HelpCenterPageProps) => react_jsx_runtime.JSX.Element;
 
-type FeatureBlogContentBlockType = "heading" | "paragraph" | "list" | "quote" | "image";
+type FeatureBlogContentBlockType = "heading" | "paragraph" | "list" | "quote" | "image" | "steps";
+interface FeatureBlogStepItem {
+    /** Step title */
+    title: string;
+    /** Step body copy */
+    description: string;
+}
 interface FeatureBlogContentBlock {
-    /** Block kind — "heading"/"paragraph"/"quote" use `text`, "list" uses `items`, "image" uses `image` */
+    /** Block kind — "heading"/"paragraph"/"quote" use `text`, "list" uses `items`, "image" uses `image`, "steps" uses `text` (section title) + `steps` */
     type: FeatureBlogContentBlockType;
-    /** Text content for "heading" / "paragraph" / "quote" blocks */
+    /** Text content for "heading" / "paragraph" / "quote" blocks; section title for "steps" blocks */
     text?: string;
     /**
      * Heading level for "heading" blocks (default: 2). Only level-2 headings
@@ -1781,6 +1801,8 @@ interface FeatureBlogContentBlock {
     imageAlt?: string;
     /** Optional caption rendered below an "image" block */
     caption?: string;
+    /** Numbered entries for "steps" blocks — rendered via the Steps template */
+    steps?: FeatureBlogStepItem[];
 }
 type FeatureBlogSharePlatform = "facebook" | "twitter" | "linkedin" | "telegram";
 interface FeatureBlogAuthor {

package/dist/index.d.ts

@@ -1083,9 +1083,23 @@ interface StepsProps {
      * On mobile the image always stacks above the content.
      */
     imagePosition?: StepsImagePosition;
+    /**
+     * Render without the standalone page-section shell (no section
+     * background, no section-level block padding, and a `<div>` instead of
+     * a `<section>` landmark) for embedding inline inside another
+     * template's content flow, e.g. `FeatureBlogPage`'s article body
+     * (default: false).
+     */
+    embedded?: boolean;
+    /**
+     * Anchor id applied to the title `<h2>` instead of the section wrapper —
+     * lets an embedding parent (e.g. a table of contents) scroll-target the
+     * heading itself.
+     */
+    titleId?: string;
 }
 
-declare const Steps: ({ title, steps, image, imageAlt, imagePosition, }: StepsProps) => react_jsx_runtime.JSX.Element;
+declare const Steps: ({ title, steps, image, imageAlt, imagePosition, embedded, titleId, }: StepsProps) => react_jsx_runtime.JSX.Element;
 
 type DownloadBannerStyle = "light" | "light-2" | "dark";
 interface DownloadBannerProps {
@@ -1756,11 +1770,17 @@ interface HelpCenterPageProps {
 
 declare const HelpCenterPage: ({ categoryTitle, questions, activeQuestionId, defaultActiveQuestionId, onQuestionSelect, contentTitle, content, searchPlaceholder, searchAriaLabel, onSearchChange, searchNoResultsText, articlesSheetTitle, className, }: HelpCenterPageProps) => react_jsx_runtime.JSX.Element;
 
-type FeatureBlogContentBlockType = "heading" | "paragraph" | "list" | "quote" | "image";
+type FeatureBlogContentBlockType = "heading" | "paragraph" | "list" | "quote" | "image" | "steps";
+interface FeatureBlogStepItem {
+    /** Step title */
+    title: string;
+    /** Step body copy */
+    description: string;
+}
 interface FeatureBlogContentBlock {
-    /** Block kind — "heading"/"paragraph"/"quote" use `text`, "list" uses `items`, "image" uses `image` */
+    /** Block kind — "heading"/"paragraph"/"quote" use `text`, "list" uses `items`, "image" uses `image`, "steps" uses `text` (section title) + `steps` */
     type: FeatureBlogContentBlockType;
-    /** Text content for "heading" / "paragraph" / "quote" blocks */
+    /** Text content for "heading" / "paragraph" / "quote" blocks; section title for "steps" blocks */
     text?: string;
     /**
      * Heading level for "heading" blocks (default: 2). Only level-2 headings
@@ -1781,6 +1801,8 @@ interface FeatureBlogContentBlock {
     imageAlt?: string;
     /** Optional caption rendered below an "image" block */
     caption?: string;
+    /** Numbered entries for "steps" blocks — rendered via the Steps template */
+    steps?: FeatureBlogStepItem[];
 }
 type FeatureBlogSharePlatform = "facebook" | "twitter" | "linkedin" | "telegram";
 interface FeatureBlogAuthor {

package/dist/index.js

@@ -4699,13 +4699,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__ */ (0, import_jsx_runtime36.jsx)("section", { className: "steps", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: containerClass, children: [
+  const wrapperClass = ["steps", embedded ? "steps--embedded" : ""].filter(Boolean).join(" ");
+  const Wrapper = embedded ? "div" : "section";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Wrapper, { className: wrapperClass, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: containerClass, children: [
     image && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "steps__image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "img",
       {
@@ -4715,7 +4719,7 @@ var Steps = ({
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "steps__content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { className: "steps__title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h2", { className: "steps__title", id: titleId, children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ol", { className: "steps__list", children: steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { className: "steps__item", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "steps__item-inner", children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "steps__number", "aria-hidden": "true", children: index + 1 }),
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "steps__item-body", children: [
@@ -6945,6 +6949,9 @@ var renderBlock2 = (block, index, headingIds) => {
       block.caption && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("figcaption", { className: "fbp-blockCaption", children: block.caption })
     ] }, index);
   }
+  if (block.type === "steps") {
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "fbp-blockSteps", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Steps, { embedded: true, steps: block.steps ?? [], title: block.text ?? "", titleId: headingIds.get(index) }) }, index);
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "fbp-blockParagraph", children: block.text }, index);
 };
 var FeatureBlogPage = ({
@@ -6971,7 +6978,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);
@@ -6980,7 +6987,9 @@ var FeatureBlogPage = ({
     return ids;
   }, [content]);
   const headings = (0, import_react28.useMemo)(
-    () => 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] = (0, import_react28.useState)(null);