Counter: Spin off into individual component, a11y, and icon

[Firestorm980]

Is your enhancement related to a problem? Please describe.

I'm using a customized version of the Counter component that is currently part of the rich text character limit.

Break out Counter

I'm only using the counter in this case, not the entire component. Since I had to add it to an existing control that we specifically don't want to be RichText, it may be useful to spin out the Counter so it can be used in other contexts.

a11y Updates

For accessibility purposes, there should probably be a couple of changes in particular:

• The warning icon could use some additional contrast since yellow on white tends to be hard to see. In my customized version, I'm using a yellow icon with a black fill.[1]
• We should look into using something like meter to semantically let the user know the value of characters remaining

Icon updates

In the customized version, we also have added a "good" icon that gives the user extra information that the current value is well within the specified range.[2]

Designs

1. 
2. 

Describe alternatives you've considered

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Sidsector9]

@fabiankaegy I am picking this up.

[jeffpaul]

@Sidsector9 please coordinate with @cadic who may also be working on this next week, so any branch you've started would be good to push up so Max can help build off that

[Sidsector9]

Sure @jeffpaul

@cadic most of the changes are done, except for the green icon with the tick in it. We need to request the UI team to design one for us.

The PR is raised here - #158

[jeffpaul]

@fabiankaegy are you able to mock something up for Sid/Max to make the green tick icon update in the related PR?