feat(Heading)!: remove deprecated props and refactor usages (#1872)

- remove `size` prop (in favor of `as`)

`size`, marked as deprecated before, is now removed from `Heading`. Instead of `size`, you can now use combinations of `as` and `preset` to get access to both default and custom typography presets. Here's the mapping for the `<h*>` tags to the `preset`:

| `size` => `as` | default `preset` |
|--------|--------|
| h1 | `headline-lg` |
| h2 | `headline-md` |
| h3 | `headline-sm` |
| h4 | `title-md` |
| h5 | `title-sm` | 
| h6 | `title-xs` | 
| h7 | (this has been removed entirely) |

If you used any of the `size` values that map to the HTML heading tags, you can update the prop name from `size` to `as`. If `preset` is specified, and it matches the default value from the table above, you can remove `preset`.

If you used any of the `size` values that map to existing presets, you can update the prop name from `size` to `preset`. Before, the component would convert the `size` value to a relevant default `as` tag. You can use the inverse of the table (reading right to left) to determine which `as` tag to use if one is not provided.

**NOTE**: `as` now has a default value of `"h1"`. You will get accessibility errors if `as` is not provided in the latter cases.

- remove `variant` prop (in favor of utility classes)

The `variant` prop did _some_ of the work of a utility class, by mapping key values to color token usages. However, these named variants didn't match the token naming scheme, and did not provide a set of values that spanned the full set of possible use cases. With this change, we remove this prop, allowing `Heading` to inherit color like normal. Internal components that need to specify a color can now do so in component styles, and this makes it easier to customize the color of any heading using component or utility class values.

| `variant` | EDS Token Used |
|--------|--------|
| error | `--eds-theme-color-text-utility-error` |
| brand | `--eds-theme-color-text-brand-default` |
| info | `--eds-color-info-700` |
| inherit | _none_ (this is the default behavior) |
| neutral-subtle | `--eds-theme-color-text-neutral-subtle` | 
| neutral-medium | `--eds-theme-color-text-neutral-default` | 
| neutral-strong | `--eds-theme-color-text-neutral-strong` | 
| success| `--eds-theme-color-text-utility-success` | 
| warning | `--eds-theme-color-text-utility-warning` | 
| white | --eds-theme-color-text-neutral-default-inverse` | 

When removing `variant` you can use the table above to refactor to the desired utility class, token, or custom class. Refer to [this document](https://chanzuckerberg.github.io/edu-design-system/?path=/story/design-tokens-tier-2-usage-colors--text) for the names of tailwind classes to convert to if used.

### Examples

`<Heading ... variant="error">` =>: 
* `<Heading ... className="text-utility-error">`
* `<div className="text-utility-error"><Heading ...></div>`

**NOTE**: `variant="info"` used a tier-1 token directly, which is a violation. Since this is no longer provided internally, this is a reminder that only tier 2 and above tokens should be used in styling and design.

- refactor usages in composed components

Some composed components used or borrowed from the Heading component API. You will see no changes in the following components' usages:

* PageLevelBanner 
* Section (to be deprecated)
* Tabs

### `Heading` and `Modal`

`Modal` has one change to its API in support of this cleanup. Instead of specifying `size` like before, we now use `preset` (which comes from `Heading`). By default, `Modal` instances use `h2` for the level in their titles. Again, you can reference the table above under `Heading` for how to update the prop value once moving over to `preset`.

- update documentation and stories
- update Heading usages in demo
- add default story
- fix style regressions by updating any usages (chromatic should have 0 diffs)

.storybook/pages/WireframeDemo/WireframeDemo.tsx

@@ -78,8 +78,8 @@ const LoggedOutPage = ({ onLogin }: { onLogin: () => void }) => (
  src={PlaceholderImage}
  />
  <div className="flex flex-col items-center gap-6">
- <Heading size="h1">Application</Heading>
- <Heading size="h2">Sign in</Heading>
+ <Heading as="h1">Application</Heading>
+ <Heading as="h2">Sign in</Heading>
  <Text>Remember to use your school email to sign in:</Text>
  </div>
  <img
@@ -194,7 +194,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  </Button>
  <div>
  <Text className="mb-2">Playing reflections in response to:</Text>
- <Heading as="h1" size="h3">
+ <Heading as="h1" preset="headline-sm">
  What's something in your life, big or small, that you're proud of?
  Why are you proud of it?
  </Heading>
@@ -315,7 +315,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  <Text size="lg">M</Text>
  </div>
  <Link className="mb-4">
- <Heading as="h2" size="h3">
+ <Heading as="h2" preset="headline-sm">
  Mikaela
  </Heading>
  </Link>

src/components/Accordion/Accordion.tsx

@@ -200,8 +200,8 @@ const AccordionButton = ({
  {...other}
  >
  <Heading
+ as={headingAs || contextHeadingAs}
  className={headingClassName}
- size={headingAs || contextHeadingAs}
  >
  {children}
  </Heading>