Separate value from display name in dropdown component

[stianlik]

Is your feature request related to a problem? Please describe.

Alternative answers in AHV includes both value and display name. I.e. if we need to select a country, we could have a model like the following:

const choices = [
  { "value": 1, "name": "Norge" },
  { "value": 2, "name" "Sverige" },
]

In this case, we'd like to display name to the user, whilst we use value internally. In Jøkul, we have to index values by name and translate back and forth to handle changes:

const valuesIndexedByName = choices.reduce((acc, { value, name }) => ({
        ...acc,
        [name]: value,
    }), {});

<Dropdown
        label=""
        items={Object.keys(valuesIndexedByName)}
        onChange={name => answerQuestion(valuesIndexedByName[name])}
    />

Describe the solution you'd like

Ideally, the dropdown component should support value and display value fields so that we could render the component as shown below.

<Dropdown
        items={choices}
        onChange={value => answerQuestion(value)}
    />

Additionally, we don't want to submit a label field into the component, this should be optional. In our case the label is rendered elsewhere (see #330).

Describe alternatives you've considered

We currently translate between text and value outside the component, it works, but it's not a good solution.

[piofinn]

i'm looking into letting it accept value/label pairs in addition to strings now! Ran into a snag with determining which list element to focus on open, but should have it working soon :)

[Mikkelinski]

"Additionally, we don't want to submit a label field into the component, this should be optional. In our case the label is rendered elsewhere (see #330)."

This is being addressed in a separate issue (#366)