✨ Use translations in a DS component story

frontend/shadow-cljs.edn

@@ -91,7 +91,6 @@
    :modules
    {:base
     {:entries []}
-
     :components
     {:exports {default app.main.ui.ds/default}
      :depends-on #{:base}}}

frontend/src/app/main/ui/ds.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.ds
   (:require
+   [app.config :as cf]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.forms.input :refer [input*]]
@@ -17,7 +18,11 @@
    [app.main.ui.ds.notifications.toast :refer [toast*]]
    [app.main.ui.ds.product.loader :refer [loader*]]
    [app.main.ui.ds.storybook :as sb]
-   [app.main.ui.ds.tab-switcher :refer [tab-switcher*]]))
+   [app.main.ui.ds.tab-switcher :refer [tab-switcher*]]
+   [app.util.i18n :as i18n]))
+
+
+(i18n/init! cf/translations)
 
 (def default
   "A export used for storybook"

frontend/src/app/main/ui/ds/product/loader.cljs

@@ -10,6 +10,7 @@
    [app.main.style :as stl])
   (:require
    [app.common.math :as mth]
+   [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (mf/defc loader-icon*
@@ -40,11 +41,9 @@
         h (or height (when (some? width) (mth/ceil (* width (/ 27 100)))) 27)
         class (dm/str (or class "") " " (stl/css-case :wrapper true
                                                       :wrapper-overlay overlay))
+        title (or title (tr "labels.loading"))
         props (mf/spread-props props {:class class})]
 
-    (assert title
-            (dm/str "You must provide an accesible name for the component"))
-
     [:> "div" props
      [:> loader-icon* {:title title
                        :width w

frontend/src/app/main/ui/ds/product/loader.stories.jsx

@@ -7,10 +7,10 @@ export default {
   title: "Product/Loader",
   component: Loader,
   args: {
-    title: "Loading…",
     overlay: false,
   },
   argTypes: {
+    title: { control: "text" },
     width: { control: "number" },
     height: { control: "number" },
     overlay: { control: "boolean" },