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

package/package.json

@@ -1,114 +1,114 @@
-{
-  "sideEffects": false,
-  "name": "@aarhus-university/au-lib-react-components",
-  "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 -h 127.0.0.1",
-    "build-storybook": "build-storybook",
-    "chromatic": "npx chromatic --project-token=6e78be9148c0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
-  },
-  "author": {
-    "name": "Thomas Riis Hansen",
-    "email": "trh@au.dk"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@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",
-    "@storybook/testing-library": "^0.0.11",
-    "@testing-library/jest-dom": "5.0.0",
-    "@testing-library/react": "13.0.0",
-    "@testing-library/user-event": "14.0.0",
-    "@types/jest": "^27.4.0",
-    "@types/testing-library__jest-dom": "5.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "@typescript-eslint/parser": "^5.10.2",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.5.1",
-    "babel-loader": "^8.2.3",
-    "chromatic": "^6.7.2",
-    "css-loader": "^6.6.0",
-    "eslint": "^8.8.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.12",
-    "eslint-webpack-plugin": "^3.1.1",
-    "fork-ts-checker-webpack-plugin": "^7.0.0",
-    "jest": "^27.5.1",
-    "mini-css-extract-plugin": "^2.5.3",
-    "react-test-renderer": "18.1.0",
-    "sass": "^1.49.7",
-    "sass-loader": "^12.4.0",
-    "style-loader": "^3.3.1",
-    "ts-loader": "^9.2.6",
-    "typescript": "^4.5.5",
-    "webpack-cli": "^4.9.2"
-  },
-  "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "0.39.3",
-    "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
-    "@aarhus-university/types": "0.20.0",
-    "@reduxjs/toolkit": "^1.8.3",
-    "@types/google.analytics": "^0.0.42",
-    "@types/history": "^5.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-router-dom": "^5.3.3",
-    "dayjs": "^1.11.3",
-    "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.8.1",
-    "query-string": "^7.1.0",
-    "react": "18.2.0",
-    "react-autosuggest": "^10.1.0",
-    "react-router-dom": "^6.2.1",
-    "regenerator-runtime": "^0.13.9",
-    "webpack": "^5.68.0",
-    "whatwg-fetch": "^3.6.2"
-  },
-  "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "jest": {
-    "rootDir": "__tests__/jest",
-    "setupFilesAfterEnv": [
-      "./setupTests.ts"
-    ],
-    "testEnvironment": "jsdom",
-    "transformIgnorePatterns": [
-      "node_modules/(?!(@aarhus-university/au-lib-react-components|@aarhus-university/au-designsystem-delphinus|node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill)/)"
-    ],
-    "testPathIgnorePatterns": [
-      "factory.ts",
-      "setupTests.ts"
-    ]
-  },
-  "readme": "ERROR: No README data found!"
-}
+{
+  "sideEffects": false,
+  "name": "@aarhus-university/au-lib-react-components",
+  "version": "11.6.0",
+  "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 -h 127.0.0.1",
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic --project-token=6e78be9148c0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.au.dk/au-web-og-digital/au-lib-react-components"
+  },
+  "author": {
+    "name": "Thomas Riis Hansen",
+    "email": "trh@au.dk"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@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",
+    "@storybook/testing-library": "^0.0.11",
+    "@testing-library/jest-dom": "5.0.0",
+    "@testing-library/react": "13.0.0",
+    "@testing-library/user-event": "14.0.0",
+    "@types/jest": "^27.4.0",
+    "@types/testing-library__jest-dom": "5.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.2",
+    "@typescript-eslint/parser": "^5.10.2",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^27.5.1",
+    "babel-loader": "^8.2.3",
+    "chromatic": "^6.7.2",
+    "css-loader": "^6.6.0",
+    "eslint": "^8.8.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.5.12",
+    "eslint-webpack-plugin": "^3.1.1",
+    "fork-ts-checker-webpack-plugin": "^7.0.0",
+    "jest": "^27.5.1",
+    "mini-css-extract-plugin": "^2.5.3",
+    "react-test-renderer": "18.1.0",
+    "sass": "^1.49.7",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.5",
+    "webpack-cli": "^4.9.2"
+  },
+  "dependencies": {
+    "@aarhus-university/au-designsystem-delphinus": "0.35.2",
+    "@aarhus-university/au-designsystem-delphinus-dev": "0.2.0",
+    "@aarhus-university/types": "0.18.0",
+    "@reduxjs/toolkit": "^1.8.3",
+    "@types/google.analytics": "^0.0.42",
+    "@types/history": "^5.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-router-dom": "^5.3.3",
+    "dayjs": "^1.11.3",
+    "lodash.debounce": "^4.0.8",
+    "prop-types": "^15.8.1",
+    "query-string": "^7.1.0",
+    "react": "18.2.0",
+    "react-autosuggest": "^10.1.0",
+    "react-router-dom": "^6.2.1",
+    "regenerator-runtime": "^0.13.9",
+    "webpack": "^5.68.0",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "jest": {
+    "rootDir": "__tests__/jest",
+    "setupFilesAfterEnv": [
+      "./setupTests.ts"
+    ],
+    "testEnvironment": "jsdom",
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@aarhus-university/au-lib-react-components|@aarhus-university/au-designsystem-delphinus|node-fetch|data-uri-to-buffer|fetch-blob|formdata-polyfill)/)"
+    ],
+    "testPathIgnorePatterns": [
+      "factory.ts",
+      "setupTests.ts"
+    ]
+  },
+  "readme": "ERROR: No README data found!"
+}

package/src/components/AUAlertComponent.tsx

@@ -1,113 +1,113 @@
-/* eslint-disable max-len */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-env browser */
-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,
-  okButtonText,
-  cancelButtonText,
-  label,
-  size,
-  type,
-  icon,
-  iconPosition,
-  hideLabel,
-  mode,
-  classNames,
-  dataGtm,
-  asSubmit,
-  onClick,
-}: AUAlertComponentProps) => {
-  const [alert, setAlert] = useState<boolean>(false);
-  const btnRef = useRef<HTMLButtonElement>(null);
-  useEffect(() => {
-    if (done) {
-      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
-    }
-  }, [done]);
-
-  let okBtnMode = mode;
-  if (processing) {
-    if (mode === 'confirmable-action') {
-      okBtnMode = 'confirmable-action processing';
-    } else if (mode === 'ireversable-action') {
-      okBtnMode = 'ireversable-action processing';
-    }
-  }
-
-  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';
-export default AUAlertComponent;
+/* eslint-disable max-len */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-env browser */
+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,
+  okButtonText,
+  cancelButtonText,
+  label,
+  size,
+  type,
+  icon,
+  iconPosition,
+  hideLabel,
+  mode,
+  classNames,
+  dataGtm,
+  asSubmit,
+  onClick,
+}: AUAlertComponentProps) => {
+  const [alert, setAlert] = useState<boolean>(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  useEffect(() => {
+    if (done) {
+      hideModal(modalId, btnRef.current as HTMLButtonElement, () => setAlert(false));
+    }
+  }, [done]);
+
+  let okBtnMode = mode;
+  if (processing) {
+    if (mode === 'confirmable-action') {
+      okBtnMode = 'confirmable-action processing';
+    } else if (mode === 'ireversable-action') {
+      okBtnMode = 'ireversable-action processing';
+    }
+  }
+
+  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';
+export default AUAlertComponent;