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

package/.eslintrc.js

@@ -1,15 +1,7 @@
 module.exports = {
   root: true,
-  extends: [
-    'airbnb',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-  ],
-  plugins: [
-    'react',
-    'react-hooks',
-    '@typescript-eslint',
-  ],
+  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],
@@ -20,13 +12,10 @@ module.exports = {
     '@typescript-eslint/no-shadow': ['error'],
     'react/no-danger': [0],
     'linebreak-style': [0],
-    'react/function-component-definition': [
-      2,
-      {
-        namedComponents: 'arrow-function',
-        unnamedComponents: 'arrow-function',
-      },
-    ],
+    'react/function-component-definition': [2, {
+      namedComponents: 'arrow-function',
+      unnamedComponents: 'arrow-function',
+    }],
     'react-hooks/rules-of-hooks': 'error',
   },
   settings: {
@@ -37,6 +26,7 @@ module.exports = {
       typescript: {},
     },
   },
+  ignorePatterns: ['stories'],
   globals: {
     AU: true,
     $: true,

package/.storybook/main.js

@@ -0,0 +1,21 @@
+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

@@ -0,0 +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$/,
+    },
+  },
+};

package/__tests__/jest/AUButtonComponent.test.tsx

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

package/__tests__/jest/AUSpinnerComponent.test.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUSpinnerComponent from '../../src/components/AUSpinnerComponent';
+
+describe('<AUSpinnerComponent />', () => {
+  it('renders a loading animation', () => {
+    const { container } = render(
+      <AUSpinnerComponent loaded={false}>
+        <p>Child content</p>
+      </AUSpinnerComponent>,
+    );
+
+    const processing = container.querySelector('.processing-state');
+    expect(processing).toBeInTheDocument();
+  });
+
+  it('renders a loading animation in a box with a height of 40rem', () => {
+    const { container } = render(
+      <AUSpinnerComponent loaded={false} height="40rem" init="box">
+        <p>Child content</p>
+      </AUSpinnerComponent>,
+    );
+
+    const processing = container.querySelector('.processing-state--init-box');
+    expect(processing).toBeInTheDocument();
+    const style = getComputedStyle(processing as HTMLElement);
+    expect(style.minHeight).toBe('40rem');
+  });
+
+  it('renders a loading animation in a table with a height of 20rem', () => {
+    const { container } = render(
+      <AUSpinnerComponent loaded={false} height="20rem" init="table">
+        <p>Child content</p>
+      </AUSpinnerComponent>,
+    );
+
+    const processing = container.querySelector('.processing-state--init-table');
+    expect(processing).toBeInTheDocument();
+    const style = getComputedStyle(processing as HTMLElement);
+    expect(style.minHeight).toBe('20rem');
+  });
+
+  it('renders its child content when loaded', () => {
+    const { container } = render(
+      <AUSpinnerComponent loaded>
+        <p>Child content</p>
+      </AUSpinnerComponent>,
+    );
+
+    const child = container.querySelector('p');
+    expect(child).toBeInTheDocument();
+    expect(child?.innerHTML).toBe('Child content');
+  });
+});

package/__tests__/jest/AUToolbarComponent.test.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render } from '@testing-library/react';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUToolbarComponent from '../../src/components/AUToolbarComponent';
+import AUButtonComponent from '../../src/components/AUButtonComponent';
+
+describe('<AUToolbarComponent />', () => {
+  it('renders a toolbar with a toggle button labeled "Muligheder" and no items', () => {
+    const { container } = render(
+      <AUToolbarComponent lang="da" elements={[]} />,
+    );
+
+    const toolbar = container.querySelector('.toolbar');
+    const toggle = toolbar?.querySelector('.toolbar__toggle');
+    const itemsContainer = toolbar?.querySelector('.toolbar__items');
+    const items = itemsContainer?.querySelectorAll('*');
+    expect(toolbar).toBeInTheDocument();
+    expect(toggle?.innerHTML).toBe('Muligheder');
+    expect(items?.length).toBe(0);
+  });
+
+  it('renders a toolbar with a toggle button labeled "Options" and five items', () => {
+    const { container } = render(
+      <AUToolbarComponent
+        lang="en"
+        elements={[
+          <AUButtonComponent label="First action" />,
+          <AUButtonComponent label="Second action" />,
+          <AUButtonComponent label="Third action" />,
+          <div className="toolbar__split" />,
+          <AUButtonComponent label="Fourth action" />,
+        ]}
+      />,
+    );
+
+    const toolbar = container.querySelector('.toolbar');
+    const toggle = toolbar?.querySelector('.toolbar__toggle');
+    const itemsContainer = toolbar?.querySelector('.toolbar__items');
+    const items = itemsContainer?.querySelectorAll('*');
+    expect(toolbar).toBeInTheDocument();
+    expect(toggle?.innerHTML).toBe('Options');
+    expect(items?.length).toBe(5);
+  });
+});

package/__tests__/jest/helpers.test.ts

@@ -0,0 +1,15 @@
+import { countryCodes } from '../../src/lib/i18n';
+import { prettyPrintPhone } from '../../src/lib/helpers';
+
+describe('Helpers', () => {
+  test('Telefonnummer med landekode', () => {
+    let phone = '+4525327240';
+    expect(prettyPrintPhone(countryCodes, phone)).toBe('+45 25 32 72 40');
+
+    phone = '+96178917075';
+    expect(prettyPrintPhone(countryCodes, phone)).toBe('+961 78 91 70 75');
+
+    phone = '25327240';
+    expect(prettyPrintPhone([], phone)).toBe('25 32 72 40');
+  });
+});

package/__tests__/jest/setupTests.ts

@@ -0,0 +1,2 @@
+import 'regenerator-runtime/runtime';
+import 'whatwg-fetch';

package/babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
+    '@babel/preset-env',
     '@babel/react',
     '@babel/preset-typescript',
   ],