Add euiStat

[ryankeairns]

Adds new EuiStat metric component to EUI.
Closes #559

EuiStat can be used to display prominent text or number values. It consists of title and description elements with several visual styling properties as seen below.

[snide]

Yay. First component. Looks excellent.

Works as advertised and I think it's a generic enough design pattern it can be used in lots of places. I left some comments on the code, but they are very minor.

For a later PR, I bet @cchaos or I can figure out a way to automatically scale the size down if there isn't enough room, but the setup you've got leaves us the room to do that pretty easily.

Nice work.

[snide]

You have a full and a default. Default doesn't currently set styling of any kind. You might want to remove full and apply it's coloring to default. Because default is the titleColor default value, it'll get that title coloring (which design wize seems appropriate in most cases) applied.

[snide]

Writing that out it reads like a tongue twister... so here's what I mean.

default: null,

// remove `euiStat--full,

Then in your .scss

.euiStat__title
  color: $euiColorFullShade;

  @each $name, $color in $titleColors {
    &--#{$name} {
      color: $color;
    }
  }

See the below comment on the JS side to see why it's good to apply the modifier to the title and not the stat itself.

[snide]

To follow pattern with our other components, I'd define this as subdued rather than dark

[snide]

This color isn't for the color of the whole stat block, just the title.

You might want two class constants to better make that distinction.

  const classes = classNames(
    'euiStat',
    textAlignToClassNameMap[textAlign],
    className,
  );

  const titleClasses = classNames(
   'euiStat__title`,
    colorToClassNameMap[titleColor],
  );

Then on your titleDisplay below you can do this...

<EuiTitle size={titleSize} className={titleClasses}>

[snide]

When we reviewed over zoom I forgot to explain a way to not use empty divs. When you run into situations like this where you want to return multiple elements in React, you can use a <Fragment>

https://reactjs.org/docs/fragments.html

First at the top of your JS file you want to make sure to import it.

import React, { Fragment } from 'react';

Then simply replace the div with the fragment.

<Fragment>
  {titleDisplay}
  {descriptionDisplay}
</Fragment>

Now the DOM won't render extra cruft.

[ryankeairns]

Thanks for the feedback @snide , changes made, build passed!

[snide]

All good. Nice work!