@aarhus-university/au-lib-react-components 12.6.2 → 12.6.3

package/stories/AUDynamicContentComponent.stories.tsx

@@ -1,119 +1,119 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUDynamicContentComponent from '../src/components/AUDynamicContentComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/Dynamic Content',
-  component: AUDynamicContentComponent,
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUDynamicContentComponent>;
-
-type Story = StoryObj<typeof AUDynamicContentComponent>;
-
-const imageLinks = [
-  {
-    title: 'WISEflow',
-    description: 'Digital aflevering af eksamensbesvarelser',
-    url: 'javascript:void(0);',
-    linkType: 'system' as const,
-  },
-  {
-    title: 'Eksamensformalia på din uddannelse',
-    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
-    url: 'javascript:void(0);',
-    linkType: 'information' as const,
-  },
-  {
-    title: 'Tag hånd om din nervøsitet før eksamen',
-    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
-    url: 'javascript:void(0);',
-    linkType: 'information' as const,
-  },
-];
-
-const videoLinks = [
-  {
-    title: 'WISEflow',
-    description: 'Digital aflevering af eksamensbesvarelser',
-    url: 'javascript:void(0);',
-    linkType: 'information' as const,
-  },
-  {
-    title: 'Eksamensformalia på din uddannelse',
-    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
-    url: 'javascript:void(0);',
-    linkType: 'system' as const,
-  },
-  {
-    title: 'Tag hånd om din nervøsitet før eksamen',
-    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
-    url: 'javascript:void(0);',
-    linkType: 'information' as const,
-  },
-];
-
-const infoboxLinks = [
-  {
-    title: 'WISEflow',
-    description: 'Digital aflevering af eksamensbesvarelser',
-    url: 'javascript:void(0);',
-    linkType: 'system' as const,
-  },
-  {
-    title: 'Eksamensformalia på din uddannelse',
-    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
-    url: 'javascript:void(0);',
-    linkType: 'system' as const,
-  },
-  {
-    title: 'Tag hånd om din nervøsitet før eksamen',
-    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
-    url: 'javascript:void(0);',
-    linkType: 'information' as const,
-  },
-]
-
-export const InfoboxContent: Story = {
-  args: {
-    name: 'Kom godt igennem eksamensperioden',
-    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
-    links: infoboxLinks,
-    featuredContent: {
-      type: 'infoBox',
-      htmlContent: '<h4>Frister for tilmelding</h4><ul><li>1.-5. maj: Tilmelding til kurser i efterårssemesteret</li><li>10. juni: Sidste frist for tilmelding til sommerens eksamener</li></ul>',
-    },
-  },
-};
-
-export const ImageContent: Story = {
-  args: {
-    name: 'Kom godt igennem eksamensperioden',
-    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
-    links: imageLinks,
-    featuredContent: {
-      type: 'image',
-      url: 'https://picsum.photos/640/360',
-      altText: 'Placeholder billede',
-      caption: 'Foto: John Doe',
-    },
-  },
-};
-
-export const VideoContent: Story = {
-  args: {
-    name: 'Kom godt igennem eksamensperioden',
-    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
-    links: videoLinks,
-    featuredContent: {
-      type: 'video',
-      url: 'https://www.youtube-nocookie.com/embed/LI8Oo5xQMDE',
-    },
-  },
-};
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUDynamicContentComponent from '../src/components/AUDynamicContentComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Dynamic Content',
+  component: AUDynamicContentComponent,
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUDynamicContentComponent>;
+
+type Story = StoryObj<typeof AUDynamicContentComponent>;
+
+const imageLinks = [
+  {
+    title: 'WISEflow',
+    description: 'Digital aflevering af eksamensbesvarelser',
+    url: 'javascript:void(0);',
+    linkType: 'system' as const,
+  },
+  {
+    title: 'Eksamensformalia på din uddannelse',
+    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
+    url: 'javascript:void(0);',
+    linkType: 'information' as const,
+  },
+  {
+    title: 'Tag hånd om din nervøsitet før eksamen',
+    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
+    url: 'javascript:void(0);',
+    linkType: 'information' as const,
+  },
+];
+
+const videoLinks = [
+  {
+    title: 'WISEflow',
+    description: 'Digital aflevering af eksamensbesvarelser',
+    url: 'javascript:void(0);',
+    linkType: 'information' as const,
+  },
+  {
+    title: 'Eksamensformalia på din uddannelse',
+    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
+    url: 'javascript:void(0);',
+    linkType: 'system' as const,
+  },
+  {
+    title: 'Tag hånd om din nervøsitet før eksamen',
+    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
+    url: 'javascript:void(0);',
+    linkType: 'information' as const,
+  },
+];
+
+const infoboxLinks = [
+  {
+    title: 'WISEflow',
+    description: 'Digital aflevering af eksamensbesvarelser',
+    url: 'javascript:void(0);',
+    linkType: 'system' as const,
+  },
+  {
+    title: 'Eksamensformalia på din uddannelse',
+    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
+    url: 'javascript:void(0);',
+    linkType: 'system' as const,
+  },
+  {
+    title: 'Tag hånd om din nervøsitet før eksamen',
+    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
+    url: 'javascript:void(0);',
+    linkType: 'information' as const,
+  },
+]
+
+export const InfoboxContent: Story = {
+  args: {
+    name: 'Kom godt igennem eksamensperioden',
+    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
+    links: infoboxLinks,
+    featuredContent: {
+      type: 'infoBox',
+      htmlContent: '<h4>Frister for tilmelding</h4><ul><li>1.-5. maj: Tilmelding til kurser i efterårssemesteret</li><li>10. juni: Sidste frist for tilmelding til sommerens eksamener</li></ul>',
+    },
+  },
+};
+
+export const ImageContent: Story = {
+  args: {
+    name: 'Kom godt igennem eksamensperioden',
+    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
+    links: imageLinks,
+    featuredContent: {
+      type: 'image',
+      url: 'https://picsum.photos/640/360',
+      altText: 'Placeholder billede',
+      caption: 'Foto: John Doe',
+    },
+  },
+};
+
+export const VideoContent: Story = {
+  args: {
+    name: 'Kom godt igennem eksamensperioden',
+    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
+    links: videoLinks,
+    featuredContent: {
+      type: 'video',
+      url: 'https://www.youtube-nocookie.com/embed/LI8Oo5xQMDE',
+    },
+  },
+};

package/stories/AUEditorComponent.stories.tsx

@@ -1,67 +1,67 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUEditorComponent from '../src/components/AUEditorComponent';
-import { ThemeWrapper, translations } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/Editor',
-  component: AUEditorComponent,
-  argTypes: {
-    title: {
-      table: {
-        disable: true,
-      }
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUEditorComponent>;
-
-type Story = StoryObj<typeof AUEditorComponent>;
-
-export const Without_Character_Count: Story = {
-  args: {
-    lang: 'en',
-    id: 'editor',
-    textareaName: 'editor',
-    initialValue: '<h3>Overskrift</h3><p>Indhold</p>',
-    translations,
-    onEditorChange: (value: string) => console.log(value),
-  },
-  render: (args) => <AUEditorComponent {...args} />,
-};
-
-export const With_Recommended_Character_Count: Story = {
-  args: {
-    lang: 'da',
-    id: 'editor',
-    textareaName: 'editor',
-    initialValue: '',
-    showCounter: true,
-    counterType: 'recommended',
-    maxChars: 100,
-    translations,
-    onEditorChange: (value: string) => console.log(value),    
-  },
-  render: (args) => <AUEditorComponent {...args} />,
-};
-
-export const With_Allowed_Character_Count: Story = {
-  args: {
-    lang: 'da',
-    id: 'editor',
-    textareaName: 'editor',
-    initialValue: '',
-    showCounter: true,
-    counterType: 'allowed',
-    maxChars: 100,
-    translations,
-    onEditorChange: (value: string) => console.log(value),
-  },
-  render: (args) => <AUEditorComponent {...args} />,
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUEditorComponent from '../src/components/AUEditorComponent';
+import { ThemeWrapper, translations } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Editor',
+  component: AUEditorComponent,
+  argTypes: {
+    title: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUEditorComponent>;
+
+type Story = StoryObj<typeof AUEditorComponent>;
+
+export const Without_Character_Count: Story = {
+  args: {
+    lang: 'en',
+    id: 'editor',
+    textareaName: 'editor',
+    initialValue: '<h3>Overskrift</h3><p>Indhold</p>',
+    translations,
+    onEditorChange: (value: string) => console.log(value),
+  },
+  render: (args) => <AUEditorComponent {...args} />,
+};
+
+export const With_Recommended_Character_Count: Story = {
+  args: {
+    lang: 'da',
+    id: 'editor',
+    textareaName: 'editor',
+    initialValue: '',
+    showCounter: true,
+    counterType: 'recommended',
+    maxChars: 100,
+    translations,
+    onEditorChange: (value: string) => console.log(value),    
+  },
+  render: (args) => <AUEditorComponent {...args} />,
+};
+
+export const With_Allowed_Character_Count: Story = {
+  args: {
+    lang: 'da',
+    id: 'editor',
+    textareaName: 'editor',
+    initialValue: '',
+    showCounter: true,
+    counterType: 'allowed',
+    maxChars: 100,
+    translations,
+    onEditorChange: (value: string) => console.log(value),
+  },
+  render: (args) => <AUEditorComponent {...args} />,
 };

package/stories/AUErrorComponent.stories.tsx

@@ -1,133 +1,133 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUErrorComponent from '../src/components/AUErrorComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/Error',
-  component: AUErrorComponent,
-  argTypes: {
-    error: {
-      table: {
-        disable: true,
-      }
-    },
-    fetchError: {
-      table: {
-        disable: true,
-      }
-    },
-    serializedError: {
-      table: {
-        disable: true,
-      }
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUErrorComponent>;
-
-type Story = StoryObj<typeof AUErrorComponent>;
-
-export const AU_Error: Story = {
-  args: {
-    error: {
-      header: 'Our own custom error',
-      message: 'With a nice header and descriptive error message',
-      status: 500,
-    },
-    withStatus: false,
-  },
-  render: (args) => <AUErrorComponent {...args} />,
-};
-
-export const AU_Error_With_Status: Story = {
-  args: {
-    error: {
-      header: 'Our own custom error',
-      message: 'With a nice header and descriptive error message',
-      status: 500,
-    },
-    withStatus: true,
-  },
-  render: (args) => <AUErrorComponent {...args} />,
-};
-
-export const Fetch_Error: Story = {
-  args: {
-    fetchError: {
-      error: 'Something horrible has happened on the server...',
-      status: 'FETCH_ERROR',
-    },
-    withStatus: false,
-  },
-  render: (args) => <AUErrorComponent {...args} />,
-};
-
-export const Fetch_Error_With_Status: Story = {
-  args: {
-    fetchError: {
-      error: 'Something horrible has happened on the server...',
-      status: 'FETCH_ERROR',
-    },
-    withStatus: true,
-  },
-  render: (args) => <AUErrorComponent {...args} />,
-};
-
-export const Fetch_Error_With_Data: Story = {
-  args: {
-    fetchError: {
-      data: {
-        status: 'Error',
-        message: 'This could be anything...',
-        somethingElse: 'Even this...',
-      },
-      status: 500,
-    },
-    withStatus: false,
-  },
-  render: (args) => <AUErrorComponent {...args} />,
-};
-
-export const Fetch_Error_With_Data_And_Status: Story = {
-  args: {
-    fetchError: {
-      data: {
-        status: 'Error',
-        message: 'This could be anything...',
-        somethingElse: 'Even this...',
-      },
-      status: 500,
-    },
-    withStatus: true,
-  },
-  render: (args) => <AUErrorComponent {...args} />,
-};
-
-export const Serialized_Error: Story = {
-  args: {
-    serializedError: {
-      message: 'Something funky has happened in the code...',
-      code: '500',
-    },
-    withStatus: false,
-  },
-  render: (args) => <AUErrorComponent {...args} />,
-};
-
-export const Serialized_Error_With_Code: Story = {
-  args: {
-    serializedError: {
-      message: 'Something funky has happened in the code...',
-      code: '500',
-    },
-    withStatus: true,
-  },
-  render: (args) => <AUErrorComponent {...args} />,
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUErrorComponent from '../src/components/AUErrorComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Error',
+  component: AUErrorComponent,
+  argTypes: {
+    error: {
+      table: {
+        disable: true,
+      }
+    },
+    fetchError: {
+      table: {
+        disable: true,
+      }
+    },
+    serializedError: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUErrorComponent>;
+
+type Story = StoryObj<typeof AUErrorComponent>;
+
+export const AU_Error: Story = {
+  args: {
+    error: {
+      header: 'Our own custom error',
+      message: 'With a nice header and descriptive error message',
+      status: 500,
+    },
+    withStatus: false,
+  },
+  render: (args) => <AUErrorComponent {...args} />,
+};
+
+export const AU_Error_With_Status: Story = {
+  args: {
+    error: {
+      header: 'Our own custom error',
+      message: 'With a nice header and descriptive error message',
+      status: 500,
+    },
+    withStatus: true,
+  },
+  render: (args) => <AUErrorComponent {...args} />,
+};
+
+export const Fetch_Error: Story = {
+  args: {
+    fetchError: {
+      error: 'Something horrible has happened on the server...',
+      status: 'FETCH_ERROR',
+    },
+    withStatus: false,
+  },
+  render: (args) => <AUErrorComponent {...args} />,
+};
+
+export const Fetch_Error_With_Status: Story = {
+  args: {
+    fetchError: {
+      error: 'Something horrible has happened on the server...',
+      status: 'FETCH_ERROR',
+    },
+    withStatus: true,
+  },
+  render: (args) => <AUErrorComponent {...args} />,
+};
+
+export const Fetch_Error_With_Data: Story = {
+  args: {
+    fetchError: {
+      data: {
+        status: 'Error',
+        message: 'This could be anything...',
+        somethingElse: 'Even this...',
+      },
+      status: 500,
+    },
+    withStatus: false,
+  },
+  render: (args) => <AUErrorComponent {...args} />,
+};
+
+export const Fetch_Error_With_Data_And_Status: Story = {
+  args: {
+    fetchError: {
+      data: {
+        status: 'Error',
+        message: 'This could be anything...',
+        somethingElse: 'Even this...',
+      },
+      status: 500,
+    },
+    withStatus: true,
+  },
+  render: (args) => <AUErrorComponent {...args} />,
+};
+
+export const Serialized_Error: Story = {
+  args: {
+    serializedError: {
+      message: 'Something funky has happened in the code...',
+      code: '500',
+    },
+    withStatus: false,
+  },
+  render: (args) => <AUErrorComponent {...args} />,
+};
+
+export const Serialized_Error_With_Code: Story = {
+  args: {
+    serializedError: {
+      message: 'Something funky has happened in the code...',
+      code: '500',
+    },
+    withStatus: true,
+  },
+  render: (args) => <AUErrorComponent {...args} />,
 };