Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jun 23, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 69 additions & 10 deletions packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/Examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] {
Expand Down Expand Up @@ -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;
Expand All @@ -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)) {
Expand Down
22 changes: 22 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/demos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ AutocompleteToggleExample,
AutocompletePredefinedInput,
AutocompleteDifferentSizes,
AutocompleteCustomWidth,
AutocompleteSuffix,
AutocompleteOpened
} from 'Docs/uilib/components/autocomplete/Examples'

Expand Down Expand Up @@ -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 />
Expand Down
3 changes: 3 additions & 0 deletions ...s/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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" />
Expand All @@ -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</>],
},
]
Expand Down
15 changes: 9 additions & 6 deletions packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`. |
Expand All @@ -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. |
Expand All @@ -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',
Expand All @@ -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</>],
},
]
Expand All @@ -80,4 +83,4 @@ const data = {
a: 'A',
b: 'B',
}
```
```
12 changes: 11 additions & 1 deletion packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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
Expand Down
55 changes: 41 additions & 14 deletions packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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()
Expand Down
Loading