Merge branch '1.x' into feature/SUM-253--headingSize

SU-SWS · Sep 23, 2024 · 3927607 · 3927607
2 parents 08325f9 + b1d93d8
commit 3927607
Show file tree

Hide file tree

Showing 15 changed files with 346 additions and 342 deletions.
diff --git a/package.json b/package.json
@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
-    "@mui/base": "5.0.0-beta.40",
+    "@mui/base": "5.0.0-beta.58",
     "@next/third-parties": "^14.2.12",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^22.5.5",
-    "@types/react": "^18.3.7",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
-    "algoliasearch": "^5.5.0",
+    "algoliasearch": "^5.5.2",
     "autoprefixer": "^10.4.20",
     "clsx": "^2.1.1",
     "decanter": "^7.3.0",
@@ -57,13 +57,13 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.3",
     "@next/bundle-analyzer": "^14.2.12",
-    "@storybook/addon-essentials": "^8.3.1",
-    "@storybook/addon-interactions": "^8.3.1",
-    "@storybook/addon-links": "^8.3.1",
+    "@storybook/addon-essentials": "^8.3.2",
+    "@storybook/addon-interactions": "^8.3.2",
+    "@storybook/addon-links": "^8.3.2",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.3.1",
-    "@storybook/nextjs": "^8.3.1",
-    "@storybook/react": "^8.3.1",
+    "@storybook/blocks": "^8.3.2",
+    "@storybook/nextjs": "^8.3.2",
+    "@storybook/react": "^8.3.2",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^9.0.1",
@@ -78,7 +78,7 @@
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.3.1",
+    "storybook": "^8.3.2",
     "storybook-addon-module-mock": "^1.3.4",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },

diff --git a/src/components/config-pages/local-footer.tsx b/src/components/config-pages/local-footer.tsx
@@ -219,7 +219,7 @@ const FooterLockup = ({useDefault = true, siteName, lockupOption, ...props}: Foo
   return (
     <div className="py-10">
       <Link href="/" className="flex flex-col text-black no-underline lg:flex-row lg:items-end">
-        <div className="border-r border-black py-2 pr-4">
+        <div className="border-black py-2 pr-4 lg:border-r">
           <LockupLogo {...lockupProps} />
         </div>
         <div className="font-roboto text-28 font-light text-black lg:pl-4">{siteName || "University"}</div>

diff --git a/src/components/elements/accordion.tsx b/src/components/elements/accordion.tsx
@@ -51,7 +51,7 @@ const Accordion = ({button, children, headingLevel = "h2", ...props}: Props) =>
       <Heading className="rs-py-3 mb-0">
         <button
           {...buttonProps}
-          className={twMerge("group flex w-full items-center justify-between", buttonProps?.className)}
+          className={twMerge("group flex w-full items-center justify-between text-left", buttonProps?.className)}
         >
           {button}
           <span className="group-hocus:outline-3 m-4 rounded-full border-2 border-white bg-digital-red p-6 text-5xl font-normal text-white no-underline transition group-hocus:text-white group-hocus:underline group-hocus:outline group-hocus:outline-digital-red">

diff --git a/src/components/elements/favorite-button.tsx b/src/components/elements/favorite-button.tsx
@@ -20,7 +20,7 @@ const FavoriteButton = ({uuid, title, path, units, ...props}: Props) => {
       role="switch"
       aria-checked={isFavorite}
       className={twMerge(
-        "hocus:outline-3 rounded-full border-2 border-transparent hocus:outline hocus:outline-spirited-dark",
+        "hocus-visible:outline-3 rounded-full border-2 border-transparent hocus-visible:outline hocus-visible:outline-spirited-dark",
         props.className
       )}
     >

diff --git a/src/components/elements/lockup/lockup-a.tsx b/src/components/elements/lockup/lockup-a.tsx
@@ -7,7 +7,7 @@ const LockupA = ({line1, line5, siteName, logoUrl}: FooterLockupProps) => {
     <div className="py-10">
       <Link href="/" className="text-black no-underline">
         <div className="flex flex-col text-black lg:flex-row lg:items-end">
-          <div className="border-r border-black py-2 pr-4">
+          <div className="border-black py-2 pr-4 lg:border-r">
             <LockupLogo logoUrl={logoUrl} siteName={siteName} />
           </div>
           <div className="font-roboto text-28 font-light text-black lg:pl-4">{line1 || siteName}</div>

diff --git a/src/components/elements/shareCourses.tsx b/src/components/elements/shareCourses.tsx
@@ -43,7 +43,7 @@ const ShareCourses = ({courseName, courseUrl, courseNum}: Props) => {
         {...buttonProps}
         ref={buttonRef}
         className={twMerge(
-          "hocus:outline-3 rounded-full border-2 border-transparent pr-2 hocus:outline hocus:outline-poppy-dark",
+          "hocus-visible:outline-3 rounded-full border-2 border-transparent pr-2 hocus-visible:outline hocus-visible:outline-poppy-dark",
           buttonProps.className
         )}
       >
@@ -85,7 +85,7 @@ const ShareCourses = ({courseName, courseUrl, courseNum}: Props) => {
           <li className="relative m-0 text-nowrap py-0">
             <button
               onClick={() => copy(copyUrl)}
-              className="block border-b-0 border-b-4 border-transparent px-6 py-5 font-normal text-black no-underline hocus:border-spirited-light hocus:text-black"
+              className="block border-b-4 border-transparent px-6 py-5 font-normal text-black no-underline hocus:border-spirited-light hocus:text-black"
               data-course-shared={courseNum}
             >
               Copy share link

diff --git a/src/components/elements/youtube-video-pill.tsx b/src/components/elements/youtube-video-pill.tsx
@@ -102,6 +102,7 @@ const YoutubeVideoPillBounded = ({videoUrl, ...props}: Props) => {
           tabIndex={-1}
           aria-hidden
           onClick={() => {
+            videoRef.current?.seekTo(0)
             videoRef.current?.playVideo()
             document.getElementById(id)?.focus()
           }}

diff --git a/src/components/global/page-footer.tsx b/src/components/global/page-footer.tsx
@@ -13,9 +13,10 @@ const PageFooter = ({...props}: Props) => {
       <div className="bg-cardinal-red py-10 [&_a:hocus]:text-white [&_a]:text-white [&_a]:no-underline">
         <div className="centered lg:flex lg:items-start lg:gap-20">
           <div className="mb-10 text-center">
-            <a className="text-center font-stanford" href="https://www.stanford.edu">
-              <div className="text-[3.2rem]">Stanford</div>
-              <div>University</div>
+            <a className="logo type-3 text-white hocus:text-white" href="https://www.stanford.edu">
+              Stanford
+              <br />
+              University
             </a>
           </div>
           <div className="mx-auto lg:mx-0 [&_a:focus]:underline [&_a:hover]:underline">

diff --git a/src/components/global/page-header.tsx b/src/components/global/page-header.tsx
@@ -21,7 +21,7 @@ const PageHeader = async () => {
       <div className="bg-cardinal-red">
         <div className="centered py-3">
           <a
-            className="font-stanford text-20 font-regular leading-none text-white no-underline hocus:text-white hocus:underline"
+            className="logo text-20 text-white no-underline hocus:text-white hocus:underline"
             href="https://www.stanford.edu"
           >
             Stanford University

diff --git a/src/components/paragraphs/sum-accordion/accordion-paragraph.tsx b/src/components/paragraphs/sum-accordion/accordion-paragraph.tsx
@@ -12,8 +12,16 @@ type Props = HTMLAttributes<HTMLElement> & {
 const SumAccordionParagraph = ({paragraph, ...props}: Props) => {
   const Element = paragraph.sumAccordionsHeading ? "article" : "div"
   return (
-    <Element {...props} className={twMerge("centered", props.className)}>
-      {paragraph.sumAccordionsHeading && <H2 className="text-center">{paragraph.sumAccordionsHeading}</H2>}
+    <Element
+      {...props}
+      className={twMerge("centered", props.className)}
+      aria-labelledby={paragraph.sumAccordionsHeading ? paragraph.id : undefined}
+    >
+      {paragraph.sumAccordionsHeading && (
+        <H2 id={paragraph.id} className="text-center">
+          {paragraph.sumAccordionsHeading}
+        </H2>
+      )}
 
       {paragraph.sumAccordionsDesc && <Wysiwyg html={paragraph.sumAccordionsDesc.processed} className="mb-20" />}
 

diff --git a/src/components/paragraphs/sum-at-a-glance/at-a-glance-paragraph.tsx b/src/components/paragraphs/sum-at-a-glance/at-a-glance-paragraph.tsx
@@ -14,10 +14,15 @@ type Props = HTMLAttributes<HTMLElement> & {
 const SumAtAGlanceParagraph = ({paragraph, ...props}: Props) => {
   const behaviors = getParagraphBehaviors(paragraph)
 
+  const Element = paragraph.sumAtAGlanceHeadline ? "article" : "div"
   const headingOnLeft = !!behaviors.sum_at_a_glance_behavior?.sum_at_a_glance_alignment
 
   return (
-    <div {...props} className={twMerge("centered flex flex-col gap-20 @container", props.className)}>
+    <Element
+      {...props}
+      className={twMerge("centered flex flex-col gap-20 @container", props.className)}
+      aria-labelledby={paragraph.sumAtAGlanceHeadline ? paragraph.id : undefined}
+    >
       <div className="grid gap-y-10 @6xl:grid-cols-2">
         <div className="mt-auto h-fit">
           <div
@@ -38,7 +43,11 @@ const SumAtAGlanceParagraph = ({paragraph, ...props}: Props) => {
               })
             )}
           >
-            {paragraph.sumAtAGlanceHeadline && <H2 className="font-light">{paragraph.sumAtAGlanceHeadline}</H2>}
+            {paragraph.sumAtAGlanceHeadline && (
+              <H2 id={paragraph.id} className="font-light">
+                {paragraph.sumAtAGlanceHeadline}
+              </H2>
+            )}
             <Wysiwyg html={paragraph.sumAtAGlanceDescrip?.processed} />
           </div>
         </div>
@@ -107,7 +116,7 @@ const SumAtAGlanceParagraph = ({paragraph, ...props}: Props) => {
           </Button>
         </div>
       )}
-    </div>
+    </Element>
   )
 }
 

diff --git a/src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx b/src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx
@@ -23,9 +23,10 @@ const SumCarouselParagraph = ({paragraph, ...props}: Props) => {
   const behaviors = getParagraphBehaviors(paragraph)
   const isArcBanner = behaviors.sum_carousel?.sum_carousel_arc
   const headingSize = behaviors.sum_carousel?.sum_carousel_text_size ? "type-3" : "type-4"
+  const Element = paragraph.sumCarouselHeader ? "article" : "div"
 
   return (
-    <div {...props}>
+    <Element {...props} aria-labelledby={paragraph.sumCarouselHeader ? paragraph.id : undefined}>
       {isArcBanner && (
         <ArcBanner isBorder>
           <CarouselTop
@@ -35,6 +36,7 @@ const SumCarouselParagraph = ({paragraph, ...props}: Props) => {
             description={paragraph.sumCarouselDescription?.processed}
             link={paragraph.sumCarouselLink}
             className="md:rs-mt-7"
+            headerId={paragraph.id}
           />
         </ArcBanner>
       )}
@@ -46,6 +48,7 @@ const SumCarouselParagraph = ({paragraph, ...props}: Props) => {
           headingSize={headingSize}
           description={paragraph.sumCarouselDescription?.processed}
           link={paragraph.sumCarouselLink}
+          headerId={paragraph.id}
         />
       )}
 
@@ -66,7 +69,7 @@ const SumCarouselParagraph = ({paragraph, ...props}: Props) => {
           </Slideshow>
         </div>
       )}
-    </div>
+    </Element>
   )
 }
 
@@ -114,13 +117,18 @@ type TopProps = {
   headingSize?: Maybe<string>
   description?: Maybe<string>
   link?: Maybe<Link>
+  headerId?: string
 }
 
-const CarouselTop = ({header, superHeader, headingSize, description, link, className}: TopProps) => {
+const CarouselTop = ({header, superHeader, headingSize, description, link, className, headerId}: TopProps) => {
   return (
     <div className={twMerge("centered mb-20 text-center", className)}>
       <div className="flex flex-col">
-        {header && <H2 className={clsx("mb-8 font-light", headingSize)}>{header}</H2>}
+        {header && (
+          <H2 id={headerId} className={clsx("mb-8 font-light", headingSize)}>
+            {header}
+          </H2>
+        )}
         {superHeader && <div className="order-first mb-8">{superHeader}</div>}
       </div>
 

diff --git a/src/components/paragraphs/sum-testimonial-banner/sum-testimonial-banner-paragraph.tsx b/src/components/paragraphs/sum-testimonial-banner/sum-testimonial-banner-paragraph.tsx
@@ -90,8 +90,10 @@ const SumTestimonialBannerParagraph = ({paragraph, ...props}: Props) => {
             className={twMerge(
               "absolute flex h-fit w-full justify-center lg:h-full lg:w-fit lg:items-center",
               clsx({
-                "bottom-[30px] right-0 sm:bottom-[50px] lg:-left-[125px] lg:bottom-0 lg:top-0": leftText,
-                "right-0 top-[30px] sm:top-[50px] lg:-right-[125px] lg:bottom-0 lg:top-0": !leftText,
+                "bottom-[30px] right-0 sm:bottom-[50px] lg:-left-[125px] lg:bottom-0 lg:top-0 xl:-left-[150px] 2xl:-left-[200px]":
+                  leftText,
+                "right-0 top-[30px] sm:top-[50px] lg:-right-[125px] lg:bottom-0 lg:top-0 xl:-right-[150px] 2xl:-right-[200px]":
+                  !leftText,
               })
             )}
           >

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -49,6 +49,7 @@ module.exports = {
       },
       fontFamily: {
         roboto: ["var(--font-roboto)", "sans-serif"],
+        stanford: ["var(--font-stanford)", "sans-serif"],
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,6 +49,7 @@ module.exports = { @@
           },
           fontFamily: {
             roboto: ["var(--font-roboto)", "sans-serif"],
+            stanford: ["var(--font-stanford)", "sans-serif"],
           },
         },
       },
@@ Expand Down @@