@aarhus-university/au-lib-react-components 10.6.0 → 10.7.0

package/.eslintrc.js

@@ -1,34 +1,34 @@
-module.exports = {
-  root: true,
-  extends: ['airbnb', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
-  plugins: ['react', 'react-hooks', '@typescript-eslint'],
-  parser: '@typescript-eslint/parser',
-  rules: {
-    'import/extensions': [0],
-    'react/jsx-filename-extension': [0],
-    'no-use-before-define': [0],
-    '@typescript-eslint/no-use-before-define': ['error'],
-    'no-shadow': 'off',
-    '@typescript-eslint/no-shadow': ['error'],
-    'react/no-danger': [0],
-    'linebreak-style': [0],
-    'react/function-component-definition': [2, {
-      namedComponents: 'arrow-function',
-      unnamedComponents: 'arrow-function',
-    }],
-    'react-hooks/rules-of-hooks': 'error',
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    'import/resolver': {
-      typescript: {},
-    },
-  },
-  ignorePatterns: ['stories'],
-  globals: {
-    AU: true,
-    $: true,
-  },
-};
+module.exports = {
+  root: true,
+  extends: ['airbnb', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:storybook/recommended'],
+  plugins: ['react', 'react-hooks', '@typescript-eslint'],
+  parser: '@typescript-eslint/parser',
+  rules: {
+    'import/extensions': [0],
+    'react/jsx-filename-extension': [0],
+    'no-use-before-define': [0],
+    '@typescript-eslint/no-use-before-define': ['error'],
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    'react/no-danger': [0],
+    'linebreak-style': [0],
+    'react/function-component-definition': [2, {
+      namedComponents: 'arrow-function',
+      unnamedComponents: 'arrow-function',
+    }],
+    'react-hooks/rules-of-hooks': 'error',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+  ignorePatterns: ['stories'],
+  globals: {
+    AU: true,
+    $: true,
+  },
+};

package/.storybook/main.js

@@ -1,8 +1,21 @@
-module.exports = {
-  "stories": ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
-  "framework": "@storybook/react",
-  core: {
-    builder: "webpack5"
-  }
+const path = require('path');
+
+module.exports = {
+  "stories": ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  "framework": "@storybook/react",
+  core: {
+    builder: "webpack5"
+  },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.(ts|js)x?$/,
+      include: path.resolve(__dirname, '../node_modules/@aarhus-university/au-designsystem-delphinus/source'),
+      use: {
+        loader: 'babel-loader',
+      },
+    });
+    return config;
+    // return { ...config, module: { ...config.module, rules: custom.module.rules } };
+  },
 };

package/.storybook/preview.js

@@ -1,11 +1,11 @@
-import '@aarhus-university/au-designsystem-delphinus/build/style.css';
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
+import '@aarhus-university/au-designsystem-delphinus/build/style.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
 };

package/README.md

@@ -1,19 +1,19 @@
-# AU Lib React Components
-> @aarhus-university/au-lib-react-components
-
-## Beskrivelse
-> React-komponentbibliotek, der kan anvendes på tværs af andre React-projekter
-
-## Kræver
-Nodejs/npm
-
-## Installation
-* Kør `npm install` i en terminal for at installere npm-afhængigheder til dette projekt.
-* Kør `npm install @aarhus-university/au-lib-react-components@latest --save` i en terminal for at installere dette projekt som en afhængighed i et andet npm-projekt.
-
-## Afvikling
-* `npm run build` for at bygge de færdige Universal Module Definition-filer (til brug som selvstændige applikationer)
-
-## Versionering og udgivelse
-* `npm version major|minor|patch` for 'version bump'.
-* `npm publish` for udgivelse i npm-registry.
+# AU Lib React Components
+> @aarhus-university/au-lib-react-components
+
+## Beskrivelse
+> React-komponentbibliotek, der kan anvendes på tværs af andre React-projekter
+
+## Kræver
+Nodejs/npm
+
+## Installation
+* Kør `npm install` i en terminal for at installere npm-afhængigheder til dette projekt.
+* Kør `npm install @aarhus-university/au-lib-react-components@latest --save` i en terminal for at installere dette projekt som en afhængighed i et andet npm-projekt.
+
+## Afvikling
+* `npm run build` for at bygge de færdige Universal Module Definition-filer (til brug som selvstændige applikationer)
+
+## Versionering og udgivelse
+* `npm version major|minor|patch` for 'version bump'.
+* `npm publish` for udgivelse i npm-registry.

package/__tests__/jest/AUButtonComponent.test.tsx

@@ -1,163 +1,165 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import AUButtonComponent from '../../src/components/AUButtonComponent';
-
-describe('<AUButtonComponent />', () => {
-  it('renders a default sized button', () => {
-    render(
-      <AUButtonComponent
-        label="Min knap"
-      />,
-    );
-
-    const button = screen.getByText('Min knap');
-    expect(button).toBeInTheDocument();
-  });
-
-  it('renders a default sized disabled button', () => {
-    render(
-      <AUButtonComponent
-        label="Min knap"
-        disabled
-      />,
-    );
-
-    const button = screen.getByText('Min knap');
-    expect(button).toBeDisabled();
-  });
-
-  it('renders a large enabled button with no icon', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        size="large"
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--large')).toBe(true);
-    expect(button?.hasAttribute('data-icon')).toBe(false);
-    expect(button).toBeEnabled();
-  });
-
-  it('renders a small dimmed button', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        size="small"
-        type="dimmed"
-      />,
-    );
-
-    const classList = container?.querySelector('button')?.classList;
-    expect(classList?.contains('button--small')).toBe(true);
-    expect(classList?.contains('button--dimmed')).toBe(true);
-  });
-
-  it('renders a default sized text button with a narwhal icon to the right', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        type="text"
-        icon=""
-        iconPosition="right"
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--small')).toBe(false);
-    expect(classList?.contains('button--large')).toBe(false);
-    expect(classList?.contains('button--text')).toBe(true);
-    expect(classList?.contains('button--icon')).toBe(true);
-    expect(classList?.contains('button--icon--right')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
-  });
-
-  it('renders a button with a narwhal icon with a hidden label', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        icon=""
-        hideLabel
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--icon')).toBe(true);
-    expect(classList?.contains('button--icon--hide-label')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
-    expect(button?.getAttribute('title')).toBe('Min knap');
-  });
-
-  it('renders a default sized ireversable (sic) action button', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        mode="ireversable-action"
-      />,
-    );
-
-    const classList = container?.querySelector('button')?.classList;
-    expect(classList?.contains('button--ireversable-action')).toBe(true);
-  });
-
-  it('renders a large confirmable action button with a check icon and a hidden label', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        size="large"
-        mode="confirmable-action"
-        icon=""
-        hideLabel
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--large')).toBe(true);
-    expect(classList?.contains('button--confirmable-action')).toBe(true);
-    expect(classList?.contains('button--icon')).toBe(true);
-    expect(classList?.contains('button--icon--hide-label')).toBe(true);
-    expect(button?.getAttribute('data-icon')).toBe('');
-    expect(button?.getAttribute('title')).toBe('Min knap');
-  });
-
-  it('renders a small disabled processing button', () => {
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        size="small"
-        mode="processing"
-        disabled
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    const classList = button?.classList;
-    expect(classList?.contains('button--small')).toBe(true);
-    expect(classList?.contains('button--processing')).toBe(true);
-    expect(button).toBeDisabled();
-  });
-
-  it('does something when clicked', () => {
-    const handleClick = jest.fn();
-    const { container } = render(
-      <AUButtonComponent
-        label="Min knap"
-        onClick={handleClick}
-      />,
-    );
-
-    const button = container?.querySelector('button');
-    if (button) {
-      fireEvent.click(button);
-      expect(handleClick).toHaveBeenCalledTimes(1);
-    }
-  });
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUButtonComponent from '../../src/components/AUButtonComponent';
+
+describe('<AUButtonComponent />', () => {
+  it('renders a default sized button', () => {
+    render(
+      <AUButtonComponent
+        label="Min knap"
+      />,
+    );
+
+    const button = screen.getByText('Min knap');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders a default sized disabled button', () => {
+    render(
+      <AUButtonComponent
+        label="Min knap"
+        disabled
+      />,
+    );
+
+    const button = screen.getByText('Min knap');
+    expect(button).toBeDisabled();
+  });
+
+  it('renders a large enabled button with no icon', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        size="large"
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--large')).toBe(true);
+    expect(button?.hasAttribute('data-icon')).toBe(false);
+    expect(button).toBeEnabled();
+  });
+
+  it('renders a small dimmed button with an extra classname', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        size="small"
+        type="dimmed"
+        classNames={['fubar']}
+      />,
+    );
+
+    const classList = container?.querySelector('button')?.classList;
+    expect(classList?.contains('button--small')).toBe(true);
+    expect(classList?.contains('button--dimmed')).toBe(true);
+    expect(classList?.contains('fubar')).toBe(true);
+  });
+
+  it('renders a default sized text button with a narwhal icon to the right', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        type="text"
+        icon=""
+        iconPosition="right"
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--small')).toBe(false);
+    expect(classList?.contains('button--large')).toBe(false);
+    expect(classList?.contains('button--text')).toBe(true);
+    expect(classList?.contains('button--icon')).toBe(true);
+    expect(classList?.contains('button--icon--right')).toBe(true);
+    expect(button?.getAttribute('data-icon')).toBe('');
+  });
+
+  it('renders a button with a narwhal icon with a hidden label', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        icon=""
+        hideLabel
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--icon')).toBe(true);
+    expect(classList?.contains('button--icon--hide-label')).toBe(true);
+    expect(button?.getAttribute('data-icon')).toBe('');
+    expect(button?.getAttribute('title')).toBe('Min knap');
+  });
+
+  it('renders a default sized ireversable (sic) action button', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        mode="ireversable-action"
+      />,
+    );
+
+    const classList = container?.querySelector('button')?.classList;
+    expect(classList?.contains('button--ireversable-action')).toBe(true);
+  });
+
+  it('renders a large confirmable action button with a check icon and a hidden label', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        size="large"
+        mode="confirmable-action"
+        icon=""
+        hideLabel
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--large')).toBe(true);
+    expect(classList?.contains('button--confirmable-action')).toBe(true);
+    expect(classList?.contains('button--icon')).toBe(true);
+    expect(classList?.contains('button--icon--hide-label')).toBe(true);
+    expect(button?.getAttribute('data-icon')).toBe('');
+    expect(button?.getAttribute('title')).toBe('Min knap');
+  });
+
+  it('renders a small disabled processing button', () => {
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        size="small"
+        mode="processing"
+        disabled
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    const classList = button?.classList;
+    expect(classList?.contains('button--small')).toBe(true);
+    expect(classList?.contains('button--processing')).toBe(true);
+    expect(button).toBeDisabled();
+  });
+
+  it('does something when clicked', () => {
+    const handleClick = jest.fn();
+    const { container } = render(
+      <AUButtonComponent
+        label="Min knap"
+        onClick={handleClick}
+      />,
+    );
+
+    const button = container?.querySelector('button');
+    if (button) {
+      fireEvent.click(button);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    }
+  });
+});

package/__tests__/jest/AUModalComponent.test.tsx

@@ -0,0 +1,116 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, {
+  ReactNode, ReactPortal, useRef, useState,
+} from 'react';
+import ReactDOM from 'react-dom';
+import { fireEvent, render } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUModalComponent from '../../src/components/AUModalComponent';
+import AUButtonComponent from '../../src/components/AUButtonComponent';
+
+const ModalWrapper: React.FC = () => {
+  const [showModal, setShowModal] = useState(false);
+  const btnRef = useRef<HTMLButtonElement>(null);
+  return (
+    <>
+      <AUButtonComponent
+        label="Open modal"
+        btnRef={btnRef}
+        onClick={() => {
+          setShowModal(true);
+        }}
+      />
+      <AUModalComponent
+        domId="test-modal"
+        show={showModal}
+        sender={btnRef.current}
+        onClose={() => setShowModal(false)}
+      >
+        <div className="modal-view__body">
+          <h2 className="modal-view__header theme--dark">
+            Header
+          </h2>
+          <div className="modal-view__content">
+            <p>Content</p>
+          </div>
+        </div>
+      </AUModalComponent>
+    </>
+  );
+};
+
+describe('<AUModalComponent />', () => {
+  const fakeBtn = document.createElement('button');
+  const oldCreatePortal = ReactDOM.createPortal;
+  beforeAll(async () => {
+    ReactDOM.createPortal = (node: ReactNode): ReactPortal => node as ReactPortal;
+  });
+
+  afterAll(() => {
+    ReactDOM.createPortal = oldCreatePortal;
+  });
+  it('renders a visible modal view with some content', () => {
+    const { container } = render(
+      <div className="page">
+        <AUModalComponent
+          domId="test-modal"
+          show
+          sender={fakeBtn}
+        >
+          <div className="modal-view__body">
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </div>
+        </AUModalComponent>
+      </div>,
+    );
+
+    const modal = container.querySelector('.modal-view.modal-view--visible');
+    expect(modal).toBeInTheDocument();
+  });
+
+  it('renders a modal view with domId "test-modal" but it is not visible', () => {
+    const { container } = render(
+      <div className="page">
+        <AUModalComponent
+          domId="test-modal"
+          show={false}
+          sender={fakeBtn}
+        >
+          <div className="modal-view__body">
+            <h2 className="modal-view__header theme--dark">
+              Header
+            </h2>
+            <div className="modal-view__content">
+              <p>Content</p>
+            </div>
+          </div>
+        </AUModalComponent>
+      </div>,
+    );
+
+    const modal = container.querySelector('#test-modal');
+    expect(modal).toBeInTheDocument();
+    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
+  });
+
+  it('renders a non-visible modal view until button is clicked', () => {
+    const { container, getByText } = render(
+      <div className="page">
+        <ModalWrapper />
+      </div>,
+    );
+
+    const modal = container.querySelector('.modal-view');
+    const btn = getByText('Open modal');
+    expect(modal).toBeInTheDocument();
+    expect(modal?.classList.contains('modal-view--visible')).toBe(false);
+    fireEvent.click(btn);
+    expect(modal?.classList.contains('modal-view--visible')).toBe(true);
+  });
+});