Library Info Sidebar

[bradenmacdonald]

Design: Figma mid-fi

✅ In Scope:

1. Clicking the on the library home page next to the library name will open the Library Info Sidebar
2. The Library Info Sidebar should also be open by default whenever the user first navigates to a particular library.
3. Users can close the Sidebar by clicking the "x" in the upper right corner. When the sidebar is closed, the number of content tiles is responsive and occupies the space instead. If there are no content tiles yet, the empty state display is responsive and occupies the space instead.
4. The Library Info Sidebar allows users to change the library name (but only show the pencil icon if the user has permission to edit the library)
   
5. The Library Info Sidebar shows the published status and allows the user to publish the latest changes (if they have permission).
6. Any changes made to fields in the Library sidebar save automatically.
7. The Library Info Sidebar shows the created/modified dates.
8. The name of the organization that the library belongs to.

🛑 Out of Scope (for now):
8. The description field requires backend changes so is separated as #1042
9. The "Creator" of the library is excluded for now (not stored anywhere) discussion
10. We don't list which users can view/edit/administer the library.

Notes:

• Create a re-usable React component for "Sidebar with Tabs" like this because we'll be using this pattern a lot
• No backend changes should be required for this story.

[ChrisChV]

Create a re-usable React component for "Sidebar with Tabs" because we'll be using this pattern a lot

@bradenmacdonald Do you mean a sidebar like this? If so, you can add the link to this component as an example?

[bradenmacdonald]

@ChrisChV Yes, done.

[jmakowski1123]

Here's the current hifi library sidebar. Note the "Library Authoring Team" section would instead be replaced with "Organization" and the name of the organization that owns the library.

[ChrisChV]

Hi @jmakowski1123 I have a question. In the Library History what is the value of Last Modified? The last date of the saved Draft? or the last time of publish? or what is the value? For me, I understand that the value is the date of the saved Draft, but is confusing for me because that date is already showed in the publishing section of the info sidebar.

[jmakowski1123]

Hi @jmakowski1123 I have a question. In the Library History what is the value of Last Modified? The last date of the saved Draft? or the last time of publish? or what is the value? For me, I understand that the value is the date of the saved Draft, but is confusing for me because that date is already showed in the publishing section of the info sidebar.

Thanks for calling this out, it's not clear in the spec. Here are definitions of the values in this Library sidebar:

Last published - The last time the Library as a whole was published (not the last time any content within the Library was published, but rather the last time the Library as a whole was published)

Last modified - The last time that a piece of content within the Library was modified (published, updated, created and saved in draft mode)

Last created - The time at which the Library as a whole was created

Does this clear things up?

[jmakowski1123]

There has been a minor UI change to the Library info button. Instead of displaying as a round icon next to the Library Title, it is now a button with the round icon and the words "Library Info", and it has moved to the left of the Add Content button. All of the behavior remains as described in the original story. This should be a paragon component. Is this a small effort to change? If not, please let me know.

[ChrisChV]

Hi @jmakowski1123 I have a question. In the Library History what is the value of Last Modified? The last date of the saved Draft? or the last time of publish? or what is the value? For me, I understand that the value is the date of the saved Draft, but is confusing for me because that date is already showed in the publishing section of the info sidebar.

Thanks for calling this out, it's not clear in the spec. Here are definitions of the values in this Library sidebar:

Last published - The last time the Library as a whole was published (not the last time any content within the Library was published, but rather the last time the Library as a whole was published)

Last modified - The last time that a piece of content within the Library was modified (published, updated, created and saved in draft mode)

Last created - The time at which the Library as a whole was created

Does this clear things up?

Yes, Thanks 👍

[ChrisChV]

Is this a small effort to change? If not, please let me know.

Yes, it can be done in this story

[ChrisChV]

@jmakowski1123 @lizc577 @sdaitzman @marcotuts This is ready for AC testing on the sandbox

[sdaitzman]

Thank you @ChrisChV. I have a few detail notes/questions on the sandbox version.

1. At small sizes, it looks like the edit/close icon buttons in the sidebar stop being square
2. I think the expected behavior for the Library Info button is to act as a toggle, i.e. clicking it when the sidebar is open should close the sidebar (CC @lizc577)
3. When the Library Info sidebar is open, I think we should consider modifying the Library Info button to indicate that state, e.g. by increasing its border width from 1px to 2px:

[ChrisChV]

@sdaitzman Thanks, I will check it

[ChrisChV]

@jmakowski1123 @lizc577 @sdaitzman @marcotuts The fixes are ready for AC testing on the sandbox

[lizc577]

@ChrisChV Couple of small UI tweaks -

1. The hover states for the Edit icon and the Close icon should be the same color. Please match them to the primary blue that you are using for the edit icon hover.
2. Add a bit of padding to the edit icon so that there is some breathing room between the library title and icon (currently on hover, they are nearly touching)