diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js index 063e6e98d56..b96dc1427f3 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js +++ b/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 = () => ( - - - {() => /* jsx */ ` + + {() => /* jsx */ ` const CustomWidthOne = styled(Autocomplete)\` .dnb-autocomplete__shell { width: 10rem; @@ -259,6 +259,7 @@ const CustomWidthThree = styled(Autocomplete)\` render( /> ) `} - - + +) + +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 ( + + {() => /* jsx */ ` +const CustomWidth = styled(Autocomplete)\` + .dnb-drawer-list__root, + .dnb-autocomplete__shell { + width: 50vw; + min-width: 15rem; + max-width: 30rem; + } +\` +render( + ) +`} + + ) +} export const AutocompleteOpened = () => { if (!(typeof window !== 'undefined' && window.IS_TEST)) { diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md index 7cb632ef0aa..3367f1325bc 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md +++ b/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`. +### Data suffix value + +Data is provided as such: + +```js +const { locale } = React.useContext(Context) +const data = [ + { + suffix_value: ( + + {12345678} + + ), + selected_value: `Brukskonto (${ban})`, + content: ['Brukskonto', ban], + }, +] +``` + + + ### Custom width diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md index 3bf4f28c07f..eb2da5bbd72 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md +++ b/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: ( @@ -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], }, ] diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md index 22aba8d9a73..af3faf474eb 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md +++ b/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', } -``` \ No newline at end of file +``` diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js index a27d3426d40..48efcf4925b 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js +++ 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 diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js index 5311903da16..49c8df1b31e 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js +++ b/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,12 +42,6 @@ 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({ @@ -48,31 +49,57 @@ describe('Autocomplete screenshot', () => { 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() diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js index 5bb76826df7..7944adabdc7 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js @@ -1494,6 +1494,59 @@ describe('Autocomplete component', () => { assert() }) + it('will show suffix_value in options and in input when selected', () => { + const mockData = [ + { + selected_value: 'a selected', + suffix_value: 'a suffix', + content: '11 aa', + }, + { + selected_value: 'b selected', + suffix_value: b suffix, + content: '22 bb', + }, + { + selected_value: 'c selected', + suffix_value: 'c suffix', + content: '22 cc', + }, + ] + + let index = 1 + + const Comp = mount( + + ) + + const assertInputValue = () => { + expect(Comp.find('.dnb-input__input').instance().value).toBe( + mockData[index].selected_value + ) + } + + assertInputValue() + + index = 2 + Comp.setProps({ value: index }) + + assertInputValue() + + // open + keydown(Comp, 40) // down + + const getTextContent = (itemIndex) => + Comp.find('.dnb-drawer-list__option') + .at(itemIndex) + .instance() + .querySelector( + '.dnb-drawer-list__option__item.dnb-drawer-list__option__suffix' + ).textContent + + expect(getTextContent(1)).toBe('b suffix') + expect(getTextContent(2)).toBe(mockData[2].suffix_value) + }) + it('will select correct item after updateData', () => { const mockData = [ { selected_value: 'a value', content: '11 aa' }, diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap index 30de6474ed5..b12658e8a5c 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap @@ -2890,6 +2890,33 @@ legend.dnb-form-label { transition: transform 400ms ease-out; } html[data-visual-test] .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon { transition-duration: 1ms !important; } + .dnb-autocomplete .dnb-input__inner__element { + position: relative; + z-index: 3; } + @media screen and (min-width: 40em) { + .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder, + .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input { + padding-right: 0 !important; } } + @media screen and (max-width: 40em) { + .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder, + .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input { + padding-right: 2.5rem !important; } } + .dnb-autocomplete .dnb-input__inner__element.dnb-p { + pointer-events: none; + white-space: nowrap; + padding: 0 0.5rem; } + @media screen and (max-width: 40em) { + .dnb-autocomplete .dnb-input__inner__element.dnb-p { + display: none; } } + .dnb-autocomplete .dnb-input__inner__element.dnb-p, + .dnb-spacing .dnb-autocomplete .dnb-input__inner__element.dnb-p { + margin: 0; } + .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__inner__element { + margin-right: 2.5rem !important; } + .dnb-autocomplete--icon-position-right .dnb-input__inner__element.dnb-p { + padding-right: 3rem; } + .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input { + padding-right: 1rem; } .dnb-autocomplete__text { order: 1; position: relative; diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-autocomplete-with-suffix-value-1-bae4c.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-autocomplete-with-suffix-value-1-bae4c.snap.png new file mode 100644 index 00000000000..86cb69f87a8 Binary files /dev/null and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-autocomplete-with-suffix-value-1-bae4c.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-custom-input-width-1-41b4b.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-custom-input-width-1-41b4b.snap.png new file mode 100644 index 00000000000..82935faca5d Binary files /dev/null and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-custom-input-width-1-41b4b.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-small-screen-autocomplete-with-suffix-value-1-1e7f2.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-small-screen-autocomplete-with-suffix-value-1-1e7f2.snap.png new file mode 100644 index 00000000000..db0f058667a Binary files /dev/null and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/autocomplete-screenshot-test-js-autocomplete-screenshot-have-to-match-small-screen-autocomplete-with-suffix-value-1-1e7f2.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js b/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js index 3bd5a2111dc..34e8c265806 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js +++ b/packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js @@ -7,8 +7,15 @@ import React from 'react' import { Wrapper, Box } from 'storybook-utils/helpers' import styled from '@emotion/styled' -import { Autocomplete, NumberFormat, IconPrimary, Button } from '../../' +import { + Autocomplete, + NumberFormat, + IconPrimary, + Button, + FormRow, +} from '../../' import { Anchor } from '../../../elements' +import { Context } from '../../../shared' import { SubmitButton } from '../../input/Input' import { format } from '../../number-format/NumberUtils' @@ -832,3 +839,73 @@ function UpdateDataExample() { ) } + +const WideStyle = styled.div` + .dnb-drawer-list__root, + .dnb-autocomplete__shell { + /* custom width */ + width: 50vw; + min-width: 15rem; + max-width: 30rem; + } +` + +export function DataSuffix() { + const { locale } = React.useContext(Context) + const ban = format(21001234567, { ban: true, locale }) + const numbers = [ + { + selected_value: `Brukskonto (${ban})`, + suffix_value: ( + + {12345678} + + ), + content: ['Brukskonto', ban], + }, + { + selected_value: `BSU (${ban})`, + suffix_value: ( + + {2223} + + ), + content: ['BSU', ban], + }, + { + selected_value: `Sparekonto (${ban})`, + suffix_value: ( + + {876555.5} + + ), + content: ['Sparekonto', ban], + }, + { + selected_value: `Brukskonto (${ban})`, + suffix_value: ( + + {34999.2} + + ), + content: ['Brukskonto', ban], + }, + ] + + return ( + + + + + + ) +} diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss b/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss index b711bcca9d0..9e916d9c0af 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss +++ b/packages/dnb-eufemia/src/components/autocomplete/style/_autocomplete.scss @@ -116,6 +116,55 @@ } } + // Support for "suffix_value" + .dnb-input { + &__inner__element { + position: relative; + z-index: 3; + } + + &--has-submit-element .dnb-input__placeholder, + &--has-submit-element .dnb-input__input { + @include allAbove(small) { + // same width of submit button + padding-right: 0 !important; // use important so we avoid to have all sizes in addition + } + @include allBelow(small) { + // same width of submit button + padding-right: 2.5rem !important; // use important so we avoid to have all sizes in addition + } + } + + &__inner__element.dnb-p { + pointer-events: none; + white-space: nowrap; + padding: 0 0.5rem; + + @include allBelow(small) { + display: none; + } + } + + &__inner__element.dnb-p, + .dnb-spacing &__inner__element.dnb-p { + margin: 0; + } + + &--has-submit-element .dnb-input__inner__element { + // same width of submit button + margin-right: 2.5rem !important; // use important so we avoid to have all sizes in addition + } + } + &--icon-position-right .dnb-input { + // stylelint-disable-next-line + &__inner__element.dnb-p { + padding-right: 3rem; + } + &--icon-position-right &--icon-position-right#{&}--has-icon &__input { + padding-right: 1rem; + } + } + &__text { order: 1; position: relative; diff --git a/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js b/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js index 66a941689e3..b2efff5d4b6 100644 --- a/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js +++ b/packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js @@ -19,6 +19,7 @@ import { Modal, // Checkbox } from '../../' +import { Link } from '../../../' export default { title: 'Eufemia/Components/Dropdown', @@ -101,7 +102,12 @@ const DropdownStory = () => { align_dropdown="left" variant="tertiary" title="Tertiary" - data={['Go to this Link', 'Or to this one']} + data={[ + + Go to this Link + , + 'Or to this one', + ]} /> { // align_dropdown="right" variant="tertiary" title="Tertiary" - data={['Go to this Link', 'Or to this one']} + data={[ + + Go to this Link + , + 'Or to this one', + ]} /> @@ -160,7 +171,12 @@ const DropdownStory = () => { size="small" // opened more_menu - data={['Go to this Link', 'Or to this one']} + data={[ + + Go to this Link + , + 'Or to this one', + ]} // skip_portal align_dropdown="right" /> @@ -168,7 +184,12 @@ const DropdownStory = () => { size="small" // opened more_menu - data={['Go to this Link', 'Or to this one']} + data={[ + + Go to this Link + , + 'Or to this one', + ]} // skip_portal // align_dropdown="right" /> @@ -299,7 +320,12 @@ const DropdownStory = () => { align_dropdown={align_dropdown} icon_position={icon_position} more_menu={true} - data={['Go to this Link', 'Or to this one']} + data={[ + + Go to this Link + , + 'Or to this one', + ]} right="x-large x-large" skip_portal /> @@ -311,7 +337,12 @@ const DropdownStory = () => { direction={direction} align_dropdown={align_dropdown} icon_position={icon_position} - data={['Go to this Link', 'Or to this one']} + data={[ + + Go to this Link + , + 'Or to this one', + ]} right="x-large x-large" /> { direction={direction} align_dropdown={align_dropdown} icon_position={icon_position} - data={['Go to this Link', 'Or to this one']} + data={[ + + Go to this Link + , + 'Or to this one', + ]} right="x-large x-large" /> { direction={direction} align_dropdown={align_dropdown} icon_position={icon_position} - data={['Go to this Link', 'Or to this one']} + data={[ + + Go to this Link + , + 'Or to this one', + ]} right="x-large x-large" /> @@ -596,6 +637,7 @@ export const DropdownSandbox = () => ( let dropdownData = [ { selected_value: 'Brukskonto - Kari Nordmann', + suffix_value: 'Suffix value', content: ( <> {/* */} @@ -604,11 +646,14 @@ let dropdownData = [ ), }, { + suffix_value: 'Very long suffix value', content: [ 12345678902 , 'Sparekonto - Ole Nordmann', + 'Line 2', + 'Line 3', ], }, { diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js index 29ecc846060..32b932e2b78 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js +++ b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js @@ -583,7 +583,17 @@ export function ItemContent({ hash = '', children }) { ) } - return content + return Object.prototype.hasOwnProperty.call(children, 'suffix_value') ? ( + <> + {content} + + + {children.suffix_value} + + + ) : ( + content + ) } ItemContent.propTypes = { hash: PropTypes.string, diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js index 6df24219563..50dd2cb1269 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js +++ b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js @@ -79,6 +79,10 @@ export const drawerListPropTypes = { PropTypes.string, PropTypes.node, ]), + suffix_value: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.node, + ]), content: PropTypes.oneOfType([ PropTypes.string, PropTypes.node, diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js index 40f12cbee67..80190d9980d 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js +++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.js @@ -50,6 +50,7 @@ beforeAll(() => { const snapshotProps = { ...fakeProps(require.resolve('../DrawerList'), { + all: true, optional: true, }), id: 'drawer-list-id', diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap index 6cf55bb63b6..ebb34cd20e3 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap +++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap @@ -2,6 +2,54 @@ exports[`DrawerList markup have to match snapshot 1`] = `