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

package/package.json

@@ -1,12 +1,12 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "11.4.2",
+  "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.1",
+    "@aarhus-university/au-designsystem-delphinus": "0.39.3",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "^0.17.13",
+    "@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,69 +1,112 @@
+/* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-env browser */
-import React, { FC } 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<AUAlertComponentProps> = ({
+  modalId,
+  confirm,
+  processing,
+  done,
+  header,
   message,
-  children,
-  alert,
-  buttons,
+  okButtonText,
+  cancelButtonText,
+  label,
+  size,
+  type,
+  icon,
+  iconPosition,
+  hideLabel,
+  mode,
+  classNames,
+  dataGtm,
+  asSubmit,
+  onClick,
 }: AUAlertComponentProps) => {
-  const renderButtons = (buttons || []).map((button) => (
-    <button
-      key={button.text}
-      type="button"
-      className={button.className}
-      data-icon={button.dataIcon}
-      onClick={() => {
-        button.onClick();
-      }}
-    >
-      {button.text}
-    </button>
-  ));
+  const [alert, setAlert] = useState<boolean>(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (done) {
+      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
+    }
+  }, [done]);
 
-  if (alert) {
-    return (
-      <>
-        {
-          ReactDOM.createPortal(
-            <div key="0" className="theme--normal toast-notification toast-notification--attention toast-notification--persistent">
-              <div className="toast-notification__content">
-                <p dangerouslySetInnerHTML={{ __html: message }} />
-              </div>
-              {renderButtons}
-            </div>,
-            document.querySelector('body')!,
-          )
-        }
-        {children}
-      </>
-    );
+  let okBtnMode = mode;
+  if (processing) {
+    if (mode === 'confirmable-action') {
+      okBtnMode = 'confirmable-action processing';
+    } else if (mode === 'ireversable-action') {
+      okBtnMode = 'ireversable-action processing';
+    }
   }
 
-  if (!children) {
-    return null;
-  }
-
-  return children;
-};
-
-AUAlertComponent.defaultProps = {
-  buttons: [{
-    className: 'button',
-    text: 'OK',
-    dataIcon: null,
-    // eslint-disable-next-line no-console
-    onClick: () => console.log('clicked on OK'),
-  }, {
-    className: 'button',
-    text: 'Annuller',
-    dataIcon: null,
-    // eslint-disable-next-line no-console
-    onClick: () => console.log('clicked on cancel'),
-  },
-  ],
+  return (
+    <>
+      <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={cancelButtonText}
+                    disabled={processing}
+                    type="text"
+                    onClick={() => {
+                      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
+                    }}
+                  />
+                )
+              }
+            </div>
+          </div>
+        </>
+      </AUModalComponent>
+      <AUButtonComponent
+        label={label}
+        disabled={alert}
+        size={size}
+        type={type}
+        icon={icon}
+        iconPosition={iconPosition}
+        hideLabel={hideLabel}
+        mode={mode}
+        btnRef={btnRef}
+        classNames={classNames}
+        ariaExpanded={alert}
+        ariaHasPopup
+        dataGtm={dataGtm}
+        asSubmit={asSubmit}
+        onClick={() => {
+          setAlert(true);
+        }}
+      />
+    </>
+  );
 };
 
 AUAlertComponent.displayName = 'AUAlertComponent';

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

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

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