Merge pull request #1579 from ASU/UDS-1947

davidornelas11 · web-flow · commit e6841a54284f · 2025-09-29T13:57:44.000-07:00
chore: update terminology
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -20,5 +20,5 @@
 
 - [JIRA ticket](https://asudev.jira.com/browse/UDS-0000)
 - [Unity reference site](https://asu.github.io/asu-unity-stack/)
-- [Unity Design Kit](https://shared-assets.adobe.com/link/fb14b288-bf63-47e0-5d30-384de5560455)
+- [UDS Guidelines](https://zeroheight.com/9f0b32a56/p/96ab23-getting-started)
 
diff --git a/packages/component-header-footer/README.md b/packages/component-header-footer/README.md
@@ -1,10 +1,10 @@
-# ASU Header
+# ASU Header and Footer
 ASU Web Standards-based implementation of global header and footer.
 
 ## CLI Commands
 
 ``` bash
-# add component-footer
+# add component-header-footer
 yarn add @asu/component-header-footer
 # or if you use npm
 npm install @asu/component-header-footer
@@ -13,21 +13,21 @@ npm install @asu/component-header-footer
 
 ## How to install
 
-1. Either make sure you are part of the ASU github organization and follow the instructions [here,](https://github.com/ASU/asu-unity-stack#-how-to-use-the-private-package-registry)or, if you already are, you can clone this repo and run `yarn install` and `yarn build` to build the package locally.
+1. Either make sure you are part of the ASU github organization and follow the instructions [here](https://github.com/ASU/asu-unity-stack#-how-to-use-the-private-package-registry) or if you already are, you can clone this repo and run `yarn install` and `yarn build` to build the package locally.
 <br/>
-1. ```yarn add @asu/component-header```
+1. ```yarn add @asu/component-header-footer```
 
 ## Use as a JS module in React app
 
 ### Default import
 ```JAVASCRIPT
-    import { ASUHeader, ASUFooter } from '@asu/component-header-footer'
+import { ASUHeader, ASUFooter } from '@asu/component-header-footer'
 ```
 
 ### Aliased import
 ```JAVASCRIPT
-  import { ASUHeader as Header, ASUFooter as Footer } from '@asu/component-header-footer'
+import { ASUHeader as Header, ASUFooter as Footer } from '@asu/component-header-footer'
 ```
 
 ### Import for use in HTML page
-You can find an example of how to set `ASUHeader` props for use in a browser [here](/packages/component-header/examples/global-header.html)
+You can find an example of how to set `ASUHeader` and `ASUFooter` props for use in a browser [here](/packages/component-header/examples/global-header-footer.html)
diff --git a/packages/component-header-footer/examples/global-header-footer.html b/packages/component-header-footer/examples/global-header-footer.html
diff --git a/packages/static-site/src/components/Card.tsx b/packages/static-site/src/components/Card.tsx
@@ -6,34 +6,31 @@ export interface CardWrapperProps {
   description: string | JSX.Element;
   href: string;
   linkLabel: string;
+  ariaLabel?: string;
   isRoute?: boolean;
 }
 const CardWrapper: FC<CardWrapperProps> = ({
   title,
   description,
   href,
   linkLabel,
+  ariaLabel,
   isRoute,
 }) => {
   return (
-    <div className="col-md-6 pb-8">
+    <div className="col-lg-4 col-md-6 pb-8">
       <h3>{title}</h3>
       <p>{description}</p>
       <p>
-        {isRoute ? (
-          <a className="btn btn-maroon btn-medium" href={getRelativePath(href)}>
-            {linkLabel}
-          </a>
-        ) : (
-          <a
-            className="btn btn-maroon btn-medium"
-            target="_blank"
-            rel="noreferrer"
-            href={href}
-          >
-            {linkLabel}
-          </a>
-        )}
+        <a
+          className="btn btn-maroon btn-medium"
+          href={isRoute ? getRelativePath(href) : href}
+          target={isRoute ? undefined : "_blank"}
+          rel={isRoute ? undefined : "noreferrer"}
+          aria-label={ariaLabel}
+        >
+          {linkLabel}
+        </a>
       </p>
     </div>
   );
diff --git a/packages/static-site/src/components/PackageCards.tsx b/packages/static-site/src/components/PackageCards.tsx
@@ -13,31 +13,27 @@ const packages: Record<string, { default: PackageJson }> = import.meta.glob(
 );
 
 export const DeprecatedPackageCards = () => {
-  const cards: CardWrapperProps[] = [];
-
-  for (const key in packages) {
-    const p = packages[key].default;
-    const deprecated = p.deprecated ? p.deprecated : false;
-    if (
-      p.private !== true &&
-      deprecated !== false &&
-      typeof deprecated === "string"
-    ) {
-      cards.push({
-        title: p.name,
-        description: deprecated,
-        href: `/${p.name}/index.html`,
-        linkLabel: "Launch",
-        isRoute: true,
-      });
-    }
-  }
-
+  // Manually add deprecated packages, as they may no longer be in the packages folder
   return (
     <>
-      {cards.map((card, index) => (
-        <CardWrapper key={index} {...card} />
-      ))}
+      <CardWrapper
+        title="@asu/components-core"
+        description="Core UDS React UI components required by other higher-order React packages"
+        href="https://github.com/orgs/ASU/packages/npm/package/components-core"
+        linkLabel="View npm package"
+      />
+      <CardWrapper
+        title="@asu/component-header"
+        description="ASU Global Header"
+        href="https://github.com/orgs/ASU/packages/npm/package/component-header"
+        linkLabel="View npm package"
+      />
+      <CardWrapper
+        title="@asu/component-footer"
+        description="ASU Global Footer"
+        href="https://github.com/orgs/ASU/packages/npm/package/component-footer"
+        linkLabel="View npm package"
+      />
     </>
   );
 };
diff --git a/packages/static-site/src/pages/HeaderGuide.tsx b/packages/static-site/src/pages/HeaderGuide.tsx
@@ -7,7 +7,7 @@ const HeaderGuide = () => {
     <div className="container my-6">
       <div className="row">
         <div className="col-12">
-          <h1 className="display-4">ASU Header Guide</h1>
+          <h1 className="display-4">ASU Header and Footer Guide</h1>
 
           <p>
             Testing data shows that users see asu.edu as one website. The ASU
diff --git a/packages/static-site/src/pages/Home.tsx b/packages/static-site/src/pages/Home.tsx
@@ -17,7 +17,7 @@ const Home = () => {
         <div className="row my-6">
           <div className="col-md-8">
             <p className="lead">
-              A design system enables your product teams to share learnings
+              Unity Design System enables your product teams to share learnings
               across silos, avoid duplicate work and focus more on user
               experience problems rather than UI problems, complete with
               guidelines, principles, philosophies and code.
@@ -26,37 +26,52 @@ const Home = () => {
         </div>
       </div>
       <div className="container">
-        <h2>Resources</h2>
+        <h2>Unity Design System (UDS)</h2>
         <Divider />
         <div className="row my-6">
           <Card
-            title="Unity Design System UI Kit"
+            title="UDS Guidelines"
             description="Guidelines, standards, and best-practices for Unity Design System
-              across all ASU web projects."
+              across all ASU web projects. Seamlessly explore the Design Kit and Code Kit
+              in one place."
             href="https://zeroheight.com/9f0b32a56"
-            linkLabel="Explore the UDS UI Kit"
+            linkLabel="View UDS guidelines"
           />
-
           <Card
-            title="Unity Design System Styles Library"
-            description="A community-built design system built with Adobe XD."
-            href="https://shared-assets.adobe.com/link/fb14b288-bf63-47e0-5d30-384de5560455"
-            linkLabel="View the document"
+            title="Design Kit"
+            description="Design specifications for components provided by the ASU Brand."
+            href="https://www.figma.com/design/vhudREMl5qdTxRLZTmttHJ/UDS-Design-Kit--web-only-?node-id=593-23577&p=f&t=ZiUlJTLE1HyXrZrB-0"
+            linkLabel="View UDS design Kit"
           />
           <Card
-            title="ASU Header"
+            title="Code Kit"
+            description="Npm packages provide React components and Bootstrap HTML examples for implementing UDS components."
+            href="./index.html#codekit"
+            linkLabel="View code kit section below"
+            isRoute={true}
+          />
+        </div>
+      </div>
+      <div className="container">
+        <h2>Implementing UDS</h2>
+        <Divider />
+        <div className="row my-6">
+          <Card
+            title="ASU Header and Footer"
             description="Guidelines, requirements and best practices for using the ASU
               Branded Header in your site."
             href={PagePaths.HEADERGUIDE + "index.html"}
             isRoute={true}
-            linkLabel="View the guide"
+            linkLabel="View guide"
+            ariaLabel="View ASU header and footer guide"
           />
           <Card
             title="Google Tag Manager and data layer"
             description="Ensure your site or application has the necessary analytics integrations."
             href={PagePaths.DATALAYERGUIDE + "index.html"}
             isRoute={true}
-            linkLabel="GTM and data layer guide"
+            linkLabel="View guide"
+            ariaLabel="View Google Tag Manager and data layer guide"
           />
           <Card
             title="Unity Design System Package Registry"
@@ -87,6 +102,7 @@ const Home = () => {
           />
         </div>
       </div>
+      <a id="codekit"></a>
       <div className="container">
         <h2>Npm Packages</h2>
         <Divider />
