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

package/stories/AUComboBoxComponent.stories.tsx

@@ -1,101 +1,101 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUComboBoxComponent from '../src/components/AUComboBoxComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-const countries: IComboBoxSearch[] = [
-  {
-    id: 1,
-    name: 'Denmark',
-  },
-  {
-    id: 2,
-    name: 'Sweden',
-  },
-  {
-    id: 3,
-    name: 'Norway',
-  },
-  {
-    id: 4,
-    name: 'Finland',
-  },
-  {
-    id: 5,
-    name: 'Iceland',
-  },
-  {
-    id: 6,
-    name: 'Greenland',
-  },
-  {
-    id: 7,
-    name: 'Faroe Islands',
-  },
-  {
-    id: 8,
-    name: 'United Kingdom',
-  },
-  {
-    id: 9,
-    name: 'Germany',
-  },
-  {
-    id: 10,
-    name: 'France',
-  },
-  {
-    id: 11,
-    name: 'Spain',
-  },
-  {
-    id: 12,
-    name: 'Portugal',
-  },
-  {
-    id: 13,
-    name: 'Italy',
-  },
-  {
-    id: 14,
-    name: 'Greece',
-  },
-];
-
-export default {
-  title: 'Delphinus/ComboBox',
-  component: AUComboBoxComponent,
-  argTypes: {
-    onItemSelect: {
-      table: {
-        disable: true,
-      }
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        <form action="get" method="/">
-          {Story()}
-        </form>
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUComboBoxComponent>;
-
-type Story = StoryObj<typeof AUComboBoxComponent>;
-
-export const ComboBox: Story = {
-  args: {
-    data: countries,
-    label: 'Country',
-    resultsText: {
-      one: 'There is {{dataLength}} country available.',
-      other: 'There are {{dataLength}} countries available.',
-    },
-    noResultsText: 'No countries found.',
-    noResultsTextSecondary: 'Try searching for something else.',
-    clearOnSelect: true,
-  },
-  render: (args) => <AUComboBoxComponent {...args} />,
-};
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUComboBoxComponent from '../src/components/AUComboBoxComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+const countries: IComboBoxSearch[] = [
+  {
+    id: 1,
+    name: 'Denmark',
+  },
+  {
+    id: 2,
+    name: 'Sweden',
+  },
+  {
+    id: 3,
+    name: 'Norway',
+  },
+  {
+    id: 4,
+    name: 'Finland',
+  },
+  {
+    id: 5,
+    name: 'Iceland',
+  },
+  {
+    id: 6,
+    name: 'Greenland',
+  },
+  {
+    id: 7,
+    name: 'Faroe Islands',
+  },
+  {
+    id: 8,
+    name: 'United Kingdom',
+  },
+  {
+    id: 9,
+    name: 'Germany',
+  },
+  {
+    id: 10,
+    name: 'France',
+  },
+  {
+    id: 11,
+    name: 'Spain',
+  },
+  {
+    id: 12,
+    name: 'Portugal',
+  },
+  {
+    id: 13,
+    name: 'Italy',
+  },
+  {
+    id: 14,
+    name: 'Greece',
+  },
+];
+
+export default {
+  title: 'Delphinus/ComboBox',
+  component: AUComboBoxComponent,
+  argTypes: {
+    onItemSelect: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        <form action="get" method="/">
+          {Story()}
+        </form>
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUComboBoxComponent>;
+
+type Story = StoryObj<typeof AUComboBoxComponent>;
+
+export const ComboBox: Story = {
+  args: {
+    data: countries,
+    label: 'Country',
+    resultsText: {
+      one: 'There is {{dataLength}} country available.',
+      other: 'There are {{dataLength}} countries available.',
+    },
+    noResultsText: 'No countries found.',
+    noResultsTextSecondary: 'Try searching for something else.',
+    clearOnSelect: true,
+  },
+  render: (args) => <AUComboBoxComponent {...args} />,
+};

package/stories/AUContentToggleComponent.stories.tsx

@@ -1,87 +1,87 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/Content Toggle',
-  component: AUContentToggleComponent,
-  argTypes: {
-    toggled: {
-      table: {
-        disable: true,
-      }
-    },     
-    children: {
-      table: {
-        disable: true,
-      }
-    }, 
-    classNames: {
-      table: {
-        disable: true,
-      }
-    },
-    onClick: {
-      table: {
-        disable: true,
-      }
-    },
-    beforeCallback: {
-      table: {
-        disable: true,
-      }
-    },
-    afterCallback: {
-      table: {
-        disable: true,
-      }
-    },    
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUContentToggleComponent>;
-
-type Story = StoryObj<typeof AUContentToggleComponent>;
-
-export const Hidden_when_loaded: Story = {
-  args: {
-    toggled: false,
-    children: (
-      <div className="box theme--background-secondary box--constrain-width">
-        <button className="content-toggle__toggle button button--small" aria-expanded="false">
-          Very interesting content is hidden
-        </button>
-        <div className="content-toggle__content vertical-spacing-top" hidden>
-          <h4 className="text--label-header text--pull">The content that is toggled</h4>
-          <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
-        </div>
-      </div>
-    ),
-  },
-  render: (args) => <AUContentToggleComponent {...args} />,
-};
-
-export const Shown_when_loaded: Story = {
-  args: {
-    toggled: true,
-    children: (
-      <div className="box theme--background-secondary box--constrain-width">
-        <button className="content-toggle__toggle button button--small" aria-expanded="true">
-          Very interesting content is hidden
-        </button>
-        <div className="content-toggle__content vertical-spacing-top">
-          <h4 className="text--label-header text--pull">The content that is toggled</h4>
-          <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
-        </div>
-      </div>
-    ),
-  },
-  render: (args) => <AUContentToggleComponent {...args} />,
-};
-
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Content Toggle',
+  component: AUContentToggleComponent,
+  argTypes: {
+    toggled: {
+      table: {
+        disable: true,
+      }
+    },     
+    children: {
+      table: {
+        disable: true,
+      }
+    }, 
+    classNames: {
+      table: {
+        disable: true,
+      }
+    },
+    onClick: {
+      table: {
+        disable: true,
+      }
+    },
+    beforeCallback: {
+      table: {
+        disable: true,
+      }
+    },
+    afterCallback: {
+      table: {
+        disable: true,
+      }
+    },    
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUContentToggleComponent>;
+
+type Story = StoryObj<typeof AUContentToggleComponent>;
+
+export const Hidden_when_loaded: Story = {
+  args: {
+    toggled: false,
+    children: (
+      <div className="box theme--background-secondary box--constrain-width">
+        <button className="content-toggle__toggle button button--small" aria-expanded="false">
+          Very interesting content is hidden
+        </button>
+        <div className="content-toggle__content vertical-spacing-top" hidden>
+          <h4 className="text--label-header text--pull">The content that is toggled</h4>
+          <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
+        </div>
+      </div>
+    ),
+  },
+  render: (args) => <AUContentToggleComponent {...args} />,
+};
+
+export const Shown_when_loaded: Story = {
+  args: {
+    toggled: true,
+    children: (
+      <div className="box theme--background-secondary box--constrain-width">
+        <button className="content-toggle__toggle button button--small" aria-expanded="true">
+          Very interesting content is hidden
+        </button>
+        <div className="content-toggle__content vertical-spacing-top">
+          <h4 className="text--label-header text--pull">The content that is toggled</h4>
+          <p>Collapsible sections are perhaps the most rudimentary of interactive design patterns on the web. All they do is let you toggle the visibility of content by clicking that content's label. Big whoop.</p>
+        </div>
+      </div>
+    ),
+  },
+  render: (args) => <AUContentToggleComponent {...args} />,
+};
+

package/stories/AUDialogModalComponent.stories.tsx

@@ -1,75 +1,75 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
-import AUDialogModalComponent from '../src/components/AUDialogModalComponent';
-import AUButtonComponent from '../src/components/AUButtonComponent';
-import { ThemeWrapper } from './lib/helpers';
-import { useAUDialogModalContext } from '../src/lib/context';
-
-const ModalContent = () => {
-  const close = useAUDialogModalContext();
-  return (
-    <>
-      <h2 className="modal-view__header">
-        The quick brown fox jumps over the lazy dog
-      </h2>
-      <div className="modal-view__content">
-        <p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet. It is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired. Owing to its brevity and coherence, it has become widely known.</p><h3>History</h3><p>The earliest known appearance of the phrase is from The Boston Journal. In an article titled "Current Notes" in the February 10, 1885, morning edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[1] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The".[2] The earliest known use of the phrase in its modern form (starting with "The") is from the 1888 book Illustrative Shorthand by Linda Bronson.[3] The modern form (starting with "The") became more common despite the fact that it is slightly longer than the original (starting with "A").</p>
-      </div>
-      <AUButtonComponent
-        label="Close modal"
-        ariaHasPopup
-        onClick={() => {
-          if (typeof close === 'function') {
-            close();
-          }
-        }}
-      />
-    </>
-  );
-}
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Delphinus/Dialog Modal',
-  component: AUDialogModalComponent,
-  argTypes: {
-    sender: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUDialogModalComponent>;
-
-type Story = StoryObj<typeof AUDialogModalComponent>;
-
-export const Default: Story = {
-  args: {
-    show: true,
-    closeButtonDisabled: false,
-  },
-  render: (args) => {
-    const [_, updateArgs] = useArgs();
-
-    return (
-      <div className="page__content__block">
-        <AUButtonComponent
-          label="Open modal"
-          ariaHasPopup
-          onClick={() => updateArgs({ ...args, show: true })}
-        />
-        <AUDialogModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
-          <ModalContent />
-        </AUDialogModalComponent>
-      </div>
-    );
-  },
-};
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import AUDialogModalComponent from '../src/components/AUDialogModalComponent';
+import AUButtonComponent from '../src/components/AUButtonComponent';
+import { ThemeWrapper } from './lib/helpers';
+import { useAUDialogModalContext } from '../src/lib/context';
+
+const ModalContent = () => {
+  const close = useAUDialogModalContext();
+  return (
+    <>
+      <h2 className="modal-view__header">
+        The quick brown fox jumps over the lazy dog
+      </h2>
+      <div className="modal-view__content">
+        <p>"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet. It is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired. Owing to its brevity and coherence, it has become widely known.</p><h3>History</h3><p>The earliest known appearance of the phrase is from The Boston Journal. In an article titled "Current Notes" in the February 10, 1885, morning edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[1] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The".[2] The earliest known use of the phrase in its modern form (starting with "The") is from the 1888 book Illustrative Shorthand by Linda Bronson.[3] The modern form (starting with "The") became more common despite the fact that it is slightly longer than the original (starting with "A").</p>
+      </div>
+      <AUButtonComponent
+        label="Close modal"
+        ariaHasPopup
+        onClick={() => {
+          if (typeof close === 'function') {
+            close();
+          }
+        }}
+      />
+    </>
+  );
+}
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Dialog Modal',
+  component: AUDialogModalComponent,
+  argTypes: {
+    sender: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUDialogModalComponent>;
+
+type Story = StoryObj<typeof AUDialogModalComponent>;
+
+export const Default: Story = {
+  args: {
+    show: true,
+    closeButtonDisabled: false,
+  },
+  render: (args) => {
+    const [_, updateArgs] = useArgs();
+
+    return (
+      <div className="page__content__block">
+        <AUButtonComponent
+          label="Open modal"
+          ariaHasPopup
+          onClick={() => updateArgs({ ...args, show: true })}
+        />
+        <AUDialogModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
+          <ModalContent />
+        </AUDialogModalComponent>
+      </div>
+    );
+  },
+};

package/stories/AUDynamicContentComponent.stories.tsx

@@ -0,0 +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: '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.',
+    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: '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.',
+    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: '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.',
+    links: videoLinks,
+    featuredContent: {
+      type: 'video',
+      url: 'https://www.youtube-nocookie.com/embed/LI8Oo5xQMDE',
+    },
+  },
+};