Update dependency @digdir/design-system-react to v0.53.12 (#12818)

* Update dependency @digdir/design-system-react to v0.53.12 Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: davidovrelid.com <[email protected]>
Altinn · Jul 1, 2024 · 6f6feb7 · 6f6feb7
1 parent 3d6a324
commit 6f6feb7
Show file tree

Hide file tree

Showing 41 changed files with 385 additions and 313 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -8,3 +8,4 @@ yarn.lock
 .eslintignore
 *.snap
 *.yaml
+eidlogger/
diff --git a/frontend/app-development/features/appPublish/components/DeployDropdown.test.tsx b/frontend/app-development/features/appPublish/components/DeployDropdown.test.tsx
@@ -100,7 +100,7 @@ describe('DeployDropdown', () => {
         screen.queryByTitle(textMock('app_deployment.releases_loading')),
       );
 
-      const select = screen.getByLabelText(textMock('app_deployment.choose_version'));
+      const select = await screen.findByLabelText(textMock('app_deployment.choose_version'));
       await user.click(select);
 
       expect(screen.getByText(textMock('app_deployment.no_versions'))).toBeInTheDocument();

diff --git a/frontend/app-development/features/appPublish/components/DeployDropdown.tsx b/frontend/app-development/features/appPublish/components/DeployDropdown.tsx
@@ -59,7 +59,7 @@ export const DeployDropdown = ({
       <div>
         <Combobox
           size='small'
-          value={selectedImageTag ? [selectedImageTag] : undefined}
+          value={selectedImageTag && imageOptions?.length > 0 ? [selectedImageTag] : undefined}
           label={t('app_deployment.choose_version')}
           onValueChange={(selectedImageOptions: string[]) =>
             setSelectedImageTag(selectedImageOptions[0])

diff --git a/frontend/app-development/features/overview/components/News.tsx b/frontend/app-development/features/overview/components/News.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Heading, Paragraph, Label, Alert } from '@digdir/design-system-react';
+import { Heading, Paragraph, Alert } from '@digdir/design-system-react';
 import { useNewsListQuery } from 'app-development/hooks/queries/useNewsListQuery';
 import { StudioSpinner } from '@studio/components';
 import { useTranslation } from 'react-i18next';
@@ -30,9 +30,9 @@ export const News = () => {
       <NewsTemplate>
         {newsList.news?.map(({ title, content }) => (
           <div className={classes.newsContent} key={title}>
-            <Label level={3} size='medium'>
+            <Heading level={3} size='xxsmall'>
               {title}
-            </Label>
+            </Heading>
             <Paragraph size='small'>{content}</Paragraph>
           </div>
         ))}

diff --git a/...evelopment/features/simpleMerge/DownloadRepoPopoverContent/DownloadRepoPopoverContent.tsx b/...evelopment/features/simpleMerge/DownloadRepoPopoverContent/DownloadRepoPopoverContent.tsx
@@ -24,7 +24,7 @@ export const DownloadRepoPopoverContent = ({
       <Paragraph spacing size='small'>
         <Trans i18nKey={'overview.download_repo_info'} />
       </Paragraph>
-      <Link className={classes.link} size='small' href={repoDownloadPath(org, app)}>
+      <Link className={classes.link} href={repoDownloadPath(org, app)}>
         {t('overview.download_repo_changes')}
       </Link>
       <Link className={classes.link} href={repoDownloadPath(org, app, true)}>

diff --git a/frontend/libs/studio-components/.storybook/preview.tsx b/frontend/libs/studio-components/.storybook/preview.tsx
@@ -5,6 +5,7 @@ import { Unstyled } from '@storybook/blocks';
 
 import '@altinn/figma-design-tokens/dist/tokens.css';
 import '@digdir/design-system-tokens/brand/altinn/tokens.css';
+import '@digdir/designsystemet-css';
 
 const preview: Preview = {
   parameters: {

diff --git a/frontend/libs/studio-components/src/components/StudioButton/StudioButton.module.css b/frontend/libs/studio-components/src/components/StudioButton/StudioButton.module.css
@@ -3,6 +3,21 @@
   gap: var(--fds-spacing-1);
 }
 
+.innerContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--fds-spacing-2);
+}
+
 .iconWrapper {
   display: contents;
 }
+
+.inverted {
+  color: var(--fds-semantic-text-neutral-on_inverted);
+  background: transparent;
+}
+
+.inverted:hover {
+  background: var(--fds-semantic-surface-on_inverted-no_fill-hover);
+}
diff --git a/frontend/libs/studio-components/src/components/StudioButton/StudioButton.test.tsx b/frontend/libs/studio-components/src/components/StudioButton/StudioButton.test.tsx
@@ -54,10 +54,10 @@ describe('StudioButton', () => {
     expect(ref.current).toBe(screen.getByRole('button'));
   });
 
-  it('Supports polymorphism', () => {
+  it('Supports render asChild', () => {
     render(
-      <StudioButton as='a' href='/'>
-        Test
+      <StudioButton asChild>
+        <a href='/'>Test</a>
       </StudioButton>,
     );
     expect(screen.queryByRole('button')).not.toBeInTheDocument();

diff --git a/frontend/libs/studio-components/src/components/StudioButton/StudioButton.tsx b/frontend/libs/studio-components/src/components/StudioButton/StudioButton.tsx
@@ -7,25 +7,40 @@ import classes from './StudioButton.module.css';
 import type { OverridableComponent } from '../../types/OverridableComponent';
 import type { IconPlacement } from '../../types/IconPlacement';
 
-export type StudioButtonProps = {
+export type StudioButtonProps = Omit<ButtonProps, 'icon' | 'color'> & {
   icon?: ReactNode;
   iconPlacement?: IconPlacement;
-} & Omit<ButtonProps, 'icon'>;
+  color?: ButtonProps['color'] | 'inverted';
+};
 
 const StudioButton: OverridableComponent<StudioButtonProps, HTMLButtonElement> = forwardRef<
   HTMLButtonElement,
   StudioButtonProps
->(({ icon, iconPlacement = 'left', children, className, ...rest }, ref) => {
+>(({ icon, iconPlacement = 'left', children, className: givenClassName, color, ...rest }, ref) => {
   const iconComponent = (
     <span aria-hidden className={classes.iconWrapper}>
       {icon}
     </span>
   );
+
+  // This is a temporary mapping to still support the old inverted prop. This will be removed when migrating to V1.
+  // Information can be found here: https://www.designsystemet.no/bloggen/2024/v1rc1#fargemodus
+  const classNames = cn(givenClassName, classes.studioButton, {
+    [classes.inverted]: color === 'inverted',
+  });
+  const selectedColor = color === 'inverted' ? undefined : color;
+
   return (
-    <Button {...rest} className={cn(className, classes.studioButton)} icon={!children} ref={ref}>
-      {icon && iconPlacement === 'left' && iconComponent}
-      {children}
-      {icon && iconPlacement === 'right' && iconComponent}
+    <Button {...rest} color={selectedColor} className={classNames} icon={!children} ref={ref}>
+      {icon ? (
+        <span className={classes.innerContainer}>
+          {iconPlacement === 'left' && iconComponent}
+          {children}
+          {iconPlacement === 'right' && iconComponent}
+        </span>
+      ) : (
+        children
+      )}
     </Button>
   );
 });

diff --git a/...tend/libs/studio-components/src/components/StudioDeleteButton/StudioDeleteButton.test.tsx b/...tend/libs/studio-components/src/components/StudioDeleteButton/StudioDeleteButton.test.tsx
@@ -62,8 +62,8 @@ describe('StudioDeleteButton', () => {
 
   it('Supports polymorphism', () => {
     render(
-      <StudioButton as='a' href='/'>
-        {buttonLabel}
+      <StudioButton asChild>
+        <a href='/'>{buttonLabel}</a>
       </StudioButton>,
     );
     expect(screen.getByRole('link')).toBeInTheDocument();

diff --git a/frontend/libs/studio-components/src/components/StudioDropdownMenu/StudioDropdownMenu.tsx b/frontend/libs/studio-components/src/components/StudioDropdownMenu/StudioDropdownMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 import { DropdownMenu } from '@digdir/design-system-react';
 import type { DropdownMenuProps } from '@digdir/design-system-react';
 import type { StudioButtonProps } from '../StudioButton';
@@ -15,31 +15,23 @@ export const StudioDropdownMenu = ({
   children,
   ...rest
 }: StudioDropdownMenuProps) => {
-  const anchorRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState<boolean>(false);
   return (
-    <>
-      <StudioButton
-        aria-expanded={open}
-        aria-haspopup='menu'
-        ref={anchorRef}
-        size={rest.size}
-        onClick={() => setOpen(!open)}
-        {...anchorButtonProps}
-      />
-      <DropdownMenu
-        portal
-        {...rest}
-        anchorEl={anchorRef.current}
-        onClose={() => setOpen(false)}
-        open={open}
-      >
-        <DropdownMenu.Content>
-          <StudioDropdownMenuContext.Provider value={{ setOpen }}>
-            {children}
-          </StudioDropdownMenuContext.Provider>
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    </>
+    <DropdownMenu portal {...rest} onClose={() => setOpen(false)} open={open}>
+      <DropdownMenu.Trigger asChild>
+        <StudioButton
+          aria-expanded={open}
+          aria-haspopup='menu'
+          size={rest.size}
+          onClick={() => setOpen(!open)}
+          {...anchorButtonProps}
+        />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <StudioDropdownMenuContext.Provider value={{ setOpen }}>
+          {children}
+        </StudioDropdownMenuContext.Provider>
+      </DropdownMenu.Content>
+    </DropdownMenu>
   );
 };
diff --git a/...essionEditor/SubExpression/SubExpressionValueSelector/SubexpressionValueSelector.test.tsx b/...essionEditor/SubExpression/SubExpressionValueSelector/SubexpressionValueSelector.test.tsx
@@ -17,6 +17,9 @@ import { ExpressionErrorKey } from '../../../../enums/ExpressionErrorKey';
 import { GatewayActionContext } from '../../../../enums/GatewayActionContext';
 
 describe('SubexpressionValueSelector', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   it('Renders with the given legend in edit mode', () => {
     const legend = 'test-legend';
     renderSubexpressionValueSelector({ legend, isInEditMode: true });
@@ -138,10 +141,10 @@ describe('SubexpressionValueSelector', () => {
       const user = userEvent.setup();
       const onChange = jest.fn();
       renderSubexpressionValueSelector({ value: dataModelValue, isInEditMode: true, onChange });
-      const input = () => screen.getByRole('combobox', { name: texts.dataModelPath });
-      await user.type(input(), '{backspace}');
+      const input = screen.getByRole('combobox', { name: texts.dataModelPath });
+      await user.type(input, '{backspace}');
       await user.click(document.body);
-      screen.getByText(texts.errorMessages[ExpressionErrorKey.InvalidDataModelPath]);
+      expect(await screen.findByText(texts.errorMessages[ExpressionErrorKey.InvalidDataModelPath]));
     });
   });
 
@@ -189,7 +192,7 @@ describe('SubexpressionValueSelector', () => {
       const input = () => screen.getByRole('combobox', { name: texts.componentId });
       await user.type(input(), '{backspace}');
       await user.click(document.body);
-      screen.getByText(texts.errorMessages[ExpressionErrorKey.InvalidComponentId]);
+      expect(await screen.findByText(texts.errorMessages[ExpressionErrorKey.InvalidComponentId]));
     });
 
     it('Displays initial error and handles non-existing component ID', () => {

diff --git a/frontend/libs/studio-components/src/components/StudioNotFoundPage/StudioNotFoundPage.tsx b/frontend/libs/studio-components/src/components/StudioNotFoundPage/StudioNotFoundPage.tsx
@@ -26,7 +26,7 @@ export const StudioNotFoundPage = forwardRef<HTMLDivElement, StudioNotFoundPageP
               {title}
             </Heading>
             <div className={classes.body}>{body}</div>
-            <Link href={redirectHref} size='small' className={classes.link}>
+            <Link href={redirectHref} className={classes.link}>
               {redirectLinkText}
             </Link>
           </div>

diff --git a/...studio-components/src/components/StudioTreeView/StudioTreeViewItem/StudioTreeViewItem.tsx b/...studio-components/src/components/StudioTreeView/StudioTreeViewItem/StudioTreeViewItem.tsx
@@ -104,7 +104,6 @@ export const StudioTreeViewItem = ({
       aria-level={level}
       aria-owns={listId}
       aria-selected={selected}
-      as='div' // Cannot be button because of dragging issues in Firefox
       className={classes.button}
       color='first'
       icon={<Icon customIcon={icon} hasChildren={hasChildren} open={open} />}
@@ -118,6 +117,7 @@ export const StudioTreeViewItem = ({
       tabIndex={focusable ? 0 : -1}
       type='button'
       variant='tertiary'
+      asChild
     >
       <div className={classes.label}>{label}</div>
     </StudioButton>

diff --git a/...Rule/ExpandablePolicyElement/PolicyEditorDropdownMenu/PolicyEditorDropdownMenu.module.css b/...Rule/ExpandablePolicyElement/PolicyEditorDropdownMenu/PolicyEditorDropdownMenu.module.css
@@ -5,3 +5,7 @@
 .icon {
   font-size: var(--fds-sizing-5);
 }
+
+.deleteButton {
+  color: var(--fds-semantic-text-danger-default);
+}
diff --git a/.../PolicyRule/ExpandablePolicyElement/PolicyEditorDropdownMenu/PolicyEditorDropdownMenu.tsx b/.../PolicyRule/ExpandablePolicyElement/PolicyEditorDropdownMenu/PolicyEditorDropdownMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import classes from './PolicyEditorDropdownMenu.module.css';
 import { DropdownMenu } from '@digdir/design-system-react';
 import { MenuElipsisVerticalIcon, TabsIcon, TrashIcon } from '@studio/icons';
@@ -24,42 +24,33 @@ export const PolicyEditorDropdownMenu = ({
 }: PolicyEditorDropdownMenuProps): React.ReactNode => {
   const { t } = useTranslation();
 
-  const anchorEl = useRef(null);
-
   return (
-    <>
-      <StudioButton
-        aria-expanded={isOpen}
-        aria-haspopup='menu'
-        className={isError && classes.errorButton}
-        color={isError ? 'danger' : 'second'}
-        icon={<MenuElipsisVerticalIcon fontSize='1.8rem' />}
-        onClick={handleClickMoreIcon}
-        ref={anchorEl}
-        size='small'
-        title={t('policy_editor.more')}
-        variant='tertiary'
-      />
-      <DropdownMenu
-        anchorEl={anchorEl.current}
-        onClose={handleCloseMenu}
-        placement='bottom-end'
-        size='small'
-        open={isOpen}
-      >
-        <DropdownMenu.Content>
-          <DropdownMenu.Group>
-            <DropdownMenu.Item onClick={handleClone}>
-              <TabsIcon className={classes.icon} />
-              {t('policy_editor.expandable_card_dropdown_copy')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item color='danger' onClick={handleDelete}>
-              <TrashIcon className={classes.icon} />
-              {t('general.delete')}
-            </DropdownMenu.Item>
-          </DropdownMenu.Group>
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    </>
+    <DropdownMenu onClose={handleCloseMenu} placement='bottom-end' size='small' open={isOpen}>
+      <DropdownMenu.Trigger asChild>
+        <StudioButton
+          aria-expanded={isOpen}
+          aria-haspopup='menu'
+          className={isError && classes.errorButton}
+          color={isError ? 'danger' : 'second'}
+          icon={<MenuElipsisVerticalIcon fontSize='1.8rem' />}
+          onClick={handleClickMoreIcon}
+          size='small'
+          title={t('policy_editor.more')}
+          variant='tertiary'
+        />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Group>
+          <DropdownMenu.Item onClick={handleClone}>
+            <TabsIcon className={classes.icon} />
+            {t('policy_editor.expandable_card_dropdown_copy')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item className={classes.deleteButton} onClick={handleDelete}>
+            <TrashIcon className={classes.icon} />
+            {t('general.delete')}
+          </DropdownMenu.Item>
+        </DropdownMenu.Group>
+      </DropdownMenu.Content>
+    </DropdownMenu>
   );
 };
diff --git a/...packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/ConfigEndEvent.test.tsx b/...packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/ConfigEndEvent.test.tsx
@@ -24,10 +24,11 @@ describe('ConfigEndEvent', () => {
   it('should hide the custom receipt content behind closed accordion initially', () => {
     renderConfigEndEventPanel();
 
-    const informationTextDefaultReceipt = screen.queryByText(
-      textMock('process_editor.configuration_panel_custom_receipt_default_receipt_info'),
-    );
-    expect(informationTextDefaultReceipt).not.toBeVisible();
+    const accordion = screen.getByRole('button', {
+      name: textMock('process_editor.configuration_panel_custom_receipt_accordion_header'),
+    });
+
+    expect(accordion).toHaveAttribute('aria-expanded', 'false');
   });
 
   it('should display the informal text, the link to read more, and the custom receipt content when opening the accordion', async () => {

diff --git a/...tend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/ConfigEndEvent.tsx b/...tend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/ConfigEndEvent.tsx
@@ -40,7 +40,6 @@ export const ConfigEndEvent = () => {
                   )}
                   rel='noopener noreferrer'
                   target='_newTab'
-                  size='small'
                 >
                   {t('process_editor.configuration_panel_custom_receipt_default_receipt_link')}
                 </Link>

diff --git a/...igEndEvent/CustomReceiptContent/RedirectToCreatePageButton/RedirectToCreatePageButton.tsx b/...igEndEvent/CustomReceiptContent/RedirectToCreatePageButton/RedirectToCreatePageButton.tsx
@@ -27,15 +27,16 @@ export const RedirectToCreatePageButton = (): React.ReactElement => {
         title={t('process_editor.configuration_panel_custom_receipt_navigate_to_lage_title')}
       >
         <StudioButton
-          as='a'
+          asChild
           size='small'
           variant='primary'
           color='second'
           icon={<PencilWritingIcon />}
-          href={packagesRouter.getPackageNavigationUrl('editorUiEditor')}
           onClick={handleClick}
         >
-          {t('process_editor.configuration_panel_custom_receipt_navigate_to_lage_button')}
+          <a href={packagesRouter.getPackageNavigationUrl('editorUiEditor')}>
+            {t('process_editor.configuration_panel_custom_receipt_navigate_to_lage_button')}
+          </a>
         </StudioButton>
       </RedirectBox>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,3 +8,4 @@ yarn.lock @@
     .eslintignore
     *.snap
     *.yaml
+    eidlogger/