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

package/package.json

@@ -1,7 +1,7 @@
 {
   "sideEffects": false,
   "name": "@aarhus-university/au-lib-react-components",
-  "version": "11.4.2",
+  "version": "11.5.0",
   "description": "Library for shared React components for various applications on au.dk",
   "scripts": {
     "test": "jest",
@@ -72,9 +72,9 @@
     "webpack-cli": "^4.9.2"
   },
   "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "0.35.1",
+    "@aarhus-university/au-designsystem-delphinus": "0.35.2",
     "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "^0.17.13",
+    "@aarhus-university/types": "^0.17.14",
     "@reduxjs/toolkit": "^1.8.3",
     "@types/google.analytics": "^0.0.42",
     "@types/history": "^5.0.0",

package/src/components/AUAlertComponent.tsx

@@ -1,69 +1,101 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-env browser */
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import ReactDOM from 'react-dom';
+import AUButtonComponent from './AUButtonComponent';
 
-const AUAlertComponent: FC<AUAlertComponentProps> = ({
-  message,
-  children,
-  alert,
-  buttons,
-}: 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 AUAlertComponent: FC<AUButtonToastComponentUnionProps> = ({
+  confirm,
+  message: pMessage,
+  buttonText,
+  cancelButtonText,
+  label,
+  disabled,
+  size,
+  type,
+  icon,
+  iconPosition,
+  hideLabel,
+  mode,
+  btnRef,
+  classNames,
+  ariaExpanded,
+  dataGtm,
+  asSubmit,
+  onClick,
+}: AUButtonToastComponentUnionProps) => {
+  const [alert, setAlert] = useState<boolean>(false);
+  const { type: mType, message, header } = pMessage;
 
-  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 className = 'toast-notification toast-notification--persistent';
+  if (mType !== 'default') {
+    className = `${className} toast-notification--${mType}`;
   }
 
-  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 (
+    <>
+      {
+        alert && (
+          <>
+            {
+              ReactDOM.createPortal(
+                <div className={className}>
+                  <div className="toast-notification__content">
+                    {
+                      header && (
+                        <h2 className="toast-notification__header">
+                          {header}
+                        </h2>
+                      )
+                    }
+                    <p dangerouslySetInnerHTML={{ __html: message }} />
+                  </div>
+                  <AUButtonComponent
+                    label={buttonText as string}
+                    onClick={(event) => {
+                      if (typeof onClick === 'function') {
+                        onClick(event, btnRef);
+                      }
+                      setAlert(false);
+                    }}
+                  />
+                  {
+                    confirm && (
+                      <AUButtonComponent
+                        label={cancelButtonText as string}
+                        onClick={() => {
+                          setAlert(false);
+                        }}
+                      />
+                    )
+                  }
+                </div>,
+                document.querySelector('body')!,
+              )
+            }
+          </>
+        )
+      }
+      <AUButtonComponent
+        label={label}
+        disabled={disabled}
+        size={size}
+        type={type}
+        icon={icon}
+        iconPosition={iconPosition}
+        hideLabel={hideLabel}
+        mode={mode}
+        btnRef={btnRef}
+        classNames={classNames}
+        ariaExpanded={ariaExpanded}
+        dataGtm={dataGtm}
+        asSubmit={asSubmit}
+        onClick={() => {
+          setAlert(true);
+        }}
+      />
+    </>
+  );
 };
 
 AUAlertComponent.displayName = 'AUAlertComponent';

package/stories/AUAlertComponent.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AUAlertComponent from '../src/components/AUAlertComponent';
+import { ThemeWrapper } from './lib/helpers';
+
+export default {
+  title: 'Delphinus/Alert and Confirm',
+  component: AUAlertComponent,
+  argTypes: {
+    children: {
+      table: {
+        disable: true,
+      }
+    },
+    buttonChild: {
+      table: {
+        disable: true,
+      }
+    }
+  },
+  decorators: [
+    (Story, context) => (
+      <ThemeWrapper theme={context.globals.theme}>
+        {Story()}
+      </ThemeWrapper>
+    )
+  ],
+} as ComponentMeta<typeof AUAlertComponent>;
+
+const Template: ComponentStory<typeof AUAlertComponent> = (args) => <AUAlertComponent {...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',
+  onClick: () => console.log('Clicked'),
+};
+
+export const Confirm = Template.bind({});
+
+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',
+  cancelButtonText: 'Annuller',
+  onClick: () => console.log('Clicked'),
+};