@bloom-housing/ui-components 6.0.1-alpha.1 → 6.0.1-alpha.3

package/src/global/text.scss

@@ -72,31 +72,6 @@ h1.title {
   @apply text-4xl;
 }
 
-.text-caps-underline {
-  @apply font-alt-sans;
-  @apply uppercase;
-  @apply text-tiny;
-  @apply mb-5;
-  @apply pb-2;
-  @apply border-0;
-  @apply border-b-4;
-  @apply border-primary;
-  @apply font-semibold;
-  @apply text-gray-800;
-  @apply tracking-widest;
-  @apply inline-block;
-}
-
-.text-caps-tiny {
-  @apply mb-3;
-  @apply text-gray-750;
-  @apply uppercase;
-  @apply font-sans;
-  @apply font-bold;
-  @apply text-tiny;
-  @apply tracking-wide;
-}
-
 .text-serif-lg {
   @apply font-serif;
   @apply text-lg;
@@ -140,42 +115,85 @@ h1.title {
   @apply block;
 }
 
-.card-header {
-  font-family: var(--card-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--card-header-font-weight, 600);
-  color: var(--card-header-color, var(--bloom-color-blue-700));
-  font-size: var(--card-header-font-size, var(--bloom-font-size-3xl));
-  margin-block: var(--card-header-margin-block, 0 var(--bloom-s3));
-  line-height: var(--card-header-line-height, var(--bloom-line-height-tight));
-}
-
-.card-subheader {
-  font-family: var(--card-subheader-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--card-subheader-font-weight, normal);
-  color: var(--card-subheader-color, var(--bloom-color-black));
-  font-size: var(--card-subheader-font-size, var(--bloom-font-size-base));
-  margin-block: var(--card-subheader-margin-block, 0 var(--bloom-s3));
-}
-
-.table-header {
-  font-family: var(--table-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--table-header-font-weight, 600);
-  color: var(--table-header-color, var(--bloom-color-gray-800));
-  font-size: var(--table-header-font-size, var(--bloom-font-size-sm));
-  margin-block: var(--table-header-margin-block, 0 var(--bloom-s1));
-}
-
-.table-subheader {
-  font-family: var(--table-subheader-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--table-subheader-font-weight, normal);
-  color: var(--table-subheader-color, var(--bloom-color-gray-750));
-  font-size: var(--table-subheader-font-size, var(--bloom-font-size-sm));
-  margin-block: var(--table-header-margin-block, 0 var(--bloom-s3));
-}
-
-.category-header {
-  font-family: var(--category-header-font-family, var(--bloom-font-alt-sans));
-  font-weight: var(--category-header-font-weight, 600);
-  color: var(--category-header-color, var(--bloom-color-gray-700));
-  font-size: var(--category-header-font-size, var(--bloom-font-size-sm));
+:root {
+  --bloom-text-color-light: var(--bloom-color-gray-700);
+  --bloom-text-color: var(--bloom-color-gray-750);
+  --bloom-text-color-dark: var(--bloom-color-gray-800);
+  --bloom-text-color-darker: var(--bloom-color-gray-850);
+  --bloom-text-color-darkest: var(--bloom-color-black);
+}
+
+.text__large-primary {
+  font-family: var(--text-large-primary-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-large-primary-font-weight, 600);
+  color: var(--text-large-primary--color, var(--bloom-color-primary-dark));
+  font-size: var(--text-large-primary-font-size, var(--bloom-font-size-3xl));
+  margin-block: var(--text-large-primary-margin-block, 0 var(--bloom-s3));
+  line-height: var(--text-large-primary-line-height, var(--bloom-line-height-tight));
+}
+
+.text__medium-normal {
+  font-family: var(--text-medium-normal-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-medium-normal-font-weight, normal);
+  color: var(--text-medium-normal-color, var(--bloom-text-color-darkest));
+  font-size: var(--text-medium-normal-font-size, var(--bloom-font-size-base));
+  margin-block: var(--text-medium-normal-margin-block, 0 var(--bloom-s3));
+}
+
+.text__small-weighted {
+  font-family: var(--text-small-weighted-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-small-weighted-font-weight, 600);
+  color: var(--text-small-weighted-color, var(--bloom-text-color-dark));
+  font-size: var(--text-small-weighted-font-size, var(--bloom-font-size-sm));
+  margin-block: var(--text-small-weighted-margin-block, 0 var(--bloom-s1));
+}
+
+.text__small-normal {
+  font-family: var(--text-small-normal-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-small-normal-font-weight, normal);
+  color: var(--text-small-normal-color, var(--bloom-text-color));
+  font-size: var(--text-small-normal-font-size, var(--bloom-font-size-sm));
+  margin-block: var(--text-small-normal-margin-block, 0 var(--bloom-s3));
+}
+
+.text__light-weighted {
+  font-family: var(--text-light-weighted-font-family, var(--bloom-font-alt-sans));
+  font-weight: var(--text-light-weighted-font-weight, 600);
+  color: var(--text-light-weighted-color, var(--bloom-text-color-light));
+  font-size: var(--text-light-weighted-font-size, var(--bloom-font-size-sm));
+}
+
+.text_caps-spaced {
+  font-family: var(--text-caps-spaced-font-family, var(--bloom-font-sans));
+  text-transform: uppercase;
+  color: var(--text-caps-spaced-color, var(--bloom-text-color));
+  letter-spacing: var(--text-caps-spaced-letter-spacing, var(--bloom-letter-spacing-widest));
+  font-weight: var(--text-caps-spaced-font-weight, 600);
+  font-size: var(--text-caps-spaced-font-size, var(--bloom-font-size-tiny));
+  margin-bottom: var(--text-caps-spaced-margin-bottom, var(--bloom-s3));
+  display: inline-block;
+}
+
+.text__underline-weighted {
+  font-family: var(--text-underline-weighted-font-family, var(--bloom-font-alt-sans));
+  text-transform: var(--text-underline-weighted-transform, uppercase);
+  font-size: var(--text-underline-weighted-font-size, var(--bloom-font-size-tiny));
+  margin-bottom: var(--text-underline-weighted-bottom-margin, var(--bloom-s5));
+  padding-bottom: var(--text-underline-weighted-bottom-padding, var(--bloom-s2));
+  border: var(--text-underline-weighted-border, 0);
+  border-bottom: var(--text-underline-weighted-border, 4px solid var(--bloom-color-primary));
+  font-weight: var(--text-underline-weighted-font-weight, 600);
+  color: var(--text-underline-weighted-color, var(--bloom-text-color-dark));
+  letter-spacing: var(--text-underline-weighted-letter-spacing, var(--bloom-letter-spacing-widest));
+  display: inline-block;
+}
+
+.text__caps-weighted {
+  margin-bottom: var(--text-caps-weighted-bottom-margin, var(--bloom-s3));
+  color: var(--text-caps-weighted-color, var(--bloom-text-color));
+  text-transform: var(--text-caps-weighted-text-transform, uppercase);
+  font-family: var(--text-caps-weighted-font-family, var(--bloom-font-sans));
+  font-weight: var(--text-caps-weighted-font-weight, 700);
+  font-size: var(--text-caps-weighted-font-size, var(--bloom-font-size-tiny));
+  letter-spacing: var(--text-caps-weighted-letter-spacing, var(--bloom-letter-spacing-wide));
 }

package/src/global/tokens/colors.scss

@@ -26,6 +26,7 @@
   --bloom-color-gray-800: #30383a;
   --bloom-color-gray-750: #555555;
   --bloom-color-gray-700: #767676;
+  --bloom-color-gray-650: #888888;
   --bloom-color-gray-600: #999999;
   --bloom-color-gray-550: #aaaaaa;
   --bloom-color-gray-500: #cccccc;

package/src/headers/HeadingGroup.docs.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { HeadingGroup } from "./HeadingGroup"
+
+# Heading Group
+
+<Canvas>
+  <Story id="headers-heading-group--with-content" />
+</Canvas>
+
+The HeadingGroup component provides a heading tag (h1-h6) combined with a paragraph tag as a subheading in an aria-minded fashion. Good for use in Card header components and other headers.
+
+## Heading Group Properties
+
+<ArgsTable of={HeadingGroup} />
+
+## Theming Variables
+
+You can apply CSS variables to the `.heading-group` selector to customize the appearance of the component.
+
+| Name                  | Type  | Description                                         | Default      |
+| --------------------- | ----- | --------------------------------------------------- | ------------ |
+| `--heading-margin`    | Size  | Vertical space added around the top heading, if any | `0rem`       |
+| `--subheading-margin` | Size  | The space between the heading and subheading        | `--bloom-s3` |
+| `--heading-color`     | Color | Override to set a specific heading text color       | `inherit`    |
+| `--subheading-color`  | Color | Override to set a specific subheading text color    | `inherit`    |

package/src/headers/HeadingGroup.scss

@@ -0,0 +1,23 @@
+.heading-group {
+  /* Component Variables */
+  --heading-margin: 0rem;
+  --subheading-margin: var(--bloom-s3);
+  --heading-color: inherit;
+  --subheading-color: inherit;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-block: var(--heading-margin);
+    color: var(--heading-color);
+  }
+
+  p {
+    margin-block: var(--subheading-margin);
+    font-size: var(--bloom-font-size-base);
+    color: var(--subheading-color);
+  }
+}

package/src/headers/HeadingGroup.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import { Heading } from "../text/Heading"
+import "./HeadingGroup.scss"
+
+export interface HeadingGroupProps {
+  /** A string or element to display in an `h2` tag (overridable via `headingPriority`) */
+  heading: React.ReactNode
+  /** A string or element to display in an `p` tag (using `aria-roledescription="subtitle"`) */
+  subheading: React.ReactNode
+  /**
+   * The heading level (1 through 6)
+   * @default 2
+   */
+  headingPriority?: number
+  /** Additional class name for the whole group */
+  className?: string
+}
+
+const HeadingGroup = (props: HeadingGroupProps) => {
+  const classNames = ["heading-group"]
+  if (props.className) classNames.push(props.className)
+
+  return (
+    <hgroup className={classNames.join(" ")} role="group">
+      <Heading priority={props.headingPriority ?? 2}>{props.heading}</Heading>
+      <p aria-roledescription="subtitle">{props.subheading}</p>
+    </hgroup>
+  )
+}
+
+export { HeadingGroup as default, HeadingGroup }

package/src/navigation/ProgressNav.scss

@@ -4,7 +4,7 @@
   --active-step-color: var(--bloom-color-primary);
   --active-step-font-color: var(--bloom-color-gray-900);
   --future-step-color: var(--bloom-color-gray-450);
-  --future-step-font-color: var(--bloom-color-gray-750);
+  --future-step-font-color: var(--bloom-text-color);
 
   --dot-size: var(--bloom-s3);
   --dot-padding-left-mobile: var(--bloom-s2);

package/src/page_components/listing/ListingCard.tsx

@@ -3,7 +3,7 @@ import { ImageCard, ImageCardProps, ImageTag } from "../../blocks/ImageCard"
 import { LinkButton } from "../../actions/LinkButton"
 import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
 import { StandardTable, StandardTableProps } from "../../tables/StandardTable"
-import { Heading, HeaderType } from "../../headers/Heading"
+import { Heading, HeaderType } from "../../text/Heading"
 import { Tag } from "../../text/Tag"
 import { AppearanceShadeType, AppearanceStyleType } from "../../global/AppearanceTypes"
 import { Icon, IconFillColors } from "../../icons/Icon"
@@ -12,7 +12,7 @@ import { NavigationContext } from "../../config/NavigationContext"
 
 interface ListingCardTableProps extends StandardTableProps, StackedTableProps {}
 
-export interface CardHeader {
+export interface ListingCardHeader {
   content: string | React.ReactNode
   href?: string
   customClass?: string
@@ -20,17 +20,17 @@ export interface CardHeader {
   isPillType?: boolean
 }
 
-export interface FooterButton {
+export interface ListingFooterButton {
   href: string
   text: string
   ariaHidden?: boolean
 }
 
 export interface ListingCardContentProps {
-  contentHeader?: CardHeader
-  contentSubheader?: CardHeader
-  tableHeader?: CardHeader
-  tableSubheader?: CardHeader
+  contentHeader?: ListingCardHeader
+  contentSubheader?: ListingCardHeader
+  tableHeader?: ListingCardHeader
+  tableSubheader?: ListingCardHeader
 }
 export interface ListingCardProps {
   /** A list of tags to be rendered below the content header, a Tag component is rendered for each */
@@ -40,7 +40,7 @@ export interface ListingCardProps {
   /** An object containing fields that render optional headers above the content section's table */
   contentProps?: ListingCardContentProps
   /** A list of buttons to render in the footer of the content section */
-  footerButtons?: FooterButton[]
+  footerButtons?: ListingFooterButton[]
   /** A class name applied to the footer container of the content section */
   footerContainerClass?: string
   /** Custom content rendered below the content table */
@@ -74,7 +74,7 @@ const ListingCard = (props: ListingCardProps) => {
   const { LinkComponent } = useContext(NavigationContext)
 
   const getHeader = (
-    header: CardHeader | undefined,
+    header: ListingCardHeader | undefined,
     priority: number,
     styleType?: HeaderType,
     customClass?: string
@@ -94,7 +94,7 @@ const ListingCard = (props: ListingCardProps) => {
         )
       }
       return (
-        <Heading priority={priority} style={styleType} className={customClass}>
+        <Heading priority={priority} styleType={styleType} className={customClass}>
           {header.href ? (
             <LinkComponent className="is-card-link" href={header.href}>
               {header.content}
@@ -112,8 +112,8 @@ const ListingCard = (props: ListingCardProps) => {
   const getContentHeader = () => {
     return (
       <div className="listings-row_headers">
-        {getHeader(contentProps?.contentHeader, 2, "cardHeader", "order-1")}
-        {getHeader(contentProps?.contentSubheader, 3, "cardSubheader", "order-2")}
+        {getHeader(contentProps?.contentHeader, 2, "largePrimary", "order-1")}
+        {getHeader(contentProps?.contentSubheader, 3, "mediumNormal", "order-2")}
         {cardTags && cardTags?.length > 0 && (
           <div className="listings-row_tags">
             {cardTags?.map((cardTag, index) => {
@@ -145,8 +145,8 @@ const ListingCard = (props: ListingCardProps) => {
               <hr className={"mb-2"} />
             )}
           <div className={"listings-row_headers"}>
-            {getHeader(contentProps?.tableHeader, 4, "tableHeader")}
-            {getHeader(contentProps?.tableSubheader, 5, "tableSubheader")}
+            {getHeader(contentProps?.tableHeader, 4, "smallWeighted")}
+            {getHeader(contentProps?.tableSubheader, 5, "smallNormal")}
           </div>
           {children && children}
           {tableProps && (tableProps.data || tableProps.stackedData) && (

package/src/page_components/listing/ListingMap.tsx

@@ -5,7 +5,7 @@ import MapGL, { Marker } from "react-map-gl"
 import "./ListingMap.scss"
 import { MultiLineAddress, Address } from "../../helpers/MultiLineAddress"
 import { useIntersect } from "../../.."
-import { Heading } from "../../headers/Heading"
+import { Heading } from "../../text/Heading"
 
 export interface ListingMapProps {
   address?: Address
@@ -109,7 +109,7 @@ const ListingMap = (props: ListingMapProps) => {
     <div className="listing-map" ref={setIntersectingElement}>
       <div className="addressPopup">
         {props.listingName && (
-          <Heading priority={3} style={"sidebarSubHeader"}>
+          <Heading priority={3} styleType={"capsWeighted"}>
             {props.listingName}
           </Heading>
         )}

package/src/page_components/listing/listing_sidebar/Contact.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { ContactAddress } from "./ContactAddress"
 import { Icon, IconFillColors } from "../../../icons/Icon"
 import { Address } from "../../../helpers/MultiLineAddress"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 
 export interface ContactProps {
   /** Any number of text sections rendered after the contact information */
@@ -49,7 +49,7 @@ const Contact = ({
 
   return (
     <section className="aside-block">
-      <Heading priority={4} style={"sidebarHeader"}>
+      <Heading priority={4} styleType={"underlineWeighted"}>
         {sectionTitle}
       </Heading>
 
@@ -96,7 +96,7 @@ const Contact = ({
       {additionalInformation?.map((info) => {
         return (
           <div key={info.title} className={"my-3"}>
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {info.title}
             </Heading>
             <div className="text-gray-800 text-tiny markdown">{info.content}</div>

package/src/page_components/listing/listing_sidebar/ExpandableSection.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import Markdown from "markdown-to-jsx"
 import { ExpandableContent } from "../../../actions/ExpandableContent"
+import { Heading } from "../../../text/Heading"
 
 export interface ExpandableSectionProps {
   content: string | React.ReactNode
@@ -28,7 +29,9 @@ const ExpandableSection = ({ content, expandableContent, strings }: ExpandableSe
   }
   return (
     <section className="aside-block">
-      <h4 className="text-caps-underline">{strings.title}</h4>
+      <Heading priority={4} styleType={"underlineWeighted"}>
+        {strings.title}
+      </Heading>
       <div className="text-tiny text-gray-750">
         {getTextContent(content)}
         {expandableContent && (

package/src/page_components/listing/listing_sidebar/GetApplication.tsx

@@ -4,7 +4,7 @@ import { Button } from "../../../actions/Button"
 import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
 import { Address } from "../../../helpers/MultiLineAddress"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 import { t } from "../../../helpers/translator"
 import { OrDivider } from "./OrDivider"
 import { ContactAddress } from "./ContactAddress"
@@ -56,9 +56,10 @@ const GetApplication = (props: ApplicationsProps) => {
 
   return (
     <section className="aside-block" data-test-id="get-application-section">
-      <h2 className="text-caps-underline">
+      <Heading priority={2} styleType={"underlineWeighted"}>
         {props.strings?.howToApply ?? t("listings.apply.howToApply")}
-      </h2>
+      </Heading>
+
       {!props.applicationsOpen && (
         <p className="mb-5 text-gray-700">
           {props.strings?.applicationsOpenInFuture ??
@@ -121,7 +122,7 @@ const GetApplication = (props: ApplicationsProps) => {
           {props.applicationsOpen && (props.onlineApplicationURL || props.paperMethod) && (
             <OrDivider bgColor="white" />
           )}
-          <Heading priority={3} style={"sidebarSubHeader"}>
+          <Heading priority={3} styleType={"capsWeighted"}>
             {props.strings?.pickUpApplication ?? t("listings.apply.pickUpAnApplication")}
           </Heading>
           <ContactAddress
@@ -130,7 +131,7 @@ const GetApplication = (props: ApplicationsProps) => {
           />
           {props.applicationPickUpAddressOfficeHours && (
             <>
-              <Heading priority={3} style={"sidebarSubHeader"}>
+              <Heading priority={3} styleType={"capsWeighted"}>
                 {props.strings?.officeHoursHeading ?? t("leasingAgent.officeHours")}
               </Heading>
               <p className="text-gray-800 text-tiny markdown">

package/src/page_components/listing/listing_sidebar/QuantityRowSection.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Heading } from "../../../text/Heading"
 
 export interface QuantityRow {
   amount: number | null
@@ -33,7 +34,9 @@ const QuantityRowSection = ({ quantityRows, strings }: QuantityRowSectionProps)
 
   return (
     <section className="aside-block is-tinted">
-      <h4 className="text-caps-tiny">{strings.sectionTitle}</h4>
+      <Heading priority={4} styleType={"capsWeighted"}>
+        {strings.sectionTitle}
+      </Heading>
       <div>
         {strings.description && (
           <p className="text-tiny text-gray-800 pb-3">{strings.description}</p>

package/src/page_components/listing/listing_sidebar/ReferralApplication.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Heading } from "../../../text/Heading"
 import { t } from "../../../helpers/translator"
 import { Icon, IconFillColors } from "../../../icons/Icon"
 
@@ -16,7 +17,9 @@ const ReferralApplication = (props: ReferralApplicationProps) => {
 
   return (
     <section className="aside-block">
-      <h2 className="text-caps-underline">{props.strings.title}</h2>
+      <Heading priority={2} styleType={"underlineWeighted"}>
+        {props.strings.title}
+      </Heading>
       <p>
         <a href={linkedPhoneNumber}>
           <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />{" "}

package/src/page_components/listing/listing_sidebar/SidebarBlock.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading, HeadingProps } from "../../../headers/Heading"
+import { Heading, HeadingProps } from "../../../text/Heading"
 
 export interface SidebarBlockProps extends Omit<HeadingProps, "children" | "className"> {
   children: React.ReactNode
@@ -7,11 +7,11 @@ export interface SidebarBlockProps extends Omit<HeadingProps, "children" | "clas
   title?: string
 }
 
-const SidebarBlock = ({ children, className, title, priority, style }: SidebarBlockProps) => {
+const SidebarBlock = ({ children, className, title, priority, styleType }: SidebarBlockProps) => {
   return (
     <section className={`aside-block ${className ? className : ""}`}>
       {title && (
-        <Heading priority={priority ?? 4} style={style ?? "sidebarHeader"}>
+        <Heading priority={priority ?? 4} styleType={styleType ?? "underlineWeighted"}>
           {title}
         </Heading>
       )}

package/src/page_components/listing/listing_sidebar/SubmitApplication.tsx

@@ -3,7 +3,7 @@ import Markdown from "markdown-to-jsx"
 import { Address } from "../../../helpers/MultiLineAddress"
 import { ContactAddress } from "./ContactAddress"
 import { OrDivider } from "./OrDivider"
-import { Heading } from "../../../headers/Heading"
+import { Heading } from "../../../text/Heading"
 
 export interface ApplicationAddressesProps {
   /** The dropoff address for paper applications */
@@ -38,7 +38,7 @@ const SubmitApplication = ({
         <div className="text-serif-lg">{strings.sectionHeader}</div>
         {applicationMailingAddress && (
           <>
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {strings.mailHeader}
             </Heading>
             <>
@@ -51,13 +51,13 @@ const SubmitApplication = ({
         {applicationDropOffAddress && (
           <>
             {applicationMailingAddress && <OrDivider bgColor="gray-100" />}
-            <Heading priority={3} style={"sidebarSubHeader"}>
+            <Heading priority={3} styleType={"capsWeighted"}>
               {strings.dropOffHeader}
             </Heading>
             <ContactAddress address={applicationDropOffAddress} mapString={strings.mapString} />
             {applicationDropOffAddressOfficeHours && (
               <>
-                <Heading priority={3} style={"sidebarSubHeader"}>
+                <Heading priority={3} styleType={"capsWeighted"}>
                   {strings.officeHoursHeader}
                 </Heading>
                 <p className="mt-4 text-tiny text-gray-750">

package/src/page_components/listing/listing_sidebar/events/EventSection.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading } from "../../../../headers/Heading"
+import { Heading } from "../../../../text/Heading"
 
 export type EventType = {
   timeString?: string
@@ -28,7 +28,10 @@ const EventSection = (props: EventSectionProps) => {
   return (
     <section className="aside-block">
       {props.headerText && (
-        <Heading priority={4} style={props.sectionHeader ? "sidebarHeader" : "sidebarSubHeader"}>
+        <Heading
+          priority={4}
+          styleType={props.sectionHeader ? "underlineWeighted" : "capsWeighted"}
+        >
           {props.headerText}
         </Heading>
       )}

package/src/sections/InfoCardGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 import "./InfoCardGrid.scss"
 
 export interface InfoCardGridProps {
@@ -11,7 +11,7 @@ export interface InfoCardGridProps {
 const InfoCardGrid = (props: InfoCardGridProps) => (
   <section className="info-cards">
     <header className="info-cards__header">
-      <Heading style={"sidebarHeader"} priority={2} className={"text-tiny"}>
+      <Heading styleType={"underlineWeighted"} priority={2} className={"text-tiny"}>
         {props.title}
       </Heading>
       {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}

package/src/tables/CategoryTable.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { StackedTable, StackedTableProps } from "./StackedTable"
-import { Heading } from "../headers/Heading"
+import { Heading } from "../text/Heading"
 
 export interface CategoryTableSection {
   /** The header text for a category */
@@ -18,7 +18,7 @@ const CategoryTable = (props: CategoryTableProps) => {
   const tables = props.categoryData.map((category, index) => {
     return (
       <div key={index}>
-        <Heading priority={3} style={"categoryHeader"}>
+        <Heading priority={3} styleType={"lightWeighted"}>
           {category.header}
         </Heading>
         <hr className={"my-2"} />

package/src/text/Heading.docs.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
+import { Swatch } from "../prototypes/Swatch"
+import { Heading } from "./Heading"
+
+# Heading
+
+The heading component renders an HTML heading with a flexible priority and style. Each style available maps to a [Typography](?path=/story/theming-typography--page) variant.
+
+<Canvas>
+  <Story id="text-heading--large-header" />
+</Canvas>
+
+<br />
+<br />
+
+## Component Properties
+
+<ArgsTable of={Heading} />

package/src/text/Heading.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+
+export interface HeadingProps {
+  children?: React.ReactNode
+  className?: string
+  priority?: number
+  styleType?: HeaderType
+}
+
+export type HeaderType = keyof typeof HeaderStyleMap
+
+const HeaderStyleMap = {
+  largePrimary: "text__large-primary",
+  mediumNormal: "text__medium-normal",
+  smallWeighted: "text__small-weighted",
+  smallNormal: "text__small-normal",
+  underlineWeighted: "text__underline-weighted",
+  lightWeighted: "text__light-weighted",
+  capsWeighted: "text__caps-weighted",
+}
+
+const Heading = (props: HeadingProps) => {
+  const priority = props.priority && props.priority >= 1 && props.priority <= 6 ? props.priority : 1
+  const Tag = `h${priority}` as keyof JSX.IntrinsicElements
+  const classNames = []
+  if (props.styleType) classNames.push(HeaderStyleMap[props.styleType])
+  if (props.className) classNames.push(props.className)
+
+  return <Tag className={classNames.join(" ")}>{props.children}</Tag>
+}
+
+export { Heading as default, Heading }