diff --git a/frontend/packages/shared/src/components/RedirectBox/RedirectBox.module.css b/frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.module.css similarity index 100% rename from frontend/packages/shared/src/components/RedirectBox/RedirectBox.module.css rename to frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.module.css diff --git a/frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.stories.tsx b/frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.stories.tsx new file mode 100644 index 00000000000..b9c66b44b0b --- /dev/null +++ b/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; + +const meta: Meta = { + title: 'Components/StudioRedirectBox', + component: StudioRedirectBox, + argTypes: { + title: { + control: 'text', + }, + }, +}; + +export const Preview: Story = (args): React.ReactElement => ; + +Preview.args = { + title: 'title', + children: Children text, +}; + +export default meta; diff --git a/frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.test.tsx b/frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.test.tsx new file mode 100644 index 00000000000..677b257d349 --- /dev/null +++ b/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:
, +}; + +describe('StudioRedirectBox', () => { + it('should render the title and children', () => { + const mockChildrenText: string = 'children'; + renderStudioRedirectBox({ children:

{mockChildrenText}

}); + + 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 = {}) => { + return render(); +}; diff --git a/frontend/packages/shared/src/components/RedirectBox/RedirectBox.tsx b/frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.tsx similarity index 59% rename from frontend/packages/shared/src/components/RedirectBox/RedirectBox.tsx rename to frontend/libs/studio-components/src/components/StudioRedirectBox/StudioRedirectBox.tsx index f60f3cb07cc..735f661e914 100644 --- a/frontend/packages/shared/src/components/RedirectBox/RedirectBox.tsx +++ b/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; -export const RedirectBox = ({ +export const StudioRedirectBox = ({ title, children, className: givenClassName, -}: RedirectBoxProps): React.ReactElement => { +}: StudioRedirectBoxProps): ReactElement => { const className = cn(classes.wrapper, givenClassName); return (
diff --git a/frontend/libs/studio-components/src/components/StudioRedirectBox/index.ts b/frontend/libs/studio-components/src/components/StudioRedirectBox/index.ts new file mode 100644 index 00000000000..d326566da6f --- /dev/null +++ b/frontend/libs/studio-components/src/components/StudioRedirectBox/index.ts @@ -0,0 +1 @@ +export { StudioRedirectBox } from './StudioRedirectBox'; diff --git a/frontend/libs/studio-components/src/components/index.ts b/frontend/libs/studio-components/src/components/index.ts index ecb388eda43..ea76efe5a7f 100644 --- a/frontend/libs/studio-components/src/components/index.ts +++ b/frontend/libs/studio-components/src/components/index.ts @@ -39,6 +39,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'; diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditPolicy/EditPolicy.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditPolicy/EditPolicy.tsx index f7dc1c30f93..85943b5c627 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditPolicy/EditPolicy.tsx +++ b/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 = () => { {t('process_editor.configuration_panel.edit_policy_alert_message')} - { > {t('process_editor.configuration_panel.edit_policy_open_policy_editor_button')} - +
); }; diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/RedirectToCreatePageButton/RedirectToCreatePageButton.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/RedirectToCreatePageButton/RedirectToCreatePageButton.tsx index 9ec141e333c..0be4792cbbf 100644 --- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/RedirectToCreatePageButton/RedirectToCreatePageButton.tsx +++ b/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 (
- @@ -36,7 +35,7 @@ export const RedirectToCreatePageButton = (): React.ReactElement => { {t('process_editor.configuration_panel_custom_receipt_navigate_to_design_button')} - +
); }; diff --git a/frontend/packages/shared/src/components/RedirectBox/index.ts b/frontend/packages/shared/src/components/RedirectBox/index.ts deleted file mode 100644 index 19e8fbac36c..00000000000 --- a/frontend/packages/shared/src/components/RedirectBox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { RedirectBox } from './RedirectBox'; diff --git a/frontend/packages/ux-editor/src/components/config/editModal/RedirectToLayoutSet/RedirectToLayoutSet.tsx b/frontend/packages/ux-editor/src/components/config/editModal/RedirectToLayoutSet/RedirectToLayoutSet.tsx index 912d5f6c39e..7a48d164ecc 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/RedirectToLayoutSet/RedirectToLayoutSet.tsx +++ b/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 ( - @@ -35,6 +34,6 @@ export const RedirectToLayoutSet = ({ > {t('top_menu.create')} - +
); };