feat(unity-react-core): added select tag functionality to headers

UDS-2033

Author: juanmitriatti

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