feat(AltinnIcons): new library to deal with altinn-icons (#11267)

altinn-icons library

frontend/app-development/package.json

@@ -9,6 +9,7 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@altinn/icons": "workspace:^",
     "@mui/material": "5.14.11",
     "@reduxjs/toolkit": "1.9.6",
     "axios": "1.5.1",

frontend/language/src/en.json

@@ -1195,4 +1195,4 @@
   "validation_errors.pattern": "Wrong format or value",
   "validation_errors.required": "Field is required",
   "validation_errors.value_as_url": "Invalid url"
-}
+}

frontend/libs/altinn-icons/README.md

@@ -0,0 +1,16 @@
+# @altinn/icons
+
+Altinn-Icons is a tool that wraps around `@navikt/aksel-icons`, giving you access to Aksel's icons and adding Altinn's custom icons. It's great for developers and designers because they can use `@navikt/aksel-icons` for common tasks and seamlessly switch to Altinn's unique icons when required. This blend of resources ensures your user interfaces look great, stay consistent, and remain flexible in terms of icon choices.
+
+## Contribute with new Icons
+
+All icons must stick to the same rules for their colors and sizes. We've set up tests that go through each icon to make sure they're the right width, height, color, and view. If a new icon doesn't follow these rules, the tests will catch it and let you know. Here are the rules:
+
+- Icons should be 24 pixels wide and 24 pixels tall, `width="24" height="24"`.
+- The viewbox should be `viewbox="0 0 24 24"`.
+- All colors should always be currentColor.
+- All icons should use the shared `IconProps`, to ensure consistency in the icon API.
+
+## How to install Altinn Icons
+
+Currently, the `@altinn/icons` package resides as a local package within the Altinn Studio repository. This enables all packages and apps within the Altinn Studio repository to install `@altinn/icons` by adding the following dependency to their package.json: `"@altinn/icons": "workspace:^"`, followed by running `yarn install`. The advantage of this setup is that it allows us to easily publish the package to NPM in the future.

frontend/libs/altinn-icons/jest.config.json

@@ -0,0 +1,7 @@
+{
+  "testEnvironment": "jsdom",
+  "transform": {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  "setupFilesAfterEnv": ["./setupTests.ts"]
+}

frontend/libs/altinn-icons/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@altinn/icons",
+  "packageManager": "yarn@3.6.3",
+  "version": "0.1.0",
+  "main": "./src/index.ts",
+  "scripts": {
+    "test": "jest"
+  },
+  "dependencies": {
+    "@navikt/aksel-icons": "^5.6.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
+  }
+}

frontend/libs/altinn-icons/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

frontend/libs/altinn-icons/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IconProps } from '../../types/IconProps';
+import { SvgTemplate } from '../SvgTemplate';
+
+/**
+ * @param {IconProps} props the icon props
+ * @returns {JSX.Element} the icon as a react component
+ * @example
+ * import { Accordion } from '@altinn/icons';
+ */
+export const Accordion = (props: IconProps): JSX.Element => {
+  return (
+    <SvgTemplate {...props}>
+      <path
+        d='M8.44434 10.1797L11.9375 13.6797L15.5554 10.1797'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path d='M4 19H20' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+      <path d='M4 5H20' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+    </SvgTemplate>
+  );
+};

frontend/libs/altinn-icons/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion } from './Accordion';

frontend/libs/altinn-icons/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconProps } from '../../types/IconProps';
+import { SvgTemplate } from '../SvgTemplate';
+
+/**
+ * @param {IconProps} props the icon props
+ * @returns {JSX.Element} the icon as a react component
+ * @example
+ * import { Checkbox } from '@altinn/icons';
+ */
+export const Checkbox = (props: IconProps): JSX.Element => {
+  return (
+    <SvgTemplate {...props}>
+      <rect x='4' y='4' width='16' height='16' rx='3' stroke='currentColor' strokeWidth='1.5' />
+      <path
+        d='M8.39258 11.1729L11.2534 14.177'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M15.6074 9.82324L11.2535 14.1772'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+    </SvgTemplate>
+  );
+};

frontend/libs/altinn-icons/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

frontend/libs/altinn-icons/src/components/Group/Group.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconProps } from '../../types/IconProps';
+import { SvgTemplate } from '../SvgTemplate';
+
+/**
+ * @param {IconProps} props the icon props
+ * @returns {JSX.Element} the icon as a react component
+ * @example
+ * import { Group } from '@altinn/icons';
+ */
+export const Group = (props: IconProps): JSX.Element => {
+  return (
+    <SvgTemplate {...props}>
+      <rect
+        x='4.42725'
+        y='4.90283'
+        width='16'
+        height='16'
+        rx='3'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeDasharray='3 3'
+      />
+    </SvgTemplate>
+  );
+};

frontend/libs/altinn-icons/src/components/Group/index.ts

@@ -0,0 +1 @@
+export { Group } from './Group';

frontend/libs/altinn-icons/src/components/Icons.test.tsx

@@ -0,0 +1,35 @@
+// This test file is used to test that all icons in the altinn-icons module
+import { render, screen } from '@testing-library/react';
+import * as AltinnIcons from './index';
+import React from 'react';
+
+// Get all icon names from the AltinnIcons module
+const altinnIcons = Object.keys(AltinnIcons);
+
+describe('AltinnIcons', () => {
+  it.each(altinnIcons)('should render %s icon with correct attributes', (iconName) => {
+    const IconComponent = AltinnIcons[iconName];
+    render(<IconComponent role='img' title='icon-title' />);
+
+    const iconElement = screen.getByRole('img');
+
+    expect(iconElement).toHaveAttribute('width', '24');
+    expect(iconElement).toHaveAttribute('height', '24');
+    expect(iconElement).toHaveAttribute('viewBox', '0 0 24 24');
+  });
+
+  it.each(altinnIcons)('should render %s icon with title-tag', (iconName) => {
+    const IconComponent = AltinnIcons[iconName];
+    render(<IconComponent title='icon-title' />);
+    expect(screen.getByTitle('icon-title')).toBeInTheDocument();
+  });
+
+  it.each(altinnIcons)('should be possible to pass SVGElements props to icon %s', (iconName) => {
+    const IconComponent = AltinnIcons[iconName];
+    render(<IconComponent role='img' className='demoClass' />);
+
+    const iconElement = screen.getByRole('img');
+
+    expect(iconElement).toHaveClass('demoClass');
+  });
+});

frontend/libs/altinn-icons/src/components/Likert/Likert.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { IconProps } from '../../types/IconProps';
+import { SvgTemplate } from '../SvgTemplate';
+
+/**
+ * @param {IconProps} props the icon props
+ * @returns {JSX.Element} the icon as a react component
+ * @example
+ * import { Likert } from '@altinn/icons';
+ */
+export const Likert = (props: IconProps): JSX.Element => {
+  return (
+    <SvgTemplate {...props}>
+      <path
+        d='M4.43774 12.9028L19.9998 12.9028'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M6.71973 8.0918L7.71973 8.0918'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M6.71973 17.0181L7.71973 17.0181'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M10.416 8.0918L11.416 8.0918'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M10.416 17.0181L11.416 17.0181'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M14.1121 8.0918L15.1121 8.0918'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M14.1121 17.0181L15.1121 17.0181'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M17.8083 8.0918L18.8083 8.0918'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M17.8083 17.0181L18.8083 17.0181'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M4.10965 4.0049L12.2432 4.00488L20 4.0049'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M3.99999 4.00146L4 19.9982'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+    </SvgTemplate>
+  );
+};

frontend/libs/altinn-icons/src/components/Likert/index.ts

@@ -0,0 +1 @@
+export { Likert } from './Likert';

frontend/libs/altinn-icons/src/components/LongText/LongText.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { IconProps } from '../../types/IconProps';
+import { SvgTemplate } from '../SvgTemplate';
+
+/**
+ * @param {IconProps} props the icon props
+ * @returns {JSX.Element} the icon as a react component
+ * @example
+ * import { LongText } from '@altinn/icons';
+ */
+export const LongText = (props: IconProps): JSX.Element => {
+  return (
+    <SvgTemplate {...props}>
+      <rect
+        x='3.95972'
+        y='4.76318'
+        width='18'
+        height='16'
+        rx='3'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6.95972 14.4292H18.9597'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M6.95972 11.2388H18.9597'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M6.95972 8.04834H18.9597'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+      <path
+        d='M6.96069 17.4292H12.9607'
+        stroke='currentColor'
+        strokeWidth='1.5'
+        strokeLinecap='round'
+      />
+    </SvgTemplate>
+  );
+};

frontend/libs/altinn-icons/src/components/LongText/index.ts

@@ -0,0 +1 @@
+export { LongText } from './LongText';

frontend/libs/altinn-icons/src/components/NavBar/NavBar.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { IconProps } from '../../types/IconProps';
+import { SvgTemplate } from '../SvgTemplate';
+
+/**
+ * @param {IconProps} props the icon props
+ * @returns {JSX.Element} the icon as a react component
+ * @example
+ * import { NavBar } from '@altinn/icons';
+ */
+export const NavBar = (props: IconProps): JSX.Element => {
+  return (
+    <SvgTemplate {...props}>
+      <path
+        d='M8.42627 11.8654C8.42627 12.7101 7.7547 13.3948 6.92627 13.3948C6.09784 13.3948 5.42627 12.7101 5.42627 11.8654C5.42627 11.0207 6.09784 10.3359 6.92627 10.3359C7.7547 10.3359 8.42627 11.0207 8.42627 11.8654Z'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <ellipse
+        cx='12.5'
+        cy='11.8653'
+        rx='0.5'
+        ry='0.509815'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <ellipse
+        cx='18.0737'
+        cy='11.8653'
+        rx='0.5'
+        ry='0.509815'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path d='M4 19H20' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+      <path d='M4 5H20' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+    </SvgTemplate>
+  );
+};

frontend/libs/altinn-icons/src/components/NavBar/index.ts

@@ -0,0 +1 @@
+export { NavBar } from './NavBar';