ASU · scott-williams-az · Feb 4, 2026
@@ -15,7 +15,12 @@ const GaEventPropTypes = {
   text: PropTypes.string,
 };
 
-const RfiLabel = ({ label, name, id = undefined, requiredIcon = undefined }) => (
+const RfiLabel = ({
+  label,
+  name,
+  id = undefined,
+  requiredIcon = undefined,
+}) => (
   <label htmlFor={id || name}>
     {requiredIcon && (
       <>

@@ -32,4 +32,3 @@ const QuickLinks = () => {
 };
 
 export { QuickLinks };
-
@@ -11,7 +11,12 @@ import { ColumnSection } from "../ColumnSection";
  */
 
 const Contact = ({
-  contact: { title = "", contactLink = "", contributionLink = "", columns = []},
+  contact: {
+    title = "",
+    contactLink = "",
+    contributionLink = "",
+    columns = [],
+  },
 }) => {
   return (
     <div className="wrapper" id="wrapper-footer-columns" data-testid="contact">

@@ -36,11 +36,9 @@ const DEF_MEDIA_LINKS = {
  * @returns {JSX.Element}
  */
 
-const Social = ({ social: {
-  logoUrl,
-  unitLogo = endorsedLogo,
-  mediaLinks = DEF_MEDIA_LINKS,
-}, }) => {
+const Social = ({
+  social: { logoUrl, unitLogo = endorsedLogo, mediaLinks = DEF_MEDIA_LINKS },
+}) => {
   return (
     <div className="wrapper" id="wrapper-endorsed-footer" data-testid="social">
       <div className="container" id="endorsed-footer">

@@ -14,6 +14,28 @@ const config = {
   framework: {
     name: "@storybook/react-vite",
   },
+  async viteFinal(config) {
+    // Configure optimizeDeps to handle JSX in .js files
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      esbuildOptions: {
+        ...config.optimizeDeps?.esbuildOptions,
+        loader: {
+          '.js': 'jsx',
+          '.jsx': 'jsx',
+        },
+      },
+    };
+
+    // Configure esbuild for build
+    config.esbuild = {
+      ...config.esbuild,
+      loader: 'jsx',
+      include: /\.(jsx?|tsx?)$/,
+    };
+
+    return config;
+  },
 };
 
 export default config;
@@ -35,3 +35,23 @@
     gap: 0rem!important;
   }
 </style>
+
+<!-- Trap clicked links and open them in a hidden iframe to prevent Storybook from navigating away -->
+<script>
+  setTimeout(function () {
+    var t = "capturelinks";
+    var b = document.getElementsByTagName("base")[0];
+    b.target = t;
+    var f = document.createElement("iframe");
+    f.name = t;
+    f.height = 0;
+    f.width = 0;
+    f.style.display = "none";
+    f.style.visibility = "hidden";
+    document.body.appendChild(f);
+  },1);
+</script>
+
+
+<!-- <base target="capturelinks">
+<iframe name="capturelinks" height="0" width="0" style="display: none; visibility: hidden"></iframe> -->
@@ -28,13 +28,19 @@ const DEFAULT_GA_EVENT = {
  * @returns {JSX.Element}
  */
 
-const Social = ({ social: { logoUrl, unitLogo = endorsedLogo, mediaLinks = {
-  facebook: "",
-  twitter: "",
-  linkedIn: "",
-  instagram: "",
-  youtube: "",
-} } }) => {
+const Social = ({
+  social: {
+    logoUrl,
+    unitLogo = endorsedLogo,
+    mediaLinks = {
+      facebook: "",
+      twitter: "",
+      linkedIn: "",
+      instagram: "",
+      youtube: "",
+    },
+  },
+}) => {
   return (
     <div className="wrapper" id="wrapper-endorsed-footer" data-testid="social">
       <div className="container" id="endorsed-footer">

@@ -25,14 +25,14 @@ HeadingItem.propTypes = {
 };
 
 const ButtonItem = ({ link, dropdownName, handleLinkEvent }) => (
-  <li className="nav-button">
+  <div className="nav-button">
     <Button
       text={link.text}
-      color={link.color || "dark"}
+      color={link.color || "maroon"}
       href={link.href}
       onClick={e => handleLinkEvent(e, link)}
     />
-  </li>
+  </div>
 );
 
 ButtonItem.propTypes = {
@@ -94,7 +94,13 @@ const DropdownItem = ({
   parentLink,
 }) => {
   const { breakpoint } = useAppContext();
-  const isMega = items?.length > 2;
+
+  let cols = 0;
+  items.map(lists => {
+    cols += lists[0].span || 1;
+  });
+
+  const isMega = cols > 2;
   /**
    * @type {React.MutableRefObject<HTMLDivElement|null>}
    */
@@ -103,6 +109,7 @@ const DropdownItem = ({
   const MULTIPLE_SUBMENUS = items?.length > 1;
 
   useEffect(() => {
+    console.log(dropdownRef.current);
     if (window && dropdownRef.current) {
       const elPosition = dropdownRef?.current?.getBoundingClientRect().left;
       const breakpointPosition = window.innerWidth * 0.55;
@@ -144,7 +151,7 @@ const DropdownItem = ({
   };
 
   const renderItem = (link, index) => {
-    const key = `${link.text}-${link.href || index}`;
+    const key = `${link.text}-${link.href}-${index}`;
     if (link.type === "heading")
       return <HeadingItem key={key} text={link.text} />;
     if (link.type === "button")
@@ -166,6 +173,7 @@ const DropdownItem = ({
     );
   };
 
+  console.log("TOTAL COLS: ", cols);
   return (
     <DropdownWrapper
       ref={dropdownRef}
@@ -174,8 +182,13 @@ const DropdownItem = ({
       }`}
       breakpoint={breakpoint}
     >
-      <div id={MULTIPLE_SUBMENUS ? listId : ""} className="dropdown-container">
-        {items?.map((item, index0) => {
+      <div
+        style={{ "--cols": cols < 3 ? 4 : cols }}
+        id={MULTIPLE_SUBMENUS ? listId : ""}
+        className="dropdown-container"
+      >
+        {/*
+                {items?.map((item, index0) => {
           const genKey = idGenerator(`dropdown-item-${index0}-`);
           const key = genKey.next().value;
           return (
@@ -184,6 +197,69 @@ const DropdownItem = ({
             </ul>
           );
         })}
+
+ */}
+
+        <>
+          {
+            // console.log(items)
+          }
+          {items?.map((item, index0) => {
+            console.log(item);
+            const genKey = idGenerator(`dropdown-item-${index0}-`);
+            const key = genKey.next().value;
+            return (
+              <div
+                className="dropdown-container-column"
+                style={{ "--span": item[0].span || 1 }}
+                key={`${listId}-${key}`}
+                id={MULTIPLE_SUBMENUS ? `${listId}-${key}` : listId}
+              >
+                {(() => {
+                  let currentUl = [];
+                  const uls = [];
+                  item.forEach((link, index) => {
+                    if (link.type === "heading") {
+                      if (currentUl.length > 0) {
+                        uls.push(currentUl);
+                        currentUl = [];
+                      }
+                      uls.push([link]);
+                    } else if (link.type === "button") {
+                      if (currentUl.length > 0) {
+                        uls.push(currentUl);
+                        currentUl = [];
+                      }
+                      uls.push([link]);
+                    } else {
+                      currentUl.push(link);
+                    }
+                  });
+
+                  if (currentUl.length > 0) {
+                    uls.push(currentUl);
+                  }
+                  console.log(uls);
+
+                  return uls.map((group, groupIndex) => {
+                    const groupKey = `${key}-group-${groupIndex}`;
+                    if (group.length === 1 && group[0].type === "heading") {
+                      return renderItem(group[0], groupIndex);
+                    }
+                    if (group.length === 1 && group[0].type === "button") {
+                      return renderItem(group[0], groupIndex);
+                    }
+                    return (
+                      <ul key={groupKey}>
+                        {group.map((link, index) => renderItem(link, index))}
+                      </ul>
+                    );
+                  });
+                })()}
+              </div>
+            );
+          })}
+        </>
       </div>
       {buttons && (
         <div className="dropdown-button-container">

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 const DropdownWrapper = styled.div`
+  --gap: 2rem;
   position: fixed;
   background-color: #ffffff;
   border: 1px solid #d0d0d0;
@@ -12,9 +13,8 @@ const DropdownWrapper = styled.div`
     visibility: visible;
   }
   &.mega {
-    width: 100%;
-    left: 0;
-    margin-left: 0 !important;
+    width: 1200px;
+    left: calc((100% - 1200px) / 2);
   }
   &.aligned-right:not(.mega) {
     position: absolute;
@@ -24,30 +24,51 @@ const DropdownWrapper = styled.div`
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
-    justify-content: center;
-    padding: 2rem;
-    ul {
-      width: 16rem;
-      max-width: 282px;
+    justify-content: stretch;
+
+    .dropdown-container-column {
+      width: calc(1200px / var(--cols, 1) * var(--span, 1));
+      padding: var(--gap);
       display: flex;
       flex-direction: column;
+      justify-content: flex-start;
+      row-gap: var(--gap);
+
       &:not(:last-child) {
-        padding-right: 2rem;
-        margin-right: 2rem;
+        // box-shadow: -1px 0px 0px 0px #d0d0d0 inset;
         border-right: 1px solid #d0d0d0;
       }
-      .ul-heading {
-        margin-top: 0;
-        font-size: 1.5rem;
-        letter-spacing: -0.035em;
-        font-weight: 700;
-        text-align: left;
-        opacity: 1;
-        margin: 1rem 0;
-        line-height: calc(100% + 0.12em);
+    }
+
+    .ul-heading {
+      font-size: 1.5rem;
+      letter-spacing: -0.035em;
+      font-weight: 700;
+      text-align: left;
+      opacity: 1;
+      margin: 0;
+      margin-bottom: -1.5rem;
+      line-height: calc(100% + 0.12em);
+    }
+    ul {
+      --ul-gap: 1rem;
+      &:is(:last-child) {
+        flex-grow: 0;
       }
+      margin: 0;
+      width: calc(1200px / var(--cols, 1) * var(--span, 1) - var(--gap) * 2);
+      // max-width: 282px;
+      display: flex;
+      flex-direction: row;
+      column-gap: var(--ul-gap);
+      flex-wrap: wrap;
       .nav-link {
         padding: 0;
+
+        flex-basis: calc(
+          (100% / var(--span, 1)) - var(--ul-gap) * (var(--span, 1) - 1) /
+            var(--span, 1)
+        );
         a {
           width: 100%;
           display: inline-block;
@@ -61,24 +82,33 @@ const DropdownWrapper = styled.div`
           }
         }
         & + .nav-button {
+          width: 100%;
           margin-top: auto;
-          padding-top: 2rem;
+          padding-top: var(--gap);
           & + .nav-button {
             margin-top: 1rem;
           }
         }
       }
     }
   }
+
+  .nav-button {
+    flex: 1 1;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    width: fit-content;
+  }
   .dropdown-button-container {
     border-top: 1px solid #d0d0d0;
     border-bottom: 1px solid #d0d0d0;
-    margin-top: 1rem;
     > div {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
-      padding: 1rem 0;
+      padding: 1rem 2rem;
     }
   }
   @media (max-width: ${({ breakpoint }) => breakpoint}) {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,4 +32,3 @@ const QuickLinks = () => {
		};

		export { QuickLinks };