Heads up box: New component

[benjamincharity]

Needed by Engage and Hub

Product has the need for 'heads up' boxes to display top level metrics.

Basic design:

NOTE: This should be using our card styles as the container.

Todo

• Create component
• Add tests
• Add usage docs
• Add demos

Requirements

• Name: ts-heads-up - TsHeadsUpComponent
  • Note: Name not tied to 'card' or 'sparkline' so that name remains correct as the design and usage changes.
• Accepts data for sparkline
  • Sparkline is optional
• Accepts primary data point (number)
• Should leverage the number abbreviation pipe TBD to shorten the primary data point number
• Accepts label for data

---

If number animation is needed: https://twitter.com/snookca/status/1196902437816279045?s=21