@deriv-web-design/ui 0.1.36 → 0.1.38

package/dist/index.mjs

@@ -8811,7 +8811,53 @@ var TradingCalculator = ({
 
 // templates/TradingCalculatorHowTo/TradingCalculatorHowTo.tsx
 import { Fragment as Fragment12, useEffect as useEffect19, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState24 } from "react";
+
+// templates/TradingCalculatorHowTo/TradingCalculatorHowTo.types.ts
+var DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS = {
+  formulaHeading: "Formula",
+  exampleHeading: "Example",
+  swapTabPoints: "Swap calculation (In points)",
+  swapTabPercentage: "Swap calculation (In percentage)"
+};
+
+// templates/TradingCalculatorHowTo/TradingCalculatorHowTo.tsx
 import { Fragment as Fragment13, jsx as jsx61, jsxs as jsxs57 } from "react/jsx-runtime";
+function applyContentLabels(base, overrides) {
+  if (!overrides) {
+    return {
+      ...base,
+      formulaHeading: DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.formulaHeading,
+      exampleHeading: DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.exampleHeading
+    };
+  }
+  return {
+    ...base,
+    formulaHeading: overrides.formulaHeading ?? DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.formulaHeading,
+    exampleHeading: overrides.exampleHeading ?? DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.exampleHeading,
+    formulaBlocks: overrides.formulaBlocks ?? base.formulaBlocks,
+    exampleIntro: overrides.exampleIntro ?? base.exampleIntro,
+    exampleLead: overrides.exampleLead ?? base.exampleLead,
+    calculations: overrides.calculations ?? base.calculations,
+    resultText: overrides.resultText ?? base.resultText,
+    note: overrides.note ?? base.note
+  };
+}
+function bodyLabelsForMode(labels, isSwap, swapTab) {
+  if (!labels) return void 0;
+  const flat = {
+    formulaHeading: labels.formulaHeading,
+    exampleHeading: labels.exampleHeading,
+    formulaBlocks: labels.formulaBlocks,
+    exampleIntro: labels.exampleIntro,
+    exampleLead: labels.exampleLead,
+    calculations: labels.calculations,
+    resultText: labels.resultText,
+    note: labels.note
+  };
+  if (!isSwap) return flat;
+  const tabSpecific = swapTab === "percentage" ? labels.swapPercentage : labels.swapPoints;
+  return { ...flat, ...tabSpecific };
+}
 var MARGIN_CONTENT = {
   title: "How to calculate margin requirements",
   description: "Use this formula to calculate how much margin is required based on your lot size, leverage ratio, and the current market price.",
@@ -8956,11 +9002,15 @@ var SWAP_PERCENTAGE_CONTENT = {
   ],
   resultText: "This means the swap charge is USD -0.26 to keep the position open overnight."
 };
-var SWAP_TABS = [
-  { id: "points", label: "Swap calculation (In points)" },
-  { id: "percentage", label: "Swap calculation (In percentage)" }
-];
 var swapModeForVariant = (variant) => variant === "swap-percentage" ? "percentage" : "points";
+function swapTabsForLabels(labels) {
+  const points = labels?.swapTabPoints ?? DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.swapTabPoints;
+  const percentage = labels?.swapTabPercentage ?? DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS.swapTabPercentage;
+  return [
+    { id: "points", label: points },
+    { id: "percentage", label: percentage }
+  ];
+}
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect3 : useEffect19;
 var FormulaBlockView = ({ block }) => {
   if (block.type === "footnote") {
@@ -9040,19 +9090,20 @@ var CalculationStrip = ({ tokens }) => {
                 )
               }
             ),
-            /* @__PURE__ */ jsx61("span", { className: "tchow-stripCaption", "aria-hidden": "true", children: token.label && /* @__PURE__ */ jsxs57(Fragment13, { children: [
-              /* @__PURE__ */ jsx61(ConnectorArrow, {}),
-              /* @__PURE__ */ jsx61(
-                "span",
-                {
-                  className: [
-                    "tchow-stripLabel",
-                    i === 0 || i === tokens.length - 1 ? "tchow-stripLabel--edge" : ""
-                  ].filter(Boolean).join(" "),
-                  children: /* @__PURE__ */ jsx61("span", { className: "tchow-stripLabelText", children: token.label })
-                }
-              )
-            ] }) })
+            /* @__PURE__ */ jsx61(
+              "span",
+              {
+                className: [
+                  "tchow-stripCaption",
+                  token.label ? "tchow-stripCaption--labeled" : ""
+                ].filter(Boolean).join(" "),
+                "aria-hidden": "true",
+                children: token.label && /* @__PURE__ */ jsxs57(Fragment13, { children: [
+                  /* @__PURE__ */ jsx61(ConnectorArrow, {}),
+                  /* @__PURE__ */ jsx61("span", { className: "tchow-stripLabel", children: /* @__PURE__ */ jsx61("span", { className: "tchow-stripLabelText", children: token.label }) })
+                ] })
+              }
+            )
           ] }, i))
         }
       )
@@ -9063,6 +9114,7 @@ var TradingCalculatorHowTo = ({
   variant = "margin",
   title,
   description,
+  labels,
   className,
   ...props
 }) => {
@@ -9071,9 +9123,14 @@ var TradingCalculatorHowTo = ({
   useEffect19(() => {
     setSwapTab(swapModeForVariant(variant));
   }, [variant]);
-  const content = variant === "pip" ? PIP_CONTENT : isSwap ? swapTab === "percentage" ? SWAP_PERCENTAGE_CONTENT : SWAP_POINTS_CONTENT : MARGIN_CONTENT;
+  const baseContent = variant === "pip" ? PIP_CONTENT : isSwap ? swapTab === "percentage" ? SWAP_PERCENTAGE_CONTENT : SWAP_POINTS_CONTENT : MARGIN_CONTENT;
+  const content = applyContentLabels(
+    baseContent,
+    bodyLabelsForMode(labels, isSwap, swapTab)
+  );
   const heading = title ?? content.title;
   const desc = description ?? content.description;
+  const swapTabs = swapTabsForLabels(labels);
   return /* @__PURE__ */ jsx61("section", { className: ["tchow-section", className ?? ""].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs57("div", { className: "tchow-container", children: [
     /* @__PURE__ */ jsxs57("div", { className: "tchow-intro", children: [
       /* @__PURE__ */ jsx61("h2", { className: "tchow-title", children: heading }),
@@ -9083,7 +9140,7 @@ var TradingCalculatorHowTo = ({
       Tabs,
       {
         className: "tchow-tabs",
-        items: SWAP_TABS,
+        items: swapTabs,
         activeId: swapTab,
         onChange: (id) => setSwapTab(id)
       }
@@ -12373,6 +12430,7 @@ export {
   DEFAULT_EXCHANGE_RATE_WS_URL,
   DEFAULT_SYMBOLS_ENDPOINT,
   DEFAULT_TRADE_HREF,
+  DEFAULT_TRADING_CALCULATOR_HOWTO_LABELS,
   DEFAULT_TRADING_CALCULATOR_LABELS,
   DayNightTransition,
   DocumentChips,