@aarhus-university/au-lib-react-components 12.5.1 → 12.6.1

package/stories/AUTruncatorComponent.stories.tsx

@@ -1,123 +1,123 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUTruncatorComponent from '../src/components/AUTruncatorComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/Truncator',
-  component: AUTruncatorComponent,
-  argTypes: {
-    children: {
-      table: {
-        disable: true,
-      }
-    },
-    buttonChild: {
-      table: {
-        disable: true,
-      }
-    },
-    classNames: {
-      table: {
-        disable: true,
-      }
-    },
-    header: {
-      table: {
-        disable: true,
-      }
-    },
-    headerLevel: {
-      table: {
-        disable: true,
-      }
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUTruncatorComponent>;
-
-type Story = StoryObj<typeof AUTruncatorComponent>;
-
-export const Truncated: Story = {
-  args: {
-    maxLines: 10,
-    buttonChild: <span>Læs mere</span>,
-    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
-    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
-    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
-    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. Aliquid enim libero ullam iste!
-    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
-    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
-    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
-  },
-  render: (args) => <AUTruncatorComponent {...args} />,
-};
-
-export const Not_Truncated: Story = {
-  args: {
-    maxLines: 100,
-    buttonChild: <span>Læs mere</span>,
-    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
-    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
-    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
-    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. Aliquid enim libero ullam iste!
-    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
-    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
-    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
-  },
-  render: (args) => <AUTruncatorComponent {...args} />,
-};
-
-export const With_Focusable_Content: Story = {
-  args: {
-    maxLines: 10,
-    buttonChild: <span>Læs mere</span>,
-    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
-    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
-    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
-    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
-    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
-    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
-    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
-  },
-  render: (args) => <AUTruncatorComponent {...args} />,
-};
-
-export const Narrow_Viewport: Story = {
-  args: {
-    classNames: 'truncator truncator--not-on-medium',
-    maxLines: 10,
-    buttonChild: <span>Læs mere</span>,
-    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
-    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
-    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
-    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
-    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
-    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
-    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
-  },
-  render: (args) => <AUTruncatorComponent {...args} />,
-};
-
-
-export const Not_On_Wide_Viewport: Story = {
-  args: {
-    classNames: 'truncator truncator--not-on-wide',
-    maxLines: 10,
-    buttonChild: <span>Læs mere</span>,
-    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
-    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
-    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
-    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
-    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
-    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
-    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
-  },
-  render: (args) => <AUTruncatorComponent {...args} />,
-};
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUTruncatorComponent from '../src/components/AUTruncatorComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Truncator',
+  component: AUTruncatorComponent,
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      }
+    },
+    buttonChild: {
+      table: {
+        disable: true,
+      }
+    },
+    classNames: {
+      table: {
+        disable: true,
+      }
+    },
+    header: {
+      table: {
+        disable: true,
+      }
+    },
+    headerLevel: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUTruncatorComponent>;
+
+type Story = StoryObj<typeof AUTruncatorComponent>;
+
+export const Truncated: Story = {
+  args: {
+    maxLines: 10,
+    buttonChild: <span>Læs mere</span>,
+    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
+    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
+    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
+    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. Aliquid enim libero ullam iste!
+    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
+    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
+    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
+  },
+  render: (args) => <AUTruncatorComponent {...args} />,
+};
+
+export const Not_Truncated: Story = {
+  args: {
+    maxLines: 100,
+    buttonChild: <span>Læs mere</span>,
+    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
+    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
+    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
+    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. Aliquid enim libero ullam iste!
+    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
+    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
+    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
+  },
+  render: (args) => <AUTruncatorComponent {...args} />,
+};
+
+export const With_Focusable_Content: Story = {
+  args: {
+    maxLines: 10,
+    buttonChild: <span>Læs mere</span>,
+    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
+    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
+    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
+    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
+    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
+    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
+    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
+  },
+  render: (args) => <AUTruncatorComponent {...args} />,
+};
+
+export const Narrow_Viewport: Story = {
+  args: {
+    classNames: 'truncator truncator--not-on-medium',
+    maxLines: 10,
+    buttonChild: <span>Læs mere</span>,
+    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
+    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
+    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
+    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
+    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
+    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
+    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
+  },
+  render: (args) => <AUTruncatorComponent {...args} />,
+};
+
+
+export const Not_On_Wide_Viewport: Story = {
+  args: {
+    classNames: 'truncator truncator--not-on-wide',
+    maxLines: 10,
+    buttonChild: <span>Læs mere</span>,
+    children: <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus odit temporibus illo hic esse minus, ab molestiae! Aperiam accusantium, facilis sunt sit corporis autem similique. Cum dolorum unde expedita vitae?
+    Reiciendis facere sapiente dolor saepe earum id itaque sit culpa quaerat fuga deleniti quo illum, iusto dolorem fugit odit nisi quos ut! Perspiciatis delectus explicabo sunt vel harum et provident?
+    Ipsum quas incidunt nostrum a quisquam error, nisi repellat pariatur sunt enim! Odio, veritatis, quas exercitationem pariatur debitis commodi doloremque illo eos sint eveniet maiores nobis necessitatibus, sapiente tempora error?
+    Cupiditate amet nostrum architecto esse, vero, nisi expedita tempore ullam suscipit velit enim nobis. Explicabo tempora earum, accusamus facilis minima dolore facere saepe doloremque soluta. <a href="#">Aliquid enim libero ullam iste!</a>
+    Perspiciatis odio sunt, illum nobis excepturi et itaque praesentium suscipit dolore, ipsa obcaecati reprehenderit aspernatur placeat quod maiores vel quas repellendus. Sed incidunt dicta harum accusamus enim earum doloribus hic?
+    Mollitia perferendis, repellendus odio molestiae ducimus, ut sed quasi voluptates ea assumenda ullam vero nam earum voluptas facilis aspernatur quo magni ipsam consequatur ipsa, eius doloremque! Maiores consequatur iure aut!
+    Excepturi non saepe ex esse asperiores, possimus et magnam! Quaerat exercitationem, ipsam quisquam aliquid tempora beatae officia facere? A autem numquam quae repudiandae illo repellendus natus commodi fugit facilis modi.</p>
+  },
+  render: (args) => <AUTruncatorComponent {...args} />,
+};

package/stories/lib/helpers.tsx

@@ -1,146 +1,146 @@
-import { useTranslation } from '../../src/lib/hooks';
-import React, { useEffect, StrictMode } from 'react';
-
-const globalTheme = {
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'circlehollow',
-      items: ['normal', 'dark'],
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-};
-
-const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
-  lang: {
-    name: 'Language',
-    description: 'Global language for components',
-    defaultValue,
-    toolbar: {
-      icon: 'circlehollow',
-      items,
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-});
-
-const ThemeWrapper = ({ theme, children, withPageContentBlock = true }) => {
-  useEffect(() => {
-    const body = document.querySelector('body');
-    if (body) {
-      body.classList.remove('theme--normal');
-      body.classList.remove('theme--dark');
-      body.classList.add(`theme--${theme}`);
-    }
-  });
-
-  if (withPageContentBlock) {
-    return (
-      <StrictMode>
-        <div className="page">
-          <main className={`theme--${theme} page__content`}>
-            <div className="page__content__block">
-              {children}
-            </div>
-          </main>
-        </div>
-      </StrictMode>
-    );
-  }
-
-  return (
-    <StrictMode>
-      <div className="page">
-        <main className={`theme--${theme} page__content`}>
-          {children}
-        </main>
-      </div>
-    </StrictMode>
-  );
-}
-
-const ThemeLanguageWrapper = ({
-  theme,
-  children,
-  defaultLabels,
-  importPromises,
-  translationContext,
-  lang,
-  withPageContentBlock = true,
-}) => {
-  const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises, lang);
-  useEffect(() => {
-    const body = document.querySelector('body');
-    if (body) {
-      body.classList.remove('theme--normal');
-      body.classList.remove('theme--dark');
-      body.classList.add(`theme--${theme}`);
-    }
-  });
-
-  if (withPageContentBlock) {
-    return (
-      <StrictMode>
-        <translationContext.Provider value={translations}>
-          <div className="page">
-            <main className={`theme--${theme} page__content`}>
-              <div className="page__content__block">
-                {children}
-              </div>
-            </main>
-          </div>
-        </translationContext.Provider>
-      </StrictMode>
-    );
-  }
-
-  return (
-    <StrictMode>
-      <translationContext.Provider value={translations}>
-        <div className="page">
-          <main className={`theme--${theme} page__content`}>
-            {children}
-          </main>
-        </div>
-      </translationContext.Provider>
-    </StrictMode>
-  );
-}
-
-const translations = {
-  character_count: {
-    overflow: {
-      message: {
-        recommended: 'Vi anbefaler, at du maksimalt skriver {{maxchars}} tegn.',
-        allowed: 'Du må maks. skrive {{maxchars}} tegn.'
-      },
-      count: {
-        recommended: {
-          one: 'Du har skrevet 1 tegn mere end anbefalet.',
-          other: 'Du har skrevet {{overflow}} tegn mere end anbefalet.'
-        },
-        allowed: {
-          one: 'Du har skrevet 1 tegn for meget.',
-          other: 'Du har skrevet {{overflow}} tegn for meget.'
-        }
-      }
-    },
-    count_down: {
-      one: 'Du har 1 tegn tilbage',
-      other: 'Du har {{remaining}} tegn tilbage'
-    }
-  },
-};
-
-export {
-  globalTheme,
-  globalLang,
-  ThemeWrapper,
-  ThemeLanguageWrapper,
-  translations,
-};
+import { useTranslation } from '../../src/lib/hooks';
+import React, { useEffect, StrictMode } from 'react';
+
+const globalTheme = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['normal', 'dark'],
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
+  lang: {
+    name: 'Language',
+    description: 'Global language for components',
+    defaultValue,
+    toolbar: {
+      icon: 'circlehollow',
+      items,
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+});
+
+const ThemeWrapper = ({ theme, children, withPageContentBlock = true }) => {
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (body) {
+      body.classList.remove('theme--normal');
+      body.classList.remove('theme--dark');
+      body.classList.add(`theme--${theme}`);
+    }
+  });
+
+  if (withPageContentBlock) {
+    return (
+      <StrictMode>
+        <div className="page">
+          <main className={`theme--${theme} page__content`}>
+            <div className="page__content__block">
+              {children}
+            </div>
+          </main>
+        </div>
+      </StrictMode>
+    );
+  }
+
+  return (
+    <StrictMode>
+      <div className="page">
+        <main className={`theme--${theme} page__content`}>
+          {children}
+        </main>
+      </div>
+    </StrictMode>
+  );
+}
+
+const ThemeLanguageWrapper = ({
+  theme,
+  children,
+  defaultLabels,
+  importPromises,
+  translationContext,
+  lang,
+  withPageContentBlock = true,
+}) => {
+  const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises, lang);
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (body) {
+      body.classList.remove('theme--normal');
+      body.classList.remove('theme--dark');
+      body.classList.add(`theme--${theme}`);
+    }
+  });
+
+  if (withPageContentBlock) {
+    return (
+      <StrictMode>
+        <translationContext.Provider value={translations}>
+          <div className="page">
+            <main className={`theme--${theme} page__content`}>
+              <div className="page__content__block">
+                {children}
+              </div>
+            </main>
+          </div>
+        </translationContext.Provider>
+      </StrictMode>
+    );
+  }
+
+  return (
+    <StrictMode>
+      <translationContext.Provider value={translations}>
+        <div className="page">
+          <main className={`theme--${theme} page__content`}>
+            {children}
+          </main>
+        </div>
+      </translationContext.Provider>
+    </StrictMode>
+  );
+}
+
+const translations = {
+  character_count: {
+    overflow: {
+      message: {
+        recommended: 'Vi anbefaler, at du maksimalt skriver {{maxchars}} tegn.',
+        allowed: 'Du må maks. skrive {{maxchars}} tegn.'
+      },
+      count: {
+        recommended: {
+          one: 'Du har skrevet 1 tegn mere end anbefalet.',
+          other: 'Du har skrevet {{overflow}} tegn mere end anbefalet.'
+        },
+        allowed: {
+          one: 'Du har skrevet 1 tegn for meget.',
+          other: 'Du har skrevet {{overflow}} tegn for meget.'
+        }
+      }
+    },
+    count_down: {
+      one: 'Du har 1 tegn tilbage',
+      other: 'Du har {{remaining}} tegn tilbage'
+    }
+  },
+};
+
+export {
+  globalTheme,
+  globalLang,
+  ThemeWrapper,
+  ThemeLanguageWrapper,
+  translations,
+};

package/tsconfig.json

@@ -1,47 +1,47 @@
-{
-  "compilerOptions": {
-    // Target latest version of ECMAScript.
-    "target": "esnext",
-    // path to output directory
-    "outDir": "../wwwroot/js",
-    // enable strict null checks as a best practice
-    "strictNullChecks": true,
-    // Search under node_modules for non-relative imports.
-    "moduleResolution": "node",
-    // Process & infer types from .js files.
-    "allowJs": true,
-    // Don't emit; allow Babel to transform files.
-    "noEmit": true,
-    // Enable strictest settings like strictNullChecks & noImplicitAny.
-    "strict": true,
-    // Import non-ES modules as default imports.
-    "esModuleInterop": true,
-    // use typescript to transpile jsx to js
-    "jsx": "react",
-    "baseUrl": "./src",
-    "lib": [
-      "es2015",
-      "dom.iterable",
-      "es2016.array.include",
-      "es2017.object",
-      "dom"
-    ],
-    "module": "esnext",
-    "removeComments": true,
-    "alwaysStrict": true,
-    "allowUnreachableCode": false,
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "forceConsistentCasingInFileNames": true,
-    "importHelpers": true,
-    "resolveJsonModule": true,
-    "typeRoots": [
-      "./node_modules/@types",
-      "./node_modules/@aarhus-university/types"
-    ]
-  },
+{
+  "compilerOptions": {
+    // Target latest version of ECMAScript.
+    "target": "esnext",
+    // path to output directory
+    "outDir": "../wwwroot/js",
+    // enable strict null checks as a best practice
+    "strictNullChecks": true,
+    // Search under node_modules for non-relative imports.
+    "moduleResolution": "node",
+    // Process & infer types from .js files.
+    "allowJs": true,
+    // Don't emit; allow Babel to transform files.
+    "noEmit": true,
+    // Enable strictest settings like strictNullChecks & noImplicitAny.
+    "strict": true,
+    // Import non-ES modules as default imports.
+    "esModuleInterop": true,
+    // use typescript to transpile jsx to js
+    "jsx": "react",
+    "baseUrl": "./src",
+    "lib": [
+      "es2015",
+      "dom.iterable",
+      "es2016.array.include",
+      "es2017.object",
+      "dom"
+    ],
+    "module": "esnext",
+    "removeComments": true,
+    "alwaysStrict": true,
+    "allowUnreachableCode": false,
+    "noImplicitAny": false,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@aarhus-university/types"
+    ]
+  },
 }