[terra-avatar] Provider Variant

[yuderekyu]

Feature Request

Create a Provider variant within terra-avatar.

Use the other variants as a template - the Provider variant will be almost 1-1, except for the SVG.

[supreethmr]

Provider Avatar Tech Design

The Provider variant represents a Physician.

Enhancements

Color Support

• Support 10 color variants.
• Add color prop
  • Defaults to auto. Consumers can override this by passing neutral for a theme specific base color, or one of 10 color variants: one, two,, three, four, five, six, seven, eight, nine, ten.
• Create shared color utils, utilized when color="auto". This will hash the alt prop to determine a color from the color variants. Sample hash function.

Other

• alt prop shall be required.
• Spread custom props onto inner span. This allows an outer component to set aria-hidden on avatar.
• Default size in em's - avatar shall scale based on its container's font-size.

Provider Props

Prop Name	Type	Is Required	Default Value	Description
alt	string	required	none	The text content that specifies the alternative text for the image. Also sets the aria-label for accessibility.
color	PropTypes.oneOf([, 'auto', 'neutral', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'])	optional	'auto'	Sets the background color. Defaults to 'auto'.
hashValue	string	optional	none	Value used for the hash function. If not provided, hash function utilizes alt
image	string	optional	none	The image to display.
isAriaHidden	boolean	optional	false	Whether to hide avatar from accessibility API
size	string	optional	none	Sets the size of the avatar. Overrides the default size.

[supreethmr]

Need Provider SVG to add fallback(default) value for Provider Avatar.

The Provider SVG which is in Terra-Icon seems to be larger compared to SVG's used in other variants so would like to know the SVG value for provider variant to proceed further.

cc : @neilpfeiffer

[emilyrohrbough]

A few things:

• Are the color prop options intended to be numerical? What does one map to vs ten?
• What does the hash value for? Is it for allowing custom colors?
• isAriaHidden -> isAriaLabelHidden to incase there are additional aria attributes in the future

[supreethmr]

A few things:

• Are the color prop options intended to be numerical? What does one map to vs ten?
• What does the hash value for? Is it for allowing custom colors?
• isAriaHidden -> isAriaLabelHidden to incase there are additional aria attributes in the future

1. Yes color prop options intended to be numerical, I mean options should be one of the values from one to ten (which is basically enum of string values). each option from one to ten has corresponding color values defined in css which is used to change background color of Avatar.
   color value for options as follows

• one -> #0092e0
• two -> #0065a3
• three -> #5c9a32
• four -> #406c23
• five -> #f76e00
• six -> #e34c02
• seven -> #b400dc
• eight -> #7f00a2
• nine -> #0092e0
• ten -> #0065a3

2. No it does not allow custom colors for Avatar. hash value will be used to choose default color from above options when color prop is set to auto. Hash value is used by hash function to find closest color from the above color options(acceptable color range). If has value is not provided then hash function will use alt prop value to find the color.

3. 'isAriaHidden' prop name can be changed to 'isAriaLabelHidden' but this prop is used to hide the avatar from accessibility API so we may need to consider naming it more specific to Avatar.

[yuderekyu]

I prefer isAriaHidden, because it matches the aria-hidden attribute we toggle. aria-hidden doesn't just cancel aria-label, it totally removes the element from the accessibility tree.

Tech design looks good to me.

[neilpfeiffer]

(re)Blocking -- awaiting final OCS direction to change the API based on new feedback as a result issue logged #2559 to change the Fallback from Image > Initials (> Icon) and then changing the Shared User to a Generic with variants.

[jeremyfuksa]

SVG Code for provider icon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill='#fff' d="M24 28.9c4.7 0 8.5-3.8 8.5-8.5s-3.8-8.5-8.5-8.5-8.5 3.8-8.5 8.5 3.8 8.5 8.5 8.5zm6 2.9v4.4c0 .3.2.9.9 1.6.6.5.6 1.3.6 1.3v4.5c0 .4-.3.8-.8.8-.4 0-.8-.3-.8-.8v-5.2h-1.5v5.2c0 .4-.3.8-.8.8-.4 0-.8-.3-.8-.8V39s0-.8.6-1.3c.8-.6.9-1.2.9-1.6v-4.7c-.8-.2-1.6-.2-2.4-.2h-4.1c-.8 0-1.6.1-2.4.2v6.9c1.3.3 2.2 1.5 2.2 2.9 0 1.7-1.3 3-3 3s-3-1.3-3-3c0-1.4 1-2.6 2.2-2.9v-6.5c-5 1.7-8.6 6.4-8.6 11.9V48h29.3v-4.3c.1-5.5-3.5-10.2-8.5-11.9zm-12.8 9.4c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5-.7-1.5-1.5-1.5-1.5.7-1.5 1.5z"/></svg>

[jeremyfuksa]

#2559 has been unblocked. This icon can be added to the stylesheet.

After design changes, a standalone provider avatar subcomponent is no longer needed.

Therefore, the sharedUser subcomponent becomes the generic subcomponent with a new variant prop that can be single, multi, or provider.

Code Changes:

[terra-avatar] src/common/AvatarUtils.jsx

• Change shared user variant to generic #L11

[terra-avatar] src/common/Avatar.module.scss

• Add provider icon SVG

[terra-avatar] src/variants/SharedUser.jsx

• Becomes Generic.jsx
• Add variant prop as oneOf['single', 'multi', 'provider'] and make default to single user #L11

[supreethmr]

@jeremyfuksa we might need value for provider svg like other icons in [terra-avatar] src/common/Avatar.module.scss.

[neilpfeiffer]

@supreethmr - the new svg needed for Provider icon is posted in the comment above #2026 (comment)

SVG Code for provider icon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox=" ...

[supreethmr]

🙆🏻‍♂️ Oops my bad I missed it..! Thank you @neilpfeiffer

[yuderekyu]

Do we keep avatar as the default export?

[bjankord]

We should try to group the release of this with #2559