Component: Link Field type

[micahmills]

This was recently added in the theme

[cairocoder01]

This will likely be related to #23 since the new field is a bit of an advanced version of communication channels.

[cairocoder01]

This is a new component that needs to be created. It is a bit of an advanced version of the multi-text field, where you can specify groups to put the items in. We can either create a new component and inherit the multi-text class, or we can just add this functionality to the current multi-text. I'm not sure which will be easier and add less complexity.

Value Syntax

Current multi-text values are:

[
    {
      verified: false,
      value: 'test1',
      key: 'comm_channel_1',
    },
    {
      verified: false,
      value: 'test2',
      key: 'comm_channel_2',
    },
  ]

I think we can just add a group property to each value:

[
    {
      verified: false,
      value: 'test1',
      key: 'comm_channel_1',
      group: 'default,
    },
    {
      verified: false,
      value: 'test2',
      key: 'comm_channel_2',
      group: 'one',
    },
  ]

Groups attribute

Then we need to add an attribute to the component to define the groups:

<dt-multi-text groups="[{ id: 'default', label: 'Default' }, { id: 'one', label: 'Group 1' }]"

Add New & keyboard focus

As part of this, we should update the UI to move the Add New plus icon to the top right like the location-map field and remove the add new icon from each item.

As we do this, we need to confirm the tabindex flow for keyboard navigation. When we tab out of the last item in the component, it should tab up to the plus/add icon in order to add another new item. Then, using the arrow keys should highlight the different groups in the dropdown, and tapping enter or tab should select the highlighted group. Focus should then shift automatically to the newly added item.

Screenshots (current theme implementation)