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

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,21 +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', '@storybook/addon-a11y'],
-  '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 } };
-  },
+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'],
+  '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,17 +1,17 @@
-import '@aarhus-university/au-designsystem-delphinus/build/style.css';
-import { globalTheme, globalLang } from '../stories/lib/helpers';
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-export const globalTypes = {
-  theme: globalTheme.theme,
-  lang: globalLang().lang,
-};
+import '@aarhus-university/au-designsystem-delphinus/build/style.css';
+import { globalTheme, globalLang } from '../stories/lib/helpers';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const globalTypes = {
+  theme: globalTheme.theme,
+  lang: globalLang().lang,
+};

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,165 +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="delphinus"
-        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="delphinus"
-        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="delphinus"
-        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="delphinus"
+        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="delphinus"
+        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="delphinus"
+        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);
+    }
+  });
+});