feat: Use the org acronym when generating the org avatar

[tschaffter]

• Closes Use the org acronym when building the org avatar #1520
• Closes [Bug] Fix avatar whose "initials" are too long to fit in the circle #1518

Changelog

• Enable the user of the avatar component to specify the value (text) to use instead of generating initials from the name.
• Limit the length of the value/initials to 1 characters to prevent UI layouts from breaking.
• Convert the OC avatar component to a standalone component.
• Update the API client for Angular to get access to the property organization.acronym.

Notes

• Setting the acronym to avatar.name will result in a single-letter initial (1-word acronym => 1-letter initial). A solution is to set avatar.value to the acronym. However, the avatar.name should not be specified because it takes priority over avatar.value.

Preview

• The text displayed in the avatar is now limited to 1 characters to prevent UI layout from breaking.
• The new property organization.acronym can be specified instead of generating initials from organization.name (though this should not affect the generation of 1-letter initials).

Below is what the user would see if these orgs didn't have a logo:

[mdsage1]

I like the idea to limit the # of characters displayed in the orgs avatars. I think limit == 2 is a bit too low and would suggest using limit == 3 or limit==4 to avoid end user confusion when viewing the site and prevent overlap in displayed acronyms. A suggestion to avoid this would be to implement a tooltip that will display the full acronym when the user hovers over the avatar.

[vpchung]

Looking over our collected data, upping the max limit to 3 or 4 might not be enough either -- we have some acronyms that are 8 characters long, e.g. EMBL-EBI. This would result in an "acronym" that is either EMB or EMBL, which is the official acronym for "European Molecular Biology Laboratory" (parent organization of EMBL-EBI).

Ergo, I'm arguing for displaying only the first character.

P.S. I like the tooltip idea!

[tschaffter]

@vpchung @mdsage1 Here are some notes from our stand-up meeting:

• Verena submitted a PR to reduce the font size of the avatar text. This change does not guarantee that the avatar won't break because of long text.
• The only solution to the above problem is to limit the number of characters that we want to display.
  • Option 1: We limit the number of character to what we can fit inside the circle for the current font size, i.e. 4. Two potential issues: 1) It may be difficult to fit 4 characters if the size of the avatar is smaller, e.g. if we use it in a list (200x200 px could become 40x40 px), 2) a cropped acronym of 4 letters may look weird.
  • Option 2: We limit the length of the text to 1 or 2 characters. Two characters provide more diversity while maintaining good readability.

What is your preferred text length based on the above notes between 1, 2, and 4-letter strings in the avatar?

[tschaffter]

@vpchung @mdsage1 Thanks for the feedback. I prefer the 1-letter initials to the 4-letter. The benefit is that users shouldn't try to make sense out of a 4-letter initials that correspond to a cropped acronym. A 4-letter acronym may also be difficult to read in a smaller version of the avatars, e.g. when displayed in a list (though we could cross that bridge when we are there).