Updated EuiHeaderAlert

[andreadelrio]

Summary

Updated EuiHeaderAlert and added a new section to the docs under Header/Alerts. Removed unneeded call to i18n.

Fixes #2502

Checklist

- [ ] Checked in dark mode
- [ ] Checked in mobile
- [ ] Checked in IE11 and Firefox

• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
  - [ ] Checked for breaking changes and labeled appropriately
  - [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[ryankeairns]

Left some comments, still need to review a bit.

[ryankeairns]

This is looking really good, mostly just small things to address. Let me know if you need an example for mapping over the data.

Also, it would be good to add a note for the badge and action props just to provide a short explanation on what they do/how they affect the UI.

Thanks!!

[ryankeairns]

@andreadelrio I lost track of this due to EAH and ElasticON, I'll re-check today!

[ryankeairns]

LGTM, thanks for all changes! Looks like there is one small conflict to resolve, then this should be good to go.

[myasonik]

Can we replace the div with a time tag?

Suggested change

	<div className="euiHeaderAlert__date">{date}</div>
	<time className="euiHeaderAlert__date">{date}</time>

What might be a bit tougher but would love to see as well is to support automatically filling in a datetime attribute. I'm not sure what EuiI18n supports or not but instead of relying on Kibana (or other implementing devs) to pass in internationalized date strings, if EUI could accept an ISO8601 and then use that both in the datetime attribute and then "translate" it for the human readable section that'd be awesome. Would look something like:

<time className="euiHeaderAlert__date" datatime={date}>
	// NOTE: this is pseudo-code, I don't actually know how to make EuiI18n take a date 
	<EuiI18n value={date} /> 
</time>

[andreadelrio]

@myasonik For the time being I'll just replace div with time. Sound good?

[myasonik]

It's ok if EuiI18n can't handle dates...

[cchaos]

Since {date} is a passed prop from the consuming app, EUI doesn't need to do any localization on it. It should be on the consumer to do that level. We only localize strings in EUI if they are hard-coded.

[myasonik]

LGTM! Thank you for getting those few a11y changes in!

[ryankeairns]

Checked out latest changes locally, looks good!