Apply new UX lookup pattern to the attaching of a license to an agreement

A UX pattern for the looking up of and linking between records in Folio apps has been defined and needs to be be applied to the attaching of a license to an agreement, to ensure a consistent user experience.

The repeating group UX pattern should be applied.

The new Stripes lookup component defined in STCOM-534 should be applied.

1. "Edit agreement" pane changes

Scenario A

The user is editing an agreement and has opened the "License information" accordion. The user selects "Add license to agreement". The repeating field group for adding a license is displayed containing an empty license card, Status field and Note field.

The design shown in this mockup should be applied:

Repeating group header:

1. Add a title to the repeating license group "License n".
2. Add the shaded header band used for a repeating group.
3. In the header display the title "License n" and the trash can.
4. Add a tooltip to the trash can "Remove license".

Repeating group body:

1. Add the shaded background for a repeating group body.
2. In the body display the empty card shown in the wireframe. This includes:
   1. The license icon and heading "License".
   2. The "Add license" button. This is the button "Look-up a license" which needs renaming.
   3. The text "No license added"
   4. Text "Add a license to get started"

Scenario B

The user selects "Add license" which causes the license lookup modal to display. The user selects a license which causes the lookup to close. The Edit Agreement pane is redisplayed, containing the selected license.

The design in this mockup should be applied:

1. The button "Add license" is switched out for the "Unlink license" button.
2. The card display is updated to show details from the selected license.
3. The license name is a link to license record.

Scenario C

The user selects "Unlink license".

The license is unlinked, and the display reverts back to the empty license card.

The confirmation modal shown in the below mockup should be applied.

Unlink license model.png|thumbnail

Text (please apply bold formatting):

Unlink license [license name].-

The license will be removed from agreement [agreement name].

-Select Confirm unlink license to go ahead.

2. "Preview agreement" pane changes

Scenario D

The user previews an agreement which has a controlling license attached, and opens the "License information" accordion.

The linked controlling license should be displayed in the card format, as shown in the wireframe:

The heading "Controlling license" should be displayed in the card header and not displayed outside of the card.

Note that the subheading "Inactive licenses" should have a heading style applied.

Note that licenses which do not have a status="controlling" are displayed in the tabular format shown in the mockup (i.e. changing the display of non-controlling licenses is out of scope).