Merge pull request #132 from SU-SWS/release-1.2.0

Release 1.2.0
SU-SWS · Jun 5, 2024 · ec009fc · ec009fc
2 parents 407cb1e + 33f44ed
commit ec009fc
Show file tree

Hide file tree

Showing 48 changed files with 1,950 additions and 1,450 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -1,4 +1,4 @@
-# READY FOR REVIEW/NOT READY
+# NOT READY FOR REVIEW
 - (Edit the above to reflect status)
 
 # Summary
@@ -7,23 +7,60 @@
 # Review By (Date)
 - When does this need to be reviewed by?
 
+# Criticality
+- How critical is this PR on a 1-10 scale? Also see [Severity Assessment](https://stanfordits.atlassian.net/browse/D8CORE-1705).
+- E.g., it affects one site, or every site and product?
+
 # Urgency
-- How critical is this PR?
+- How urgent is this? (Normal, High)
+
+# Review Tasks
+
+## Setup tasks and/or behavior to test
+
+1. Check out this branch
+2. Rebuild Cache and import config `drush cr ; drush ci` 
+3. Navigate to...
+4. Verify...
+
+### Site Configuration Sync
+
+- Is there a config:export in this PR that changes the config sync directory?
+
+## Front End Validation
+- [ ] Design is approved by @ user?
+- [ ] HTML validation: Is the markup using the appropriate semantic tags and [passes validation](https://validator.w3.org/nu/)? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)?
+- [ ] Cross-browser testing: Has been performed? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)?
+- [ ] Automated accessibility: Scans performed? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)?
+- [ ] Manual accessibility: Manually tested? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)?
+
+## Backend / Functional Validation
+### Code
+- [ ] Are the naming conventions following our standards?
+- [ ] Does the code have sufficient inline comments?
+- [ ] Is there anything in this code that would be hidden or hard to discover through the UI?
+- [ ] Are there any [code smells](https://blog.codinghorror.com/code-smells/)?
+- [ ] Are tests provided? eg (unit, behat, or codeception)
 
-# Steps to Test
+### Code security
+- [ ] Are all [forms properly sanitized](https://www.drupal.org/docs/8/security/drupal-8-sanitizing-output)?
+- [ ] Any obvious [security flaws or new areas for attack](https://www.drupal.org/docs/8/security)?
 
-1. Do this
-1. Then this
-2. Then this
+## General
+- [ ] Is there anything included in this PR that is not related to the problem it is trying to solve?
+- [ ] Is the approach to the problem appropriate?
 
 # Affected Projects or Products
 - Does this PR impact any particular projects, products, or modules?
 
 # Associated Issues and/or People
-- JIRA ticket
+- JIRA ticket(s)
 - Other PRs
 - Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
 - Anyone who should be notified? (`@mention` them here)
 
-# See Also
-- [PR Checklist](https://gist.github.com/sherakama/0ba17601381e3adbe0cad566ad4d80a5)
+# Resources
+- [AMP Tool](https://stanford.levelaccess.net/index.php)
+- [Accessibility Manual Test Script](https://docs.google.com/document/d/1ZXJ9RIUNXsS674ow9j3qJ2g1OAkCjmqMXl0Gs8XHEPQ/edit?usp=sharing)
+- [HTML Validator](https://validator.w3.org/)
+- [Browserstack](https://live.browserstack.com/dashboard) and link to [Browserstack Credentials](https://asconfluence.stanford.edu/confluence/display/SWS/External+Account+Credentials)
diff --git a/app/page.tsx b/app/page.tsx
@@ -17,14 +17,22 @@ export const generateMetadata = async (): Promise<Metadata> => {
 
 const Page = async () => {
   const {entity} = await getEntityFromPath<NodeStanfordPage>('/')
+
   if (!entity) notFound();
 
+  const lastUpdated  = new Date(entity.changed.time as string).toLocaleDateString('en-us', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  });
+
   return (
     <main id="main-content" className="mb-50">
       <HomePageBanner/>
       {entity.suPageComponents &&
         <ParagraphRows items={entity.suPageComponents} fullWidth/>
       }
+      <div className="centered rs-pb-4">Last updated {lastUpdated}</div>
     </main>
   )
 }

diff --git a/app/search/search.tsx b/app/search/search.tsx
@@ -92,8 +92,8 @@ const SearchResultItem = ({item}: { item: SearchResult }) => {
       {item?.description && <p>{item.description}</p>}
 
       {lastUpdated &&
-        <div className="text-black-60 text-m0">
-          Last Updated: {lastUpdated}
+        <div className="rs-py-4">
+          Last updated {lastUpdated}
         </div>
       }
     </>

diff --git a/package.json b/package.json
@@ -14,15 +14,15 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
     "@heroicons/react": "^2.1.3",
-    "@mui/base": "^5.0.0-beta.42",
+    "@mui/base": "^5.0.0-dev.20240529-082515-213b5e33ab",
     "@next/third-parties": "^14.2.3",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.13",
-    "@tanstack/react-query": "^5.32.1",
-    "@types/node": "^20.12.7",
-    "@types/react": "^18.3.1",
+    "@tanstack/react-query": "^5.40.1",
+    "@types/node": "^20.14.1",
+    "@types/react": "^18.3.3",
     "autoprefixer": "^10.4.19",
-    "axios": "^1.6.8",
+    "axios": "^1.7.2",
     "critters": "^0.0.22",
     "decanter": "^7.3.0",
     "graphql": "^16.8.1",
@@ -34,15 +34,15 @@
     "next-drupal": "^1.6.0",
     "postcss": "^8.4.38",
     "react": "^18.3.1",
-    "react-aria": "^3.32.1",
+    "react-aria": "^3.33.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-focus-lock": "^2.12.1",
     "react-obfuscate": "^3.6.9",
     "react-obfuscate-email": "^1.1.2",
-    "react-stately": "^3.30.1",
+    "react-stately": "^3.31.1",
     "react-tiny-oembed": "^1.1.0",
-    "sharp": "^0.33.3",
+    "sharp": "^0.33.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
@@ -52,12 +52,12 @@
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
-    "@graphql-codegen/typescript-operations": "4.2.0",
+    "@graphql-codegen/typescript-operations": "4.2.1",
     "@types/qs": "^6.9.15",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.3",
-    "eslint-plugin-deprecation": "^2.0.0",
-    "eslint-plugin-unused-imports": "^3.2.0"
+    "eslint-plugin-deprecation": "^3.0.0",
+    "eslint-plugin-unused-imports": "^4.0.0"
   },
   "packageManager": "[email protected]"
 }
diff --git a/src/components/node/stanford-course/card.tsx b/src/components/node/stanford-course/card.tsx
@@ -11,7 +11,7 @@ const StanfordCourseCard = ({node, h3Heading, ...props}: Props) => {
   const HeadingElement = h3Heading ? 'h3' : 'h2';
   return (
     <article
-      className="block w-full basefont-23 leading-display bg-white text-black border border-solid border-black-10 shadow-md rs-pt-2 rs-px-2 rs-pb-3" {...props}>
+      className="block w-full basefont-20 leading-display bg-white text-black border border-solid border-black-10 shadow-md rs-pt-2 rs-px-2 rs-pb-3" {...props}>
       <div className="rs-pb-0">
         <span className="font-bold leading-cozy">
           {node.suCourseSubject?.name}
@@ -28,7 +28,7 @@ const StanfordCourseCard = ({node, h3Heading, ...props}: Props) => {
         href={node.path}
         className="underline hocus:no-underline active:no-underline text-black hocus:text-brick-dark active:text-digital-red"
       >
-        <HeadingElement className="type-2">{node.title}</HeadingElement>
+        <HeadingElement className="type-1">{node.title}</HeadingElement>
       </Link>
     </article>
   )

diff --git a/src/components/node/stanford-event/card.tsx b/src/components/node/stanford-event/card.tsx
@@ -1,8 +1,6 @@
-import {CalendarDaysIcon} from "@heroicons/react/20/solid";
+import { CalendarDaysIcon, MapPinIcon, ClockIcon } from "@heroicons/react/24/outline";
 import Link from "@/components/patterns/elements/drupal-link";
 import Image from "next/image";
-import {ClockIcon, MapPinIcon} from "@heroicons/react/24/outline";
-
 import {buildUrl} from "@/lib/drupal/utils";
 import {NodeStanfordEvent} from "@/lib/gql/__generated__/drupal.d";
 
@@ -45,17 +43,17 @@ const StanfordEventCard = ({node, h3Heading, ...props}: Props) => {
         </div>
       }
 
-      <div className="flex items-start gap-xl flex-col">
+      <div className="flex items-start gap-xs flex-col">
         <div
           className="flex w-full flex-row items-center bg-black-true text-white text-center uppercase"
           aria-hidden
         >
           <div className="flex flex-col items-center mx-auto">
             <div
-              className="pt-20 px-30 font-semibold">
+              className="pt-10 px-30 font-semibold">
               {startMonth}
             </div>
-            <div className="pb-20 px-30 text-m4">
+            <div className="pb-10 px-30 text-m3">
               {startDay}
             </div>
           </div>
@@ -66,19 +64,19 @@ const StanfordEventCard = ({node, h3Heading, ...props}: Props) => {
               <div className="font-bold">&mdash;</div>
               <div className="mx-auto">
                 <div
-                  className="pt-20 px-30 font-semibold">
+                  className="pt-10 px-30 font-semibold">
                   {endMonth}
                 </div>
-                <div className="pb-20 px-30 text-m4">
+                <div className="pb-10 px-30 text-m3">
                   {endDay}
                 </div>
               </div>
             </>
           }
         </div>
 
-        <div className="flex flex-col gap-[1.2rem]">
-          <HeadingElement className="text-m1 order-2">
+        <div className="flex flex-col gap-[.5rem]">
+          <HeadingElement className="text-m0 order-2 leading-cozy">
             <Link href={goToUrl}
                   className="text-black-true hover:text-brick-dark underline hover:no-underline">
               {node.title}
@@ -91,18 +89,18 @@ const StanfordEventCard = ({node, h3Heading, ...props}: Props) => {
 
 
           <div className="flex order-3">
-            <CalendarDaysIcon width={20} className="mr-20 flex-shrink-0"/>
+            <CalendarDaysIcon title="Date" width={20} className="mr-20 flex-shrink-0"/>
             {start.toLocaleDateString("en-US", {timeZone: 'America/Los_Angeles'})}
           </div>
 
           <div className="flex order-4">
-            <ClockIcon width={20} className="mr-20 flex-shrink-0"/>
+            <ClockIcon title="Hours" width={20} className="mr-20 flex-shrink-0"/>
             <div>{dateTimeString}</div>
           </div>
 
           {node.suEventMapLink?.url &&
             <div className="flex order-5">
-              <MapPinIcon width={20} className="mr-20 flex-shrink-0"/>
+              <MapPinIcon title="Location" width={20} className="mr-20 flex-shrink-0"/>
               <Link href={node.suEventMapLink?.url}>
                 {node.suEventMapLink?.title}
               </Link>

diff --git a/src/components/node/stanford-event/page-display.tsx b/src/components/node/stanford-event/page-display.tsx
@@ -110,7 +110,7 @@ const StanfordEvent = async ({node, ...props}: { node: NodeStanfordEvent }) => {
                 {node.suEventLocation &&
                   <div className="flex flex-col">
                     <div className="flex flex-row items-start mt-40 mb-4">
-                      <MapIcon className="inline-block flex-shrink-0 mr-06em w-[24px]"/>
+                      <MapIcon title="Location" className="inline-block flex-shrink-0 mr-06em w-[24px]"/>
                       <h3 className="text-16 md:text-18">Location</h3>
                     </div>
                     <div className="ml-36">
@@ -125,7 +125,7 @@ const StanfordEvent = async ({node, ...props}: { node: NodeStanfordEvent }) => {
                 {node.suEventAltLoc &&
                   <div>
                     <div className="flex flex-row items-start mt-40 mb-4">
-                      <MapIcon className="inline-block flex-shrink-0 mr-06em w-[24px]"/>
+                      <MapIcon title="Location" className="inline-block flex-shrink-0 mr-06em w-[24px]"/>
                       <h3 className="text-16 md:text-18">Location</h3>
                     </div>
                     <div className="ml-36 leading-snug">
@@ -147,7 +147,7 @@ const StanfordEvent = async ({node, ...props}: { node: NodeStanfordEvent }) => {
             {(node.suEventTelephone || node.suEventEmail) &&
               <div>
                 <div className="flex flex-row items-start mt-40 md:mt-20 mb-4">
-                  <PhoneIcon className="inline-block flex-shrink-0 mr-06em w-[24px]"/>
+                  <PhoneIcon title="Phone" className="inline-block flex-shrink-0 mr-06em w-[24px]"/>
                   <h3 className="text-16 md:text-18">Contact</h3>
                 </div>
                 {node.suEventTelephone &&
@@ -165,7 +165,7 @@ const StanfordEvent = async ({node, ...props}: { node: NodeStanfordEvent }) => {
             {node.suEventAudience &&
               <div>
                 <div className="flex flex-row items-start mt-40 mb-4">
-                  <UserGroupIcon className="inline-block flex-shrink-0 mr-06em w-[24px]"/>
+                  <UserGroupIcon title="Person" className="inline-block flex-shrink-0 mr-06em w-[24px]"/>
                   <h3 className="text-16 md:text-18">This event is open to:</h3>
                 </div>
                 {node.suEventAudience.map(audience =>

diff --git a/src/components/node/stanford-news/card.tsx b/src/components/node/stanford-news/card.tsx
@@ -18,7 +18,7 @@ const StanfordNewsCard = ({node, h3Heading, ...props}: Props) => {
   return (
     <article {...props} className="flex flex-col">
       {imageUrl &&
-        <div className="overflow-hidden aspect-[16/9] relative mb-40" aria-hidden="true">
+        <div className="overflow-hidden aspect-[16/9] relative mb-10" aria-hidden="true">
           <Image
             className="object-cover object-center"
             src={buildUrl(imageUrl).toString()}
@@ -29,15 +29,15 @@ const StanfordNewsCard = ({node, h3Heading, ...props}: Props) => {
         </div>
       }
 
-      <HeadingElement className="text-m1 order-last">
+      <HeadingElement className="text-m0 order-last leading-cozy">
         <Link href={goToUrl}
               className="text-black-true hover:text-brick-dark underline hover:no-underline">
           {node.title}
         </Link>
       </HeadingElement>
 
       {node.suNewsTopics?.[0]?.name &&
-        <div className="font-semibold mb-20">
+        <div className="font-semibold mb-10">
           {node.suNewsTopics[0].name}
         </div>
       }

diff --git a/src/components/node/stanford-news/page-display.tsx b/src/components/node/stanford-news/page-display.tsx
@@ -19,6 +19,12 @@ const StanfordNews = async ({node, ...props}: { node: NodeStanfordNews }) => {
   const imageUrl = node.suNewsBanner?.__typename === 'MediaImage' && node.suNewsBanner.mediaImage.url
   const imageAlt = node.suNewsBanner?.__typename === 'MediaImage' && node.suNewsBanner.mediaImage.alt;
 
+  const lastUpdated  = new Date(node.changed.time as string).toLocaleDateString('en-us', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric'
+  });
+
   return (
     <article {...props} className=" centered mt-50">
       <div className="centered 2xl:w-2/3 mb-100">
@@ -65,7 +71,7 @@ const StanfordNews = async ({node, ...props}: { node: NodeStanfordNews }) => {
                     prefix={`mailto:?subject=${node.title}&body=`}
                   >
                     <span className="sr-only">Forward Email</span>
-                    <EnvelopeIcon width={28}/>
+                    <EnvelopeIcon title="Email" width={28}/>
                   </NewsSocialLink>
                 </li>
                 <li className="mr-1em">
@@ -120,6 +126,8 @@ const StanfordNews = async ({node, ...props}: { node: NodeStanfordNews }) => {
           )}
         </div>
       }
+      <div className="centered rs-py-4">Last updated {lastUpdated}</div>
+
     </article>
   )
 }

diff --git a/src/components/node/stanford-page/home-page/home-page-banner.tsx b/src/components/node/stanford-page/home-page/home-page-banner.tsx
@@ -21,7 +21,7 @@ const HomePageBanner = async () => {
   ))
 
   return (
-    <header className="bg-black-true mb-100 relative">
+    <header className="bg-black-true mb-50 relative">
       <div className="pb-20 centered relative z-10 top-50 md:top-100 md:px-50 min-h-[350px] md:min-h-[300px]">
         <div className="xl:mx-20 md:flex justify-between">
           <div className="text-white mb-40 md:w-1/3 lg:w-1/2">

diff --git a/src/components/node/stanford-page/home-page/today-hours.tsx b/src/components/node/stanford-page/home-page/today-hours.tsx
@@ -95,7 +95,7 @@ const TodayLibraryHours = ({branchId}: { branchId?: string }) => {
   if (!libraryHours) {
     return (
       <div className="text-black flex">
-        <ClockIcon width={15} className="mr-5"/>
+        <ClockIcon title="Hours" width={15} className="mr-5"/>
         <a href="https://library-hours.stanford.edu/libraries">See all hours</a>
       </div>
     );
@@ -106,7 +106,7 @@ const TodayLibraryHours = ({branchId}: { branchId?: string }) => {
   return (
     <>
       <div className="text-black flex justify-between mb-4" aria-live="polite">
-        <div className="flex"><ClockIcon width={15} className="mr-5"/> {isOpen ? 'Open' : 'Closed'}</div>
+        <div className="flex"><ClockIcon title="Hours" width={15} className="mr-5"/> {isOpen ? 'Open' : 'Closed'}</div>
         <div>
           {hoursDisplay}
         </div>