Requires: #10193

Adds a new Typography UI component that will allow quickly styling text per the design system without adding additional class names and scss.

Example: where you might have previously needed to do something like this:

  <div className="my-component">
    <header className="my-component__header">
      <h1>Text</h1>
      <h4>Text</h4>
    </header>
  </div>

.my-component {
  &__header {
    h1 {
     @include H1;

     color: $ui-4;
    }
    h4 {
     @include H4;
   
     color: $ui-2;
    }
  }
}

You can now do:

  <div className="my-component">
    <header>
      <Typography variant={TYPOGRAPHY.H1} color={COLORS.UI4}>Text</Typography>
      <Typography variant={TYPOGRAPHY.H4} color={COLORS.UI2}>Text</Typography>
    </header>
  </div>

The lack of an example scss file for the second one is on purpose... you don't need it!

To an extent, this PR also will do some alignment and positioning for you, behind the spacing and align props. Eventually, I hope to improve the Typography component to hit 90% of the UI use cases without needing to apply a className or custom scss.

Storybook: