delete StudioBetaTag component and add central style

frontend/app-development/features/overview/components/Navigation/Navigation.test.tsx

@@ -51,7 +51,7 @@ describe('Navigation', () => {
     });
   });
 
-  it('renders "beta" tag for menu items that are tagges as beta', () => {
+  it('renders isBeta className for menu items that are tagged as beta', () => {
     const betaItems = topBarMenuItem.filter((item) => !!item.isBeta);
 
     // ensure any feature flags are toggled on
@@ -62,7 +62,7 @@ describe('Navigation', () => {
     });
 
     betaItems.forEach((link) => {
-      expect(screen.getByRole('link', { name: `${textMock(link.key)} Beta` })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: textMock(link.key) })).toHaveClass('isBeta');
     });
   });
 });

frontend/app-development/features/overview/components/Navigation/Navigation.tsx

@@ -4,8 +4,10 @@ import { useTranslation } from 'react-i18next';
 import { Heading } from '@digdir/designsystemet-react';
 import { getFilteredMenuListForOverviewPage } from 'app-development/utils/headerMenu/headerMenuUtils';
 import { Link } from 'react-router-dom';
-import { StudioBetaTag } from '@studio/components';
+import cn from 'classnames';
+import { StudioBetaTagStyles } from '@studio/components';
 
+debugger;
 export const Navigation = () => {
   const { t } = useTranslation();
 
@@ -19,10 +21,13 @@ export const Navigation = () => {
       <div className={classes.links}>
         {menuItems.map((menuItem) => {
           return (
-            <Link key={menuItem.key} to={`../${menuItem.link}`} className={classes.link}>
+            <Link
+              key={menuItem.key}
+              to={`../${menuItem.link}`}
+              className={cn(classes.link, menuItem.isBeta && StudioBetaTagStyles.isBeta)}
+            >
               <menuItem.icon className={classes.icon} />
               <span>{t(menuItem.key)}</span>
-              {menuItem.isBeta && <StudioBetaTag />}
             </Link>
           );
         })}

frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.test.tsx

@@ -21,7 +21,7 @@ describe('LargeNavigationMenu', () => {
     renderLargeNavigationMenu();
 
     menuItems.forEach((item) => {
-      expect(screen.getByText(item.name)).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: item.name })).toBeInTheDocument();
     });
   });
 
@@ -30,26 +30,20 @@ describe('LargeNavigationMenu', () => {
       routerInitialEntries: [menuItems[0].link],
     });
 
-    const activeItem = screen.getByText(menuItems[0].name);
+    const activeItem = screen.getByRole('link', { name: menuItems[0].name });
     expect(activeItem).toHaveClass('active');
   });
 
-  it('should display the beta tag for items marked as beta', () => {
+  it('should set "isBeta" className for menu item that is beta', () => {
     renderLargeNavigationMenu();
-
-    const betaTags = screen.getAllByText('Beta');
-
-    expect(betaTags.length).toEqual(menuItems.filter((item) => item.isBeta).length);
+    const menuItem = screen.getByRole('link', { name: menuItems[0].name });
+    expect(menuItem).toHaveClass('isBeta');
   });
 
-  it('should not display the beta tag for items not marked as beta', () => {
+  it('should not set "isBeta" className for menu item that is not beta', () => {
     renderLargeNavigationMenu();
-
-    const betaTags = screen.getAllByText('Beta');
-
-    expect(menuItems.length - betaTags.length).toEqual(
-      menuItems.filter((item) => !item.isBeta).length,
-    );
+    const menuItem = screen.getByRole('link', { name: menuItems[1].name });
+    expect(menuItem).not.toHaveClass('isBeta');
   });
 });
 

frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.tsx

@@ -2,7 +2,7 @@ import React, { type ReactElement } from 'react';
 import classes from './LargeNavigationMenu.module.css';
 import cn from 'classnames';
 import { NavLink, useLocation } from 'react-router-dom';
-import { StudioBetaTag, StudioPageHeader } from '@studio/components';
+import { StudioPageHeader } from '@studio/components';
 import { extractLastRouterParam } from 'app-development/utils/headerMenu/headerMenuUtils';
 import { type NavigationMenuItem } from 'app-development/types/HeaderMenu/NavigationMenuItem';
 import { usePageHeaderContext } from 'app-development/contexts/PageHeaderContext';
@@ -46,7 +46,6 @@ const HeaderButtonListItem = ({ menuItem }: HeaderButtonListItemProps): ReactEle
             >
               {menuItem.name}
             </span>
-            {menuItem.isBeta && <StudioBetaTag />}
           </NavLink>
         )}
       />

frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenuItem/SmallHeaderMenuItem.test.tsx

@@ -16,7 +16,7 @@ const mockMenuItem: NavigationMenuSmallItem = {
     href: menuItemLink,
     openInNewTab: false,
   },
-  isBeta: true,
+  isBeta: false,
 };
 
 const mockOnClick = jest.fn();
@@ -32,7 +32,7 @@ describe('SmallHeaderMenuItem', () => {
     renderSmallHeaderMenuItem();
 
     const linkElement = screen.getByRole('menuitem', {
-      name: `${textMock(menuItemName)} Beta`,
+      name: textMock(menuItemName),
     });
     expect(linkElement).toBeInTheDocument();
     expect(linkElement).toHaveAttribute('href', menuItemLink);
@@ -44,17 +44,28 @@ describe('SmallHeaderMenuItem', () => {
     });
 
     const linkElement = screen.getByRole('menuitem', {
-      name: `${textMock(menuItemName)} Beta`,
+      name: textMock(menuItemName),
     });
     expect(linkElement).toHaveClass('active');
   });
 
+  it('should add "isBeta" class when menuItem is beta', () => {
+    renderSmallHeaderMenuItem({
+      componentProps: { menuItem: { ...mockMenuItem, isBeta: true } },
+    });
+
+    const linkElement = screen.getByRole('menuitem', {
+      name: textMock(menuItemName),
+    });
+    expect(linkElement).toHaveClass('isBeta');
+  });
+
   it('should call onClick when the NavLink is clicked', async () => {
     const user = userEvent.setup();
     renderSmallHeaderMenuItem();
 
     const linkElement = screen.getByRole('menuitem', {
-      name: `${textMock(menuItemName)} Beta`,
+      name: textMock(menuItemName),
     });
     await user.click(linkElement);
 
@@ -76,7 +87,7 @@ describe('SmallHeaderMenuItem', () => {
     });
 
     const linkElement = screen.getByRole('menuitem', {
-      name: `${textMock('testMenuItem')} Beta`,
+      name: textMock('testMenuItem'),
     });
     expect(linkElement).toHaveAttribute('target', '_blank');
     expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');

frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenuItem/SmallHeaderMenuItem.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { DropdownMenu } from '@digdir/designsystemet-react';
 import { extractLastRouterParam } from 'app-development/utils/headerMenu/headerMenuUtils';
 import { type NavigationMenuSmallItem } from 'app-development/types/HeaderMenu/NavigationMenuSmallItem';
-import { StudioBetaTag } from '@studio/components';
+import { StudioBetaTagStyles } from '@studio/components';
 
 export type SmallHeaderMenuItemProps = {
   menuItem: NavigationMenuSmallItem;
@@ -35,13 +35,13 @@ export const SmallHeaderMenuItem = ({
   return (
     <DropdownMenu.Item key={menuItem.name} asChild className={linkItemClassName}>
       <NavLink
+        className={menuItem.isBeta && StudioBetaTagStyles.isBeta}
         to={menuItem.action.href}
         onClick={onClick}
         target={menuItem.action.openInNewTab ? '_blank' : ''}
         rel={menuItem.action.openInNewTab ? 'noopener noreferrer' : ''}
       >
         {t(menuItem.name)}
-        {menuItem.isBeta && <StudioBetaTag />}
       </NavLink>
     </DropdownMenu.Item>
   );

frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderHeaderLink/StudioPageHeaderHeaderLink.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { RenderResult } from '@testing-library/react';
 import { render, screen } from '@testing-library/react';
 import type { StudioPageHeaderHeaderLinkProps } from './StudioPageHeaderHeaderLink';
-import { defaultAriaDescription, StudioPageHeaderHeaderLink } from './StudioPageHeaderHeaderLink';
+import { StudioPageHeaderHeaderLink } from './StudioPageHeaderHeaderLink';
 
 // Test data:
 const linkText: string = 'Text';
@@ -24,26 +24,14 @@ describe('StudioPageHeaderHeaderLink', () => {
     expect(screen.getByRole('link', { name: linkText })).toBeInTheDocument();
   });
 
-  it('Renders the link with betaContainer when isBeta is true', () => {
-    renderStudioPageHeaderHeaderLink({ isBeta: true });
-    expect(screen.getByRole('link', { name: linkText })).toHaveClass('betaContainer');
+  it('Renders the link without isBeta className by default', () => {
+    renderStudioPageHeaderHeaderLink();
+    expect(screen.getByRole('link', { name: linkText })).not.toHaveClass('isBeta');
   });
 
-  it('Renders with default aria-description by default when isBeta is true', () => {
+  it('Renders the link with isBeta className when isBeta is true', () => {
     renderStudioPageHeaderHeaderLink({ isBeta: true });
-    expect(screen.getByRole('link', { name: linkText })).toHaveAttribute(
-      'aria-description',
-      defaultAriaDescription,
-    );
-  });
-
-  it('Renders with custom aria-description when provided', () => {
-    const customAriaDescription = 'customAriaDescription';
-    renderStudioPageHeaderHeaderLink({ isBeta: true, 'aria-description': customAriaDescription });
-    expect(screen.getByRole('link', { name: linkText })).toHaveAttribute(
-      'aria-description',
-      customAriaDescription,
-    );
+    expect(screen.getByRole('link', { name: linkText })).toHaveClass('isBeta');
   });
 
   it('Passes the colour and variant classes to the link', () => {

frontend/libs/studio-components/src/components/StudioPageHeader/StudioPageHeaderHeaderLink/StudioPageHeaderHeaderLink.tsx

@@ -4,36 +4,32 @@ import { type StudioPageHeaderColor } from '../types/StudioPageHeaderColor';
 import cn from 'classnames';
 import { type StudioPageHeaderVariant } from '../types/StudioPageHeaderVariant';
 import linkClasses from './StudioPageHeaderHeaderLink.module.css';
+import { StudioBetaTagStyles } from '@studio/components';
 
 export type StudioPageHeaderHeaderLinkProps = {
   color: StudioPageHeaderColor;
   variant: StudioPageHeaderVariant;
   renderLink: (props: HTMLAttributes<HTMLAnchorElement>) => ReactElement;
   isBeta?: boolean;
-  'aria-description'?: string;
 } & HTMLAttributes<HTMLAnchorElement>;
 
-export const defaultAriaDescription = 'This feature is in beta';
-
 export function StudioPageHeaderHeaderLink({
   color,
   variant,
   className: givenClass,
   renderLink,
   isBeta,
-  'aria-description': ariaDescription = defaultAriaDescription,
 }: StudioPageHeaderHeaderLinkProps): ReactElement {
   const className = cn(
     commonClasses.linkOrButton,
     commonClasses[variant],
     commonClasses[color],
-    isBeta && commonClasses['betaContainer'],
+    isBeta && StudioBetaTagStyles.isBeta,
     givenClass,
     linkClasses.link,
   );
   const props: HTMLAttributes<HTMLAnchorElement> = {
     className,
-    'aria-description': isBeta ? ariaDescription : undefined,
   };
   return renderLink(props);
 }

frontend/libs/studio-components/src/components/StudioPageHeader/common.module.css

@@ -38,17 +38,3 @@
 .linkOrButton.preview.light:hover {
   background-color: var(--studio-button-preview-light);
 }
-
-.betaContainer {
-  display: flex;
-  align-items: center;
-  gap: var(--fds-spacing-1);
-}
-
-.isBeta {
-  background-color: var(--fds-semantic-surface-info-subtle);
-  color: var(--fds-semantic-text-neutral-default);
-  border-radius: var(--fds-border_radius-large);
-  padding: var(--fds-spacing-1);
-  font-size: var(--fds-sizing-3);
-}

frontend/libs/studio-components/src/components/index.ts

@@ -2,7 +2,6 @@ export * from './StudioActionCloseButton';
 export * from './StudioAlert';
 export * from './StudioAnimateHeight';
 export * from './StudioAvatar';
-export * from './StudioBetaTag';
 export * from './StudioBlobDownloader';
 export * from './StudioBooleanToggleGroup';
 export * from './StudioBreadcrumbs';

frontend/libs/studio-components/src/index.ts

@@ -1,3 +1,6 @@
+import styles from './style/StudioBetaTag.module.css';
+
 export * from './components';
 export * from './hooks';
 export * from './style/studio-variables.css';
+export { styles as StudioBetaTagStyles };

frontend/libs/studio-components/src/style/StudioBetaTag.module.css

@@ -0,0 +1,9 @@
+.isBeta:after {
+  content: 'Beta';
+  background-color: var(--fds-semantic-surface-info-subtle);
+  color: var(--fds-semantic-text-neutral-default);
+  border-radius: var(--fds-border_radius-large);
+  padding: var(--fds-spacing-1);
+  font-size: var(--fds-sizing-3);
+  margin-left: var(--fds-spacing-1);
+}