@aarhus-university/au-lib-react-components 10.9.2 → 10.12.0

package/.storybook/main.js

@@ -1,11 +1,11 @@
 const path = require('path');
 
 module.exports = {
-  "stories": ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
-  "framework": "@storybook/react",
+  'stories': ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+  'addons': ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
+  'framework': '@storybook/react',
   core: {
-    builder: "webpack5"
+    builder: 'webpack5'
   },
   webpackFinal: async (config) => {
     config.module.rules.push({

package/.storybook/preview.js

@@ -1,4 +1,5 @@
 import '@aarhus-university/au-designsystem-delphinus/build/style.css';
+import { globalTheme, globalLang } from '../stories/lib/helpers';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -8,4 +9,9 @@ export const parameters = {
       date: /Date$/,
     },
   },
-};
+};
+
+export const globalTypes = {
+  theme: globalTheme.theme,
+  lang: globalLang().lang,
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "10.9.2",
+  "version": "10.12.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -26,12 +26,14 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@mdx-js/react": "^2.1.2",
+    "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.4",
     "@storybook/addon-essentials": "^6.5.4",
     "@storybook/addon-interactions": "^6.5.4",
     "@storybook/addon-links": "^6.5.4",
     "@storybook/builder-webpack4": "^6.5.4",
     "@storybook/builder-webpack5": "^6.5.4",
+    "@storybook/jest": "^0.0.10",
     "@storybook/manager-webpack4": "^6.5.4",
     "@storybook/manager-webpack5": "^6.5.4",
     "@storybook/react": "^6.5.4",

package/src/lib/context.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+export const LangContext = createContext<string>('da');
+export const useLangContext = (): string => {
+  const lang = useContext(LangContext);
+  return lang;
+};
+
+export const UserContext = createContext<AU.IUserContext | null>(null);
+export const useUserContext = (): AU.IUserContext | null => {
+  const user = useContext(UserContext);
+  return user;
+};

package/stories/AUButtonComponent.stories.tsx

@@ -1,34 +1,70 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-
 import AUButtonComponent from '../src/components/AUButtonComponent';
+import { ThemeWrapper } from './lib/helpers';
 
-// 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
+  argTypes: {
+    type: {
+      control: {
+        type: 'radio',
+      },
+      options: [
+        'default',
+        'text',
+        'dimmed',
+      ]
+    },
+    size: {
+      control: {
+        type: 'radio',
+      },
+      options: [
+        'small',
+        'default',
+        'large',
+      ]
+    },
+    iconPosition: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'left',
+        'right',
+      ],
+      if: {
+        arg: 'icon',
+      }
+    },
+    hideLabel: {
+      control: {
+        type: 'boolean',
+      },
+      if: {
+        arg: 'icon',
+      },
+    },        
+    mode: {
+      table: {
+        disable: true,
+      }
+    },    
+  },
   decorators: [
-    (Story) => { // , context) => {
-      /*
-      const { args: { themeColor, themeMode } } = context;
-      const themeColorClass = themeColor === 'none' ? '' : `theme--${themeColor}`;
-      const themeModeClass = themeMode === 'light' ? '' : `theme--${themeMode}`;
-      */
-      return (
-        <div>
-          {Story()}
-        </div>
-      );
-    }
-  ]
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
 } 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',
@@ -38,10 +74,10 @@ Default.args = {
 
 export const With_Icon = Template.bind({});
 With_Icon.args = {
-  label: 'Button',  
+  label: 'Button',
   type: 'default',
   size: 'default',
-  mode: 'none',  
+  mode: 'none',
   icon: '',
   iconPosition: 'left',
   hideLabel: false,
@@ -49,10 +85,10 @@ With_Icon.args = {
 
 export const Icon_Only = Template.bind({});
 Icon_Only.args = {
-  label: 'Button',  
+  label: 'Button',
   type: 'default',
   size: 'default',
-  mode: 'none',  
+  mode: 'none',
   icon: '',
   iconPosition: 'left',
   hideLabel: true,
@@ -60,27 +96,27 @@ Icon_Only.args = {
 
 export const Irreversible_Action = Template.bind({});
 Irreversible_Action.args = {
-  label: 'Button',  
+  label: 'Button',
   type: 'default',
   size: 'default',
-  mode: 'ireversable-action',  
+  mode: 'ireversable-action',
   icon: '',
 };
 
 export const Confirmable_Action = Template.bind({});
 Confirmable_Action.args = {
-  label: 'Button',  
+  label: 'Button',
   type: 'default',
   size: 'default',
-  mode: 'confirmable-action',  
+  mode: 'confirmable-action',
   icon: '',
 };
 
 export const Processing = Template.bind({});
 Processing.args = {
-  label: 'Button',  
+  label: 'Button',
   type: 'default',
   size: 'default',
-  mode: 'processing',  
+  mode: 'processing',
   disabled: true,
 };

package/stories/AUErrorComponent.stories.tsx

@@ -1,34 +1,23 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-
 import AUErrorComponent from '../src/components/AUErrorComponent';
+import { ThemeWrapper } from './lib/helpers';
 
-// 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>
-      );
-    }
-  ]
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
 } 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',
@@ -38,7 +27,6 @@ AU_Error.args = {
 };
 
 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',
@@ -49,7 +37,6 @@ AU_Error_With_Status.args = {
 };
 
 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...',
@@ -58,7 +45,6 @@ Fetch_Error.args = {
 };
 
 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...',
@@ -68,7 +54,6 @@ Fetch_Error_With_Status.args = {
 };
 
 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: {
@@ -82,7 +67,6 @@ Fetch_Error_With_Data.args = {
 };
 
 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: {
@@ -96,7 +80,6 @@ Fetch_Error_With_Data_And_Status.args = {
 };
 
 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...',
@@ -106,7 +89,6 @@ Serialized_Error.args = {
 };
 
 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...',
@@ -114,4 +96,3 @@ Serialized_Error_With_Code.args = {
   },
   withStatus: true,
 };
-

package/stories/AUModalComponent.stories.tsx

@@ -1,35 +1,32 @@
 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';
+import { ThemeWrapper } from './lib/helpers';
 
 // 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>
-      );
+  argTypes: {
+    sender: {
+      table: {
+        disable: true,
+      }, 
     },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
   ],
 } 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 (
@@ -53,21 +50,18 @@ const Template: ComponentStory<typeof AUModalComponent> = (args) => {
 };
 
 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,
@@ -75,7 +69,6 @@ Wide.args = {
 };
 
 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,
@@ -83,10 +76,8 @@ High.args = {
 };
 
 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

@@ -1,35 +1,37 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-
 import AUNotificationComponent from '../src/components/AUNotificationComponent';
 import AUButtonComponent from '../src/components/AUButtonComponent';
+import { ThemeWrapper } from './lib/helpers';
 
-// 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>
-      );
+  argTypes: {
+    type: {
+      control: {
+        type: 'radio',
+      },
+      options: [
+        'default',
+        'warning',
+        'attention',
+        'confirm',
+      ],
     }
-  ]
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
 } 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: [
@@ -99,7 +101,6 @@ Multiple_Actions.args = {
 };
 
 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>
@@ -107,10 +108,9 @@ No_Header.args = {
 };
 
 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,31 +1,32 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-
 import AUSpinnerComponent from '../src/components/AUSpinnerComponent';
+import { ThemeWrapper } from './lib/helpers';
 
-// 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>
-      );
+  argTypes: {
+    init: {
+      control: {
+        type: 'radio',
+      },
+      options: [
+        '',
+        'box',
+        'table',
+      ],
     },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
   ],
 } 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>
@@ -33,7 +34,6 @@ const Template: ComponentStory<typeof AUSpinnerComponent> = (args) => (
 );
 
 export const Spinner = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Spinner.args = {
   loaded: false,
   height: '20rem',

package/stories/AUToolbarComponent.stories.tsx

@@ -1,39 +1,40 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-
 import AUToolbarComponent from '../src/components/AUToolbarComponent';
 import AUButtonComponent from '../src/components/AUButtonComponent';
+import { ThemeWrapper } from './lib/helpers';
 
-// 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>
-      );
+  argTypes: {
+    lang: {
+      control: {
+        type: 'radio',
+      },
+      options: [
+        'da',
+        'en',
+      ],
     },
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
   ],
 } 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} />
+  <>
+    <AUToolbarComponent {...args} />
+    <div className="box theme--background-secondary"><p>Content goes here...</p></div>
+  </>
 );
 
 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: [
@@ -52,14 +53,12 @@ Form_Field_and_Buttons_and_Link.args = {
 };
 
 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: [

package/stories/lib/helpers.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from 'react';
+
+const globalTheme = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: ['normal', 'dark'],
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
+  lang: {
+    name: 'Language',
+    description: 'Global language for components',
+    defaultValue,
+    toolbar: {
+      icon: 'circlehollow',
+      items,
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+});
+
+const ThemeWrapper = ({ theme, children }) => {
+  useEffect(() => {
+    const body = document.querySelector('body');
+    if (body) {
+      body.classList.remove('theme--normal');
+      body.classList.remove('theme--dark');
+      body.classList.add(`theme--${theme}`);
+    }
+  });
+  return (
+    <main className={`theme--${theme}`}>
+      <div className="page">
+        <div className="page__content__block">
+          {children}
+        </div>
+      </div>
+    </main>
+  );
+}
+
+export {
+  globalTheme,
+  globalLang,
+  ThemeWrapper,
+};