@aarhus-university/au-lib-react-components 10.6.0 → 10.9.0

package/stories/AUButtonComponent.stories.tsx

@@ -1,86 +1,86 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import AUButtonComponent from '../src/components/AUButtonComponent';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Delphinus/Button',
-  component: AUButtonComponent,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  decorators: [
-    (Story) => { // , context) => {
-      /*
-      const { args: { themeColor, themeMode } } = context;
-      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
-      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
-      */
-      return (
-        <div>
-          <Story />
-        </div>
-      );
-    }
-  ]
-} as ComponentMeta<typeof AUButtonComponent>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof AUButtonComponent> = (args) => <AUButtonComponent {...args} />;
-
-export const Default = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-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: '',
-  iconPosition: 'left',
-  hideLabel: false,
-};
-
-export const Icon_Only = Template.bind({});
-Icon_Only.args = {
-  label: 'Button',  
-  type: 'default',
-  size: 'default',
-  mode: 'none',  
-  icon: '',
-  iconPosition: 'left',
-  hideLabel: true,
-};
-
-export const Irreversible_Action = Template.bind({});
-Irreversible_Action.args = {
-  label: 'Button',  
-  type: 'default',
-  size: 'default',
-  mode: 'ireversable-action',  
-  icon: '',
-};
-
-export const Confirmable_Action = Template.bind({});
-Confirmable_Action.args = {
-  label: 'Button',  
-  type: 'default',
-  size: 'default',
-  mode: 'confirmable-action',  
-  icon: '',
-};
-
-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';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Button',
+  component: AUButtonComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => { // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div>
+          {Story()}
+        </div>
+      );
+    }
+  ]
+} as ComponentMeta<typeof AUButtonComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUButtonComponent> = (args) => <AUButtonComponent {...args} />;
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+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: '',
+  iconPosition: 'left',
+  hideLabel: false,
+};
+
+export const Icon_Only = Template.bind({});
+Icon_Only.args = {
+  label: 'Button',  
+  type: 'default',
+  size: 'default',
+  mode: 'none',  
+  icon: '',
+  iconPosition: 'left',
+  hideLabel: true,
+};
+
+export const Irreversible_Action = Template.bind({});
+Irreversible_Action.args = {
+  label: 'Button',  
+  type: 'default',
+  size: 'default',
+  mode: 'ireversable-action',  
+  icon: '',
+};
+
+export const Confirmable_Action = Template.bind({});
+Confirmable_Action.args = {
+  label: 'Button',  
+  type: 'default',
+  size: 'default',
+  mode: 'confirmable-action',  
+  icon: '',
+};
+
+export const Processing = Template.bind({});
+Processing.args = {
+  label: 'Button',  
+  type: 'default',
+  size: 'default',
+  mode: 'processing',  
+  disabled: true,
 };

package/stories/AUErrorComponent.stories.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AUErrorComponent from '../src/components/AUErrorComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Error',
+  component: AUErrorComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => { // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div>
+          {Story()}
+        </div>
+      );
+    }
+  ]
+} as ComponentMeta<typeof AUErrorComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUErrorComponent> = (args) => <AUErrorComponent {...args} />;
+
+export const AU_Error = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+AU_Error.args = {
+  error: {
+    header: 'Our own custom error',
+    message: 'With a nice header and descriptive error message',
+    status: 500,
+  },
+};
+
+export const AU_Error_With_Status = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+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({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Fetch_Error.args = {
+  fetchError: {
+    error: 'Something horrible has happened on the server...',
+    status: 'FETCH_ERROR',
+  },
+};
+
+export const Fetch_Error_With_Status = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+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({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+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({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+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({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Serialized_Error.args = {
+  serializedError: {
+    message: 'Something funky has happened in the code...',
+    code: '500',
+  },
+  withStatus: false,
+};
+
+export const Serialized_Error_With_Code = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Serialized_Error_With_Code.args = {
+  serializedError: {
+    message: 'Something funky has happened in the code...',
+    code: '500',
+  },
+  withStatus: true,
+};
+

package/stories/AUModalComponent.stories.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+
+import AUModalComponent from '../src/components/AUModalComponent';
+import AUButtonComponent from '../src/components/AUButtonComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Modal',
+  component: AUModalComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => {
+      // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div className="page">
+          {Story()}
+        </div>
+      );
+    },
+  ],
+} as ComponentMeta<typeof AUModalComponent>;
+
+const fakeBtn = document.createElement('button');
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUModalComponent> = (args) => {
+  const [_, updateArgs] = useArgs();
+  return (
+    <div className="page__content__block">
+      <AUButtonComponent
+        label="Open modal"
+        onClick={() => updateArgs({ ...args, show: true })}
+      />
+      <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>
+        <div className="modal-view__body">
+          <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>
+        </div>
+      </AUModalComponent>
+    </div>
+  )
+};
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  show: true,
+  sender: fakeBtn,
+};
+
+export const Hidden = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Hidden.args = {
+  show: false,
+  sender: fakeBtn,
+};
+
+export const Wide = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Wide.args = {
+  className: 'modal-view modal-view--wide',
+  show: true,
+  sender: fakeBtn,
+};
+
+export const High = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+High.args = {
+  className: 'modal-view modal-view--high',
+  show: true,
+  sender: fakeBtn,
+};
+
+export const Non_Closable = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Non_Closable.args = {
+  show: true,
+  sender: fakeBtn,
+  closeButtonDisabled: true,
+};
+

package/stories/AUNotificationComponent.stories.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AUNotificationComponent from '../src/components/AUNotificationComponent';
+import AUButtonComponent from '../src/components/AUButtonComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Notification',
+  component: AUNotificationComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => { // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div>
+          {Story()}
+        </div>
+      );
+    }
+  ]
+} as ComponentMeta<typeof AUNotificationComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUNotificationComponent> = (args) => <AUNotificationComponent {...args} />;
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Default.args = {
+  header: 'This is a notification',
+  content: [
+    <p>This might be of importance...</p>
+  ],
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  header: 'Oops! An error has occurred',
+  type: 'warning',
+  content: [
+    <p>Shit's fucked, yo!</p>
+  ],
+};
+
+export const Attention = Template.bind({});
+Attention.args = {
+  header: 'Please read this',
+  type: 'attention',
+  content: [
+    <p>We really want you to read this.</p>
+  ],
+};
+
+export const Confirm = Template.bind({});
+Confirm.args = {
+  header: 'Great success',
+  type: 'confirm',
+  content: [
+    <p>You the man now, dawg!</p>
+  ],
+};
+
+export const Single_Action = Template.bind({});
+Single_Action.args = {
+  header: 'Do you want to do this?',
+  type: 'attention',
+  content: [
+    <p>Please confirm.</p>
+  ],
+  actions: [
+    <AUButtonComponent
+      label="Ok"
+    />
+  ],
+};
+
+export const Multiple_Actions = Template.bind({});
+Multiple_Actions.args = {
+  header: 'Do you want to do this?',
+  type: 'attention',
+  content: [
+    <p>Please confirm.</p>
+  ],
+  actions: [
+    <div className="button-container">
+      <AUButtonComponent
+        label="Ok"
+      />
+      <AUButtonComponent
+        label="Cancel"
+        type="text"
+      />
+    </div>,
+  ],
+};
+
+export const No_Header = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+No_Header.args = {
+  content: [
+    <p>This might be of importance...</p>
+  ],
+};
+
+export const Constrained_Width = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Constrained_Width.args = {
+  content: [
+    <p>This might be of importance...</p>
+  ],
+  classNames: ['notification--constrain-width'],
+};

package/stories/AUSpinnerComponent.stories.tsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import AUSpinnerComponent from '../src/components/AUSpinnerComponent';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Delphinus/Spinner',
-  component: AUSpinnerComponent,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  decorators: [
-    (Story) => {
-      // , context) => {
-      /*
-      const { args: { themeColor, themeMode } } = context;
-      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
-      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
-      */
-      return (
-        <div>
-          <Story />
-        </div>
-      );
-    },
-  ],
-} as ComponentMeta<typeof AUSpinnerComponent>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof AUSpinnerComponent> = (args) => (
-  <AUSpinnerComponent {...args}>
-    <p>Child content</p>
-  </AUSpinnerComponent>
-);
-
-export const Spinner = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Spinner.args = {
-  loaded: false,
-  height: '20rem',
-  init: 'box',
-};
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AUSpinnerComponent from '../src/components/AUSpinnerComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Spinner',
+  component: AUSpinnerComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => {
+      // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div>
+          {Story()}
+        </div>
+      );
+    },
+  ],
+} as ComponentMeta<typeof AUSpinnerComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUSpinnerComponent> = (args) => (
+  <AUSpinnerComponent {...args}>
+    <p>Child content</p>
+  </AUSpinnerComponent>
+);
+
+export const Spinner = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Spinner.args = {
+  loaded: false,
+  height: '20rem',
+  init: 'box',
+};

package/stories/AUToolbarComponent.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AUToolbarComponent from '../src/components/AUToolbarComponent';
+import AUButtonComponent from '../src/components/AUButtonComponent';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Delphinus/Toolbar',
+  component: AUToolbarComponent,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  decorators: [
+    (Story) => {
+      // , context) => {
+      /*
+      const { args: { themeColor, themeMode } } = context;
+      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
+      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
+      */
+      return (
+        <div>
+          {Story()}
+          <div className="box theme--background-secondary"><p>Content goes here...</p></div>
+        </div>
+      );
+    },
+  ],
+} as ComponentMeta<typeof AUToolbarComponent>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AUToolbarComponent> = (args) => (
+  <AUToolbarComponent {...args} />
+);
+
+export const Form_Field_and_Buttons_and_Link = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Form_Field_and_Buttons_and_Link.args = {
+  lang: 'da',
+  elements: [
+    <div className="form__field">
+      <label htmlFor="demo-search">Search</label>
+      <input type="search" autoComplete="off" autoCorrect="off" autoCapitalize="off" id="demo-search" />
+    </div>,
+    <AUButtonComponent icon="" label="Mark as read" />,
+    <AUButtonComponent icon="" hideLabel label="Delete" />,
+    <AUButtonComponent type="text" label="Select all" />,
+    <div className="toolbar__split" />,
+    <div className="toolbar__text-item">
+      <a className="a--text-link" href="#">Open in new tab</a>
+    </div>,
+  ]
+};
+
+export const Many_Actions = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Many_Actions.args = {
+  lang: 'da',
+  elements: Array(25).fill(null).map((_, i) => <AUButtonComponent label={`Action ${i + 1}`} />),
+};
+
+export const Groupings = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Groupings.args = {
+  lang: 'da',
+  elements: [
+    <div className="toolbar__group">
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-all">All issues</label>
+        <input type="radio" name="demo" value="all" id="demo-all" defaultChecked />
+      </div>
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-open">Open</label>
+        <input type="radio" name="demo" value="all" id="demo-open" />
+      </div>
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-resolved">Resolved</label>
+        <input type="radio" name="demo" value="all" id="demo-resolved" />
+      </div>
+    </div>,
+    <div className="toolbar__split" />,
+    <div className="toolbar__group">
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-epics">Epics</label>
+        <input type="checkbox" id="demo-epics" defaultChecked />
+      </div>
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-stories">Stories</label>
+        <input type="checkbox" id="demo-stories" defaultChecked />
+      </div>
+      <div className="form__field form__field--horizontal">
+        <label htmlFor="demo-tasks">Tasks</label>
+        <input type="checkbox" id="demo-tasks" defaultChecked />
+      </div>
+    </div>,
+  ],
+};