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

package/stories/AUAlertComponent.stories.tsx

@@ -1,133 +1,133 @@
-import React, { FC, useState } from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUAlertComponent, { Props as AlertProps } from '../src/components/AUAlertComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-type Props = {
-  confirm: boolean;
-  label: string;
-  mode: AlertProps['mode'];
-  header: string;
-  message: string;
-  okButtonText: string;
-  cancelButtonText: string;
-};
-
-const AlertWrapper: FC<Props> = ({
-  confirm,
-  label,
-  mode,
-  header,
-  message,
-  okButtonText,
-  cancelButtonText,
-}) => {
-  const [processing, setProcessing] = useState<boolean>(false);
-  const [done, setDone] = useState<boolean>(false);
-
-  return (
-    <AUAlertComponent
-      modalId="alertModal"
-      confirm={confirm}
-      label={label}
-      mode={mode}
-      okMode="ireversable-action"
-      header={header}
-      message={message}
-      okButtonText={okButtonText}
-      cancelButtonText={cancelButtonText}
-      processing={processing}
-      done={done}
-      onClick={() => {
-        setDone(false);
-        setProcessing(true);
-        setTimeout(() => {
-          setDone(true);
-          setProcessing(false);
-        }, 2500);
-      }}
-    />
-  );
-};
-
-export default {
-  title: 'Delphinus/Alert and Confirm',
-  component: AlertWrapper,
-  argTypes: {
-    label: {
-      table: {
-        disable: true,
-      }
-    },
-    mode: {
-      table: {
-        disable: true,
-      }
-    },
-    onClick: {
-      table: {
-        disable: true,
-      }
-    },
-    modalId: {
-      table: {
-        disable: true,
-      }
-    },
-    confirm: {
-      table: {
-        disable: true,
-      }
-    },
-    processing: {
-      table: {
-        disable: true,
-      }
-    },
-    done: {
-      table: {
-        disable: true,
-      }
-    },
-    cancelButtonText: {
-      table: {
-        disable: true,
-      }
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AlertWrapper>;
-
-type Story = StoryObj<typeof AlertWrapper>;
-
-export const Alert: Story = {
-  args: {
-    confirm: false,
-    label: 'Slet',
-    mode: 'ireversable-action',
-    header: 'Advarsel',
-    message: '<p>Den valgte fil vil blive slettet.</p>',
-    okButtonText: 'Ok, forstået',
-    cancelButtonText: 'Annuller',
-  },
-  render: (args) => <AlertWrapper {...args} />,
-};
-
-export const Confirm: Story = {
-  args: {
-    confirm: true,
-    label: 'Slet',
-    mode: 'ireversable-action',
-    header: 'Bekræft',
-    message: '<p>Er du sikker på, at du vil slette den valgte fil?</p>',
-    okButtonText: 'Ja',
-    cancelButtonText: 'Annuller',
-  },
-  render: (args) => <AlertWrapper {...args} />,
-};
+import React, { FC, useState } from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUAlertComponent, { Props as AlertProps } from '../src/components/AUAlertComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+type Props = {
+  confirm: boolean;
+  label: string;
+  mode: AlertProps['mode'];
+  header: string;
+  message: string;
+  okButtonText: string;
+  cancelButtonText: string;
+};
+
+const AlertWrapper: FC<Props> = ({
+  confirm,
+  label,
+  mode,
+  header,
+  message,
+  okButtonText,
+  cancelButtonText,
+}) => {
+  const [processing, setProcessing] = useState<boolean>(false);
+  const [done, setDone] = useState<boolean>(false);
+
+  return (
+    <AUAlertComponent
+      modalId="alertModal"
+      confirm={confirm}
+      label={label}
+      mode={mode}
+      okMode="ireversable-action"
+      header={header}
+      message={message}
+      okButtonText={okButtonText}
+      cancelButtonText={cancelButtonText}
+      processing={processing}
+      done={done}
+      onClick={() => {
+        setDone(false);
+        setProcessing(true);
+        setTimeout(() => {
+          setDone(true);
+          setProcessing(false);
+        }, 2500);
+      }}
+    />
+  );
+};
+
+export default {
+  title: 'Delphinus/Alert and Confirm',
+  component: AlertWrapper,
+  argTypes: {
+    label: {
+      table: {
+        disable: true,
+      }
+    },
+    mode: {
+      table: {
+        disable: true,
+      }
+    },
+    onClick: {
+      table: {
+        disable: true,
+      }
+    },
+    modalId: {
+      table: {
+        disable: true,
+      }
+    },
+    confirm: {
+      table: {
+        disable: true,
+      }
+    },
+    processing: {
+      table: {
+        disable: true,
+      }
+    },
+    done: {
+      table: {
+        disable: true,
+      }
+    },
+    cancelButtonText: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AlertWrapper>;
+
+type Story = StoryObj<typeof AlertWrapper>;
+
+export const Alert: Story = {
+  args: {
+    confirm: false,
+    label: 'Slet',
+    mode: 'ireversable-action',
+    header: 'Advarsel',
+    message: '<p>Den valgte fil vil blive slettet.</p>',
+    okButtonText: 'Ok, forstået',
+    cancelButtonText: 'Annuller',
+  },
+  render: (args) => <AlertWrapper {...args} />,
+};
+
+export const Confirm: Story = {
+  args: {
+    confirm: true,
+    label: 'Slet',
+    mode: 'ireversable-action',
+    header: 'Bekræft',
+    message: '<p>Er du sikker på, at du vil slette den valgte fil?</p>',
+    okButtonText: 'Ja',
+    cancelButtonText: 'Annuller',
+  },
+  render: (args) => <AlertWrapper {...args} />,
+};

package/stories/AUAutoSuggestComponent.stories.tsx

@@ -1,96 +1,96 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUAutoSuggestComponent from '../src/components/AUAutoSuggestComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/AutoSuggest',
-  component: AUAutoSuggestComponent,
-  argTypes: {
-    label: {
-      table: {
-        disable: true,
-      }
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUAutoSuggestComponent>;
-
-type Story = StoryObj<typeof AUAutoSuggestComponent>;
-
-export const AutoComplete: Story = {
-  args: {
-    collection: [],
-    getSuggestions: (value, _, callback) => {
-      const inputValue = value.trim().toLowerCase();
-      const inputLength = inputValue.length;
-
-      const results = inputLength === 0
-        ? []
-        : [
-          { id: 1, name: 'Copenhagen' },
-          { id: 2, name: 'Aarhus' },
-          { id: 3, name: 'Odense' },
-          { id: 4, name: 'Aalborg' },
-          { id: 5, name: 'Esbjerg' },
-          { id: 6, name: 'Randers' },
-          { id: 7, name: 'Kolding' },
-          { id: 8, name: 'Horsens' },
-          { id: 9, name: 'Vejle' },
-          { id: 10, name: 'Herning' },
-          { id: 11, name: 'Frederiksberg' },
-          { id: 12, name: 'Fredericia' },
-          { id: 13, name: 'Roskilde' },
-          { id: 14, name: 'Silkeborg' },
-          { id: 15, name: 'Næstved' },
-          { id: 16, name: 'Helsingør' },
-          { id: 17, name: 'Hvidovre' },
-          { id: 18, name: 'Holstebro' },
-          { id: 19, name: 'Hjørring' },
-          { id: 20, name: 'Glostrup' },
-          { id: 21, name: 'Hillerød' },
-          { id: 22, name: 'Slagelse' },
-          { id: 23, name: 'Viborg' },
-          { id: 24, name: 'Ikast-Brande' },
-          { id: 25, name: 'Frederikshavn' },
-          { id: 26, name: 'Ringsted' },
-          { id: 27, name: 'Taastrup' },
-          { id: 28, name: 'Køge' },
-          { id: 29, name: 'Nørresundby' },
-          { id: 30, name: 'Haderslev' },
-          { id: 31, name: 'Varde' },
-          { id: 32, name: 'Hedensted' },
-          { id: 33, name: 'Sønderborg' },
-          { id: 34, name: 'Greve' },
-          { id: 35, name: 'Albertslund' },
-          { id: 36, name: 'Skive' },
-          { id: 37, name: 'Hørsholm' },
-          { id: 38, name: 'Horsens' },
-          { id: 39, name: 'Herning' },
-          { id: 40, name: 'Frederiksberg' },
-          { id: 41, name: 'Fredericia' },
-          { id: 42, name: 'Roskilde' },
-          { id: 43, name: 'Silkeborg' },
-          { id: 44, name: 'Næstved' },
-          { id: 45, name: 'Helsingør' },
-          { id: 46, name: 'Hvidovre' },
-          { id: 47, name: 'Holstebro' },
-
-        ].filter((lang) => lang.name.toLowerCase().slice(0, inputLength) === inputValue);
-
-      callback(results);
-    },
-    getSuggestionValue: (suggestion) => suggestion.name,
-    setResults: () => { },
-    setQuery: () => { },
-    renderSuggestion: (suggestion) => <span>{suggestion.name}</span>,
-    placeholder: 'Search',
-  },
-  render: (args) => <AUAutoSuggestComponent {...args} />,
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUAutoSuggestComponent from '../src/components/AUAutoSuggestComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/AutoSuggest',
+  component: AUAutoSuggestComponent,
+  argTypes: {
+    label: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUAutoSuggestComponent>;
+
+type Story = StoryObj<typeof AUAutoSuggestComponent>;
+
+export const AutoComplete: Story = {
+  args: {
+    collection: [],
+    getSuggestions: (value, _, callback) => {
+      const inputValue = value.trim().toLowerCase();
+      const inputLength = inputValue.length;
+
+      const results = inputLength === 0
+        ? []
+        : [
+          { id: 1, name: 'Copenhagen' },
+          { id: 2, name: 'Aarhus' },
+          { id: 3, name: 'Odense' },
+          { id: 4, name: 'Aalborg' },
+          { id: 5, name: 'Esbjerg' },
+          { id: 6, name: 'Randers' },
+          { id: 7, name: 'Kolding' },
+          { id: 8, name: 'Horsens' },
+          { id: 9, name: 'Vejle' },
+          { id: 10, name: 'Herning' },
+          { id: 11, name: 'Frederiksberg' },
+          { id: 12, name: 'Fredericia' },
+          { id: 13, name: 'Roskilde' },
+          { id: 14, name: 'Silkeborg' },
+          { id: 15, name: 'Næstved' },
+          { id: 16, name: 'Helsingør' },
+          { id: 17, name: 'Hvidovre' },
+          { id: 18, name: 'Holstebro' },
+          { id: 19, name: 'Hjørring' },
+          { id: 20, name: 'Glostrup' },
+          { id: 21, name: 'Hillerød' },
+          { id: 22, name: 'Slagelse' },
+          { id: 23, name: 'Viborg' },
+          { id: 24, name: 'Ikast-Brande' },
+          { id: 25, name: 'Frederikshavn' },
+          { id: 26, name: 'Ringsted' },
+          { id: 27, name: 'Taastrup' },
+          { id: 28, name: 'Køge' },
+          { id: 29, name: 'Nørresundby' },
+          { id: 30, name: 'Haderslev' },
+          { id: 31, name: 'Varde' },
+          { id: 32, name: 'Hedensted' },
+          { id: 33, name: 'Sønderborg' },
+          { id: 34, name: 'Greve' },
+          { id: 35, name: 'Albertslund' },
+          { id: 36, name: 'Skive' },
+          { id: 37, name: 'Hørsholm' },
+          { id: 38, name: 'Horsens' },
+          { id: 39, name: 'Herning' },
+          { id: 40, name: 'Frederiksberg' },
+          { id: 41, name: 'Fredericia' },
+          { id: 42, name: 'Roskilde' },
+          { id: 43, name: 'Silkeborg' },
+          { id: 44, name: 'Næstved' },
+          { id: 45, name: 'Helsingør' },
+          { id: 46, name: 'Hvidovre' },
+          { id: 47, name: 'Holstebro' },
+
+        ].filter((lang) => lang.name.toLowerCase().slice(0, inputLength) === inputValue);
+
+      callback(results);
+    },
+    getSuggestionValue: (suggestion) => suggestion.name,
+    setResults: () => { },
+    setQuery: () => { },
+    renderSuggestion: (suggestion) => <span>{suggestion.name}</span>,
+    placeholder: 'Search',
+  },
+  render: (args) => <AUAutoSuggestComponent {...args} />,
 };