[ERM-261] Restructure the Agreement accordions Created: 26/Apr/19  Updated: 28/Jun/19  Resolved: 28/Jun/19

Status: Closed
Project: ERM Platform
Components: ui-agreements
Affects versions: None
Fix versions: None

Type: Task Priority: P3
Reporter: Gill Osguthorpe Assignee: Aditya matukumalli
Resolution: Done Votes: 0
Labels: erm
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original estimate: Not Specified

Attachments: JPEG File Agreement preview - large headline and restructured accordions.JPG     PNG File Example of headline styling (applied to User form).png     PNG File screenshot-1.png    
Issue links:
Defines
defines UXPROD-1669 UX improvements for Agreements up to ... Closed
Sprint: ERM Sprint 66
Story Points: 2
Development Team: Bienenvolk

 Description   

Filip has suggested that sub-accordions should be avoided if possible. They can either:
1. be turned into new parent accordions
2. become headers in their parent accordion

The attached mockup shows how the Agreement might be restructured. Note that empty accordions have also been removed. Changes made are:

  1. "Agreement information" accordion has been removed and the main content moved to the record header.
  2. The sub-accordion "Internal contacts" has become a main accordion.
  3. The sub-accordions "Content reviews", "Trials" and "Review history" have been removed because they currently have no functionality.
  4. The sub-accordion "Finance report" has been removed from "Finances - agreement lines" because it has not yet been implemented.
  5. In "License information" the two sub-accordions "Inactive licenses" and "External licenses" are changed from being sub-accordions to headers.
  6. The sub-accordion "License" in "Organizations" has been removed as it has not yet been implemented.
  7. The sub-accordion "E-resources covered by this agreement" has been made a header in the accordion "E-resources - agreement lines".


 Comments   
Comment by Gill Osguthorpe [ 17/Jun/19 ]

[copied from Slack]

Aditya Matukumalli
@ostephens @Gill Osguthorpe Ca you please let me know if there needs to be any further modifications to the `edit agreement` page, specifically in the `Internal Contacts`, `Agreement Lines`, `License info`, `Organizations` and `Supplementary Information` accordions? It seems to me that they all need to stay as is? For now, I just changed the `Agreement Info` section to how its described in the mockup on ERM-261 Closed , and moved `Internal Contacts` into a main accordion.

Gill Osguthorpe
I've taken a look on https://folio-testing.aws.indexdata.com Aditya matukumalli and have a few comments for you.

Thank you for moving the 'Agreement information' section out of the accordion. I can't see what you've done but the changes to make are:

  1. Remove the heading 'Agreement information'.
  2. The large heading style is supposed to be applied to the 'Name' field, as shown in the mockup example for the Edit User form (see https://folio-org.atlassian.net/browse/UX-239 for details). However, don't do this if it causes any issues, or looks bad when applied!
  3. The large heading style should also be applied to the heading on the 'Agreement Preview' (it hasn't been done so far and belongs under another issue really). See https://ux.folio.org/storybook/?selectedKind=Headline&selectedStory=Basic%20Usage&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel

Thanks for moving Internal Contacts.

'All licenses' needs to come out of its sub-accordion and simply become part of the main 'License information' section. No heading is needed.

'External license' needs to come out of its sub-accordion and become part of the main 'License information' section, but with a sub-heading 'External licenses'. Note that sub-headings need to be styled on both the Edit pane and the Preview pane. I'm not sure which style this is md331 may be able to advise.

I think that's all on the Edit Agreement pane, give me a shout if you have any more questions.
Aditya Matukumalli [4 days ago]

Comment by Gill Osguthorpe [ 17/Jun/19 ]

Update: Agreed with Aditya matukumalli it it best to not apply heading styles to form fields for now and wait to see if it is going to be applied by the other apps.

Comment by Gill Osguthorpe [ 18/Jun/19 ]

Aditya matukumalli, md331 and I have been discussing the styling of sub-headings. In this snip the three sub-headings below should all use the headline component described in the Storybook: https://ux.folio.org/storybook/?selectedKind=Headline&selectedStory=Basic%20Usage&full=0&addons=1&stories=1&panelRight=0&addonPanel=REACT_STORYBOOK%2Freadme%2Fpanel:

  1. Controlling license
  2. Inactive licenses
  3. External licenses

They should have the "medium" size applied and be tagged as "h4". Mark uses margin="none" on areas like these. I'm not sure whether or not they need a fade.We're aiming for the sub-headings to be smaller than the Accordion headings but larger than the main text.

Please don't worry about making the "Controlling license" sub-heading look better. Mark has noticed that the accordion/button styling is interfering with it, and also we're changing this soon (it will become a heading in a license card). If you could sort the other two out that would be great.

Generated at Fri Feb 09 00:17:31 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.