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

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.17.3",
+  "version": "10.19.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 '../../src/lib/hooks';
 import React, { useEffect, StrictMode } from 'react';
 
 const globalTheme = {
@@ -50,8 +51,41 @@ const ThemeWrapper = ({ theme, children }) => {
   );
 }
 
+const ThemeLanguageWrapper = ({
+  theme,
+  children,
+  defaultLabels,
+  importPromises,
+  translationContext,
+}) => {
+  const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises);
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (body) {
+      body.classList.remove('theme--normal');
+      body.classList.remove('theme--dark');
+      body.classList.add(`theme--${theme}`);
+    }
+  });
+  return (
+    <StrictMode>
+      <translationContext.Provider value={translations}>
+        <main className={`theme--${theme}`}>
+          <div className="page">
+            <div className="page__content__block">
+              {children}
+            </div>
+          </div>
+        </main>
+      </translationContext.Provider>
+    </StrictMode>
+  );
+}
+
+
 export {
   globalTheme,
   globalLang,
   ThemeWrapper,
+  ThemeLanguageWrapper,
 };