3666 - Update the design of widget counts in uplift

[ericangeles]

Explain the details for making this change. What existing problem does the pull request solve?
Implementing the new design for widget count in uplift. I've also tweaked some positions in non uplift.

This is not limiting to the four colors that was in the design, we can use all the color palettes that we have, even adding other colors in the future.

Related github/jira issue (required):
Closes #3666

Steps necessary to review your pull request (required):

• Pull this branch, build, and run the app
• Navigate to http://localhost:4000/components/counts/example-widget-count.html?theme=uplift&variant=light&colors=0066D4
• Compare it to the old design in uplift https://master-enterprise.demo.design.infor.com/components/counts/example-widget-count.html?colors=0066D4
• Should show the new design for uplift
• Also check the non uplift, made some adjustments
• Test this to all variants

Included in this Pull Request:

• A note to the change log.

[tmcconechy]

This looks good but the design has a few more variations. I would suggest in priority:

1. The example on https://www.figma.com/file/UTwbDbeB1Xv34Uz6js36L4/ids-widget-counts?node-id=0%3A1 "Icon on Count"
2. "Informational button for truncation "
3. "BI Colors" ? Can it be other colors in the 07 color range?
4. Its ok if soho theme is also the line only and not solid color
5. what if there is 2 or 6 rings?

Can skip:

• "text based" examples

[tmcconechy]

Calling this WIP as it needs a few more things.

[ericangeles]

@tmcconechy you can take a look now. The CI will probably failed because of baseline image. But will fix it after.

[tmcconechy]

Looking great. Maybe just two things now

1. On the 4th example: User example let's change the alert to another icon (like success)
2. On the 3rd example: Can we show icons on all 4 (error, orange alert, yellow alert , info?)
3. Can we add two more with six , two, three ect and see if they work ok?

[tmcconechy]

Looks like you got it all covered now 😄 Maybe just fix the test and we call it done.
If you want to perhaps some of these can go on seperate test pages. And fix the test that way. Up to you either way.

[ericangeles]

@tmcconechy this should be good to go now. ☕

[tmcconechy]

🍌