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

[booc0mtaco]

Summary:

• 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 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

Test Plan:

• Wrote automated tests
• CI tests / new tests are not applicable
• Manually tested my changes, but I want to keep the details secret
• Manually tested my changes, and here are the details:
  • Create an alpha publish and try out in edu-stack or traject as a sanity check if changes affect build or deploy, or are breaking, such as token changes, widely used component updates, hooks changes, and major dependency upgrades.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.88%. Comparing base (552945a) to head (3ab76a2).

Additional details and impacted files

@@            Coverage Diff             @@
##              v14    #1872      +/-   ##
==========================================
+ Coverage   96.85%   96.88%   +0.03%     
==========================================
  Files         108      108              
  Lines        2128     2122       -6     
  Branches      554      550       -4     
==========================================
- Hits         2061     2056       -5     
+ Misses         65       64       -1     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ahuth]

Idea:

When using the component, it feels like I'd rather write this:

<Heading as="h1" preset="h2" />

so that I'm describing a preset relative to other headings.

[booc0mtaco]

✅ I think I follow and that could work. The intent was to allow preset to always match the typography name from design to start, so that engineers don't have to reason about which level means what preset.

I plan to host a workshop for the migration to 14, and can see how people think thru what to use

[ahuth]

LGTM