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

package/stories/AUButtonComponent.stories.tsx

@@ -1,139 +1,139 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUButtonComponent from '../src/components/AUButtonComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/Button',
-  component: AUButtonComponent,
-  argTypes: {
-    type: {
-      control: {
-        type: 'radio',
-      },
-      options: [
-        'default',
-        'text',
-        'dimmed',
-      ]
-    },
-    size: {
-      control: {
-        type: 'radio',
-      },
-      options: [
-        'small',
-        'default',
-        'large',
-      ]
-    },
-    icon: {
-      control: {
-        type: 'select',
-      },
-      options: ['add', 'attachment', 'award', 'bike', 'bookmark', 'brand-linkedin', 'brand-mendeley', 'brand-orcid', 'brand-researchgate', 'brand-twitter', 'calendar', 'camera', 'car', 'class', 'close', 'collapse', 'confirm', 'confirm-circle', 'context-menu', 'copy', 'current-semester', 'dark-mode', 'delphinus', 'delete', 'design', 'download', 'edit', 'email', 'exam', 'expand', 'failed', 'failed-circle', 'file', 'filter', 'finish', 'heart', 'hide', 'infinity', 'info', 'info-circle', 'instructor', 'instructor-with-class', 'language', 'location', 'link-chain', 'link-internal', 'link-external', 'link-external-square', 'lms-course-common', 'lms-course-sections', 'lms-course-additional', 'lms-course-merge-with', 'lms-course-merged', 'mailbox', 'menu', 'news', 'next', 'note', 'notifications', 'passed-exemption', 'phone', 'phone-landline', 'previous', 'print', 'public-transport', 'receipt', 'refresh', 'reorder', 'replay', 'route', 'search', 'season-autumn', 'season-christmas', 'season-easter', 'season-halloween', 'season-spring', 'season-summer', 'season-winter', 'send', 'settings', 'source-system', 'student-place-accepted', 'student-place-not-offered', 'student-place-offered', 'student-place-rejected', 'student-place-standby', 'sign-in', 'sign-out', 'spock', 'sync', 'theme-chooser', 'tip', 'tools', 'tooltip', 'upload', 'user-profile', 'user-impersonation', 'view', 'viewport-default', 'viewport-medium', 'viewport-wide', 'walking', 'warning', 'warning-triangle'],
-    },
-    iconPosition: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'left',
-        'right',
-      ],
-      if: {
-        arg: 'icon',
-      }
-    },
-    hideLabel: {
-      control: {
-        type: 'boolean',
-      },
-      if: {
-        arg: 'icon',
-      },
-    },
-    mode: {
-      table: {
-        disable: true,
-      }
-    },
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUButtonComponent>;
-
-type Story = StoryObj<typeof AUButtonComponent>;
-
-export const Default: Story = {
-  args: {
-    label: 'Button',
-    type: 'default',
-    size: 'default',
-    mode: 'none',
-  },
-  render: (args) => <AUButtonComponent {...args} />,
-};
-
-export const With_Icon = {
-  args: {
-    label: 'Button',
-    type: 'default',
-    size: 'default',
-    mode: 'none',
-    icon: 'delphinus',
-    iconPosition: 'left',
-    hideLabel: false,
-  },
-  render: (args) => <AUButtonComponent {...args} />,
-};
-
-export const Icon_Only = {
-  args: {
-    label: 'Button',
-    type: 'default',
-    size: 'default',
-    mode: 'none',
-    icon: 'delphinus',
-    iconPosition: 'left',
-    hideLabel: true,
-  },
-  render: (args) => <AUButtonComponent {...args} />,
-};
-
-export const Irreversible_Action = {
-  args: {
-    label: 'Button',
-    type: 'default',
-    size: 'default',
-    mode: 'irreversible-action',
-    icon: 'delphinus',
-  },
-  render: (args) => <AUButtonComponent {...args} />,
-};
-
-export const Confirmable_Action = {
-  args: {
-    label: 'Button',
-    type: 'default',
-    size: 'default',
-    mode: 'confirmable-action',
-    icon: 'delphinus',
-  },
-  render: (args) => <AUButtonComponent {...args} />,
-};
-
-export const Processing = {
-  args: {
-    label: 'Button',
-    type: 'default',
-    size: 'default',
-    mode: 'processing',
-  },
-  render: (args) => <AUButtonComponent {...args} />,
-};
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUButtonComponent from '../src/components/AUButtonComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Button',
+  component: AUButtonComponent,
+  argTypes: {
+    type: {
+      control: {
+        type: 'radio',
+      },
+      options: [
+        'default',
+        'text',
+        'dimmed',
+      ]
+    },
+    size: {
+      control: {
+        type: 'radio',
+      },
+      options: [
+        'small',
+        'default',
+        'large',
+      ]
+    },
+    icon: {
+      control: {
+        type: 'select',
+      },
+      options: ['add', 'attachment', 'award', 'bike', 'bookmark', 'brand-linkedin', 'brand-mendeley', 'brand-orcid', 'brand-researchgate', 'brand-twitter', 'calendar', 'camera', 'car', 'class', 'close', 'collapse', 'confirm', 'confirm-circle', 'context-menu', 'copy', 'current-semester', 'dark-mode', 'delphinus', 'delete', 'design', 'download', 'edit', 'email', 'exam', 'expand', 'failed', 'failed-circle', 'file', 'filter', 'finish', 'heart', 'hide', 'infinity', 'info', 'info-circle', 'instructor', 'instructor-with-class', 'language', 'location', 'link-chain', 'link-internal', 'link-external', 'link-external-square', 'lms-course-common', 'lms-course-sections', 'lms-course-additional', 'lms-course-merge-with', 'lms-course-merged', 'mailbox', 'menu', 'news', 'next', 'note', 'notifications', 'passed-exemption', 'phone', 'phone-landline', 'previous', 'print', 'public-transport', 'receipt', 'refresh', 'reorder', 'replay', 'route', 'search', 'season-autumn', 'season-christmas', 'season-easter', 'season-halloween', 'season-spring', 'season-summer', 'season-winter', 'send', 'settings', 'source-system', 'student-place-accepted', 'student-place-not-offered', 'student-place-offered', 'student-place-rejected', 'student-place-standby', 'sign-in', 'sign-out', 'spock', 'sync', 'theme-chooser', 'tip', 'tools', 'tooltip', 'upload', 'user-profile', 'user-impersonation', 'view', 'viewport-default', 'viewport-medium', 'viewport-wide', 'walking', 'warning', 'warning-triangle'],
+    },
+    iconPosition: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'left',
+        'right',
+      ],
+      if: {
+        arg: 'icon',
+      }
+    },
+    hideLabel: {
+      control: {
+        type: 'boolean',
+      },
+      if: {
+        arg: 'icon',
+      },
+    },
+    mode: {
+      table: {
+        disable: true,
+      }
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUButtonComponent>;
+
+type Story = StoryObj<typeof AUButtonComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'none',
+  },
+  render: (args) => <AUButtonComponent {...args} />,
+};
+
+export const With_Icon = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'none',
+    icon: 'delphinus',
+    iconPosition: 'left',
+    hideLabel: false,
+  },
+  render: (args) => <AUButtonComponent {...args} />,
+};
+
+export const Icon_Only = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'none',
+    icon: 'delphinus',
+    iconPosition: 'left',
+    hideLabel: true,
+  },
+  render: (args) => <AUButtonComponent {...args} />,
+};
+
+export const Irreversible_Action = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'irreversible-action',
+    icon: 'delphinus',
+  },
+  render: (args) => <AUButtonComponent {...args} />,
+};
+
+export const Confirmable_Action = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'confirmable-action',
+    icon: 'delphinus',
+  },
+  render: (args) => <AUButtonComponent {...args} />,
+};
+
+export const Processing = {
+  args: {
+    label: 'Button',
+    type: 'default',
+    size: 'default',
+    mode: 'processing',
+  },
+  render: (args) => <AUButtonComponent {...args} />,
+};

package/stories/AUCharacterCountComponent.stories.tsx

@@ -1,121 +1,121 @@
-import React from 'react';
-import { StoryObj, Meta } from '@storybook/react';
-import AUCharacterCountComponent from '../src/components/AUCharacterCountComponent';
-import { ThemeWrapper, translations } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/Character Count',
-  component: AUCharacterCountComponent,
-  argTypes: {
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        <div className="form">
-          <div className="form__field">
-            {Story()}
-          </div>
-        </div>
-      </ThemeWrapper>
-    )
-  ],
-} as Meta<typeof AUCharacterCountComponent>;
-
-type Story = StoryObj<typeof AUCharacterCountComponent>;
-
-export const Recommended_empty: Story = {
-  args: {
-    type: 'recommended',
-    initialChars: 0,
-    maxChars: 100,
-    translations,
-    children: (
-      <input type='text' />
-    ),
-  },
-  render: (args) => {
-    return (
-      <AUCharacterCountComponent {...args}>
-        {args.children}
-      </AUCharacterCountComponent>
-    );
-  },
-};
-
-export const Recommended_initial: Story = {
-  args: {
-    type: 'recommended',
-    initialChars: 19,
-    maxChars: 15,
-    translations,
-    children: (
-      <input type='text' defaultValue="Her står noget tekst" />
-    ),
-  },
-  render: (args) => {
-    return (
-      <AUCharacterCountComponent {...args}>
-        {args.children}
-      </AUCharacterCountComponent>
-    );
-  },
-};
-
-export const Allowed_empty: Story = {
-  args: {
-    type: 'allowed',
-    initialChars: 0,
-    maxChars: 30,
-    translations,
-    children: (
-      <input type='text' />
-    ),
-  },
-  render: (args) => {
-    return (
-      <AUCharacterCountComponent {...args}>
-        {args.children}
-      </AUCharacterCountComponent>
-    );
-  },
-};
-
-export const Allowed_initial: Story = {
-  args: {
-    type: 'allowed',
-    initialChars: 19,
-    maxChars: 15,
-    translations,
-    children: (
-      <input type='text' defaultValue="Her står noget tekst" />
-    ),
-  },
-  render: (args) => {
-    return (
-      <AUCharacterCountComponent {...args}>
-        {args.children}
-      </AUCharacterCountComponent>
-    );
-  },
-};
-
-export const Allowed_initial_with_textarea: Story = {
-  args: {
-    type: 'allowed',
-    initialChars: 664,
-    maxChars: 500,
-    translations,
-    children: (
-      <textarea defaultValue="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil totam hic, eligendi illo perspiciatis temporibus quas magnam illum, amet debitis voluptatibus libero similique assumenda harum consequatur dolore veniam tenetur voluptatum.
-      Dolorem aliquam qui pariatur sapiente commodi! Odit dicta aspernatur officia quod saepe molestias tempore similique iste quasi possimus voluptas deleniti, consequatur ut facere vitae. Accusamus atque illo omnis eum unde.
-      Error necessitatibus repellat qui! Iusto, neque officia quae facilis debitis corrupti error. Quaerat nobis nesciunt, earum ea quo id unde iure quas soluta, nemo tempora natus, nisi beatae aspernatur fugiat." />
-    ),
-  },
-  render: (args) => {
-    return (
-      <AUCharacterCountComponent {...args}>
-        {args.children}
-      </AUCharacterCountComponent>
-    );
-  },
-};
+import React from 'react';
+import { StoryObj, Meta } from '@storybook/react';
+import AUCharacterCountComponent from '../src/components/AUCharacterCountComponent';
+import { ThemeWrapper, translations } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Character Count',
+  component: AUCharacterCountComponent,
+  argTypes: {
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        <div className="form">
+          <div className="form__field">
+            {Story()}
+          </div>
+        </div>
+      </ThemeWrapper>
+    )
+  ],
+} as Meta<typeof AUCharacterCountComponent>;
+
+type Story = StoryObj<typeof AUCharacterCountComponent>;
+
+export const Recommended_empty: Story = {
+  args: {
+    type: 'recommended',
+    initialChars: 0,
+    maxChars: 100,
+    translations,
+    children: (
+      <input type='text' />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};
+
+export const Recommended_initial: Story = {
+  args: {
+    type: 'recommended',
+    initialChars: 19,
+    maxChars: 15,
+    translations,
+    children: (
+      <input type='text' defaultValue="Her står noget tekst" />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};
+
+export const Allowed_empty: Story = {
+  args: {
+    type: 'allowed',
+    initialChars: 0,
+    maxChars: 30,
+    translations,
+    children: (
+      <input type='text' />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};
+
+export const Allowed_initial: Story = {
+  args: {
+    type: 'allowed',
+    initialChars: 19,
+    maxChars: 15,
+    translations,
+    children: (
+      <input type='text' defaultValue="Her står noget tekst" />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};
+
+export const Allowed_initial_with_textarea: Story = {
+  args: {
+    type: 'allowed',
+    initialChars: 664,
+    maxChars: 500,
+    translations,
+    children: (
+      <textarea defaultValue="Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil totam hic, eligendi illo perspiciatis temporibus quas magnam illum, amet debitis voluptatibus libero similique assumenda harum consequatur dolore veniam tenetur voluptatum.
+      Dolorem aliquam qui pariatur sapiente commodi! Odit dicta aspernatur officia quod saepe molestias tempore similique iste quasi possimus voluptas deleniti, consequatur ut facere vitae. Accusamus atque illo omnis eum unde.
+      Error necessitatibus repellat qui! Iusto, neque officia quae facilis debitis corrupti error. Quaerat nobis nesciunt, earum ea quo id unde iure quas soluta, nemo tempora natus, nisi beatae aspernatur fugiat." />
+    ),
+  },
+  render: (args) => {
+    return (
+      <AUCharacterCountComponent {...args}>
+        {args.children}
+      </AUCharacterCountComponent>
+    );
+  },
+};