@aarhus-university/au-lib-react-components 12.2.2 → 12.4.0

package/.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
       unnamedComponents: 'arrow-function',
     }],
     'react-hooks/rules-of-hooks': 'error',
+    'react/require-default-props': [0],
   },
   settings: {
     react: {

package/.storybook/main.js

@@ -1,11 +1,20 @@
 const path = require('path');
 module.exports = {
   'stories': ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
-  'addons': ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
+  'addons': [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-webpack5-compiler-babel',
+    '@chromatic-com/storybook'
+  ],
+
   'framework': {
     name: '@storybook/react-webpack5',
     options: {}
   },
+
   webpackFinal: async config => {
     config.module.rules.push({
       test: /\.(ts|js)x?$/,
@@ -17,7 +26,10 @@ module.exports = {
     return config;
     // return { ...config, module: { ...config.module, rules: custom.module.rules } };
   },
-  docs: {
-    autodocs: true
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
   }
 };

package/.storybook/preview.js

@@ -2,7 +2,6 @@ import '@aarhus-university/au-designsystem-delphinus/public/style.css';
 import { globalTheme, globalLang } from '../stories/lib/helpers';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
@@ -15,3 +14,4 @@ export const globalTypes = {
   theme: globalTheme.theme,
   lang: globalLang().lang,
 };
+export const tags = ['autodocs'];

package/package.json

@@ -1,120 +1,105 @@
-{
-  "sideEffects": true,
-  "name": "@aarhus-university/au-lib-react-components",
-  "version": "12.2.2",
-  "description": "Library for shared React components for various applications on au.dk",
-  "scripts": {
-    "test": "jest",
-    "build": "jest && webpack --config ./webpack.config.js",
-    "storybook": "storybook dev -p 6006 -h 127.0.0.1",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=0be71d94786b",
-    "build-js": "./esbuild.mjs"
-  },
-  "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.22.5",
-    "@babel/eslint-parser": "^7.22.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@mdx-js/react": "^2.3.0",
-    "@storybook/addon-a11y": "^7.6.7",
-    "@storybook/addon-actions": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-webpack5": "^7.6.7",
-    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.2",
-    "@types/testing-library__jest-dom": "^5.14.6",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "babel-jest": "^29.5.0",
-    "babel-loader": "^9.1.2",
-    "chromatic": "^6.19.9",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.44.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-webpack-plugin": "^4.0.1",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "mini-css-extract-plugin": "^2.7.6",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
-    "sass": "^1.63.6",
-    "sass-loader": "^13.3.2",
-    "storybook": "^7.6.7",
-    "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
-    "webpack-cli": "^5.1.4"
-  },
-  "dependencies": {
-    "@aarhus-university/au-designsystem-delphinus": "1.3.3",
-    "@aarhus-university/au-designsystem-delphinus-dev": "0.7.0",
-    "@aarhus-university/types": "1.1.0",
-    "@reduxjs/toolkit": "^1.9.5",
-    "@tinymce/tinymce-react": "^4.3.2",
-    "@types/google.analytics": "^0.0.42",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-router-dom": "^5.3.3",
-    "dayjs": "^1.11.9",
-    "esbuild": "^0.18.11",
-    "esbuild-sass-plugin": "^2.10.0",
-    "lodash.debounce": "^4.0.8",
-    "prop-types": "^15.8.1",
-    "query-string": "^8.1.0",
-    "react": "18.2.0",
-    "react-autosuggest": "^10.1.0",
-    "react-router-dom": "^6.14.1",
-    "regenerator-runtime": "^0.13.11",
-    "webpack": "^5.88.1",
-    "whatwg-fetch": "^3.6.2"
-  },
-  "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
-  },
-  "jest": {
-    "rootDir": "__tests__/jest",
-    "setupFilesAfterEnv": [
-      "./setupTests.ts"
-    ],
-    "transform": {
-      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
-    },
-    "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"
-    ]
-  }
-}
+{
+  "sideEffects": true,
+  "name": "@aarhus-university/au-lib-react-components",
+  "version": "12.4.0",
+  "description": "Library for shared React components for various applications on au.dk",
+  "scripts": {
+    "test": "jest",
+    "build": "jest && webpack --config ./webpack.config.js",
+    "storybook": "storybook dev -p 6006 -h 127.0.0.1",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=0be71d94786b",
+    "build-js": "./esbuild.mjs"
+  },
+  "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.22.5",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-a11y": "^8.2.1",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-interactions": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.2.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/testing-library__jest-dom": "^5.14.6",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^9.1.2",
+    "chromatic": "^6.19.9",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.44.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "jest": "^29.5.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "react-dom": "18.3.1",
+    "sass": "^1.63.6",
+    "sass-loader": "^13.3.2",
+    "storybook": "^8.2.1",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6",
+    "wicg-inert": "^3.1.2"
+  },
+  "dependencies": {
+    "@aarhus-university/au-designsystem-delphinus": "^1.7.8",
+    "@aarhus-university/types": "^1.1.0",
+    "@reduxjs/toolkit": "^1.9.5",
+    "@storybook/react-webpack5": "^8.2.1",
+    "@tinymce/tinymce-react": "^5.1.1",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/react-router-dom": "^5.3.3",
+    "dayjs": "^1.11.9",
+    "esbuild": "^0.18.11",
+    "esbuild-sass-plugin": "^2.10.0",
+    "lodash.debounce": "^4.0.8",
+    "prop-types": "^15.8.1",
+    "query-string": "^8.1.0",
+    "react": "^18.3.1",
+    "react-autosuggest": "^10.1.0",
+    "react-router-dom": "^6.14.1",
+    "regenerator-runtime": "^0.13.11",
+    "webpack": "^5.88.1",
+    "whatwg-fetch": "^3.6.2"
+  },
+  "jest": {
+    "rootDir": "__tests__/jest",
+    "setupFilesAfterEnv": [
+      "./setupTests.ts"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
+    },
+    "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"
+    ]
+  }
+}

package/src/components/AUButtonComponent.tsx

@@ -24,19 +24,25 @@ type Props = {
 
 const AUButtonComponent: FC<Props> = ({
   label,
-  disabled,
-  size,
-  type,
-  icon,
-  iconPosition,
-  hideLabel,
-  mode,
+  disabled = false,
+  size = 'default',
+  type = 'default',
+  icon = '',
+  iconPosition = 'left',
+  hideLabel = false,
+  mode = 'none',
   btnRef,
-  classNames,
-  ariaExpanded,
-  ariaHasPopup,
-  asSubmit,
-  onClick,
+  classNames = [],
+  ariaExpanded = false,
+  ariaHasPopup = undefined,
+  asSubmit = false,
+  onClick = (
+    event: MouseEvent<HTMLButtonElement>,
+    ref: RefObject<HTMLButtonElement> | undefined,
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log(event, ref);
+  },
 }) => {
   const sizeClass = size === 'default' ? '' : `button--${size}`;
   const typeClass = type === 'default' ? '' : `button--${type}`;
@@ -83,27 +89,6 @@ const AUButtonComponent: FC<Props> = ({
   );
 };
 
-AUButtonComponent.defaultProps = {
-  disabled: false,
-  size: 'default',
-  type: 'default',
-  icon: '',
-  iconPosition: 'left',
-  hideLabel: false,
-  mode: 'none',
-  classNames: [],
-  ariaExpanded: false,
-  ariaHasPopup: undefined,
-  asSubmit: false,
-  // eslint-disable-next-line no-console
-  onClick: (
-    event: MouseEvent<HTMLButtonElement>,
-    ref: RefObject<HTMLButtonElement> | undefined,
-    // eslint-disable-next-line no-console
-  ) => console.log(event, ref),
-  btnRef: undefined,
-};
-
 AUButtonComponent.displayName = 'AUButtonComponent';
 export default AUButtonComponent;
 

package/src/components/AUCalendarComponent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 import React, { useState, FC } from 'react';
 import dayjs from 'dayjs';
 import 'dayjs/locale/da';
@@ -109,24 +110,24 @@ type Props = {
 };
 
 const AUCalendarComponent: FC<Props> = ({
-  lang,
+  lang = 'da',
   day,
   month,
   year,
   hour,
   minute,
-  selected,
+  selected = new Date(),
   onSelected,
-  highlightWeekend,
-  highlightHolidays,
-  yearSpanMinus,
-  yearSpanPlus,
-  minuteInterval,
-  showTime,
-  closeable,
-  onClose,
-  limitStart,
-  limitEnd,
+  highlightWeekend = true,
+  highlightHolidays = true,
+  yearSpanMinus = 5,
+  yearSpanPlus = 5,
+  minuteInterval = 5,
+  showTime = true,
+  closeable = false,
+  onClose = () => { },
+  limitStart = null,
+  limitEnd = null,
   controls,
 }) => {
   dayjs.locale(lang);
@@ -492,22 +493,5 @@ const AUCalendarComponent: FC<Props> = ({
   );
 };
 
-AUCalendarComponent.defaultProps = {
-  lang: 'da',
-  selected: new Date(),
-  // eslint-disable-next-line no-console
-  highlightWeekend: true,
-  highlightHolidays: true,
-  yearSpanMinus: 5,
-  yearSpanPlus: 5,
-  minuteInterval: 5,
-  showTime: true,
-  closeable: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onClose: () => { },
-  limitStart: null,
-  limitEnd: null,
-};
-
 AUCalendarComponent.displayName = 'AUCalendarComponent';
 export default AUCalendarComponent;

package/src/components/AUComboBoxComponent.tsx

@@ -44,7 +44,7 @@ const AUComboBoxComponent: FC<Props> = ({
   resultsText,
   noResultsText,
   noResultsTextSecondary,
-  clearOnSelect,
+  clearOnSelect = false,
   onItemSelect,
 }) => {
   const comboBoxRef = useRef<HTMLDivElement>(null);
@@ -191,9 +191,5 @@ const AUComboBoxComponent: FC<Props> = ({
   );
 };
 
-AUComboBoxComponent.defaultProps = {
-  clearOnSelect: false,
-};
-
 AUComboBoxComponent.displayName = 'AUComboBoxComponent';
 export default AUComboBoxComponent;

package/src/components/AUContentToggleComponent.tsx

@@ -7,20 +7,20 @@ import { setContentToggle } from '@aarhus-university/au-designsystem-delphinus/s
 
 type Props = {
   toggled: boolean;
-  classNames?: string | undefined;
+  classNames?: string;
   children: JSX.Element;
-  onClick?: ((content: HTMLElement, button: HTMLButtonElement) => void) | undefined;
-  beforeCallback?: ((content: HTMLElement, button: HTMLButtonElement) => void) | undefined;
-  afterCallback?: ((content: HTMLElement, button: HTMLButtonElement) => void) | undefined;
+  onClick?: ((content: HTMLElement, button: HTMLButtonElement) => void);
+  beforeCallback?: ((content: HTMLElement, button: HTMLButtonElement) => void);
+  afterCallback?: ((content: HTMLElement, button: HTMLButtonElement) => void);
 };
 
 const AUContentToggleComponent: FC<Props> = ({
   toggled,
-  classNames,
+  classNames = undefined,
   children,
-  onClick,
-  beforeCallback,
-  afterCallback,
+  onClick = undefined,
+  beforeCallback = undefined,
+  afterCallback = undefined,
 }) => {
   const toggleContainer = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -46,12 +46,5 @@ const AUContentToggleComponent: FC<Props> = ({
   );
 };
 
-AUContentToggleComponent.defaultProps = {
-  classNames: undefined,
-  beforeCallback: undefined,
-  afterCallback: undefined,
-  onClick: undefined,
-};
-
 AUContentToggleComponent.displayName = 'AUContentToggleComponent';
 export default AUContentToggleComponent;

package/src/components/AUDatepickerComponent.tsx

@@ -25,22 +25,22 @@ type Props = {
 
 const AUDatepickerComponent: FC<Props> = ({
   id,
-  lang,
-  date,
+  lang = 'da',
+  date = new Date(),
   onDateChange,
   onHide,
-  format,
-  showTime,
-  showLabel,
-  labelInline,
-  labelText,
-  fullWidth,
-  yearSpanMinus,
-  yearSpanPlus,
-  limitStart,
-  limitEnd,
-  disabled,
-  sideBySideGrowth,
+  format = 'YYYY-MM-DD HH:mm',
+  showTime = true,
+  showLabel = false,
+  labelInline = false,
+  labelText = 'Vælg dato:',
+  fullWidth = true,
+  yearSpanMinus = 5,
+  yearSpanPlus = 5,
+  limitStart = null,
+  limitEnd = null,
+  disabled = false,
+  sideBySideGrowth = 0,
 }) => {
   const [showCalendar, setShowCalendar] = useState(false);
   const [sDate, setDate] = useState<Date>(date as Date);
@@ -120,22 +120,5 @@ const AUDatepickerComponent: FC<Props> = ({
   );
 };
 
-AUDatepickerComponent.defaultProps = {
-  date: new Date(),
-  format: 'YYYY-MM-DD HH:mm',
-  showTime: true,
-  lang: 'da',
-  showLabel: false,
-  labelInline: false,
-  labelText: 'Vælg dato:',
-  fullWidth: true,
-  yearSpanMinus: 5,
-  yearSpanPlus: 5,
-  limitStart: null,
-  limitEnd: null,
-  disabled: false,
-  sideBySideGrowth: 0,
-};
-
 AUDatepickerComponent.displayName = 'AUDatepickerComponent';
 export default AUDatepickerComponent;

package/src/components/AUEditorComponent.tsx

@@ -55,9 +55,9 @@ const AUEditorComponent: FC<Props> = ({
   id,
   initialValue,
   textareaName,
-  showCounter,
-  counterType,
-  maxChars,
+  showCounter = false,
+  counterType = 'recommended',
+  maxChars = 0,
   translations,
   onEditorChange,
 }) => {
@@ -113,11 +113,5 @@ const AUEditorComponent: FC<Props> = ({
   );
 };
 
-AUEditorComponent.defaultProps = {
-  showCounter: false,
-  counterType: 'recommended',
-  maxChars: 0,
-};
-
 AUEditorComponent.displayName = 'AUEditorComponent';
 export default AUEditorComponent;

package/src/components/AUErrorComponent.tsx

@@ -11,10 +11,10 @@ type Props = {
 };
 
 const AUErrorComponent: FC<Props> = ({
-  error: auError,
-  fetchError,
-  serializedError,
-  withStatus,
+  error: auError = undefined,
+  fetchError = undefined,
+  serializedError = undefined,
+  withStatus = false,
 }) => {
   if (auError) {
     const { status, header, message } = auError;
@@ -67,14 +67,5 @@ const AUErrorComponent: FC<Props> = ({
   return null;
 };
 
-AUErrorComponent.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  error: undefined,
-  fetchError: undefined,
-  serializedError: undefined,
-  // eslint-disable-next-line react/default-props-match-prop-types
-  withStatus: false,
-};
-
 AUErrorComponent.displayName = 'AUErrorComponent';
 export default AUErrorComponent;

package/src/components/AUModalComponent.tsx

@@ -20,11 +20,11 @@ type Props = {
 };
 
 const AUModalComponent: FC<Props> = ({
-  lang,
-  domId,
-  className,
+  lang = 'da',
+  domId = 'modal-view1',
+  className = 'modal-view',
   children,
-  closeButton,
+  closeButton = true,
   closeButtonDisabled,
   sender,
   show,
@@ -68,12 +68,5 @@ const AUModalComponent: FC<Props> = ({
   );
 };
 
-AUModalComponent.defaultProps = {
-  domId: 'modal-view1',
-  closeButton: true,
-  lang: 'da',
-  className: 'modal-view',
-};
-
 AUModalComponent.displayName = 'AUModalComponent';
 export default AUModalComponent;

package/src/components/AUNotificationComponent.tsx

@@ -10,11 +10,11 @@ type Props = {
 };
 
 const AUNotificationComponent: FC<Props> = ({
-  header,
+  header = null,
   content,
-  actions,
-  type,
-  classNames,
+  actions = [],
+  type = 'information',
+  classNames = [],
 }) => {
   const typeClass = type === 'information' ? '' : `notification--${type}`;
   return (
@@ -40,12 +40,5 @@ const AUNotificationComponent: FC<Props> = ({
   );
 };
 
-AUNotificationComponent.defaultProps = {
-  header: null,
-  actions: [],
-  type: 'information',
-  classNames: [],
-};
-
 AUNotificationComponent.displayName = 'AUNotificationComponent';
 export default AUNotificationComponent;

package/src/components/AUReceiptComponent.tsx

@@ -9,9 +9,9 @@ type Props = {
 
 const AUReceiptComponent: FC<Props> = ({
   receiptText,
-  helpText,
-  showGoTo,
-  buttons,
+  helpText = null,
+  showGoTo = true,
+  buttons = [],
 }) => {
   const renderButtons = (buttons || []).map((btn) => <a key={btn.gotoLink} href={btn.gotoLink} className="button">{btn.gotoText}</a>);
   return (
@@ -30,11 +30,5 @@ const AUReceiptComponent: FC<Props> = ({
   );
 };
 
-AUReceiptComponent.defaultProps = {
-  showGoTo: true,
-  helpText: null,
-  buttons: [],
-};
-
 AUReceiptComponent.displayName = 'AUReceiptComponent';
 export default AUReceiptComponent;

package/src/components/AUSpinnerComponent.tsx

@@ -12,9 +12,9 @@ type Props = {
 
 const AUSpinnerComponent: FC<Props> = ({
   loaded,
-  init,
-  height,
-  className,
+  init = '',
+  height = 'auto',
+  className = '',
   children,
 }) => {
   let classNames = 'processing-state';
@@ -36,11 +36,5 @@ const AUSpinnerComponent: FC<Props> = ({
   return children;
 };
 
-AUSpinnerComponent.defaultProps = {
-  className: '',
-  height: 'auto',
-  init: '',
-};
-
 AUSpinnerComponent.displayName = 'AUSpinnerComponent';
 export default AUSpinnerComponent;

package/src/components/AUStepComponent.tsx

@@ -21,8 +21,8 @@ type Props = {
   step: number;
   children: JSX.Element[];
   stepHeadlines: string[];
-  introElement?: JSX.Element | undefined;
-  outroElement?: JSX.Element | undefined;
+  introElement?: JSX.Element;
+  outroElement?: JSX.Element;
   showFinal?: boolean;
   finalIcon?: string;
   title: string;
@@ -34,11 +34,11 @@ const AUStepComponent: FC<Props> = ({
   step,
   children,
   stepHeadlines,
-  introElement,
-  outroElement,
-  showFinal,
-  finalIcon,
-  showSteps,
+  introElement = undefined,
+  outroElement = undefined,
+  showFinal = false,
+  finalIcon = '',
+  showSteps = true,
 }) => (
   <div className="stepper">
     <h1 className="stepper__step-title">{title}</h1>
@@ -71,13 +71,5 @@ const AUStepComponent: FC<Props> = ({
   </div>
 );
 
-AUStepComponent.defaultProps = {
-  introElement: undefined,
-  outroElement: undefined,
-  showFinal: false,
-  showSteps: true,
-  finalIcon: '',
-};
-
 AUStepComponent.displayName = 'AUStepComponent';
 export default AUStepComponent;

package/src/components/AUTabbedContentComponent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-env browser */
 /* eslint-disable max-len */
 import React, { useEffect, useRef, FC } from 'react';
@@ -48,16 +49,16 @@ type Props = {
 };
 
 const AUTabbedContentComponent: FC<Props> = ({
-  tabKey,
+  tabKey = 0,
   tabs,
-  tabContent,
-  children,
-  focus,
-  initial,
-  lang,
-  callback,
-  withRouter,
-  classNames,
+  tabContent = null,
+  children = null,
+  focus = true,
+  initial = 0,
+  lang = 'da',
+  callback = () => { },
+  withRouter = false,
+  classNames = 'tabbed-content',
 }) => {
   const tabsElement = useRef<HTMLDivElement>(null);
 
@@ -147,18 +148,5 @@ const AUTabbedContentComponent: FC<Props> = ({
   );
 };
 
-AUTabbedContentComponent.defaultProps = {
-  tabKey: 0,
-  children: null,
-  tabContent: null,
-  focus: true,
-  initial: 0,
-  lang: 'da',
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  callback: () => { },
-  withRouter: false,
-  classNames: 'tabbed-content',
-};
-
 AUTabbedContentComponent.displayName = 'AUTabbedContentComponent';
 export default AUTabbedContentComponent;

package/src/components/AUToastComponent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
 /* eslint-env browser */
 import React, {
   useEffect, useLayoutEffect, useRef, FC,
@@ -16,9 +17,9 @@ type Props = {
 
 const AUToastComponent: FC<Props> = ({
   message: pMessage,
-  buttonText,
-  dismiss,
-  onOpen,
+  buttonText = 'OK',
+  dismiss = () => { },
+  onOpen = () => { },
 }) => {
   const { type, message, header } = pMessage;
   const toastRef = useRef<HTMLDivElement>(null);
@@ -99,13 +100,5 @@ const AUToastComponent: FC<Props> = ({
   );
 };
 
-AUToastComponent.defaultProps = {
-  buttonText: 'OK',
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  dismiss: () => { },
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onOpen: () => { },
-};
-
 AUToastComponent.displayName = 'AUToastComponent';
 export default AUToastComponent;

package/src/components/AUToolbarComponent.tsx

@@ -19,12 +19,12 @@ type Props = {
 const AUToolbarComponent: FC<Props> = ({
   lang,
   elements,
-  noCollapse,
-  center,
-  title,
-  buttonClass,
-  buttonElements,
-  onCloseContentToggles,
+  noCollapse = false,
+  center = false,
+  title = undefined,
+  buttonClass = 'toolbar__toggle',
+  buttonElements = [],
+  onCloseContentToggles = undefined,
 }) => {
   const toolbarRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -104,14 +104,5 @@ const AUToolbarComponent: FC<Props> = ({
   );
 };
 
-AUToolbarComponent.defaultProps = {
-  noCollapse: false,
-  center: false,
-  title: undefined,
-  buttonClass: 'toolbar__toggle',
-  buttonElements: [],
-  onCloseContentToggles: undefined,
-};
-
 AUToolbarComponent.displayName = 'AUToolbarComponent';
 export default AUToolbarComponent;

package/src/components/AUTruncatorComponent.tsx

@@ -8,19 +8,19 @@ const getMaxLinesStyle = (maxLines: number): React.CSSProperties => ({ '--max-li
 
 type Props = {
   maxLines: number;
-  header?: string | undefined;
+  header?: string;
   headerLevel?: number;
-  children: string | JSX.Element | JSX.Element[] | undefined;
-  classNames?: string | undefined;
+  children: string | JSX.Element | JSX.Element[];
+  classNames?: string;
   buttonChild: JSX.Element;
 };
 
 const AUTruncatorComponent: FC<Props> = ({
   maxLines,
-  header,
-  headerLevel,
+  header = undefined,
+  headerLevel = 2,
   children,
-  classNames,
+  classNames = 'truncator',
   buttonChild,
 }) => {
   const expandRef = useRef<HTMLButtonElement>(null);
@@ -123,11 +123,5 @@ const AUTruncatorComponent: FC<Props> = ({
   );
 };
 
-AUTruncatorComponent.defaultProps = {
-  header: undefined,
-  headerLevel: 2,
-  classNames: 'truncator',
-};
-
 AUTruncatorComponent.displayName = 'AUTruncatorComponent';
 export default AUTruncatorComponent;

package/stories/AUCharacterCountComponent.stories.tsx

@@ -1,32 +1,7 @@
 import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import AUCharacterCountComponent from '../src/components/AUCharacterCountComponent';
-import { ThemeWrapper } from './lib/helpers';
-
-export const translations = {
-  character_count: {
-    overflow: {
-      message: {
-        recommended: 'Vi anbefaler, at du maksimalt skriver {{maxchars}} tegn.',
-        allowed: 'Du må maks. skrive {{maxchars}} tegn.'
-      },
-      count: {
-        recommended: {
-          one: 'Du har skrevet 1 tegn mere end anbefalet.',
-          other: 'Du har skrevet {{overflow}} tegn mere end anbefalet.'
-        },
-        allowed: {
-          one: 'Du har skrevet 1 tegn for meget.',
-          other: 'Du har skrevet {{overflow}} tegn for meget.'
-        }
-      }
-    },
-    count_down: {
-      one: 'Du har 1 tegn tilbage',
-      other: 'Du har {{remaining}} tegn tilbage'
-    }
-  },
-};
+import { ThemeWrapper, translations } from './lib/helpers';
 
 export default {
   title: 'Delphinus/Character Count',

package/stories/AUEditorComponent.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 import AUEditorComponent from '../src/components/AUEditorComponent';
-import { ThemeWrapper } from './lib/helpers';
-import { translations } from './AUCharacterCountComponent.stories';
+import { ThemeWrapper, translations } from './lib/helpers';
 
 export default {
   title: 'Delphinus/Editor',

package/stories/lib/helpers.tsx

@@ -29,7 +29,7 @@ const globalLang = (items = ['da', 'en'], defaultValue = 'da') => ({
   },
 });
 
-const ThemeWrapper = ({ theme, children, withPageContentBlock }) => {
+const ThemeWrapper = ({ theme, children, withPageContentBlock = true }) => {
   useEffect(() => {
     const body = document.querySelector('body');
     if (body) {
@@ -64,10 +64,6 @@ const ThemeWrapper = ({ theme, children, withPageContentBlock }) => {
   );
 }
 
-ThemeWrapper.defaultProps = {
-  withPageContentBlock: true,
-};
-
 const ThemeLanguageWrapper = ({
   theme,
   children,
@@ -75,7 +71,7 @@ const ThemeLanguageWrapper = ({
   importPromises,
   translationContext,
   lang,
-  withPageContentBlock,
+  withPageContentBlock = true,
 }) => {
   const translations = useTranslation<typeof defaultLabels>(defaultLabels, importPromises, lang);
   useEffect(() => {
@@ -116,8 +112,29 @@ const ThemeLanguageWrapper = ({
   );
 }
 
-ThemeLanguageWrapper.defaultProps = {
-  withPageContentBlock: true,
+const translations = {
+  character_count: {
+    overflow: {
+      message: {
+        recommended: 'Vi anbefaler, at du maksimalt skriver {{maxchars}} tegn.',
+        allowed: 'Du må maks. skrive {{maxchars}} tegn.'
+      },
+      count: {
+        recommended: {
+          one: 'Du har skrevet 1 tegn mere end anbefalet.',
+          other: 'Du har skrevet {{overflow}} tegn mere end anbefalet.'
+        },
+        allowed: {
+          one: 'Du har skrevet 1 tegn for meget.',
+          other: 'Du har skrevet {{overflow}} tegn for meget.'
+        }
+      }
+    },
+    count_down: {
+      one: 'Du har 1 tegn tilbage',
+      other: 'Du har {{remaining}} tegn tilbage'
+    }
+  },
 };
 
 export {
@@ -125,4 +142,5 @@ export {
   globalLang,
   ThemeWrapper,
   ThemeLanguageWrapper,
+  translations,
 };