fix: display beta tag with css

Altinn · Jan 21, 2025 · 894c94c · 894c94c
1 parent 4e91be7
commit 894c94c
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 24 deletions.
diff --git a/frontend/app-development/enums/HeaderMenuItemKey.ts b/frontend/app-development/enums/HeaderMenuItemKey.ts
@@ -5,5 +5,6 @@ export enum HeaderMenuItemKey {
   Text = 'top_menu.texts',
   Deploy = 'top_menu.deploy',
   ProcessEditor = 'top_menu.process_editor',
+  ContentLibrary = 'top_menu.content_library',
   None = '',
 }
diff --git a/...tend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.module.css b/...tend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.module.css
@@ -20,6 +20,10 @@
 }
 
 .betaTag {
-  min-height: min-content;
-  padding: 0 var(--fds-spacing-1);
+  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);
 }
diff --git a/frontend/app-development/layout/PageHeader/LargeNavigationMenu/LargeNavigationMenu.tsx b/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';
@@ -36,6 +36,7 @@ const HeaderButtonListItem = ({ menuItem }: HeaderButtonListItemProps): ReactEle
       <StudioPageHeader.HeaderLink
         color='dark'
         variant={variant}
+        isBeta={menuItem.isBeta}
         renderLink={(props) => (
           <NavLink to={menuItem.link} {...props}>
             <span
@@ -45,7 +46,7 @@ const HeaderButtonListItem = ({ menuItem }: HeaderButtonListItemProps): ReactEle
             >
               {menuItem.name}
             </span>
-            {menuItem.isBeta && <StudioBetaTag className={classes.betaTag} />}
+            {menuItem.isBeta && <span className={classes.betaTag}>Beta</span>}
           </NavLink>
         )}
       />

diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1165,6 +1165,7 @@
   "top_bar.group_overview": "Oversikt",
   "top_bar.group_tools": "Verktøy",
   "top_menu.about": "Oversikt",
+  "top_menu.content_library": "Bibliotek",
   "top_menu.create": "Utforming",
   "top_menu.data_model": "Datamodell",
   "top_menu.deploy": "Publiser",

diff --git a/frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.stories.tsx b/frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.stories.tsx
@@ -7,18 +7,8 @@ type Story = StoryFn<typeof StudioBetaTag>;
 const meta: Meta = {
   title: 'Components/StudioBetaTag',
   component: StudioBetaTag,
-  argTypes: {
-    size: {
-      control: 'radio',
-      options: ['sm', 'md', 'lg'],
-    },
-  },
 };
 
-export const Preview: Story = (args): React.ReactElement => <StudioBetaTag {...args} />;
-
-Preview.args = {
-  size: 'sm',
-};
+export const Preview: Story = (): React.ReactElement => <StudioBetaTag />;
 
 export default meta;
diff --git a/frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.test.tsx b/frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { StudioBetaTag, type StudioBetaTagProps } from './StudioBetaTag';
+import { StudioBetaTag } from './StudioBetaTag';
 import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
 
 describe('StudioBetaTag', () => {

diff --git a/frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.tsx b/frontend/libs/studio-components/src/components/StudioBetaTag/StudioBetaTag.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { StudioTag, type StudioTagProps } from '../StudioTag';
+import commonClasses from '../StudioPageHeader/common.module.css';
+import cn from 'classnames';
 
-export type StudioBetaTagProps = Omit<StudioTagProps, 'color' | 'children'>;
+type StudioBetaTag = {
+  className?: string;
+};
 
-export const StudioBetaTag = ({ size = 'sm', ...rest }: StudioBetaTagProps) => {
-  return (
-    <StudioTag color='info' size={size} {...rest}>
-      Beta
-    </StudioTag>
-  );
+export const StudioBetaTag = ({ className: givenClass }: StudioBetaTag): React.ReactElement => {
+  const className = cn(commonClasses['isBeta'], givenClass);
+  return <div className={className}>Beta</div>;
 };
diff --git a/...src/components/StudioPageHeader/StudioPageHeaderHeaderLink/StudioPageHeaderHeaderLink.tsx b/...src/components/StudioPageHeader/StudioPageHeaderHeaderLink/StudioPageHeaderHeaderLink.tsx
@@ -9,18 +9,21 @@ export type StudioPageHeaderHeaderLinkProps = {
   color: StudioPageHeaderColor;
   variant: StudioPageHeaderVariant;
   renderLink: (props: HTMLAttributes<HTMLAnchorElement>) => ReactElement;
+  isBeta?: boolean;
 } & HTMLAttributes<HTMLAnchorElement>;
 
 export function StudioPageHeaderHeaderLink({
   color,
   variant,
   className: givenClass,
   renderLink,
+  isBeta,
 }: StudioPageHeaderHeaderLinkProps): ReactElement {
   const className = cn(
     commonClasses.linkOrButton,
     commonClasses[variant],
     commonClasses[color],
+    isBeta && commonClasses['betaContainer'],
     givenClass,
     linkClasses.link,
   );

diff --git a/frontend/libs/studio-components/src/components/StudioPageHeader/common.module.css b/frontend/libs/studio-components/src/components/StudioPageHeader/common.module.css
@@ -38,3 +38,16 @@
 .linkOrButton.preview.light:hover {
   background-color: var(--studio-button-preview-light);
 }
+
+.betaContainer {
+  display: flex;
+  align-items: center;
+}
+
+.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);
+}