From 8dbc67cf2a1007952f7f3ddd7058b73f0fb6d9d4 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Fri, 1 Mar 2024 10:52:14 -0600
Subject: [PATCH 1/4] feat(Heading)!: remove deprecated props and refactor
 usages

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

Instructions TBD

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

Instructions TBD

- refactor usages in composed components

Some composed components used or borrowed from the Heading component
API:

* List
* Of
* Components
* TBD

Instructions TBD

- update documentation and stories
---
 src/components/Accordion/Accordion.tsx        |   2 +-
 .../__snapshots__/Accordion.test.tsx.snap     |  88 ++++++------
 src/components/Heading/Heading.module.css     | 127 -----------------
 src/components/Heading/Heading.stories.tsx    |  73 +++++-----
 src/components/Heading/Heading.test.tsx       |  24 +---
 src/components/Heading/Heading.tsx            | 134 +++---------------
 .../__snapshots__/Heading.test.tsx.snap       |  28 ++--
 src/components/Heading/index.ts               |   2 +-
 src/components/Modal/Modal.stories.tsx        |  36 +----
 src/components/Modal/Modal.tsx                |  13 +-
 .../Modal/__snapshots__/Modal.test.tsx.snap   |  28 ++--
 .../PageLevelBanner/PageLevelBanner.tsx       |   6 +-
 .../PageLevelBanner.test.ts.snap              |  18 +--
 .../Section/Section.stories.module.css        |   8 --
 src/components/Section/Section.stories.tsx    |   6 +-
 src/components/Section/Section.tsx            |  15 +-
 .../__snapshots__/Section.test.ts.snap        |  18 +--
 src/components/Tabs/Tabs.stories.tsx          |  30 ++--
 .../Tabs/__snapshots__/Tabs.test.tsx.snap     |   6 +-
 19 files changed, 182 insertions(+), 480 deletions(-)
 delete mode 100644 src/components/Section/Section.stories.module.css

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 35dd30e65..6f28c47fd 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -200,8 +200,8 @@ const AccordionButton = ({
           {...other}
         >
           <Heading
+            as={headingAs || contextHeadingAs}
             className={headingClassName}
-            size={headingAs || contextHeadingAs}
           >
             {children}
           </Heading>
diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
index 8ae975d86..d7077a987 100644
--- a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
+++ b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`<Accordion /> Default story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -65,7 +65,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -88,7 +88,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -130,7 +130,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -172,7 +172,7 @@ exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -225,7 +225,7 @@ exports[`<Accordion /> Small story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -272,7 +272,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -315,7 +315,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -350,7 +350,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -385,7 +385,7 @@ exports[`<Accordion /> Stacked story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -431,7 +431,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -473,7 +473,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -515,7 +515,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -557,7 +557,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -611,7 +611,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -654,7 +654,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -689,7 +689,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -724,7 +724,7 @@ exports[`<Accordion /> StackedOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -770,7 +770,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -812,7 +812,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -854,7 +854,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -896,7 +896,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa.
         </h2>
@@ -950,7 +950,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -993,7 +993,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1028,7 +1028,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1063,7 +1063,7 @@ exports[`<Accordion /> StackedSmall story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1109,7 +1109,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1151,7 +1151,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1193,7 +1193,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1235,7 +1235,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1289,7 +1289,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1332,7 +1332,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1367,7 +1367,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1402,7 +1402,7 @@ exports[`<Accordion /> StackedSmallOutline story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1448,7 +1448,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1490,7 +1490,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1532,7 +1532,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1574,7 +1574,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading accordion-button__heading--sm"
+          class="heading heading--headline-md accordion-button__heading accordion-button__heading--sm"
         >
           Massa quam egestas massa.
         </h2>
@@ -1626,7 +1626,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           <p
             class="text text--lg"
@@ -1678,7 +1678,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           <p
             class="text text--lg"
@@ -1741,7 +1741,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           <div
             class="flex flex-wrap items-center gap-2"
@@ -1790,7 +1790,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           <div
             class="items flex flex-wrap items-center gap-2"
@@ -1851,7 +1851,7 @@ exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Accordion Button 
           closed
@@ -1897,7 +1897,7 @@ exports[`<Accordion /> WithLargeHeader story renders snapshot 1`] = `
         type="button"
       >
         <h2
-          class="heading heading--size-h2 accordion-button__heading"
+          class="heading heading--headline-md accordion-button__heading"
         >
           Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa.
         </h2>
diff --git a/src/components/Heading/Heading.module.css b/src/components/Heading/Heading.module.css
index 1f1f858ce..7cfb14e0b 100644
--- a/src/components/Heading/Heading.module.css
+++ b/src/components/Heading/Heading.module.css
@@ -2,133 +2,6 @@
     # HEADING
 \*------------------------------------*/
 
-/* Deprecated; moving all size classes to prefer prefix */
-.heading--size-headline-lg {
-  font: var(--eds-theme-typography-headline-lg);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-001-mobile);
-  }
-}
-
-.heading--size-headline-md {
-  font: var(--eds-theme-typography-headline-md);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-002-mobile);
-  }
-}
-
-.heading--size-headline-sm {
-  font: var(--eds-theme-typography-headline-sm);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-003-mobile);
-  }
-}
-
-.heading--size-title-md {
-  font: var(--eds-theme-typography-title-md);
-}
-
-.heading--size-title-sm {
-  font: var(--eds-theme-typography-title-sm);
-}
-
-.heading--size-title-xs {
-  font: var(--eds-theme-typography-title-xs);
-}
-
-/* Deprecated; not in figma */
-.heading--size-body-sm {
-  font: var(--eds-theme-typography-body-sm);
-}
-
-/* Deprecated; not in figma */
-.heading--size-body-xs {
-  font: var(--eds-theme-typography-body-xs);
-}
-
-/**
- * Heading sizes, correlate to similar numerically named typography token.
- * deprecated in favor of only using the typography presets
- */
-.heading--size-h1 {
-  font: var(--eds-theme-typography-headline-lg);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-001-mobile);
-  }
-}
-
-.heading--size-h2 {
-  font: var(--eds-theme-typography-headline-md);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-002-mobile);
-  }
-}
-
-.heading--size-h3 {
-  font: var(--eds-theme-typography-headline-sm);
-
-  @media all and (max-width: $eds-bp-md) {
-    font: var(--eds-typography-preset-003-mobile);
-  }
-}
-
-.heading--size-h4 {
-  font: var(--eds-theme-typography-title-md);
-}
-
-.heading--size-h5 {
-  font: var(--eds-theme-typography-title-sm);
-}
-
-.heading--size-h6 {
-  font: var(--eds-theme-typography-title-xs);
-}
-
-/* Deprecated; not in figma */
-.heading--size-h7 {
-  font: var(--eds-theme-typography-body-xs);
-}
-
-/**
- * Color variants - deprecated in favor of using utility classes
- */
-.heading--error {
-  color: var(--eds-theme-color-text-utility-error);
-}
-.heading--brand {
-  color: var(--eds-theme-color-text-brand-default);
-}
-/* stylelint-disable-next-line eds/no-tier-1-color-variable */
-.heading--info {
-  color: var(--eds-color-info-700);
-}
-.heading--inherit {
-  color: inherit;
-}
-.heading--neutral-subtle {
-  color: var(--eds-theme-color-text-neutral-subtle);
-}
-.heading--neutral-medium {
-  color: var(--eds-theme-color-text-neutral-default);
-}
-.heading--neutral-strong {
-  color: var(--eds-theme-color-text-neutral-strong);
-}
-.heading--success {
-  color: var(--eds-theme-color-text-utility-success);
-}
-.heading--warning {
-  color: var(--eds-theme-color-text-utility-warning);
-}
-.heading--white {
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-}
-
 /**
  * Map the component preset names to the defined typography tokens
  *
diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx
index 7b89f0d68..86226de2d 100644
--- a/src/components/Heading/Heading.stories.tsx
+++ b/src/components/Heading/Heading.stories.tsx
@@ -14,74 +14,78 @@ export default {
 type Args = React.ComponentProps<typeof Heading>;
 type Story = StoryObj<Args>;
 
+/**
+ * The default `Heading` sets a level-one header tag `<h1>` with the prescribed default preset.
+ */
+export const Default: Story = {};
+
+/**
+ * When using `h1`, the default preset maps to `headline-lg`
+ */
 export const Heading1: Story = {
   args: {
-    size: 'h1',
-    preset: 'headline-lg',
+    as: 'h1',
     children: 'Heading 1',
   },
 };
 
+/**
+ * When using `h2`, the default preset maps to `headline-md`
+ */
 export const Heading2: Story = {
   args: {
-    size: 'h2',
-    preset: 'headline-md',
+    as: 'h2',
     children: 'Heading 2',
   },
 };
 
+/**
+ * When using `h3`, the default preset maps to `headline-sm`
+ */
 export const Heading3: Story = {
   args: {
-    size: 'h3',
-    preset: 'headline-sm',
+    as: 'h3',
     children: 'Heading 3',
   },
 };
 
+/**
+ * When using `h4`, the default preset maps to `title-md`
+ */
 export const Heading4: Story = {
   args: {
-    size: 'h4',
-    preset: 'title-md',
+    as: 'h4',
     children: 'Heading 4',
   },
 };
 
+/**
+ * When using `h5`, the default preset maps to `title-sm`
+ */
 export const Heading5: Story = {
   args: {
-    size: 'h5',
-    preset: 'title-sm',
+    as: 'h5',
     children: 'Heading 5',
   },
 };
 
+/**
+ * When using `h6`, the default preset maps to `title-xs`
+ */
 export const Heading6: Story = {
   args: {
-    size: 'h6',
-    preset: 'title-xs',
+    as: 'h6',
     children: 'Heading 6',
   },
 };
 
-export const Heading7: Story = {
-  args: {
-    size: 'h7',
-    children: 'Heading 7',
-  },
-};
-
 /**
  * Here we demonstrate how to use utility classes to augment the headings.
- * Note that when present, `preset` will override the deprecated props.
  */
 export const UsingColorTokens: Story = {
   render: (args) => (
     <div>
-      <Heading
-        {...args}
-        className="text-utility-warning"
-        preset="title-md"
-        size="h1"
-      >
+      <Heading {...args} className="text-utility-warning" preset="title-md">
         using <code>text-utility-warning</code> utility class
       </Heading>
       <Heading
@@ -89,25 +93,18 @@ export const UsingColorTokens: Story = {
         as="h2"
         className="text-utility-success"
         preset="title-md"
-        size="h3"
       >
-        using <code>text-utility-success</code> utility class
+        using <code>text-utility-success</code> utility class and preset
+        override
       </Heading>
-      <Heading
-        {...args}
-        className="text-utility-error"
-        preset="title-md"
-        size="h3"
-        variant="white"
-      >
+      <Heading {...args} className="text-utility-error" preset="title-md">
         using <code>text-utility-error</code> utility class
       </Heading>
       <Heading
+        className="text-[var(--eds-theme-color-text-utility-success)]"
         preset="title-md"
-        size="h4"
-        style={{ color: 'var(--eds-theme-color-text-utility-success)' }}
       >
-        using inline color
+        using color with token in utility class and preset override
       </Heading>
     </div>
   ),
diff --git a/src/components/Heading/Heading.test.tsx b/src/components/Heading/Heading.test.tsx
index b98036882..35f85102b 100644
--- a/src/components/Heading/Heading.test.tsx
+++ b/src/components/Heading/Heading.test.tsx
@@ -1,25 +1,17 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import type { StoryFile } from '@storybook/testing-react';
-import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
 
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { Heading } from './Heading';
 import * as stories from './Heading.stories';
-import consoleWarnMockHelper from '../../../jest/helpers/consoleWarnMock';
 
 describe('<Heading />', () => {
-  const consoleWarnMock = consoleWarnMockHelper();
-
   generateSnapshots(stories as StoryFile);
 
   it('should add the passthrough className', () => {
-    render(
-      <Heading className="passthrough" size="h1">
-        Some Heading
-      </Heading>,
-    );
+    render(<Heading className="passthrough">Some Heading</Heading>);
     expect(screen.getByText('Some Heading').classList).toContain('passthrough');
   });
 
@@ -34,9 +26,7 @@ describe('<Heading />', () => {
       };
       return (
         <>
-          <Heading ref={refContainer} size="h1">
-            Ref container parent test
-          </Heading>
+          <Heading ref={refContainer}>Ref container parent test</Heading>
           <button onClick={onButtonClick}>Test ref</button>
         </>
       );
@@ -45,14 +35,4 @@ describe('<Heading />', () => {
     expect(screen.getByText('Ref container parent test')).toBeTruthy();
     await user.click(screen.getByRole('button'));
   });
-
-  it('should display warning message when attempting to use h7 size', () => {
-    const { Heading7 } = composeStories(stories);
-    render(<Heading7 />);
-    expect(consoleWarnMock).toHaveBeenCalledTimes(1);
-    expect(consoleWarnMock).toHaveBeenCalledWith(
-      `The h7 size is deprecated and will be removed in an upcoming release.\n`,
-      'Please bump this heading up to a larger size if possible.',
-    );
-  });
 });
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
index 7988aa108..d83031380 100644
--- a/src/components/Heading/Heading.tsx
+++ b/src/components/Heading/Heading.tsx
@@ -3,80 +3,15 @@ import React, { forwardRef } from 'react';
 import type { Preset } from '../../util/variant-types';
 import styles from './Heading.module.css';
 
-/**
- * @deprecated
- */
-export const VARIANTS = [
-  'inherit',
-  'neutral-subtle',
-  'neutral-medium',
-  'neutral-strong',
-  'brand',
-  'success',
-  'warning',
-  'error',
-  'white',
-  /**
-   * @deprecated Info variant is deprecated.
-   */ 'info',
-] as const;
-
-/**
- * @deprecated
- */
-export type Variant = (typeof VARIANTS)[number];
-
 export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-/**
- * @deprecated
- */
-export type TokenSize =
-  | 'headline-lg'
-  | 'headline-md'
-  | 'headline-sm'
-  | 'title-md'
-  | 'title-sm'
-  | 'body-sm'
-  | 'body-xs'
-  | 'title-xs';
-
-/**
- * @deprecated
- */
-export type HeadingSize = HeadingElement | TokenSize | /** @deprecated */ 'h7';
-
-// For now, "h1"-"h6" sizes point to the old type ramp, while
-// "headline-*" and "title-*" sizes point to the new type ramp.
-// These will be brought in sync with the next major release.
-/**
- * @deprecated
- */
-const TOKEN_TO_SIZE: Record<HeadingSize, HeadingElement> = {
-  'headline-lg': 'h1',
-  'headline-md': 'h2',
-  'headline-sm': 'h3',
-  'title-md': 'h4',
-  'title-sm': 'h5',
-  'body-sm': 'h6',
-  'body-xs': 'h6',
-  'title-xs': 'h5',
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  h7: 'h6',
-};
-
-type HeadingProps = {
+type HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {
   /**
-   * This prop can be used to specify which size heading should
+   * This prop can be used to specify which level heading should
    * actually be rendered, in the case that you want to render an element
-   * as one heading but style it as if it were another. If both an `as` prop
-   * and a `size` prop are passed, the `as` will be used to determine the element
-   * and the `size` will be used to determine the styling.
+   * as one heading but style it as if it were another.
+   *
+   * **Default is `"h1"`**.
    */
   as?: HeadingElement;
   children: React.ReactNode;
@@ -85,19 +20,23 @@ type HeadingProps = {
   /**
    * Prop to set the desired typography value used in design. Acceptable values
    * match those used across the design system.
+   *
+   * For details, see https://chanzuckerberg.github.io/edu-design-system/?path=/story/design-tokens-tier-2-usage--typography
    */
   preset?: Preset;
-  /**
-   * This prop is **deprecated**.
-   * @deprecated
-   */
-  size: HeadingSize;
-  /**
-   * This prop is **deprecated**.
-   * @deprecated
-   */
-  variant?: Variant;
-} & React.HTMLAttributes<HTMLHeadingElement>;
+};
+
+/**
+ * Given a certain HeadingElement, what is the default preset to use?
+ */
+const headingPresetMap: Record<HeadingElement, Preset> = {
+  h1: 'headline-lg',
+  h2: 'headline-md',
+  h3: 'headline-sm',
+  h4: 'title-md',
+  h5: 'title-sm',
+  h6: 'title-xs',
+};
 
 /**
  * `import {Heading} from "@chanzuckerberg/eds";`
@@ -108,41 +47,14 @@ type HeadingProps = {
  */
 export const Heading = forwardRef(
   (
-    {
-      as,
-      children,
-      className,
-      preset,
-      size,
-      variant,
-      /**
-       * Components that wrap typography sometimes require properties such as
-       * event handlers, tabIndex, etc. and/or other native heading element
-       * attributes to be passed down into the element.
-       */ ...other
-    }: HeadingProps,
+    { as = 'h1', children, className, preset, ...other }: HeadingProps,
     ref: React.ForwardedRef<HTMLHeadingElement>,
   ) => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (variant === 'info') {
-        console.warn(
-          'Info variant is deprecated and will be removed in an upcoming release. Please use the consider another variant instead.',
-        );
-      }
-      if (size === 'h7') {
-        console.warn(
-          `The ${size} size is deprecated and will be removed in an upcoming release.\n`,
-          'Please bump this heading up to a larger size if possible.',
-        );
-      }
-    }
-
-    const TagName = as || TOKEN_TO_SIZE[size];
+    const TagName = as;
     const componentClassName = clsx(
       styles['heading'],
       preset && styles[`heading--${preset}`],
-      !preset && size && styles[`heading--size-${size}`],
-      !preset && variant && styles[`heading--${variant}`],
+      !preset && styles[`heading--${headingPresetMap[as]}`],
       className,
     );
     return (
diff --git a/src/components/Heading/__snapshots__/Heading.test.tsx.snap b/src/components/Heading/__snapshots__/Heading.test.tsx.snap
index 9aad3ef25..c07c8c7a1 100644
--- a/src/components/Heading/__snapshots__/Heading.test.tsx.snap
+++ b/src/components/Heading/__snapshots__/Heading.test.tsx.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Heading /> Default story renders snapshot 1`] = `
+<h1
+  class="heading heading--headline-lg"
+/>
+`;
+
 exports[`<Heading /> Heading1 story renders snapshot 1`] = `
 <h1
   class="heading heading--headline-lg"
@@ -48,14 +54,6 @@ exports[`<Heading /> Heading6 story renders snapshot 1`] = `
 </h6>
 `;
 
-exports[`<Heading /> Heading7 story renders snapshot 1`] = `
-<h6
-  class="heading heading--size-h7"
->
-  Heading 7
-</h6>
-`;
-
 exports[`<Heading /> UsingColorTokens story renders snapshot 1`] = `
 <div>
   <h1
@@ -74,9 +72,9 @@ exports[`<Heading /> UsingColorTokens story renders snapshot 1`] = `
     <code>
       text-utility-success
     </code>
-     utility class
+     utility class and preset override
   </h2>
-  <h3
+  <h1
     class="heading heading--title-md text-utility-error"
   >
     using 
@@ -84,11 +82,11 @@ exports[`<Heading /> UsingColorTokens story renders snapshot 1`] = `
       text-utility-error
     </code>
      utility class
-  </h3>
-  <h4
-    class="heading heading--title-md"
+  </h1>
+  <h1
+    class="heading heading--title-md text-[var(--eds-theme-color-text-utility-success)]"
   >
-    using inline color
-  </h4>
+    using color with token in utility class and preset override
+  </h1>
 </div>
 `;
diff --git a/src/components/Heading/index.ts b/src/components/Heading/index.ts
index 602d9873e..5d16483e2 100644
--- a/src/components/Heading/index.ts
+++ b/src/components/Heading/index.ts
@@ -1,2 +1,2 @@
 export { Heading as default } from './Heading';
-export type { HeadingElement, HeadingSize } from './Heading';
+export type { HeadingElement } from './Heading';
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 8db7c3ba0..2bbe682e2 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -6,7 +6,6 @@ import { useState } from 'react';
 import { Modal, ModalContent } from './Modal';
 import { Button, ButtonGroup, Heading, Tooltip } from '../../';
 import { chromaticViewports, storybookViewports } from '../../util/viewports';
-import { VARIANTS } from '../Heading/Heading';
 
 export default {
   title: 'Components/Modal',
@@ -61,7 +60,7 @@ const getChildren = (
         <Modal.Title>Modal Title</Modal.Title>
       ) : (
         /* Not using Modal.Title here because it can't exist outside of the Dialog component. */
-        <Heading size="h2">Modal Title</Heading>
+        <Heading as="h2">Modal Title</Heading>
       )}
     </Modal.Header>
     <Modal.Body>{bodyContent}</Modal.Body>
@@ -124,40 +123,11 @@ export const ControlHeadingInteractive: StoryObj<HeadingArgs> = {
       name: 'title "as" prop',
       options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
     },
-    size: {
-      control: 'select',
-      name: 'title "size" prop',
-      // TODO: convert to using `presets` from variant-types and updating modal similar to `Text`
-      options: [
-        'h1',
-        'h2',
-        'h3',
-        'h4',
-        'h5',
-        'h6',
-        'h7',
-        'headline-lg',
-        'headline-md',
-        'headline-sm',
-        'title-md',
-        'title-sm',
-        'body-sm',
-        'body-xs',
-        'title-xs',
-      ],
-    },
-    variant: {
-      control: 'select',
-      name: 'title "variant" prop',
-      options: VARIANTS,
-    },
   },
-  render: ({ as, size, variant, ...args }) => (
+  render: ({ as, ...args }) => (
     <InteractiveExample {...args}>
       <Modal.Header>
-        <Modal.Title as={as} size={size} variant={variant}>
-          Modal Title
-        </Modal.Title>
+        <Modal.Title as={as}>Modal Title</Modal.Title>
       </Modal.Header>
       <Modal.Body>Modal Content</Modal.Body>
     </InteractiveExample>
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index d9de1c9d2..d660b801b 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -4,7 +4,6 @@ import type { MutableRefObject, ReactNode } from 'react';
 import React from 'react';
 import type { ExtractProps } from '../../util/utility-types';
 import type { Size } from '../../util/variant-types';
-import type { HeadingSize } from '../Heading';
 import Heading from '../Heading';
 import { Icon, type IconName } from '../Icon/Icon';
 import styles from './Modal.module.css';
@@ -110,19 +109,15 @@ type ModalProps = ModalContentProps & {
   modalContainerClassName?: string;
 };
 
-type ModalTitleProps = Omit<ExtractProps<typeof Heading>, 'size'> & {
+type ModalTitleProps = ExtractProps<typeof Heading> & {
   /**
-   * Text for the modal title.
+   * Contents for the modal title.
    */
   children: ReactNode;
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
-  /**
-   * Modal Title Heading size. Defaults to 'headline-md'
-   */
-  size?: HeadingSize;
 };
 
 type ModalBodyProps = {
@@ -461,11 +456,11 @@ const ModalStepper = ({
 const ModalTitle = ({
   children,
   className,
-  size = 'headline-md',
+  preset = 'headline-md',
   ...other
 }: ModalTitleProps) => (
   <Dialog.Title as={React.Fragment}>
-    <Heading className={className} size={size} {...other}>
+    <Heading as="h2" className={className} preset={preset} {...other}>
       {children}
     </Heading>
   </Dialog.Title>
diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
index ab0f288f8..7fc970554 100644
--- a/src/components/Modal/__snapshots__/Modal.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`Modal Brand story renders snapshot 1`] = `
     class="modal-header modal-header--brand"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -104,7 +104,7 @@ exports[`Modal ContentDefault story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -180,7 +180,7 @@ exports[`Modal Default story renders snapshot 1`] = `
       class="modal-header"
     >
       <h2
-        class="heading heading--size-headline-md"
+        class="heading heading--headline-md"
         data-headlessui-state="open"
         id="headlessui-dialog-title-:r2:"
       >
@@ -247,7 +247,7 @@ exports[`Modal Medium story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -311,7 +311,7 @@ exports[`Modal Mobile story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -375,7 +375,7 @@ exports[`Modal MobileBrand story renders snapshot 1`] = `
     class="modal-header modal-header--brand"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -448,7 +448,7 @@ exports[`Modal MobileLandscape story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -512,7 +512,7 @@ exports[`Modal MobileLandscapeBrand story renders snapshot 1`] = `
     class="modal-header modal-header--brand"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -660,7 +660,7 @@ exports[`Modal Small story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -724,7 +724,7 @@ exports[`Modal Tablet story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -788,7 +788,7 @@ exports[`Modal TabletBrand story renders snapshot 1`] = `
     class="modal-header modal-header--brand"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -873,7 +873,7 @@ exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
       class="modal-header"
     >
       <h2
-        class="heading heading--size-headline-md"
+        class="heading heading--headline-md"
         data-headlessui-state="open"
         id="headlessui-dialog-title-:r8:"
       >
@@ -959,7 +959,7 @@ exports[`Modal WithStepper story renders snapshot 1`] = `
     class="modal-header"
   >
     <h2
-      class="heading heading--size-h2"
+      class="heading heading--headline-md"
     >
       Modal Title
     </h2>
@@ -1135,7 +1135,7 @@ exports[`Modal WithoutCloseButton story renders snapshot 1`] = `
       class="modal-header"
     >
       <h2
-        class="heading heading--size-headline-md"
+        class="heading heading--headline-md"
         data-headlessui-state="open"
         id="headlessui-dialog-title-:r5:"
       >
diff --git a/src/components/PageLevelBanner/PageLevelBanner.tsx b/src/components/PageLevelBanner/PageLevelBanner.tsx
index 842b96a7e..09ce36d59 100644
--- a/src/components/PageLevelBanner/PageLevelBanner.tsx
+++ b/src/components/PageLevelBanner/PageLevelBanner.tsx
@@ -119,11 +119,7 @@ export const PageLevelBanner = ({
       />
 
       <div>
-        {title && (
-          <Heading as={titleAs} size="title-md" variant={variant}>
-            {title}
-          </Heading>
-        )}
+        {title && <Heading as={titleAs}>{title}</Heading>}
         {description && (
           <Text as={descriptionAs} size="sm" variant="neutral-medium">
             {description}
diff --git a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
index d780d9dd9..d8bc0d079 100644
--- a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
+++ b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
@@ -20,7 +20,7 @@ exports[`<PageLevelBanner /> Brand story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--brand"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -60,7 +60,7 @@ exports[`<PageLevelBanner /> BrandDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--brand"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -119,7 +119,7 @@ exports[`<PageLevelBanner /> Error story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--error"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -159,7 +159,7 @@ exports[`<PageLevelBanner /> ErrorDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--error"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -218,7 +218,7 @@ exports[`<PageLevelBanner /> NoDescription story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--brand"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -281,7 +281,7 @@ exports[`<PageLevelBanner /> Success story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--success"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -321,7 +321,7 @@ exports[`<PageLevelBanner /> SuccessDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--success"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -380,7 +380,7 @@ exports[`<PageLevelBanner /> Warning story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--warning"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -420,7 +420,7 @@ exports[`<PageLevelBanner /> WarningDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--size-title-md heading--warning"
+      class="heading heading--headline-sm"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
diff --git a/src/components/Section/Section.stories.module.css b/src/components/Section/Section.stories.module.css
deleted file mode 100644
index 54a61fa05..000000000
--- a/src/components/Section/Section.stories.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-@import '../../design-tokens/mixins.css';
-
-/**
- *  Body text xs bold
- */
-.section__text {
-  font: var(--eds-theme-typography-body-xs);
-}
diff --git a/src/components/Section/Section.stories.tsx b/src/components/Section/Section.stories.tsx
index 300fc953c..3375903ae 100644
--- a/src/components/Section/Section.stories.tsx
+++ b/src/components/Section/Section.stories.tsx
@@ -5,7 +5,6 @@ import { Section } from './Section';
 import Button from '../Button';
 import Icon from '../Icon';
 import Text from '../Text';
-import styles from './Section.stories.module.css';
 
 export default {
   title: 'Components/Section',
@@ -37,7 +36,7 @@ export const Center: StoryObj<Args> = {
     overline: <Text size="overline">Overline above title</Text>,
     title: 'Section Title',
     description: (
-      <Text as="p" className={styles['section__text']} size="sm">
+      <Text as="p" preset="body-xs" size="sm">
         This is a description of what the section is
       </Text>
     ),
@@ -48,7 +47,7 @@ export const WithDescription: StoryObj<Args> = {
   args: {
     title: 'Section Title',
     description: (
-      <Text as="p" className={styles['section__text']} size="sm">
+      <Text as="p" preset="body-xs" size="sm">
         This is a description of what the section is
       </Text>
     ),
@@ -84,7 +83,6 @@ export const WithTitleBefore: StoryObj<Args> = {
   args: {
     titleBefore: HelpIcon,
     title: 'Section Title',
-    headingSize: 'h4',
     headingAs: 'h4',
   },
 };
diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
index 35f91204e..ca0b8c8a9 100644
--- a/src/components/Section/Section.tsx
+++ b/src/components/Section/Section.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { HeadingElement, HeadingSize } from '../Heading';
+import type { HeadingElement } from '../Heading';
 import Heading from '../Heading';
 import styles from './Section.module.css';
 export interface Props {
@@ -30,10 +30,6 @@ export interface Props {
    * "as" prop, passed to Heading Component
    */
   headingAs?: HeadingElement;
-  /**
-   * "size" prop, passed to Heading Component
-   */
-  headingSize?: HeadingSize;
   /**
    * Right slot - an area to put right-aligned content after section title
    */
@@ -66,8 +62,7 @@ export const Section = ({
   children,
   className,
   description,
-  headingAs,
-  headingSize = 'h2',
+  headingAs = 'h2',
   overline,
   right,
   title,
@@ -95,11 +90,7 @@ export const Section = ({
               {overline && (
                 <div className={styles['section__overline']}>{overline}</div>
               )}
-              <Heading
-                as={headingAs}
-                className={styles['section__title']}
-                size={headingSize}
-              >
+              <Heading as={headingAs} className={styles['section__title']}>
                 {title}
                 {titleAfter && (
                   <span className={styles['section__title-after']}>
diff --git a/src/components/Section/__snapshots__/Section.test.ts.snap b/src/components/Section/__snapshots__/Section.test.ts.snap
index ec37554f7..17ea52809 100644
--- a/src/components/Section/__snapshots__/Section.test.ts.snap
+++ b/src/components/Section/__snapshots__/Section.test.ts.snap
@@ -26,7 +26,7 @@ exports[`<Section /> Center story renders snapshot 1`] = `
             </p>
           </div>
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -34,7 +34,7 @@ exports[`<Section /> Center story renders snapshot 1`] = `
             class="section__description"
           >
             <p
-              class="text text--sm section__text"
+              class="text text--body-xs"
             >
               This is a description of what the section is
             </p>
@@ -68,7 +68,7 @@ exports[`<Section /> Default story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -101,7 +101,7 @@ exports[`<Section /> WithDescription story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -109,7 +109,7 @@ exports[`<Section /> WithDescription story renders snapshot 1`] = `
             class="section__description"
           >
             <p
-              class="text text--sm section__text"
+              class="text text--body-xs"
             >
               This is a description of what the section is
             </p>
@@ -152,7 +152,7 @@ exports[`<Section /> WithOverline story renders snapshot 1`] = `
             </p>
           </div>
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -185,7 +185,7 @@ exports[`<Section /> WithRight story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
           </h2>
@@ -228,7 +228,7 @@ exports[`<Section /> WithTitleAfter story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h2
-            class="heading heading--size-h2 section__title"
+            class="heading heading--headline-md section__title"
           >
             Section Title
             <span
@@ -303,7 +303,7 @@ exports[`<Section /> WithTitleBefore story renders snapshot 1`] = `
           class="section__title-inner"
         >
           <h4
-            class="heading heading--size-h4 section__title"
+            class="heading heading--title-md section__title"
           >
             Section Title
           </h4>
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 7f71ba74b..8285a44dd 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -19,7 +19,7 @@ export default {
       <>
         <Tabs.Tab title="Tab Title 1">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 1
             </Heading>
             <Text>
@@ -33,7 +33,7 @@ export default {
 
         <Tabs.Tab title="Tab Title 2">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 2
             </Heading>
             <Text>
@@ -47,7 +47,7 @@ export default {
 
         <Tabs.Tab title="Tab Title 3">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 3
             </Heading>
             <Text>
@@ -61,7 +61,7 @@ export default {
 
         <Tabs.Tab title="Tab Title 4">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 4
             </Heading>
             <Text>
@@ -75,7 +75,7 @@ export default {
 
         <Tabs.Tab title="Tab Title 5">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 5
             </Heading>
             <Text>
@@ -89,7 +89,7 @@ export default {
 
         <Tabs.Tab title="Tab Title 6">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 6
             </Heading>
             <Text>
@@ -103,7 +103,7 @@ export default {
 
         <Tabs.Tab title="Tab Title 7">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 7
             </Heading>
             <Text>
@@ -117,7 +117,7 @@ export default {
 
         <Tabs.Tab title="Tab Title 8">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 8
             </Heading>
             <Text>
@@ -131,7 +131,7 @@ export default {
 
         <Tabs.Tab title="Tab Title 9">
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 9
             </Heading>
             <Text>
@@ -388,7 +388,7 @@ export const CustomTabs: StoryObj<Args> = {
             )}
           </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 1
             </Heading>
             <Text>
@@ -411,7 +411,7 @@ export const CustomTabs: StoryObj<Args> = {
             )}
           </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 2
             </Heading>
             <Text>
@@ -434,7 +434,7 @@ export const CustomTabs: StoryObj<Args> = {
             )}
           </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 3
             </Heading>
             <Text>
@@ -457,7 +457,7 @@ export const CustomTabs: StoryObj<Args> = {
             )}
           </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 4
             </Heading>
             <Text>
@@ -480,7 +480,7 @@ export const CustomTabs: StoryObj<Args> = {
             )}
           </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 5
             </Heading>
             <Text>
@@ -503,7 +503,7 @@ export const CustomTabs: StoryObj<Args> = {
             )}
           </Tabs.Tab.Button>
           <div className="max-w-xl">
-            <Heading className="mb-6" size="h3">
+            <Heading as="h3" className="mb-6">
               Tab 6
             </Heading>
             <Text>
diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index b049e2bba..d9931af04 100644
--- a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -168,7 +168,7 @@ exports[`<Tabs /> Centered story renders snapshot 1`] = `
         class="max-w-xl"
       >
         <h3
-          class="heading heading--size-h3 mb-6"
+          class="heading heading--headline-sm mb-6"
         >
           Tab 1
         </h3>
@@ -463,7 +463,7 @@ exports[`<Tabs /> CustomTabs story renders snapshot 1`] = `
           class="max-w-xl"
         >
           <h3
-            class="heading heading--size-h3 mb-6"
+            class="heading heading--headline-sm mb-6"
           >
             Tab 1
           </h3>
@@ -648,7 +648,7 @@ exports[`<Tabs /> Default story renders snapshot 1`] = `
         class="max-w-xl"
       >
         <h3
-          class="heading heading--size-h3 mb-6"
+          class="heading heading--headline-sm mb-6"
         >
           Tab 1
         </h3>

From ff03d0a35a98b9d9d51bcfe3e43be07c3ca400a6 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Fri, 1 Mar 2024 10:59:53 -0600
Subject: [PATCH 2/4] fix(WireframeDemo): update Heading usages in demo

---
 .storybook/pages/WireframeDemo/WireframeDemo.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.storybook/pages/WireframeDemo/WireframeDemo.tsx b/.storybook/pages/WireframeDemo/WireframeDemo.tsx
index fdaeb7581..82ec84d09 100644
--- a/.storybook/pages/WireframeDemo/WireframeDemo.tsx
+++ b/.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>

From b1c1987ce3cc0fa2e93007860a470bdc2ac26997 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Fri, 1 Mar 2024 11:01:07 -0600
Subject: [PATCH 3/4] test(Heading): add content to default story

---
 src/components/Heading/Heading.stories.tsx                 | 6 +++++-
 src/components/Heading/__snapshots__/Heading.test.tsx.snap | 4 +++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx
index 86226de2d..c4e2479c4 100644
--- a/src/components/Heading/Heading.stories.tsx
+++ b/src/components/Heading/Heading.stories.tsx
@@ -17,7 +17,11 @@ type Story = StoryObj<Args>;
 /**
  * The default `Heading` sets a level-one header tag `<h1>` with the prescribed default preset.
  */
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    children: 'Default Heading',
+  },
+};
 
 /**
  * When using `h1`, the default preset maps to `headline-lg`
diff --git a/src/components/Heading/__snapshots__/Heading.test.tsx.snap b/src/components/Heading/__snapshots__/Heading.test.tsx.snap
index c07c8c7a1..1607e2ef9 100644
--- a/src/components/Heading/__snapshots__/Heading.test.tsx.snap
+++ b/src/components/Heading/__snapshots__/Heading.test.tsx.snap
@@ -3,7 +3,9 @@
 exports[`<Heading /> Default story renders snapshot 1`] = `
 <h1
   class="heading heading--headline-lg"
-/>
+>
+  Default Heading
+</h1>
 `;
 
 exports[`<Heading /> Heading1 story renders snapshot 1`] = `

From 3ab76a255da00d5a368be87d11b36bc00b0216c2 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Fri, 1 Mar 2024 11:32:16 -0600
Subject: [PATCH 4/4] fix(PageLevelBanner): fix style regression by using
 preset

---
 .../PageLevelBanner/PageLevelBanner.tsx        |  6 +++++-
 .../__snapshots__/PageLevelBanner.test.ts.snap | 18 +++++++++---------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/PageLevelBanner/PageLevelBanner.tsx b/src/components/PageLevelBanner/PageLevelBanner.tsx
index 09ce36d59..bbf5d2ffc 100644
--- a/src/components/PageLevelBanner/PageLevelBanner.tsx
+++ b/src/components/PageLevelBanner/PageLevelBanner.tsx
@@ -119,7 +119,11 @@ export const PageLevelBanner = ({
       />
 
       <div>
-        {title && <Heading as={titleAs}>{title}</Heading>}
+        {title && (
+          <Heading as={titleAs} preset="title-md">
+            {title}
+          </Heading>
+        )}
         {description && (
           <Text as={descriptionAs} size="sm" variant="neutral-medium">
             {description}
diff --git a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
index d8bc0d079..a812e93d1 100644
--- a/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
+++ b/src/components/PageLevelBanner/__snapshots__/PageLevelBanner.test.ts.snap
@@ -20,7 +20,7 @@ exports[`<PageLevelBanner /> Brand story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -60,7 +60,7 @@ exports[`<PageLevelBanner /> BrandDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -119,7 +119,7 @@ exports[`<PageLevelBanner /> Error story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -159,7 +159,7 @@ exports[`<PageLevelBanner /> ErrorDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -218,7 +218,7 @@ exports[`<PageLevelBanner /> NoDescription story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -281,7 +281,7 @@ exports[`<PageLevelBanner /> Success story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -321,7 +321,7 @@ exports[`<PageLevelBanner /> SuccessDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -380,7 +380,7 @@ exports[`<PageLevelBanner /> Warning story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>
@@ -420,7 +420,7 @@ exports[`<PageLevelBanner /> WarningDismissable story renders snapshot 1`] = `
   </svg>
   <div>
     <h3
-      class="heading heading--headline-sm"
+      class="heading heading--title-md"
     >
       New curriculum updates are available for one or more of your courses.
     </h3>