chore(static-site): update terminology and guides

Author: scott-williams-az

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)

packages/component-header-footer/examples/global-header.html renamed to packages/component-header-footer/examples/global-header-footer.html

@@ -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-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>
   );

packages/static-site/src/components/Card.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

packages/static-site/src/pages/HeaderGuide.tsx

@@ -35,19 +35,19 @@ const Home = () => {
               across all ASU web projects. Seamlessly explore the Design Kit and Code Kit
               in one place."
             href="https://zeroheight.com/9f0b32a56"
-            linkLabel="UDS Guidelines"
+            linkLabel="View UDS guidelines"
           />
           <Card
             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="UDS Design Kit"
+            linkLabel="View UDS design Kit"
           />
           <Card
             title="Code Kit"
             description="Npm packages provide React components and Bootstrap HTML examples for implementing UDS components."
             href="./index.html#codekit"
-            linkLabel="Code Kit section below"
+            linkLabel="View code kit section below"
             isRoute={true}
           />
         </div>
@@ -57,19 +57,21 @@ const Home = () => {
         <Divider />
         <div className="row my-6">
           <Card
-            title="ASU Header"
+            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="ASU Header 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"