@aarhus-university/au-lib-react-components 12.5.1 → 12.6.1

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git log:*)",
+      "Bash(npm run build:*)",
+      "Bash(sass:*)",
+      "Bash(npx sass:*)",
+      "Bash(npm test:*)",
+      "WebFetch(domain:github.com)"
+    ]
+  }
+}

package/.eslintrc.js

@@ -1,35 +1,35 @@
-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',
-    'react/require-default-props': [0],
-  },
-  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',
+    'react/require-default-props': [0],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      typescript: {},
+    },
+  },
+  ignorePatterns: ['stories'],
+  globals: {
+    AU: true,
+    $: true,
+  },
+};

package/.storybook/main.js

@@ -1,35 +1,35 @@
-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',
-    '@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?$/,
-      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 } };
-  },
-
-  docs: {},
-
-  typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
+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',
+    '@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?$/,
+      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 } };
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 };

package/.storybook/preview.js

@@ -1,17 +1,17 @@
-import '@aarhus-university/au-designsystem-delphinus/public/style.css';
-import { globalTheme, globalLang } from '../stories/lib/helpers';
-
-export const parameters = {
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-export const globalTypes = {
-  theme: globalTheme.theme,
-  lang: globalLang().lang,
-};
-export const tags = ['autodocs'];
+import '@aarhus-university/au-designsystem-delphinus/public/style.css';
+import { globalTheme, globalLang } from '../stories/lib/helpers';
+
+export const parameters = {
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const globalTypes = {
+  theme: globalTheme.theme,
+  lang: globalLang().lang,
+};
+export const tags = ['autodocs'];

package/.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#93e6fc",
+        "activityBar.background": "#93e6fc",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#fa45d4",
+        "activityBarBadge.foreground": "#15202b",
+        "commandCenter.border": "#15202b99",
+        "sash.hoverBorder": "#93e6fc",
+        "statusBar.background": "#61dafb",
+        "statusBar.foreground": "#15202b",
+        "statusBarItem.hoverBackground": "#2fcefa",
+        "statusBarItem.remoteBackground": "#61dafb",
+        "statusBarItem.remoteForeground": "#15202b",
+        "titleBar.activeBackground": "#61dafb",
+        "titleBar.activeForeground": "#15202b",
+        "titleBar.inactiveBackground": "#61dafb99",
+        "titleBar.inactiveForeground": "#15202b99"
+    },
+    "peacock.remoteColor": "#61dafb"
+}

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(classList?.contains('icon-delphinus')).toBe(true);
-  });
-
-  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(classList?.contains('icon-delphinus')).toBe(true);
-    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(classList?.contains('icon-delphinus')).toBe(true);
-    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(classList?.contains('icon-delphinus')).toBe(true);
+  });
+
+  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(classList?.contains('icon-delphinus')).toBe(true);
+    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(classList?.contains('icon-delphinus')).toBe(true);
+    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);
+    }
+  });
+});