@deriv-web-design/ui 0.1.32 → 0.1.33

package/dist/index.d.mts

@@ -567,8 +567,29 @@ interface HeroTrustpilotProps {
     reviewCount: number | string;
     /** Trustpilot profile URL the whole band links to. Defaults to Deriv's TrustBox link. */
     href?: string;
-    /** Leading copy before the score. Defaults to "Deriv scores". */
+    /**
+     * The whole sentence as one translatable string, with `{score}` and
+     * `{reviewCount}` placeholders that are replaced with the formatted values.
+     * Defaults to "Deriv scores {score} out of 5 based on {reviewCount} reviews".
+     * Pass the translated sentence here, e.g.
+     * "Deriv obtiene {score} de 5 según {reviewCount} reseñas".
+     */
+    text?: string;
+    /**
+     * @deprecated Use `text`. Leading copy before the score in the default
+     * English sentence; ignored when `text` is supplied.
+     */
     label?: string;
+    /**
+     * BCP 47 locale used to format `score` and a numeric `reviewCount`
+     * (e.g. "de-DE" renders 71887 as "71.887" and 4.3 as "4,3"). Defaults to "en-US".
+     */
+    locale?: string;
+    /**
+     * Accessible name for the link. Defaults to the rendered sentence followed
+     * by " — Trustpilot". Supply a translated string alongside `text`.
+     */
+    ariaLabel?: string;
 }
 interface HeroProps extends HTMLAttributes<HTMLElement> {
     /**

package/dist/index.d.ts

@@ -567,8 +567,29 @@ interface HeroTrustpilotProps {
     reviewCount: number | string;
     /** Trustpilot profile URL the whole band links to. Defaults to Deriv's TrustBox link. */
     href?: string;
-    /** Leading copy before the score. Defaults to "Deriv scores". */
+    /**
+     * The whole sentence as one translatable string, with `{score}` and
+     * `{reviewCount}` placeholders that are replaced with the formatted values.
+     * Defaults to "Deriv scores {score} out of 5 based on {reviewCount} reviews".
+     * Pass the translated sentence here, e.g.
+     * "Deriv obtiene {score} de 5 según {reviewCount} reseñas".
+     */
+    text?: string;
+    /**
+     * @deprecated Use `text`. Leading copy before the score in the default
+     * English sentence; ignored when `text` is supplied.
+     */
     label?: string;
+    /**
+     * BCP 47 locale used to format `score` and a numeric `reviewCount`
+     * (e.g. "de-DE" renders 71887 as "71.887" and 4.3 as "4,3"). Defaults to "en-US".
+     */
+    locale?: string;
+    /**
+     * Accessible name for the link. Defaults to the rendered sentence followed
+     * by " — Trustpilot". Supply a translated string alongside `text`.
+     */
+    ariaLabel?: string;
 }
 interface HeroProps extends HTMLAttributes<HTMLElement> {
     /**

package/dist/index.js

@@ -1996,15 +1996,39 @@ var Wordmark = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     ]
   }
 );
-var formatCount = (value) => typeof value === "number" ? new Intl.NumberFormat("en-US").format(value) : value;
+var DEFAULT_TRUSTPILOT_TEXT = "Deriv scores {score} out of 5 based on {reviewCount} reviews";
+var formatCount = (value, locale) => typeof value === "number" ? new Intl.NumberFormat(locale).format(value) : value;
+var formatScore = (value, locale) => new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value);
+var PLACEHOLDER = /(\{score\}|\{reviewCount\})/g;
+function renderTemplate(template, values) {
+  return template.split(PLACEHOLDER).map((part, i) => {
+    if (part === "{score}") {
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hero__trustpilot-text-score", children: values.score }, i);
+    }
+    if (part === "{reviewCount}") {
+      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hero__trustpilot-text-count", children: values.reviewCount }, i);
+    }
+    return part;
+  });
+}
+function fillTemplate(template, values) {
+  return template.replace("{score}", values.score).replace("{reviewCount}", values.reviewCount);
+}
 var HeroTrustpilot = ({
   score,
   reviewCount,
   href = DEFAULT_TRUSTPILOT_URL,
-  label = "Deriv scores"
+  text,
+  label,
+  locale = "en-US",
+  ariaLabel
 }) => {
-  const count = formatCount(reviewCount);
-  const copy = `${label} ${score} out of 5 based on ${count} reviews`;
+  const values = {
+    score: formatScore(score, locale),
+    reviewCount: formatCount(reviewCount, locale)
+  };
+  const template = text ?? (label ? `${label} {score} out of 5 based on {reviewCount} reviews` : DEFAULT_TRUSTPILOT_TEXT);
+  const sentence = fillTemplate(template, values);
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hero__trustpilot home-hero_trustpilot-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "a",
     {
@@ -2012,17 +2036,10 @@ var HeroTrustpilot = ({
       className: "hero__trustpilot-link",
       target: "_blank",
       rel: "noopener noreferrer",
-      "aria-label": `${copy} \u2014 read Deriv reviews on Trustpilot`,
+      "aria-label": ariaLabel ?? `${sentence} \u2014 Trustpilot`,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Stars, { score }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "hero__trustpilot-text", "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hero__trustpilot-text-label", children: label }),
-          " ",
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hero__trustpilot-text-score", children: score }),
-          " out of 5 based on ",
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hero__trustpilot-text-count", children: count }),
-          " reviews"
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hero__trustpilot-text", "aria-hidden": "true", children: renderTemplate(template, values) }),
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Wordmark, {})
       ]
     }