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

package/.eslintrc.js

@@ -1,33 +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,
-  },
-};
+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,8 @@
-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"
-  }
+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"
+  }
 };

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,163 @@
-/* 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', () => {
+    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);
+    }
+  });
+});

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/helpers.test.ts

@@ -1,15 +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');
-  });
-});
+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

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

package/babel.config.js

@@ -1,8 +1,8 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-    '@babel/react',
-    '@babel/preset-typescript',
-  ],
-  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-optional-chaining'],
-};
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/react',
+    '@babel/preset-typescript',
+  ],
+  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-optional-chaining'],
+};