chore: Refactor RedirectBox to StudioRedirectBox (#13908)

Co-authored-by: Erling Hauan <[email protected]>

frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { StudioRedirectBox } from './StudioRedirectBox';
+import { StudioParagraph } from '../StudioParagraph';
+
+type Story = StoryFn<typeof StudioRedirectBox>;
+
+const meta: Meta = {
+  title: 'Components/StudioRedirectBox',
+  component: StudioRedirectBox,
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+  },
+};
+
+export const Preview: Story = (args): React.ReactElement => <StudioRedirectBox {...args} />;
+
+Preview.args = {
+  title: 'title',
+  children: <StudioParagraph size='sm'>Children text</StudioParagraph>,
+};
+
+export default meta;

frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StudioRedirectBox, type StudioRedirectBoxProps } from './StudioRedirectBox';
+import { testRootClassNameAppending } from '../../test-utils/testRootClassNameAppending';
+
+const mockTitle: string = 'title';
+
+const defaultProps: StudioRedirectBoxProps = {
+  title: mockTitle,
+  children: <div />,
+};
+
+describe('StudioRedirectBox', () => {
+  it('should render the title and children', () => {
+    const mockChildrenText: string = 'children';
+    renderStudioRedirectBox({ children: <p>{mockChildrenText}</p> });
+
+    expect(screen.getByText(mockTitle)).toBeInTheDocument();
+    expect(screen.getByText(mockChildrenText)).toBeInTheDocument();
+  });
+
+  it('Appends given classname to internal classname', () => {
+    testRootClassNameAppending((className) => renderStudioRedirectBox({ className }));
+  });
+});
+
+const renderStudioRedirectBox = (props: Partial<StudioRedirectBoxProps> = {}) => {
+  return render(<StudioRedirectBox {...defaultProps} {...props} />);
+};

frontend/packages/shared/src/components/RedirectBox/RedirectBox.tsx → frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.tsx

@@ -1,19 +1,17 @@
-import React, { type ReactNode } from 'react';
+import React, { type ReactElement, type HTMLAttributes } from 'react';
 import cn from 'classnames';
-import classes from './RedirectBox.module.css';
+import classes from './StudioRedirectBox.module.css';
 import { StudioLabelAsParagraph } from '@studio/components';
 
-export type RedirectBoxProps = {
+export type StudioRedirectBoxProps = {
   title: string;
-  children: ReactNode;
-  className?: string;
-};
+} & HTMLAttributes<HTMLDivElement>;
 
-export const RedirectBox = ({
+export const StudioRedirectBox = ({
   title,
   children,
   className: givenClassName,
-}: RedirectBoxProps): React.ReactElement => {
+}: StudioRedirectBoxProps): ReactElement => {
   const className = cn(classes.wrapper, givenClassName);
   return (
     <div className={className}>

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

@@ -0,0 +1 @@
+export { StudioRedirectBox } from './StudioRedirectBox';

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

@@ -41,6 +41,7 @@ export * from './StudioParagraph';
 export * from './StudioPopover';
 export * from './StudioProperty';
 export * from './StudioRecommendedNextAction';
+export * from './StudioRedirectBox';
 export * from './StudioResizableLayout';
 export * from './StudioSectionHeader';
 export * from './StudioSpinner';

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditPolicy/EditPolicy.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Alert } from '@digdir/designsystemet-react';
-import { StudioButton } from '@studio/components';
+import { StudioButton, StudioRedirectBox } from '@studio/components';
 import { useBpmnApiContext } from '../../../../contexts/BpmnApiContext';
 import { useTranslation } from 'react-i18next';
 import { ShieldLockIcon } from '@studio/icons';
 import classes from './EditPolicy.module.css';
-import { RedirectBox } from 'app-shared/components/RedirectBox';
 
 export const EditPolicy = () => {
   const { t } = useTranslation();
@@ -16,7 +15,7 @@ export const EditPolicy = () => {
       <Alert severity='info' className={classes.alert}>
         {t('process_editor.configuration_panel.edit_policy_alert_message')}
       </Alert>
-      <RedirectBox
+      <StudioRedirectBox
         title={t('process_editor.configuration_panel.edit_policy_open_policy_editor_heading')}
       >
         <StudioButton
@@ -28,7 +27,7 @@ export const EditPolicy = () => {
         >
           {t('process_editor.configuration_panel.edit_policy_open_policy_editor_button')}
         </StudioButton>
-      </RedirectBox>
+      </StudioRedirectBox>
     </div>
   );
 };

frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/RedirectToCreatePageButton/RedirectToCreatePageButton.tsx

@@ -3,11 +3,10 @@ import classes from './RedirectToCreatePageButton.module.css';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { PackagesRouter } from 'app-shared/navigation/PackagesRouter';
 import { PencilWritingIcon } from '@studio/icons';
-import { StudioButton } from '@studio/components';
+import { StudioButton, StudioRedirectBox } from '@studio/components';
 import { useLocalStorage } from '@studio/components/src/hooks/useLocalStorage';
 import { useTranslation } from 'react-i18next';
 import { useBpmnApiContext } from '../../../../../contexts/BpmnApiContext';
-import { RedirectBox } from 'app-shared/components/RedirectBox';
 import { Link } from '@digdir/designsystemet-react';
 
 export const RedirectToCreatePageButton = (): React.ReactElement => {
@@ -24,7 +23,7 @@ export const RedirectToCreatePageButton = (): React.ReactElement => {
 
   return (
     <div className={classes.goToCreatePageWrapper}>
-      <RedirectBox
+      <StudioRedirectBox
         title={t('process_editor.configuration_panel_custom_receipt_navigate_to_design_title')}
       >
         <StudioButton asChild variant='primary' color='second' onClick={handleClick}>
@@ -36,7 +35,7 @@ export const RedirectToCreatePageButton = (): React.ReactElement => {
             {t('process_editor.configuration_panel_custom_receipt_navigate_to_design_button')}
           </Link>
         </StudioButton>
-      </RedirectBox>
+      </StudioRedirectBox>
     </div>
   );
 };

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { PencilIcon } from '@studio/icons';
-import { StudioButton } from '@studio/components';
-import { RedirectBox } from 'app-shared/components/RedirectBox';
+import { StudioButton, StudioRedirectBox } from '@studio/components';
 import classes from './RedirectToLayoutSet.module.css';
 import { useAppContext } from '../../../../hooks';
 
@@ -22,7 +21,7 @@ export const RedirectToLayoutSet = ({
   };
 
   return (
-    <RedirectBox
+    <StudioRedirectBox
       title={t('ux_editor.component_properties.subform.go_to_layout_set')}
       className={classes.redirectContainer}
     >
@@ -35,6 +34,6 @@ export const RedirectToLayoutSet = ({
       >
         {t('top_menu.create')}
       </StudioButton>
-    </RedirectBox>
+    </StudioRedirectBox>
   );
 };