fix(Autocomplete): pass status props to SubmitButton (#2004)

packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js

@@ -37,6 +37,27 @@ export const AutocompleteDefaultExample = () => (
   </Wrapper>
 )
 
+export const AutocompleteStatusExample = () => (
+  <Wrapper>
+    <ComponentBox
+      data-visual-test="autocomplete-status"
+      scope={{ topMovies }}
+    >
+      {
+        /* jsx */ `
+<Autocomplete
+  data={topMovies}
+  label="Label:"
+  status='Please select a valid date'
+  status_state='info'
+  show_submit_button
+/>
+`
+      }
+    </ComponentBox>
+  </Wrapper>
+)
+
 export const AutocompleteNumbersExample = () => (
   <Wrapper>
     <ComponentBox useRender scope={{ format }}>

packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md

@@ -15,6 +15,7 @@ AutocompleteCustomWidth,
 AutocompleteSuffix,
 AutocompleteOpened,
 AutocompleteDisabledExample,
+AutocompleteStatusExample,
 } from 'Docs/uilib/components/autocomplete/Examples'
 
 ## Demos
@@ -88,3 +89,7 @@ const data = [
 <AutocompleteOpened />
 
 <AutocompleteDisabledExample />
+
+### Autocomplete with status message
+
+<AutocompleteStatusExample />

packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js

@@ -1883,6 +1883,9 @@ class AutocompleteInstance extends React.PureComponent {
           variant="secondary"
           size={size === 'default' ? 'medium' : size}
           type="button"
+          status={status}
+          status_state={status_state}
+          status_props={status_props}
           {...triggerParams}
         />
       )

packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js

@@ -88,6 +88,14 @@ describe('Autocomplete screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match the status with status_state info', async () => {
+    const screenshot = await testPageScreenshot({
+      selector:
+        '[data-visual-test="autocomplete-status"] .dnb-autocomplete__inner',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Autocomplete screenshot', () => {

packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js

@@ -21,6 +21,7 @@ import {
   mockImplementationForDirectionObserver,
   testDirectionObserver,
 } from '../../../fragments/drawer-list/__tests__/DrawerListTestMocks'
+import { render } from '@testing-library/react'
 
 const snapshotProps = {
   ...fakeProps(require.resolve('../Autocomplete'), {
@@ -1939,6 +1940,104 @@ describe('Autocomplete component', () => {
 
     await testDirectionObserver(Comp)
   })
+
+  it('has error status when only providing status', () => {
+    render(
+      <Component
+        data={mockData}
+        {...mockProps}
+        status="status text"
+        show_submit_button
+      />
+    )
+
+    expect(
+      document
+        .querySelector('.dnb-autocomplete')
+        .classList.contains('dnb-autocomplete__status--error')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('.dnb-form-status')
+        .classList.contains('dnb-form-status--error')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('.dnb-input')
+        .classList.contains('dnb-input__status--error')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('button.dnb-input__submit-button__button')
+        .classList.contains('dnb-button__status--error')
+    ).toBe(true)
+  })
+
+  it('has correct status when status_state is error', () => {
+    render(
+      <Component
+        data={mockData}
+        {...mockProps}
+        status="status text"
+        status_state="error"
+        show_submit_button
+      />
+    )
+
+    expect(
+      document
+        .querySelector('.dnb-autocomplete')
+        .classList.contains('dnb-autocomplete__status--error')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('.dnb-form-status')
+        .classList.contains('dnb-form-status--error')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('.dnb-input')
+        .classList.contains('dnb-input__status--error')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('button.dnb-input__submit-button__button')
+        .classList.contains('dnb-button__status--error')
+    ).toBe(true)
+  })
+
+  it('has correct status when status_state is info', () => {
+    render(
+      <Component
+        data={mockData}
+        {...mockProps}
+        status="status text"
+        status_state="info"
+        show_submit_button
+      />
+    )
+
+    expect(
+      document
+        .querySelector('.dnb-autocomplete')
+        .classList.contains('dnb-autocomplete__status--info')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('.dnb-form-status')
+        .classList.contains('dnb-form-status--info')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('.dnb-input')
+        .classList.contains('dnb-input__status--info')
+    ).toBe(true)
+    expect(
+      document
+        .querySelector('button.dnb-input__submit-button__button')
+        .classList.contains('dnb-button__status--info')
+    ).toBe(true)
+  })
 })
 
 describe('Autocomplete markup', () => {

packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap

@@ -513,6 +513,8 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
                     onSubmit={[Function]}
                     size={null}
                     status={null}
+                    status_props={null}
+                    status_state="error"
                     tooltip="submit_button_title"
                     type="button"
                     variant="secondary"
@@ -629,6 +631,8 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
                           onSubmit={[Function]}
                           size={null}
                           status={null}
+                          status_props={null}
+                          status_state="error"
                           tooltip="submit_button_title"
                           type="button"
                           variant="secondary"