PR feedback

dnbexperience · Dec 5, 2024 · ed3afe2 · ed3afe2
1 parent 7b132ed
commit ed3afe2
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 32 deletions.
diff --git 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<React.HTMLProps<HTMLElement>, 'ref'>
+  Omit<React.HTMLProps<HTMLElement>, '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
@@ -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
@@ -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<HTMLDivElement>(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<Status>()
@@ -86,7 +86,8 @@ function StatusContainer(props: Props) {
       title,
       description,
       buttonText,
-      buttonHref = '/',
+      buttonHref,
+      buttonClickHandler,
     } = success || {}
 
     statusContent = (
@@ -98,11 +99,12 @@ function StatusContainer(props: Props) {
         <Flex.Stack gap="large">
           <MainHeading>{title ?? tr.title}</MainHeading>
           <P>{description ?? tr.description}</P>
-          {buttonHref && (
-            <Button href={buttonHref}>
-              {buttonText ?? tr.buttonText}
-            </Button>
-          )}
+          <Button
+            href={buttonClickHandler ? undefined : buttonHref ?? '/'}
+            on_click={buttonClickHandler}
+          >
+            {buttonText ?? tr.buttonText}
+          </Button>
         </Flex.Stack>
       </Section>
     )
@@ -143,16 +145,16 @@ function StatusContainer(props: Props) {
     >
       <Visibility
         visible={statusContentIsVisible}
-        onVisible={onVisible}
-        animate={animateRef.current}
+        onAnimationEnd={onAnimationEnd}
+        animate
       >
         {statusContent}
       </Visibility>
 
       <Visibility
         visible={childrenAreVisible}
-        onVisible={onVisible}
-        animate={animateRef.current}
+        onAnimationEnd={onAnimationEnd}
+        animate
         keepInDOM
       >
         {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
@@ -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
@@ -60,6 +60,50 @@ describe('Form.Status', () => {
     expect(retryButton).toHaveTextContent(nb.retryButton)
   })
 
+  it('should accept custom buttonHref', () => {
+    const formId = {}
+
+    render(
+      <Form.Handler id={formId}>
+        <Form.Status
+          success={{
+            buttonHref: 'http://custom',
+          }}
+        >
+          content
+        </Form.Status>
+      </Form.Handler>
+    )
+
+    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(
+      <Form.Handler id={formId}>
+        <Form.Status success={{ buttonClickHandler }}>content</Form.Status>
+      </Form.Handler>
+    )
+
+    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
@@ -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 (
+    <Form.Handler
+      id="test"
+      onSubmit={(data) => {
+        console.log('data', data)
+        Form.Status.setStatus('test', 'success')
+      }}
+    >
+      <Form.Status>
+        <Wizard.Container>
+          <Wizard.Step title="Step 1">
+            <Field.String path="/someInfo" label="Some information" />
+            <Wizard.NextButton />
+          </Wizard.Step>
+          <Wizard.Step title="Step 2">
+            <Field.String path="/more" label="More information" />
+            <Form.SubmitButton />
+          </Wizard.Step>
+        </Wizard.Container>
+      </Form.Status>
+    </Form.Handler>
+  )
+}
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
@@ -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
@@ -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
@@ -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',
     },