@aarhus-university/au-lib-react-components 11.5.1 → 11.6.0

package/stories/AUAlertComponent.stories.tsx

@@ -1,120 +1,120 @@
-import React, { FC, useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import AUAlertComponent from '../src/components/AUAlertComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-const AlertWrapper: FC<AUAlertComponentProps> = ({
-  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}
-      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: AUAlertComponent,
-  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 ComponentMeta<typeof AUAlertComponent>;
-
-const Template: ComponentStory<typeof AUAlertComponent> = (args) => <AlertWrapper {...args} />;
-
-export const Alert = Template.bind({});
-
-Alert.args = {
-  label: 'Slet',
-  mode: 'ireversable-action',
-  header: 'Advarsel',
-  message: '<p>Den valgte fil vil blive slettet.</p>',
-  okButtonText: 'Ok, forstået',
-  onClick: () => console.log('Clicked'),
-};
-
-export const Confirm = Template.bind({});
-
-Confirm.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',
-  onClick: () => console.log('Clicked'),
-};
+import React, { FC, useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AUAlertComponent from '../src/components/AUAlertComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+const AlertWrapper: FC<AUAlertComponentProps> = ({
+  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}
+      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: AUAlertComponent,
+  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 ComponentMeta<typeof AUAlertComponent>;
+
+const Template: ComponentStory<typeof AUAlertComponent> = (args) => <AlertWrapper {...args} />;
+
+export const Alert = Template.bind({});
+
+Alert.args = {
+  label: 'Slet',
+  mode: 'ireversable-action',
+  header: 'Advarsel',
+  message: '<p>Den valgte fil vil blive slettet.</p>',
+  okButtonText: 'Ok, forstået',
+  onClick: () => console.log('Clicked'),
+};
+
+export const Confirm = Template.bind({});
+
+Confirm.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',
+  onClick: () => console.log('Clicked'),
+};

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>
+  ),
+};
+