Rename altinn-icons to studio-icons (#11758)

* replacing altinn-icons with studio-icons

* fixing final imports

frontend/app-development/features/appPublish/components/deploy/DeployDropdown.tsx

@@ -12,7 +12,7 @@ import {
   CheckmarkCircleFillIcon,
   InformationSquareFillIcon,
   XMarkOctagonFillIcon,
-} from '@altinn/icons';
+} from '@studio/icons';
 
 export interface DeployDropdownProps {
   appDeployedVersion: string;

frontend/app-development/features/appPublish/containers/releaseContainer.tsx

@@ -6,7 +6,7 @@ import { BuildResult, BuildStatus } from 'app-shared/types/Build';
 import { Button, LegacyPopover } from '@digdir/design-system-react';
 import { CreateReleaseComponent } from '../components/createAppReleaseComponent';
 import { ReleaseComponent } from '../components/appReleaseComponent';
-import { UploadIcon, CheckmarkIcon, XMarkOctagonFillIcon } from '@altinn/icons';
+import { UploadIcon, CheckmarkIcon, XMarkOctagonFillIcon } from '@studio/icons';
 import { gitCommitPath } from 'app-shared/api/paths';
 import { useMediaQuery } from 'app-shared/hooks/useMediaQuery';
 import { useBranchStatusQuery, useAppReleasesQuery } from '../../../hooks/queries';

frontend/app-development/package.json

@@ -9,9 +9,9 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@altinn/icons": "workspace:^",
     "@mui/material": "5.14.16",
     "@reduxjs/toolkit": "1.9.7",
+    "@studio/icons": "workspace:^",
     "axios": "1.6.0",
     "classnames": "2.3.2",
     "history": "5.3.0",

frontend/jest.config.js

@@ -46,8 +46,8 @@ const config = {
     '^@altinn/ux-editor/(.*)': path.join(__dirname, 'packages/ux-editor/src/$1'),
     '^@altinn/process-editor/(.*)': path.join(__dirname, 'packages/process-editor/src/$1'),
     '^@altinn/policy-editor/(.*)': path.join(__dirname, 'packages/policy-editor/src/$1'),
+    '^@studio/icons': path.join(__dirname, 'libs/studio-icons/src/$1'),
     '^@studio/components': path.join(__dirname, 'libs/studio-components/src/$1'),
-    '^@altinn/icons': path.join(__dirname, 'libs/altinn-icons/src/$1'),
   },
   testRegex: '(\\.(test|spec))\\.(ts|tsx)$',
   moduleFileExtensions: ['ts', 'tsx', 'js'],

frontend/libs/studio-components/package.json

@@ -8,9 +8,9 @@
     "lint": "eslint \"src/components/**/*.ts*\""
   },
   "dependencies": {
-    "@altinn/icons": "^0.1.0",
     "@digdir/design-system-react": "0.38.0",
     "@digdir/design-system-tokens": "0.10.0",
+    "@studio/icons": "^0.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

frontend/libs/studio-components/src/components/StudioModal/StudioModal.tsx

@@ -3,7 +3,7 @@ import classes from './StudioModal.module.css';
 import ReactModal from 'react-modal'; // TODO - Replace with component from Designsystemet. Issue:
 import { Button } from '@digdir/design-system-react';
 import { useTranslation } from 'react-i18next';
-import { MultiplyIcon } from '@altinn/icons';
+import { MultiplyIcon } from '@studio/icons';
 
 export type StudioModalProps = {
   isOpen: boolean;

frontend/libs/altinn-icons/README.md → frontend/libs/studio-icons/README.md

@@ -1,6 +1,6 @@
-# @altinn/icons
+# @studio/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.
+Studio-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
 
@@ -13,4 +13,4 @@ All icons must stick to the same rules for their colors and sizes. We've set up
 
 ## 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.
+Currently, the `@studio/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 `@studio/icons` by adding the following dependency to their package.json: `"@studio/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/package.json → frontend/libs/studio-icons/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@altinn/icons",
+  "name": "@studio/icons",
   "packageManager": "[email protected]",
   "version": "0.1.0",
   "main": "./src/index.ts",

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

@@ -6,7 +6,7 @@ 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';
+ * import { Accordion } from '@studio/icons';
  */
 export const Accordion = (props: IconProps): JSX.Element => {
   return (

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

@@ -6,7 +6,7 @@ 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';
+ * import { Checkbox } from '@studio/icons';
  */
 export const Checkbox = (props: IconProps): JSX.Element => {
   return (

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

@@ -6,7 +6,7 @@ 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';
+ * import { Group } from '@studio/icons';
  */
 export const Group = (props: IconProps): JSX.Element => {
   return (

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

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

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

@@ -6,7 +6,7 @@ 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';
+ * import { Likert } from '@studio/icons';
  */
 export const Likert = (props: IconProps): JSX.Element => {
   return (

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

@@ -6,7 +6,7 @@ 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';
+ * import { LongText } from '@studio/icons';
  */
 export const LongText = (props: IconProps): JSX.Element => {
   return (

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

@@ -6,7 +6,7 @@ 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';
+ * import { NavBar } from '@studio/icons';
  */
 export const NavBar = (props: IconProps): JSX.Element => {
   return (

frontend/libs/altinn-icons/src/components/Paragraph/Paragraph.tsx → frontend/libs/studio-icons/src/components/Paragraph/Paragraph.tsx

@@ -6,7 +6,7 @@ import { SvgTemplate } from '../SvgTemplate';
  * @param {IconProps} props the icon props
  * @returns {JSX.Element} the icon as a react component
  * @example
- * import { Paragraph } from '@altinn/icons';
+ * import { Paragraph } from '@studio/icons';
  */
 export const Paragraph = (props: IconProps): JSX.Element => {
   return (

frontend/libs/altinn-icons/src/components/RadioButton/RadioButton.tsx → frontend/libs/studio-icons/src/components/RadioButton/RadioButton.tsx

@@ -6,7 +6,7 @@ import { SvgTemplate } from '../SvgTemplate';
  * @param {IconProps} props the icon props
  * @returns {JSX.Element} the icon as a react component
  * @example
- * import { RadioButton } from '@altinn/icons';
+ * import { RadioButton } from '@studio/icons';
  */
 export const RadioButton = (props: IconProps): JSX.Element => {
   return (

frontend/libs/altinn-icons/src/components/Select/Select.tsx → frontend/libs/studio-icons/src/components/Select/Select.tsx

@@ -6,7 +6,7 @@ import { SvgTemplate } from '../SvgTemplate';
  * @param {IconProps} props the icon props
  * @returns {JSX.Element} the icon as a react component
  * @example
- * import { Select } from '@altinn/icons';
+ * import { Select } from '@studio/icons';
  */
 export const Select = (props: IconProps): JSX.Element => {
   return (

frontend/libs/altinn-icons/src/components/ShortText/ShortText.tsx → frontend/libs/studio-icons/src/components/ShortText/ShortText.tsx

@@ -6,7 +6,7 @@ import { SvgTemplate } from '../SvgTemplate';
  * @param {IconProps} props the icon props
  * @returns {JSX.Element} the icon as a react component
  * @example
- * import { ShortText } from '@altinn/icons';
+ * import { ShortText } from '@studio/icons';
  */
 export const ShortText = ({ ...props }: IconProps): JSX.Element => {
   return (

frontend/libs/altinn-icons/src/components/Title/Title.tsx → frontend/libs/studio-icons/src/components/Title/Title.tsx

@@ -6,7 +6,7 @@ import { SvgTemplate } from '../SvgTemplate';
  * @param {IconProps} props the icon props
  * @returns {JSX.Element} the icon as a react component
  * @example
- * import { Title } from '@altinn/icons';
+ * import { Title } from '@studio/icons';
  */
 export const Title = (props: IconProps): JSX.Element => {
   return (

frontend/libs/altinn-icons/src/index.ts → frontend/libs/studio-icons/src/index.ts

@@ -1,4 +1,4 @@
-// Re-export all icons from @navikt/aksel-icons to make them available for consumers of altinn/icons
+// Re-export all icons from @navikt/aksel-icons to make them available for consumers of studio/icons
 export * from '@navikt/aksel-icons';
 
 export * from './components';

frontend/packages/process-editor/src/components/Canvas/CanvasActionMenu/CanvasActionMenu.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import classes from './CanvasActionMenu.module.css';
 import { useTranslation } from 'react-i18next';
-import { CogIcon, EyeFillIcon } from '@altinn/icons';
+import { CogIcon, EyeFillIcon } from '@studio/icons';
 import { Button } from '@digdir/design-system-react';
 import { useBpmnContext } from '../../../contexts/BpmnContext';
 

frontend/packages/schema-editor/src/components/SchemaInspector/EnumField.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Button, Textfield } from '@digdir/design-system-react';
 import classes from './EnumField.module.css';
 import { useTranslation } from 'react-i18next';
-import { TrashIcon } from '@altinn/icons';
+import { TrashIcon } from '@studio/icons';
 
 export type EnumFieldProps = {
   path: string;

frontend/packages/shared/src/components/GiteaHeader/ThreeDotsMenu/CloneModal/CloneModal.tsx

@@ -8,7 +8,7 @@ import { Button, LegacyTextField } from '@digdir/design-system-react';
 import { useTranslation } from 'react-i18next';
 import { useDatamodelsXsdQuery } from 'app-shared/hooks/queries';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
-import { InformationSquareFillIcon } from '@altinn/icons';
+import { InformationSquareFillIcon } from '@studio/icons';
 
 export interface ICloneModalProps {
   anchorEl: Element;

frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { CheckmarkIcon, TrashIcon, PencilWritingIcon } from '@altinn/icons';
+import { CheckmarkIcon, TrashIcon, PencilWritingIcon } from '@studio/icons';
 import { useText } from '../../../../ux-editor/src/hooks/index';
 import { Button, ButtonProps } from '@digdir/design-system-react';
 import classes from './InputActionWrapper.module.css';

frontend/packages/shared/src/components/TreeView/TreeViewItem/TreeViewItem.tsx

@@ -21,7 +21,7 @@ import {
 } from '../utils/domUtils';
 import { AnimateHeight } from 'app-shared/components/AnimateHeight';
 import { TreeViewItemContext } from './TreeViewItemContext';
-import { ChevronDownIcon, ChevronRightIcon } from '@altinn/icons';
+import { ChevronDownIcon, ChevronRightIcon } from '@studio/icons';
 import { Button } from '@digdir/design-system-react';
 import classes from './TreeViewItem.module.css';
 import cn from 'classnames';

frontend/packages/ux-editor/package.json

@@ -4,9 +4,9 @@
   "version": "1.0.1",
   "author": "Altinn",
   "dependencies": {
-    "@altinn/icons": "workspace:^",
     "@mui/material": "5.14.16",
     "@reduxjs/toolkit": "1.9.7",
+    "@studio/icons": "workspace:^",
     "axios": "1.6.0",
     "classnames": "2.3.2",
     "react": "18.2.0",

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.tsx

@@ -6,7 +6,7 @@ import { useText } from '../../../hooks';
 import { SelectDataModelComponent } from '../SelectDataModelComponent';
 import { useDatamodelMetadataQuery } from '../../../hooks/queries/useDatamodelMetadataQuery';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
-import { LinkIcon } from '@altinn/icons';
+import { LinkIcon } from '@studio/icons';
 import { Button, Paragraph } from '@digdir/design-system-react';
 import classes from './EditDataModelBindings.module.css';
 import { InputActionWrapper } from 'app-shared/components/InputActionWrapper';

frontend/packages/ux-editor/src/containers/DesignView/FormTree/FormItem/FormItemTitle/FormItemTitle.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useCallback } from 'react';
 import { Button } from '@digdir/design-system-react';
 import { useTranslation } from 'react-i18next';
-import { TrashIcon } from '@altinn/icons';
+import { TrashIcon } from '@studio/icons';
 import classes from './FormItemTitle.module.css';
 import { FormComponent } from '../../../../../types/FormComponent';
 import { FormContainer } from '../../../../../types/FormContainer';

frontend/packages/ux-editor/src/data/formItemConfig.ts

@@ -29,7 +29,7 @@ import {
   TableIcon,
   TasklistIcon,
   Title,
-} from '@altinn/icons';
+} from '@studio/icons';
 
 export type FormItemConfig<T extends ComponentType = ComponentType> = {
   name: T;

yarn.lock

@@ -65,23 +65,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@altinn/icons@npm:^0.1.0, @altinn/icons@workspace:^, @altinn/icons@workspace:frontend/libs/altinn-icons":
-  version: 0.0.0-use.local
-  resolution: "@altinn/icons@workspace:frontend/libs/altinn-icons"
-  dependencies:
-    "@navikt/aksel-icons": "npm:^5.6.1"
-    "@testing-library/jest-dom": "npm:^6.1.3"
-    "@testing-library/react": "npm:^14.0.0"
-    "@types/jest": "npm:^29.5.5"
-    jest: "npm:^29.7.0"
-    jest-environment-jsdom: "npm:^29.7.0"
-    react: "npm:^18.2.0"
-    react-dom: "npm:^18.2.0"
-    ts-jest: "npm:^29.1.1"
-    typescript: "npm:^5.2.2"
-  languageName: unknown
-  linkType: soft
-
 "@altinn/policy-editor@workspace:frontend/packages/policy-editor":
   version: 0.0.0-use.local
   resolution: "@altinn/policy-editor@workspace:frontend/packages/policy-editor"
@@ -3823,9 +3806,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@studio/components@workspace:frontend/libs/studio-components"
   dependencies:
-    "@altinn/icons": "npm:^0.1.0"
     "@digdir/design-system-react": "npm:0.38.0"
     "@digdir/design-system-tokens": "npm:0.10.0"
+    "@studio/icons": "npm:^0.1.0"
     "@testing-library/jest-dom": "npm:^6.1.3"
     "@testing-library/react": "npm:^14.0.0"
     "@types/jest": "npm:^29.5.5"
@@ -3839,6 +3822,23 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@studio/icons@npm:^0.1.0, @studio/icons@workspace:^, @studio/icons@workspace:frontend/libs/studio-icons":
+  version: 0.0.0-use.local
+  resolution: "@studio/icons@workspace:frontend/libs/studio-icons"
+  dependencies:
+    "@navikt/aksel-icons": "npm:^5.6.1"
+    "@testing-library/jest-dom": "npm:^6.1.3"
+    "@testing-library/react": "npm:^14.0.0"
+    "@types/jest": "npm:^29.5.5"
+    jest: "npm:^29.7.0"
+    jest-environment-jsdom: "npm:^29.7.0"
+    react: "npm:^18.2.0"
+    react-dom: "npm:^18.2.0"
+    ts-jest: "npm:^29.1.1"
+    typescript: "npm:^5.2.2"
+  languageName: unknown
+  linkType: soft
+
 "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0":
   version: 8.0.0
   resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:8.0.0"
@@ -5713,9 +5713,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "app-development@workspace:frontend/app-development"
   dependencies:
-    "@altinn/icons": "workspace:^"
     "@mui/material": "npm:5.14.16"
     "@reduxjs/toolkit": "npm:1.9.7"
+    "@studio/icons": "workspace:^"
     axios: "npm:1.6.0"
     classnames: "npm:2.3.2"
     cross-env: "npm:7.0.3"
@@ -17087,9 +17087,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "ux-editor@workspace:frontend/packages/ux-editor"
   dependencies:
-    "@altinn/icons": "workspace:^"
     "@mui/material": "npm:5.14.16"
     "@reduxjs/toolkit": "npm:1.9.7"
+    "@studio/icons": "workspace:^"
     axios: "npm:1.6.0"
     classnames: "npm:2.3.2"
     jest: "npm:29.7.0"