@aarhus-university/au-lib-react-components 10.17.3 → 10.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.17.3",
+  "version": "10.18.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",

package/src/lib/helpers.ts

@@ -176,6 +176,19 @@ const prettyPrintPhone = (countryCodes: AU.ICountryCode[], phone: string) => {
 
 const scrollTo = (x = 0, y = 0) => window.scrollTo(x, y);
 
+const replace = (text: string, find: string[], replaceWith: string[]): string => {
+  if (find.length !== replaceWith.length) {
+    return text;
+  }
+
+  let newText = text;
+  find.forEach((placeholder, index) => {
+    newText = newText.replace(`{{${placeholder}}}`, replaceWith[index]);
+  });
+
+  return newText;
+};
+
 export {
   emailRegex,
   sortAlphaObj,
@@ -191,4 +204,5 @@ export {
   splitPhoneNumber,
   prettyPrintPhone,
   scrollTo,
+  replace,
 };

package/stories/lib/helpers.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'lib/hooks';
 import React, { useEffect, StrictMode } from 'react';
 
 const globalTheme = {
@@ -28,7 +29,14 @@ const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
   },
 });
 
-const ThemeWrapper = ({ theme, children }) => {
+const ThemeWrapper = ({
+  theme,
+  children,
+  defaultLabels,
+  importPromises,
+  translationContext,
+}) => {
+  const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises);
   useEffect(() => {
     const body = document.querySelector('body');
     if (body) {
@@ -39,13 +47,15 @@ const ThemeWrapper = ({ theme, children }) => {
   });
   return (
     <StrictMode>
-      <main className={`theme--${theme}`}>
-        <div className="page">
-          <div className="page__content__block">
-            {children}
+      <translationContext.Provider value={translations}>
+        <main className={`theme--${theme}`}>
+          <div className="page">
+            <div className="page__content__block">
+              {children}
+            </div>
           </div>
-        </div>
-      </main>
+        </main>
+      </translationContext.Provider>
     </StrictMode>
   );
 }