Add Dynamic Icons Component

[interactivellama]

A set of delightful animated icons
https://www.lightningdesignsystem.com/components/dynamic-icons/

There are many variants and states to DynamicIcon but they are not interactive

[tanhengyeow]

Hi @interactivellama ! Here is my props proposal for this component:

const propTypes = {
	/**
	 * HTML title attribute. _Tested with snapshot testing._
	 */
	title: PropTypes.string.isRequired,
	/**
	 * Triggers icon animation if the value is true.
	 */
	isAnimated: PropTypes.boolean,
	/**
	 * Types of values for the 'score' variant.
	 */
	polarity: PropTypes.oneOf(['positive', 'negative']),
	/**
	 * Range of strength values for the 'strength' variant.
	 */
	strengthLevel: PropTypes.oneOf(['-3', '-2', '-1', '1', '2', '3']),
	/**
	 * Pauses the icon animation if the value is true.
	 */
	paused: PropTypes.boolean,
	/**
	 * Signals direction of the trend. The value 'neutral' points to the east.
	 */
	trend: PropTypes.oneOf(['down', 'up', 'neutral']),
	/**
	 * The content for the DynamicIcon component. _Tested with Mocha framework and snapshot testing._
	 */
	children: PropTypes.node.isRequired,
	/**
	 * Different types of dynamic icons.
	 */
	variant: PropTypes.oneOf([
		'ellie',
		'eq',
		'score',
		'strength',
		'trend',
		'typing',
		'waffle',
	]).isRequired,
};

I tried to implement this component (refer to PR) and want to get your feedback before writing the tests. I've labelled some props with _Tested... for reference when writing tests later.

Here are some gifs for reference:

Ellie:

Eq:

Score:

Strength:

Trend:

Typing:

Waffle:

[interactivellama]

Thank you for taking this task on and proposing props.

• What is the benefit of children?

• Since these aren't interactive, I don't think you will need any Mocha tests. Jest snapshots should be fine. I think you can add _Tested with snapshot testing._ to all the props.

• Please switch the default to being animated. isAnimated to isStatic. The animation removal is typically a feature add for accessibility.

• The prop name strengthLevel is very clear. Please indicate in the prop name which variant aligns with the prop increased understanding: scorePolarity, trendDirection

• In the variant section, please add bullets explaining the variants. These were not on the site, so you wouldn't have seen them to know.

  * `ellie` - Displays a pulsing blue circle, which pulses and stops after one animation cycle.
  * `eq ` - Displays an animated graph with three bars that rise and fall randomly.
  * `score` - Displays a green filled circle or a red unfilled circle.
  * `strength` - Displays three animated horizontal circles that are colored green or red.
  * `trend` - Displays animated arrows that point up, down, or straight.
  * `waffle` - Displays a 3x3 grid of dots that animates on hover.

• Please alphabetize props.
• It's not documented very well, but please add new components to package.json under components key. Feel free to update contributing.md if that'd be helpful to others.

[tanhengyeow]

Hi @interactivellama

Awesome! Thanks for the feedback! Clear on all that was requested.

What is the benefit of children?

With reference to one of the examples I made, I'm showing the dynamic icons that users pass in the component through the children props.

With reference to SLDS, dynamic icons can come in single/multiple span, svg or div. I was thinking to do PropTypes.oneOf(['...']) that incorporates the mentioned elements but it might be restrictive. Your thoughts on this?

[tanhengyeow]

Hi @interactivellama

Didn't mean to re-ping you again, but figured that you might have missed the reply :P Do you have any thoughts for the current children prop? If the props proposal is approved, I'll go ahead and finish up this component with tests and re-ping you again once it is ready for review.

[interactivellama]

No problem on the ping.

slds-assistive-text should be handled with an assistiveText object prop with probably the key label in order to be consistent with Icon component. https://github.com/salesforce/design-system-react/blob/master/components/icon/index.jsx#L113

Thank you for clarifying about the use of children. I didn't look that closely at the examples. I think the current children in the examples should be removed and should be inside the variants of Dynamic icon, so that consumers don't need to copy and post them, similar to how Icon works with category and name (except Icon is external SVGs and this would be hard-coded into the component).