feat(Autocomplete): add support for data suffix_value (#1467)

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

@@ -8,6 +8,7 @@ import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
 import { Autocomplete, IconPrimary } from '@dnb/eufemia/src/components'
 import { format } from '@dnb/eufemia/src/components/number-format/NumberUtils'
 import styled from '@emotion/styled'
+import Context from '@dnb/eufemia/src/shared/Context'
 
 const Wrapper = styled.div`
   [data-visual-test] {
@@ -228,13 +229,12 @@ export const AutocompleteDifferentSizes = () => (
 )
 
 export const AutocompleteCustomWidth = () => (
-  <Wrapper>
-    <ComponentBox
-      // data-visual-test="autocomplete-width"
-      scope={{ topMovies }}
-      useRender
-    >
-      {() => /* jsx */ `
+  <ComponentBox
+    data-visual-test="autocomplete-input-width"
+    scope={{ topMovies }}
+    useRender
+  >
+    {() => /* jsx */ `
 const CustomWidthOne = styled(Autocomplete)\`
   .dnb-autocomplete__shell {
     width: 10rem;
@@ -259,31 +259,90 @@ const CustomWidthThree = styled(Autocomplete)\`
 render(<FormRow direction="vertical">
   <CustomWidthOne
     label="Label:"
+    label_sr_only
     size="default"
     icon_position="left"
     bottom
     data={topMovies}
   />
   <CustomWidthTwo
     label="Label:"
+    label_sr_only
     size="medium"
     bottom
     data={topMovies}
   />
   <CustomWidthThree
     label="Label:"
+    label_sr_only
     size="large"
     align_autocomplete="right"
     icon_position="right"
-    input_icon="chevron_down"
+    input_icon="bell"
     bottom
     data={topMovies}
   />
 </FormRow>)
 `}
-    </ComponentBox>
-  </Wrapper>
+  </ComponentBox>
+)
+
+export const AutocompleteSuffix = () => {
+  const { locale } = React.useContext(Context)
+  const ban = format(20001234567, { ban: true, locale })
+  const suffix_value = format(12345678, { currency: true, locale })
+  const numbers = [
+    {
+      selected_value: `Brukskonto (${ban})`,
+      suffix_value,
+      content: ['Brukskonto', ban],
+    },
+    {
+      selected_value: `BSU (${ban})`,
+      suffix_value,
+      content: ['BSU', ban],
+    },
+    {
+      selected_value: `Sparekonto (${ban})`,
+      suffix_value,
+      content: ['Sparekonto', ban],
+    },
+    {
+      selected_value: `Brukskonto (${ban})`,
+      suffix_value,
+      content: ['Brukskonto', ban],
+    },
+  ]
+  return (
+    <ComponentBox
+      data-visual-test="autocomplete-suffix"
+      scope={{ numbers }}
+      useRender
+    >
+      {() => /* jsx */ `
+const CustomWidth = styled(Autocomplete)\`
+  .dnb-drawer-list__root,
+  .dnb-autocomplete__shell {
+    width: 50vw;
+    min-width: 15rem;
+    max-width: 30rem;
+  }
+\`
+render(
+  <CustomWidth
+    value={1}
+    data={numbers}
+    size="medium"
+    input_icon={null}
+    show_submit_button
+    label="From account"
+    label_direction="vertical"
+  />
 )
+`}
+    </ComponentBox>
+  )
+}
 
 export const AutocompleteOpened = () => {
   if (!(typeof window !== 'undefined' && window.IS_TEST)) {

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

@@ -12,6 +12,7 @@ AutocompleteToggleExample,
 AutocompletePredefinedInput,
 AutocompleteDifferentSizes,
 AutocompleteCustomWidth,
+AutocompleteSuffix,
 AutocompleteOpened
 } from 'Docs/uilib/components/autocomplete/Examples'
 
@@ -58,6 +59,27 @@ Four sizes are available: `small`, `default`, `medium` and `large`.
 
 <AutocompleteDifferentSizes />
 
+### Data suffix value
+
+Data is provided as such:
+
+```js
+const { locale } = React.useContext(Context)
+const data = [
+  {
+    suffix_value: (
+      <NumberFormat currency srLabel="Total:">
+        {12345678}
+      </NumberFormat>
+    ),
+    selected_value: `Brukskonto (${ban})`,
+    content: ['Brukskonto', ban],
+  },
+]
+```
+
+<AutocompleteSuffix />
+
 ### Custom width
 
 <AutocompleteCustomWidth />

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

@@ -73,6 +73,7 @@ const data = [
 
     // (optional) is show instead of "content", once selected
     selected_value: 'Item 1 Value',
+    suffix_value: 'Addition 1',
 
     // Item content as a string, array or React Element
     content: 'Item 1 Content',
@@ -91,6 +92,7 @@ const data = [
   {
     selected_key: 'key_2',
     selected_value: 'Item 3 Value',
+    suffix_value: 'Addition 3',
     content: (
       <Autocomplete.HorizontalItem>
         <IconPrimary icon="bell" />
@@ -101,6 +103,7 @@ const data = [
   {
     selected_key: 'key_3',
     selected_value: 'Item 4 Value',
+    suffix_value: 'Addition 4',
     content: ['Item 4 Content A', <>Custom Component</>],
   },
 ]

packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md

@@ -10,15 +10,15 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
 
 | Properties                                                       | Description                                                                                                                                                             |
 | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `title`                                                          | _(optional)_ give a title to let the users know what they have to do. Defaults to `Valgmeny`.                                                                            |
-| `variant`                                                        | _(optional)_ defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.                               |
+| `title`                                                          | _(optional)_ give a title to let the users know what they have to do. Defaults to `Valgmeny`.                                                                           |
+| `variant`                                                        | _(optional)_ defines the kind of dropdown. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `secondary`.                                |
 | `icon`                                                           | _(optional)_ icon to be included in the dropdown.                                                                                                                       |
 | `icon_size`                                                      | _(optional)_ change the size of the icon pragmatically.                                                                                                                 |
-| `icon_position`                                                  | _(optional)_ position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.                                                                       |
+| `icon_position`                                                  | _(optional)_ position of the icon inside the dropdown. Set to `left` or `right`. Defaults to `right`.                                                                   |
 | `triangle_position`                                              | _(optional)_ position of arrow / triangle of the drawer. Set to `left` or `right`. Defaults to `right`.                                                                 |
 | `size`                                                           | _(optional)_ define the height of the Dropdown. Can be set to `small`, `default`, `medium` and `large`. Defaults to `default`.                                          |
 | `opened`                                                         | _(optional)_ if set to `true`, the Dropdown will be rendered initially with a visible and accessible data list / options.                                               |
-| `open_on_focus`                                                  | _(optional)_ if set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.                                                |
+| `open_on_focus`                                                  | _(optional)_ if set to `true`, the Dropdown will be opened when the users enter the trigger button with a focus action.                                                 |
 | `prevent_selection`                                              | _(optional)_ if set to `true`, no permanent selection will be made. Defaults to `false`.                                                                                |
 | `action_menu`                                                    | _(optional)_ same as `prevent_selection`, but the DrawerList will be opened from the bottom of the page for mobile devices. Defaults to `false`.                        |
 | `more_menu`                                                      | _(optional)_ same as `prevent_selection`, but the "selection area" (given title) will not be visible and the icon `more` (three dots) is used. Defaults to `false`.     |
@@ -27,7 +27,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below
 | `skip_portal`                                                    | _(optional)_ set to `true` to disable the React Portal behavior. Defaults to `false`.                                                                                   |
 | `stretch`                                                        | _(optional)_ if set to `true`, then the dropdown will be 100% in available `width`.                                                                                     |
 | `status`                                                         | _(optional)_ text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.                    |
-| `status_state`                                                   | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.                                                    |
+| `status_state`                                                   | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.                                                   |
 | `status_props`                                                   | _(optional)_ use an object to define additional FormStatus properties.                                                                                                  |
 | `global_status_id`                                               | _(optional)_ the `status_id` used for the target [GlobalStatus](/uilib/components/global-status).                                                                       |
 | `label`                                                          | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created.                                                                           |
@@ -53,6 +53,7 @@ const data = [
 
     // (optional) is show instead of "content", once selected
     selected_value: 'Item 1 Value',
+    suffix_value: 'Addition 1',
 
     // Item content as a string or array
     content: 'Item 1 Content',
@@ -66,11 +67,13 @@ const data = [
   {
     selected_key: 'key_2',
     selected_value: 'Item 3 Value',
+    suffix_value: 'Addition 3',
     content: ['Item 3 Content A', 'Item 3 Content B'],
   },
   {
     selected_key: 'key_3',
     selected_value: 'Item 4 Value',
+    suffix_value: 'Addition 4',
     content: ['Item 4 Content A', <>Custom Component</>],
   },
 ]
@@ -80,4 +83,4 @@ const data = {
   a: 'A',
   b: 'B',
 }
-```
+```

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

@@ -179,6 +179,10 @@ export default class Autocomplete extends React.PureComponent {
               PropTypes.string,
               PropTypes.node,
             ]),
+            suffix_value: PropTypes.oneOfType([
+              PropTypes.string,
+              PropTypes.node,
+            ]),
             content: PropTypes.oneOfType([
               PropTypes.string,
               PropTypes.node,
@@ -1786,7 +1790,7 @@ class AutocompleteInstance extends React.PureComponent {
     }
 
     const inputParams = {
-      className: classnames('dnb-autocomplete__input'),
+      className: 'dnb-autocomplete__input',
       id,
       value: inputValue,
       autoCapitalize: 'none',
@@ -1934,6 +1938,12 @@ class AutocompleteInstance extends React.PureComponent {
                   status={status ? status_state : null}
                   status_state={status_state}
                   type={null}
+                  inner_element={
+                    getCurrentData(
+                      selected_item,
+                      this.context.drawerList.original_data
+                    )?.suffix_value
+                  }
                   submit_element={submitButton}
                   input_state={
                     this.state.skipFocusDuringChange ? 'focus' : undefined

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

@@ -20,6 +20,13 @@ describe('Autocomplete screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match custom input width', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="autocomplete-input-width"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match autocomplete with drawer-button', async () => {
     const screenshot = await testPageScreenshot({
       selector:
@@ -35,44 +42,64 @@ describe('Autocomplete screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
-})
-
-describe('Autocomplete screenshot', () => {
-  setupPageScreenshot({
-    url: '/uilib/components/autocomplete/demos',
-  })
 
   it('have to match autocomplete with search result', async () => {
     const screenshot = await testPageScreenshot({
       selector: '[data-visual-test="autocomplete-drawer-search"]',
       simulateSelector:
         '[data-visual-test="autocomplete-drawer-search"] .dnb-autocomplete .dnb-input',
       simulate: 'click',
-      waitAfterSimulateSelector:
-        '.dnb-drawer-list__options .first-of-type.dnb-drawer-list__option',
       style: {
         height: '40rem',
       },
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match autocomplete opened list', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="autocomplete-opened"]',
+      simulateSelector:
+        '[data-visual-test="autocomplete-opened"] .focus-trigger .dnb-drawer-list:last-of-type li.first-of-type',
+      simulate: 'click',
+      style: {
+        height: '40rem',
+      },
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match autocomplete with suffix value', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="autocomplete-suffix"]',
+      simulateSelector:
+        '[data-visual-test="autocomplete-suffix"] .dnb-autocomplete .dnb-input',
+      simulate: 'click',
+      style: {
+        height: '25rem',
+      },
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('Autocomplete screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/components/autocomplete/demos',
+    pageViewport: {
+      width: 600,
+      height: 600,
+    },
   })
 
-  it('have to match autocomplete opened list', async () => {
+  it('have to match small screen autocomplete with suffix value', async () => {
     const screenshot = await testPageScreenshot({
-      selector: '[data-visual-test="autocomplete-opened"]',
+      selector: '[data-visual-test="autocomplete-suffix"]',
       simulateSelector:
-        '[data-visual-test="autocomplete-opened"] .focus-trigger .dnb-drawer-list:last-of-type li.first-of-type',
+        '[data-visual-test="autocomplete-suffix"] .dnb-autocomplete .dnb-input',
       simulate: 'click',
-      waitAfterSimulateSelector:
-        '.dnb-drawer-list__options li.first-of-type.dnb-drawer-list__option--selected',
       style: {
-        height: '40rem',
+        height: '35rem',
       },
     })
     expect(screenshot).toMatchImageSnapshot()