diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 3e19682784..ba896774f2 100644 --- 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 index 2d1fa31d3b..e41d149a62 100644 --- 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.
-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.html b/packages/component-header-footer/examples/global-header-footer.html similarity index 100% rename from packages/component-header-footer/examples/global-header.html rename to 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 index 25297502d2..772e6dc2fb 100644 --- a/packages/static-site/src/components/Card.tsx +++ b/packages/static-site/src/components/Card.tsx @@ -6,6 +6,7 @@ export interface CardWrapperProps { description: string | JSX.Element; href: string; linkLabel: string; + ariaLabel?: string; isRoute?: boolean; } const CardWrapper: FC = ({ @@ -13,27 +14,23 @@ const CardWrapper: FC = ({ description, href, linkLabel, + ariaLabel, isRoute, }) => { return ( -
+

{title}

{description}

- {isRoute ? ( - - {linkLabel} - - ) : ( - - {linkLabel} - - )} + + {linkLabel} +

); diff --git a/packages/static-site/src/components/PackageCards.tsx b/packages/static-site/src/components/PackageCards.tsx index e4fc8d3a7a..3e178710ed 100644 --- a/packages/static-site/src/components/PackageCards.tsx +++ b/packages/static-site/src/components/PackageCards.tsx @@ -13,31 +13,27 @@ const packages: Record = 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) => ( - - ))} + + + ); }; diff --git a/packages/static-site/src/pages/HeaderGuide.tsx b/packages/static-site/src/pages/HeaderGuide.tsx index 2e15fc34ab..b70a51bc6a 100644 --- a/packages/static-site/src/pages/HeaderGuide.tsx +++ b/packages/static-site/src/pages/HeaderGuide.tsx @@ -7,7 +7,7 @@ const HeaderGuide = () => {
-

ASU Header Guide

+

ASU Header and Footer Guide

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 index 42ee276dbd..39a42efcda 100644 --- a/packages/static-site/src/pages/Home.tsx +++ b/packages/static-site/src/pages/Home.tsx @@ -17,7 +17,7 @@ const Home = () => {

- 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 = () => {

-

Resources

+

Unity Design System (UDS)

- +
+
+
+

Implementing UDS

+ +
+ { />
+

Npm Packages