From 59a80dd53bfc45710e9e5d8610cbac2520f5b783 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 4 Dec 2024 21:49:36 +0100 Subject: [PATCH] PR feedback --- .../height-animation/HeightAnimation.tsx | 2 +- .../extensions/forms/Form/Element/Element.tsx | 2 +- .../extensions/forms/Form/Status/Status.tsx | 50 ++++++++++--------- .../forms/Form/Status/StatusDocs.tsx | 10 ++++ .../Form/Status/__tests__/Status.test.tsx | 44 ++++++++++++++++ .../Form/Status/stories/Status.stories.tsx | 27 +++++++++- .../forms/Wizard/style/dnb-wizard-layout.scss | 2 +- .../forms/constants/locales/en-GB.ts | 4 +- .../forms/constants/locales/nb-NO.ts | 5 +- 9 files changed, 114 insertions(+), 32 deletions(-) diff --git a/packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx b/packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx index ec0781c9a16..f8feff01647 100644 --- a/packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx +++ b/packages/dnb-eufemia/src/components/height-animation/HeightAnimation.tsx @@ -48,7 +48,7 @@ export type HeightAnimationProps = { export type HeightAnimationAllProps = HeightAnimationProps & SpacingProps & - Omit, 'ref'> + Omit, 'ref' | 'onAnimationEnd'> function HeightAnimation({ open = true, diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Element/Element.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Element/Element.tsx index 74344c0af3c..462dec3e8f3 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Element/Element.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Element/Element.tsx @@ -78,7 +78,7 @@ export default function FormElement(props: Props) { key={key} state={key} id={`${id}-form-status-${key}`} - className="dnb-forms-status" + className="dnb-forms-form__status-message" show={Boolean(value)} no_animation={false} shellSpace={{ top: 'small' }} diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Status/Status.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Status/Status.tsx index 25a94c6acc0..5c2fc06c6a9 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Status/Status.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Status/Status.tsx @@ -1,10 +1,12 @@ -import React, { useCallback, useContext, useEffect, useRef } from 'react' +import React, { useCallback, useContext, useRef } from 'react' import classnames from 'classnames' import Visibility from '../Visibility' import DataContext from '../../DataContext/Context' import { useSharedState } from '../../../../shared/helpers/useSharedState' +import useMounted from '../../../../shared/helpers/useMounted' import setStatus, { Status } from './setStatus' import { Button, Flex, Section } from '../../../../components' +import { HeightAnimationAllProps } from '../../../../components/HeightAnimation' import { P } from '../../../../elements' import { useTranslation } from '../../hooks' import MainHeading from '../MainHeading' @@ -16,6 +18,7 @@ export type Props = { description?: React.ReactNode buttonText?: React.ReactNode buttonHref?: string + buttonClickHandler?: () => void } error?: { title?: React.ReactNode @@ -41,20 +44,17 @@ function StatusContainer(props: Props) { }>(id) const { activeStatus } = data || {} - // To ensure we not animate on first render. - // When there are several Examples rendered at the same time, - // the first one will animate on the first render. - const animateRef = useRef(undefined) - useEffect(() => { - animateRef.current = true - }, []) - + const mountedRef = useMounted() const innerRef = useRef(null) - const onVisible = useCallback(() => { - if (animateRef.current) { - innerRef.current.focus?.() - } - }, []) + const onAnimationEnd: HeightAnimationAllProps['onAnimationEnd'] = + useCallback( + (state) => { + if (mountedRef.current && state === 'opened') { + innerRef.current.focus?.() + } + }, + [mountedRef] + ) // To keep the content visible while hiding it with the HightAnimation const currentStatusRef = useRef() @@ -86,7 +86,8 @@ function StatusContainer(props: Props) { title, description, buttonText, - buttonHref = '/', + buttonHref, + buttonClickHandler, } = success || {} statusContent = ( @@ -98,11 +99,12 @@ function StatusContainer(props: Props) { {title ?? tr.title}

{description ?? tr.description}

- {buttonHref && ( - - )} + ) @@ -143,16 +145,16 @@ function StatusContainer(props: Props) { > {statusContent} {children} diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Status/StatusDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Status/StatusDocs.tsx index b801dc6c449..0c2c23f30cc 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Status/StatusDocs.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Status/StatusDocs.tsx @@ -16,6 +16,16 @@ export const StatusSuccessProperties: PropertiesTableProps = { type: 'React.Node', status: 'optional', }, + buttonHref: { + doc: 'The href of the button.', + type: 'string', + status: 'optional', + }, + buttonClickHandler: { + doc: 'The click handler of the button.', + type: 'function', + status: 'optional', + }, '[Section](/uilib/components/section/properties)': { doc: 'All Section properties.', type: 'various', diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Status/__tests__/Status.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Status/__tests__/Status.test.tsx index b087c1c5258..8d32b43c1e8 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Status/__tests__/Status.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Status/__tests__/Status.test.tsx @@ -60,6 +60,50 @@ describe('Form.Status', () => { expect(retryButton).toHaveTextContent(nb.retryButton) }) + it('should accept custom buttonHref', () => { + const formId = {} + + render( + + + content + + + ) + + act(() => { + Form.Status.setStatus(formId, 'success') + }) + + const anchor = document.querySelector('a') + expect(anchor).toHaveAttribute('href', 'http://custom') + }) + + it('should disable href when buttonClickHandler is given', () => { + const formId = {} + const buttonClickHandler = jest.fn() + + render( + + content + + ) + + act(() => { + Form.Status.setStatus(formId, 'success') + }) + + const button = document.querySelector('button') + fireEvent.click(button) + + expect(button).not.toHaveAttribute('href') + expect(buttonClickHandler).toHaveBeenCalledTimes(1) + }) + it('should render success with custom text', () => { const formId = {} diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Status/stories/Status.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Status/stories/Status.stories.tsx index e2e368342de..561683a5e32 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Form/Status/stories/Status.stories.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Form/Status/stories/Status.stories.tsx @@ -1,4 +1,4 @@ -import { Field, Form } from '../../..' +import { Field, Form, Wizard } from '../../..' import { Button } from '../../../../../components' export default { @@ -39,3 +39,28 @@ export function BothStatuses() { ) } + +export function InWizard() { + return ( + { + console.log('data', data) + Form.Status.setStatus('test', 'success') + }} + > + + + + + + + + + + + + + + ) +} diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/dnb-wizard-layout.scss b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/dnb-wizard-layout.scss index 87a14b6a361..72603abdec1 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/dnb-wizard-layout.scss +++ b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/dnb-wizard-layout.scss @@ -67,7 +67,7 @@ @include allAbove('medium') { .dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) - .dnb-forms-status { + .dnb-forms-form__status-message { margin-left: 21.5rem; } } diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts b/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts index e2d77930b17..8f3f7d9a098 100644 --- a/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts +++ b/packages/dnb-eufemia/src/extensions/forms/constants/locales/en-GB.ts @@ -41,8 +41,8 @@ export default { buttonText: 'Back to homepage', }, StatusError: { - title: 'Something went wrong', - description: 'We were unable to submit the form.', + title: 'Sorry, something went wrong', + description: 'Please try again or contact us.', retryButton: 'Try again', cancelButton: 'Back', }, diff --git a/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts b/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts index 54edc58fd4f..9408caed2fb 100644 --- a/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts +++ b/packages/dnb-eufemia/src/extensions/forms/constants/locales/nb-NO.ts @@ -40,8 +40,9 @@ export default { buttonText: 'Tilbake til forsiden', }, StatusError: { - title: 'Noe gikk galt', - description: 'Vi klarte ikke å sende inn skjemaet.', + title: 'Beklager, noe gikk galt', + description: + 'Prov igjen eller ta kontakt med oss om feilen vedstår.', retryButton: 'Prøv igjen', cancelButton: 'Tilbake', },