diff --git a/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.test.tsx b/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.test.tsx new file mode 100644 index 00000000000..f9d46b73e7f --- /dev/null +++ b/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.test.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { AltinnContentLoader } from './AltinnContentLoader'; + +describe('AltinnContentLoader', () => { + it('should render with default height and width', () => { + render(); + + const loader = screen.getByRole('img', { hidden: true }); + expect(loader).toHaveAttribute('height', '200'); + expect(loader).toHaveAttribute('width', '400'); + }); + + it('should render with custom height and width', () => { + render(); + + const loader = screen.getByRole('img', { hidden: true }); + expect(loader).toHaveAttribute('height', '300'); + expect(loader).toHaveAttribute('width', '500'); + }); + + it('should render children', () => { + render( + + + , + ); + expect(screen.getByRole('img')).toBeInTheDocument(); + }); +}); diff --git a/frontend/packages/shared/src/components/molecules/AltinnContentLoader.tsx b/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.tsx similarity index 52% rename from frontend/packages/shared/src/components/molecules/AltinnContentLoader.tsx rename to frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.tsx index d80ec5e8bbd..35a7a1a6519 100644 --- a/frontend/packages/shared/src/components/molecules/AltinnContentLoader.tsx +++ b/frontend/app-development/features/appPublish/components/AltinnContentLoader/AltinnContentLoader.tsx @@ -1,21 +1,13 @@ -import React, { type ReactNode } from 'react'; +import React, { type ReactElement } from 'react'; import type { IContentLoaderProps } from 'react-content-loader'; import ContentLoader from 'react-content-loader'; -export type IAltinnContentLoaderProps = { - /** The height of the loader, defaults to 200 */ - height?: number; - /** The width of the loader, defaults to 400 */ - width?: number; - children: ReactNode; -} & IContentLoaderProps; - export const AltinnContentLoader = ({ height, width, children, ...rest -}: IAltinnContentLoaderProps) => { +}: IContentLoaderProps): ReactElement => { return ( {children} diff --git a/frontend/app-development/features/appPublish/components/AltinnContentLoader/index.ts b/frontend/app-development/features/appPublish/components/AltinnContentLoader/index.ts new file mode 100644 index 00000000000..044a090f353 --- /dev/null +++ b/frontend/app-development/features/appPublish/components/AltinnContentLoader/index.ts @@ -0,0 +1 @@ +export { AltinnContentLoader } from './AltinnContentLoader'; diff --git a/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx b/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx index 47fe12253fb..2044105fd6a 100644 --- a/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx +++ b/frontend/app-development/features/appPublish/containers/DeploymentContainer.tsx @@ -1,6 +1,6 @@ import React, { useMemo } from 'react'; import classes from './DeploymentContainer.module.css'; -import { AltinnContentLoader } from 'app-shared/components/molecules/AltinnContentLoader'; +import { AltinnContentLoader } from '../components/AltinnContentLoader'; import { useOrgListQuery, useEnvironmentsQuery, diff --git a/frontend/app-development/features/appPublish/pages/DeployPage.tsx b/frontend/app-development/features/appPublish/pages/DeployPage.tsx index aa202fb85c2..060424df6c6 100644 --- a/frontend/app-development/features/appPublish/pages/DeployPage.tsx +++ b/frontend/app-development/features/appPublish/pages/DeployPage.tsx @@ -5,7 +5,7 @@ import { InfoCard } from '../components/InfoCard'; import { ReleaseContainer } from '../containers/ReleaseContainer'; import { useDeployPermissionsQuery, useOrgListQuery } from '../../../hooks/queries'; import { Trans, useTranslation } from 'react-i18next'; -import { AltinnContentLoader } from 'app-shared/components/molecules/AltinnContentLoader'; +import { AltinnContentLoader } from '../components/AltinnContentLoader'; import { useInvalidator } from '../../../hooks/useInvalidator'; import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams'; import { Link } from '@digdir/designsystemet-react'; diff --git a/frontend/packages/shared/src/components/molecules/AltinnContentLoader.md b/frontend/packages/shared/src/components/molecules/AltinnContentLoader.md deleted file mode 100644 index 62e11cdd691..00000000000 --- a/frontend/packages/shared/src/components/molecules/AltinnContentLoader.md +++ /dev/null @@ -1,11 +0,0 @@ -### Default - -```jsx - -``` - -### height=125 - -```jsx - -``` diff --git a/frontend/packages/shared/src/components/molecules/AltinnPopoverSimple.module.css b/frontend/packages/shared/src/components/molecules/AltinnPopoverSimple.module.css deleted file mode 100644 index 917e3f34f4a..00000000000 --- a/frontend/packages/shared/src/components/molecules/AltinnPopoverSimple.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.container { - width: 445px; - margin: 24px; -}