@aarhus-university/au-lib-react-components 11.3.1 → 11.3.3

package/stories/AUButtonComponent.stories.tsx

@@ -1,128 +1,128 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } 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 ComponentMeta<typeof AUButtonComponent>;
-
-const Template: ComponentStory<typeof AUButtonComponent> = (args) => <AUButtonComponent {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'none',
-};
-
-export const With_Icon = Template.bind({});
-With_Icon.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'none',
-  icon: 'delphinus',
-  iconPosition: 'left',
-  hideLabel: false,
-};
-
-export const Icon_Only = Template.bind({});
-Icon_Only.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'none',
-  icon: 'delphinus',
-  iconPosition: 'left',
-  hideLabel: true,
-};
-
-export const Irreversible_Action = Template.bind({});
-Irreversible_Action.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'ireversable-action',
-  icon: 'delphinus',
-};
-
-export const Confirmable_Action = Template.bind({});
-Confirmable_Action.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'confirmable-action',
-  icon: 'delphinus',
-};
-
-export const Processing = Template.bind({});
-Processing.args = {
-  label: 'Button',
-  type: 'default',
-  size: 'default',
-  mode: 'processing',
-  disabled: true,
+import React from 'react';
+import { ComponentStory, ComponentMeta } 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 ComponentMeta<typeof AUButtonComponent>;
+
+const Template: ComponentStory<typeof AUButtonComponent> = (args) => <AUButtonComponent {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Button',
+  type: 'default',
+  size: 'default',
+  mode: 'none',
+};
+
+export const With_Icon = Template.bind({});
+With_Icon.args = {
+  label: 'Button',
+  type: 'default',
+  size: 'default',
+  mode: 'none',
+  icon: 'delphinus',
+  iconPosition: 'left',
+  hideLabel: false,
+};
+
+export const Icon_Only = Template.bind({});
+Icon_Only.args = {
+  label: 'Button',
+  type: 'default',
+  size: 'default',
+  mode: 'none',
+  icon: 'delphinus',
+  iconPosition: 'left',
+  hideLabel: true,
+};
+
+export const Irreversible_Action = Template.bind({});
+Irreversible_Action.args = {
+  label: 'Button',
+  type: 'default',
+  size: 'default',
+  mode: 'ireversable-action',
+  icon: 'delphinus',
+};
+
+export const Confirmable_Action = Template.bind({});
+Confirmable_Action.args = {
+  label: 'Button',
+  type: 'default',
+  size: 'default',
+  mode: 'confirmable-action',
+  icon: 'delphinus',
+};
+
+export const Processing = Template.bind({});
+Processing.args = {
+  label: 'Button',
+  type: 'default',
+  size: 'default',
+  mode: 'processing',
+  disabled: true,
 };

package/stories/AUContentToggleComponent.stories.tsx

@@ -1,63 +1,63 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } 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,
-      }
-    },     
-  },
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as ComponentMeta<typeof AUContentToggleComponent>;
-
-const Template: ComponentStory<typeof AUContentToggleComponent> = (args) => <AUContentToggleComponent {...args} />;
-
-export const Hidden_when_loaded = Template.bind({});
-Hidden_when_loaded.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>
-  ),
-};
-
-export const Shown_when_loaded = Template.bind({});
-Shown_when_loaded.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>
-  ),
-};
-
+import React from 'react';
+import { ComponentStory, ComponentMeta } 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,
+      }
+    },     
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as ComponentMeta<typeof AUContentToggleComponent>;
+
+const Template: ComponentStory<typeof AUContentToggleComponent> = (args) => <AUContentToggleComponent {...args} />;
+
+export const Hidden_when_loaded = Template.bind({});
+Hidden_when_loaded.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>
+  ),
+};
+
+export const Shown_when_loaded = Template.bind({});
+Shown_when_loaded.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>
+  ),
+};
+

package/stories/AUErrorComponent.stories.tsx

@@ -1,98 +1,98 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import AUErrorComponent from '../src/components/AUErrorComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-export default {
-  title: 'Delphinus/Error',
-  component: AUErrorComponent,
-  decorators: [
-    (Story, context) => (
-      <ThemeWrapper theme={context.globals.theme}>
-        {Story()}
-      </ThemeWrapper>
-    )
-  ],
-} as ComponentMeta<typeof AUErrorComponent>;
-
-const Template: ComponentStory<typeof AUErrorComponent> = (args) => <AUErrorComponent {...args} />;
-
-export const AU_Error = Template.bind({});
-AU_Error.args = {
-  error: {
-    header: 'Our own custom error',
-    message: 'With a nice header and descriptive error message, maybe a hint of some <a href="mailto:#">contact support info</a>',
-    status: 500,
-  },
-};
-
-export const AU_Error_With_Status = Template.bind({});
-AU_Error_With_Status.args = {
-  error: {
-    header: 'Our own custom error',
-    message: 'With a nice header and descriptive error message',
-    status: 500,
-  },
-  withStatus: true,
-};
-
-export const Fetch_Error = Template.bind({});
-Fetch_Error.args = {
-  fetchError: {
-    error: 'Something horrible has happened on the server...',
-    status: 'FETCH_ERROR',
-  },
-};
-
-export const Fetch_Error_With_Status = Template.bind({});
-Fetch_Error_With_Status.args = {
-  fetchError: {
-    error: 'Something horrible has happened on the server...',
-    status: 'FETCH_ERROR',
-  },
-  withStatus: true,
-};
-
-export const Fetch_Error_With_Data = Template.bind({});
-Fetch_Error_With_Data.args = {
-  fetchError: {
-    data: {
-      status: 'Error',
-      message: 'This could be anything...',
-      somethingElse: 'Even this...',
-    },
-    status: 500,
-  },
-  withStatus: false,
-};
-
-export const Fetch_Error_With_Data_And_Status = Template.bind({});
-Fetch_Error_With_Data_And_Status.args = {
-  fetchError: {
-    data: {
-      status: 'Error',
-      message: 'This could be anything...',
-      somethingElse: 'Even this...',
-    },
-    status: 500,
-  },
-  withStatus: true,
-};
-
-export const Serialized_Error = Template.bind({});
-Serialized_Error.args = {
-  serializedError: {
-    message: 'Something funky has happened in the code...',
-    code: '500',
-  },
-  withStatus: false,
-};
-
-export const Serialized_Error_With_Code = Template.bind({});
-Serialized_Error_With_Code.args = {
-  serializedError: {
-    message: 'Something funky has happened in the code...',
-    code: '500',
-  },
-  withStatus: true,
-};
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AUErrorComponent from '../src/components/AUErrorComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Error',
+  component: AUErrorComponent,
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as ComponentMeta<typeof AUErrorComponent>;
+
+const Template: ComponentStory<typeof AUErrorComponent> = (args) => <AUErrorComponent {...args} />;
+
+export const AU_Error = Template.bind({});
+AU_Error.args = {
+  error: {
+    header: 'Our own custom error',
+    message: 'With a nice header and descriptive error message, maybe a hint of some <a href="mailto:#">contact support info</a>',
+    status: 500,
+  },
+};
+
+export const AU_Error_With_Status = Template.bind({});
+AU_Error_With_Status.args = {
+  error: {
+    header: 'Our own custom error',
+    message: 'With a nice header and descriptive error message',
+    status: 500,
+  },
+  withStatus: true,
+};
+
+export const Fetch_Error = Template.bind({});
+Fetch_Error.args = {
+  fetchError: {
+    error: 'Something horrible has happened on the server...',
+    status: 'FETCH_ERROR',
+  },
+};
+
+export const Fetch_Error_With_Status = Template.bind({});
+Fetch_Error_With_Status.args = {
+  fetchError: {
+    error: 'Something horrible has happened on the server...',
+    status: 'FETCH_ERROR',
+  },
+  withStatus: true,
+};
+
+export const Fetch_Error_With_Data = Template.bind({});
+Fetch_Error_With_Data.args = {
+  fetchError: {
+    data: {
+      status: 'Error',
+      message: 'This could be anything...',
+      somethingElse: 'Even this...',
+    },
+    status: 500,
+  },
+  withStatus: false,
+};
+
+export const Fetch_Error_With_Data_And_Status = Template.bind({});
+Fetch_Error_With_Data_And_Status.args = {
+  fetchError: {
+    data: {
+      status: 'Error',
+      message: 'This could be anything...',
+      somethingElse: 'Even this...',
+    },
+    status: 500,
+  },
+  withStatus: true,
+};
+
+export const Serialized_Error = Template.bind({});
+Serialized_Error.args = {
+  serializedError: {
+    message: 'Something funky has happened in the code...',
+    code: '500',
+  },
+  withStatus: false,
+};
+
+export const Serialized_Error_With_Code = Template.bind({});
+Serialized_Error_With_Code.args = {
+  serializedError: {
+    message: 'Something funky has happened in the code...',
+    code: '500',
+  },
+  withStatus: true,
+};