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

package/package.json

@@ -1,12 +1,12 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "11.5.0",
+  "version": "11.5.1",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
     "build": "jest && webpack --config ./webpack.config.js",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 -h 127.0.0.1",
     "build-storybook": "build-storybook",
     "chromatic": "npx chromatic --project-token=6e78be9148c0"
   },
@@ -72,9 +72,9 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "0.35.2",
+    "@aarhus-university/au-designsystem-delphinus": "0.39.3",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "^0.17.14",
+    "@aarhus-university/types": "0.20.0",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",

package/src/components/AUAlertComponent.tsx

@@ -1,84 +1,94 @@
+/* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-env browser */
-import React, { FC, useState } from 'react';
-import ReactDOM from 'react-dom';
+import React, {
+  FC, useState, useRef, useEffect,
+} from 'react';
+import { hideModal } from '@aarhus-university/au-designsystem-delphinus/source/js/components/modal-view';
 import AUButtonComponent from './AUButtonComponent';
+import AUModalComponent from './AUModalComponent';
 
-const AUAlertComponent: FC<AUButtonToastComponentUnionProps> = ({
+const AUAlertComponent: FC<AUAlertComponentProps> = ({
+  modalId,
   confirm,
-  message: pMessage,
-  buttonText,
+  processing,
+  done,
+  header,
+  message,
+  okButtonText,
   cancelButtonText,
   label,
-  disabled,
   size,
   type,
   icon,
   iconPosition,
   hideLabel,
   mode,
-  btnRef,
   classNames,
-  ariaExpanded,
   dataGtm,
   asSubmit,
   onClick,
-}: AUButtonToastComponentUnionProps) => {
+}: AUAlertComponentProps) => {
   const [alert, setAlert] = useState<boolean>(false);
-  const { type: mType, message, header } = pMessage;
+  const btnRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (done) {
+      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
+    }
+  }, [done]);
 
-  let className = 'toast-notification toast-notification--persistent';
-  if (mType !== 'default') {
-    className = `${className} toast-notification--${mType}`;
+  let okBtnMode = mode;
+  if (processing) {
+    if (mode === 'confirmable-action') {
+      okBtnMode = 'confirmable-action processing';
+    } else if (mode === 'ireversable-action') {
+      okBtnMode = 'ireversable-action processing';
+    }
   }
 
   return (
     <>
-      {
-        alert && (
-          <>
-            {
-              ReactDOM.createPortal(
-                <div className={className}>
-                  <div className="toast-notification__content">
-                    {
-                      header && (
-                        <h2 className="toast-notification__header">
-                          {header}
-                        </h2>
-                      )
-                    }
-                    <p dangerouslySetInnerHTML={{ __html: message }} />
-                  </div>
+      <AUModalComponent
+        domId={modalId}
+        show={alert}
+        sender={btnRef.current}
+        onClose={() => setAlert(false)}
+        closeButtonDisabled={processing}
+      >
+        <>
+          <h2 className="modal-view__header">{header}</h2>
+          <div className="modal-view__content">
+            <div className="content-container" dangerouslySetInnerHTML={{ __html: message }} />
+            <div className="button-container vertical-spacing-top">
+              <AUButtonComponent
+                label={okButtonText}
+                disabled={processing}
+                mode={okBtnMode}
+                onClick={(event) => {
+                  if (typeof onClick === 'function') {
+                    onClick(event, btnRef);
+                  }
+                }}
+              />
+              {
+                confirm && (
                   <AUButtonComponent
-                    label={buttonText as string}
-                    onClick={(event) => {
-                      if (typeof onClick === 'function') {
-                        onClick(event, btnRef);
-                      }
-                      setAlert(false);
+                    label={cancelButtonText}
+                    disabled={processing}
+                    type="text"
+                    onClick={() => {
+                      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
                     }}
                   />
-                  {
-                    confirm && (
-                      <AUButtonComponent
-                        label={cancelButtonText as string}
-                        onClick={() => {
-                          setAlert(false);
-                        }}
-                      />
-                    )
-                  }
-                </div>,
-                document.querySelector('body')!,
-              )
-            }
-          </>
-        )
-      }
+                )
+              }
+            </div>
+          </div>
+        </>
+      </AUModalComponent>
       <AUButtonComponent
         label={label}
-        disabled={disabled}
+        disabled={alert}
         size={size}
         type={type}
         icon={icon}
@@ -87,7 +97,8 @@ const AUAlertComponent: FC<AUButtonToastComponentUnionProps> = ({
         mode={mode}
         btnRef={btnRef}
         classNames={classNames}
-        ariaExpanded={ariaExpanded}
+        ariaExpanded={alert}
+        ariaHasPopup
         dataGtm={dataGtm}
         asSubmit={asSubmit}
         onClick={() => {

package/src/components/AUButtonComponent.tsx

@@ -14,6 +14,7 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
   btnRef,
   classNames,
   ariaExpanded,
+  ariaHasPopup,
   asSubmit,
   onClick,
 }: AUButtonComponentProps) => {
@@ -31,8 +32,8 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
     }
   }
   let modeClass = '';
-  if (mode !== 'none') {
-    modeClass = `button--${mode}`;
+  if (mode && mode !== 'none') {
+    modeClass = mode.includes(' ') ? mode.split(' ').map((m) => `button--${m}`).join(' ') : `button--${mode}`;
   }
 
   return (
@@ -46,10 +47,11 @@ const AUButtonComponent: FC<AUButtonComponentProps> = ({
         typeClass,
         iconClass,
         modeClass,
-        disabled && mode !== 'processing' ? 'visually-disabled' : '',
+        disabled && !mode?.includes('processing') ? 'visually-disabled' : '',
       ].concat(classNames || []).join(' ').replace(/\s+/g, ' ').trim()}
       title={icon && hideLabel ? label : undefined}
       aria-expanded={ariaExpanded}
+      aria-haspopup={ariaHasPopup}
       onClick={(event: MouseEvent<HTMLButtonElement>) => {
         if (typeof onClick !== 'undefined') {
           onClick(event, btnRef);
@@ -71,6 +73,7 @@ AUButtonComponent.defaultProps = {
   mode: 'none',
   classNames: [],
   ariaExpanded: false,
+  ariaHasPopup: undefined,
   asSubmit: false,
   // eslint-disable-next-line no-console
   onClick: (

package/src/components/AUEditFilterComponent.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { FC } from 'react';
+
+const AUEditFilterComponent: FC = () => (
+  <form className="form">
+    <h2>Rediger filter</h2>
+    <div className="form__field">
+      <label htmlFor="title">Titel</label>
+      <input type="text" id="title" />
+    </div>
+    <h3>Kriterier</h3>
+    <div>
+      <div className="form__field">
+        <label htmlFor="orgunit">
+          Organisatorisk enhed
+        </label>
+        <input type="text" id="orgunit" />
+      </div>
+      <div className="search-filter">
+        <h3 className="search-filter__label">Valgte enheder:</h3>
+        <div className="search-filter__items">
+          <button type="button" className="search-filter__item">
+            <span className="search-filter__item__value">
+              Arts
+            </span>
+          </button>
+          <button type="button" className="search-filter__item">
+            <span className="search-filter__item__value">
+              Health
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div className="form__field">
+        <label htmlFor="orgunit">
+          Uddannelser
+        </label>
+        <input type="text" id="orgunit" />
+      </div>
+      <div className="search-filter">
+        <h3 className="search-filter__label">Valgte uddannelser:</h3>
+        <div className="search-filter__items">
+          <button type="button" className="search-filter__item">
+            <span className="search-filter__item__value">
+              Bacheloruddannelsen i Medicin
+            </span>
+          </button>
+          <button type="button" className="search-filter__item">
+            <span className="search-filter__item__value">
+              Kandidatuddannelsen i Medicin
+            </span>
+          </button>
+          <button type="button" className="search-filter__item">
+            <span className="search-filter__item__value">
+              Den sundhedsfaglige kandidatuddannelse
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+);
+
+AUEditFilterComponent.displayName = 'AUEditFilterComponent';
+export default AUEditFilterComponent;

package/src/components/AUToolbarComponent.tsx

@@ -13,6 +13,7 @@ const AUToolbarComponent: FC<AUToolbarComponentProps> = ({
   title,
   buttonClass,
   buttonElements,
+  onCloseContentToggles,
 }: AUToolbarComponentProps) => {
   const toolbarRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -28,6 +29,9 @@ const AUToolbarComponent: FC<AUToolbarComponentProps> = ({
       // eslint-disable-next-line max-len
       toolbarCleanUp = setToolbar(toolbarRef.current, (toolbar: HTMLElement) => {
         closeAllContentTogglesInToolbar(toolbar);
+        if (typeof onCloseContentToggles === 'function') {
+          onCloseContentToggles();
+        }
       }, false);
     }
 
@@ -95,6 +99,7 @@ AUToolbarComponent.defaultProps = {
   title: undefined,
   buttonClass: 'toolbar__toggle',
   buttonElements: [],
+  onCloseContentToggles: undefined,
 };
 
 AUToolbarComponent.displayName = 'AUToolbarComponent';

package/stories/AUAlertComponent.stories.tsx

@@ -1,22 +1,88 @@
-import React from 'react';
+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: {
-    children: {
+    label: {
+      table: {
+        disable: true,
+      }
+    },
+    mode: {
+      table: {
+        disable: true,
+      }
+    },
+    onClick: {
+      table: {
+        disable: true,
+      }
+    },
+    modalId: {
       table: {
         disable: true,
       }
     },
-    buttonChild: {
+    confirm: {
       table: {
         disable: true,
       }
-    }
+    },
+    processing: {
+      table: {
+        disable: true,
+      }
+    },
+    done: {
+      table: {
+        disable: true,
+      }
+    },
+    cancelButtonText: {
+      table: {
+        disable: true,
+      }
+    },
   },
   decorators: [
     (Story, context) => (
@@ -27,19 +93,16 @@ export default {
   ],
 } as ComponentMeta<typeof AUAlertComponent>;
 
-const Template: ComponentStory<typeof AUAlertComponent> = (args) => <AUAlertComponent {...args} />;
+const Template: ComponentStory<typeof AUAlertComponent> = (args) => <AlertWrapper {...args} />;
 
 export const Alert = Template.bind({});
 
 Alert.args = {
   label: 'Slet',
   mode: 'ireversable-action',
-  message: {
-    message: 'Den valgte fil vil blive slettet.',
-    type: 'attention',
-    header: 'Advarsel!',
-  },
-  buttonText: 'Ok, forstået',
+  header: 'Advarsel',
+  message: '<p>Den valgte fil vil blive slettet.</p>',
+  okButtonText: 'Ok, forstået',
   onClick: () => console.log('Clicked'),
 };
 
@@ -49,12 +112,9 @@ Confirm.args = {
   confirm: true,
   label: 'Slet',
   mode: 'ireversable-action',
-  message: {
-    message: 'Er du sikker på, at du vil slette den valgte fil?',
-    type: 'warning',
-    header: 'Advarsel!',
-  },
-  buttonText: 'Ja',
+  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/AUEditFilterComponent.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AUEditFilterComponent from '../src/components/AUEditFilterComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Filters',
+  component: AUEditFilterComponent,
+  argTypes: {
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as ComponentMeta<typeof AUEditFilterComponent>;
+
+const Template: ComponentStory<typeof AUEditFilterComponent> = (args) => (
+  <>
+    <AUEditFilterComponent {...args} />
+  </>
+);
+
+export const Edit = Template.bind({});
+Edit.args = {
+};
+

package/stories/AUModalComponent.stories.tsx

@@ -33,6 +33,7 @@ const Template: ComponentStory<typeof AUModalComponent> = (args) => {
     <div className="page__content__block">
       <AUButtonComponent
         label="Open modal"
+        ariaHasPopup
         onClick={() => updateArgs({ ...args, show: true })}
       />
       <AUModalComponent {...args} onClose={() => updateArgs({ ...args, show: false })}>

package/stories/AUToolbarComponent.stories.tsx

@@ -323,4 +323,5 @@ Filter.args = {
       </div>
     </AUContentToggleComponent>
   ],
+  onCloseContentToggles: () => console.log('luuuuuk?'),
 };