[Steps] Small-sized horizontal steps

[JasonStoltz]

We would like to add small-sized variant of the EuiStepsHorizontal component.

Description

This was originally proposed in this discussion.

A design spec was created to support this.

There is also a Figma design for this.

### Tasks
- [x] Spec reviewed for a11y concerns (@1Copenut)

### Acceptance criteria
- [x] Feature is merged and deployed into the latest version of EUI
- [x] Feature is documented in EUI docs
- [x] Full test coverage
- [x] Updates Storybook stories (if applicable)
- [x] Sign off from @cindychangy to confirm this will work in her implementation
- [x] Figma updated

[JasonStoltz]

@1Copenut @ryankeairns I assigned this to both of you for the tasks above.

Ryan, would you mind reviewing the spec and helping us reconcile the Figma and spec?

@1Copenut do you think there are any a11y implications to consider when not showing a visible step number?

[1Copenut]

@JasonStoltz Yes, I do think there's a11y implications. I'm reviewing the component now, and will update this comment if I find additional things. Here's what I feel worth looking into:

1. The current (blue) dot is very similar in hue and intensity to the completed (green) steps. The completed steps do have a black check mark, but at small size I'm not sure this is enough to meet the requirements of SC 1.4.1: Use of Color (Level A). Testers might argue the checkmark is too small to be seen by users with reduced visual acuity. I'd recommend adding a differentiation to the current step, like a bold outer halo of the same color with 2-4px of whitespace between the dot and the outer border. We could also add the word "current" or something to the label to indicate this is the current item.
2. The disabled text color #ABB4C4 does not meet WCAG 4.5:1 contrast ratio. I'd recommend making this text the same color as non-current labels and spelling out that the step is disabled.
3. Safari + VO is reading out a lot of extra information in our live horizontal list. I think it's the combined title and svg[aria-label] being picked up. This might not affect NVDA / JAWS. I'll test it after bit and add a code improvement ticket if necessary.

[ryankeairns]

I believe we can scope this down to adding a size prop to the horizontal layout. It would support two values: m as default (which is the current design) and s which is a new option. In this option, the only thing that changes is the size of the circular marker; the title size is unaffected.

There is an existing use case for s during the create deployment/project flow, but I am not aware of anything for xs which at this size or lower could run us into avoidable a11y issues.

cc:/ @cindychangy

[JasonStoltz]

Just so I'm clear. We're proposing we use this size, from the Figma -- and not the smallest size.

In which case, we're ditching the idea of the "numberless" format and "xs" size. We would still have numbers at the "s" size.

Please note that if this is the case, we should update the Figma and spec as well, so there's zero confusion when we get to work on this.

[JasonStoltz]

@ryankeairns Can I get your input on the above question?

[ryankeairns]

That is correct. Add small but not smallest.