Merge pull request #1569 from ASU/UDS-2033

UDS-2033: CLONE - Content missing after heading

Author: davidornelas11

packages/app-rfi/README.md

@@ -9,7 +9,8 @@ submission payload and add the host's source ID (which serves as an API key and
 identifier) to the payload, and then send it off to the RFI submissions service
 which processes and routes the submissions to Undergrad, Grad, and ASUOnline
 middleware destinations so that the RFI request ultimately lands in the
-appropriate Salesforce destination. 
+appropriate Salesforce destination.
+
 
 ## Installation and Requirements
 

packages/app-rfi/src/components/appVariants/index.js

@@ -77,7 +77,7 @@ const variants = {
         CampusProgramHasChoice: validation.CampusProgramHasChoice,
       }}
     >
-      <h4>Step 1 of 2</h4>
+      <div className={'h4'}>Step 1 of 2</div>
       <h2>Request information</h2>
       <p className="rfi-step1-intro">
         To learn more about ASU or a specific program, fill out the form below
@@ -103,7 +103,7 @@ const variants = {
         GdprConsent: validation.GdprConsent,
       }}
     >
-      <h4>Step 2 of 2</h4>
+      <div className={'h4'}>Step 2 of 2</div>
       <h2>About me</h2>
       <EmailAddress autoFocus gaData={gaData2Of2} />
       <FirstName gaData={gaData2Of2} />

packages/unity-react-core/src/components/FeedAnatomy/FeedHeader.jsx

@@ -34,14 +34,18 @@ const FeedHeader = ({
 }) => {
   const header = { ...defaultProps.header, ...pHeeder };
   const ctaButton = { ...defaultProps.ctaButton, ...pCtaButton };
+  const HeaderTag = header.tag || "h2";
+  const isNotH2 = HeaderTag !== "h2";
+
+  const headerClassName = `text-${header.color} ${isNotH2 ? "h2" : ""}`.trim();
 
   return (
     <div
       className="row justify-content-between align-items-center pb-6"
       data-testid="feed-header"
     >
       <div className="col-sm-12 col-md-9">
-        <h2 className={`text-${header.color}`}>{header.text}</h2>
+        <HeaderTag className={headerClassName}>{header.text}</HeaderTag>
       </div>
       <ButtonColumn className="col-sm-12 col-md-3">
         <GaEventWrapper

packages/unity-react-core/src/core/types/feed-types.js

@@ -3,6 +3,7 @@
  * @typedef {Object} FeedHeader
  * @property {"white" | "dark"} [color]
  * @property {string} [text]
+ * @property {"h2" | "h3" | "h4" | "div"} [tag]
  */
 /**
  * @typedef {Object} FeedCtaButton