Merge branch '1.x' into feature/SUM-45--header

SU-SWS · Apr 24, 2024 · d5b83d4 · d5b83d4
2 parents 9d2d81a + e67bb0e
commit d5b83d4
Show file tree

Hide file tree

Showing 17 changed files with 873 additions and 804 deletions.
diff --git a/.storybook/stories/elements/lockup/Lockup.stories.tsx b/.storybook/stories/elements/lockup/Lockup.stories.tsx
@@ -32,7 +32,7 @@ type Story = StoryObj<ComponentStoryProps>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const LockupDisplay: Story = {
   render: ({logoUrl, ...args}) => {
-    if(logoUrl) args.suUploadLogoImage = {url: logoUrl, height: 50, width: 300, size: 123}
+    if (logoUrl) args.suUploadLogoImage = {url: logoUrl, height: 50, width: 300, size: 123, focalY: 50, focalX: 50}
     return <Lockup {...args}/>
   },
   args: {

diff --git a/.storybook/stories/storybook-entities.tsx b/.storybook/stories/storybook-entities.tsx
@@ -27,6 +27,8 @@ export const getStoryBookImage = (imageUrl?: string): MediaImage => {
       width: 1500,
       alt: "Placeholder Image",
       size: 123,
+      focalY: 50,
+      focalX: 50,
     }
   }
 }
@@ -59,6 +61,8 @@ export const getStoryBookGalleryImage = (imageUrl?: string, imageCaption?: strin
       width: 1500,
       alt: "kittens",
       size: 123,
+      focalY: 50,
+      focalX: 50,
     }
   }
 }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,10 +3,11 @@ import BackToTop from "@components/elements/back-to-top";
 import PageFooter from "@components/global/page-footer";
 import PageHeader from "@components/global/page-header";
 import {Icon} from "next/dist/lib/metadata/types/metadata-types";
-import {sourceSans3} from "../src/styles/fonts";
+import { roboto, sourceSans3} from "../src/styles/fonts";
 import DrupalWindowSync from "@components/elements/drupal-window-sync";
 import {isPreviewMode} from "@lib/drupal/utils";
 import UserAnalytics from "@components/elements/user-analytics";
+import clsx from "clsx";
 
 const appleIcons: Icon[] = [60, 72, 76, 114, 120, 144, 152, 180].map(size => ({
   url: `https://www-media.stanford.edu/assets/favicon/apple-touch-icon-${size}x${size}.png`,
@@ -45,7 +46,7 @@ export const revalidate = false;
 const RootLayout = ({children, modal}: { children: React.ReactNode, modal: React.ReactNode }) => {
   const isPreview = isPreviewMode();
   return (
-    <html lang="en" className={sourceSans3.className}>
+    <html lang="en" className={clsx(sourceSans3.className, roboto.variable)}>
     {/* Add Google Analytics and SiteImprove when not in preview mode. */}
     {!isPreview &&
       <UserAnalytics/>

diff --git a/package.json b/package.json
@@ -17,33 +17,33 @@
     "@heroicons/react": "^2.1.3",
     "@js-temporal/polyfill": "^0.4.4",
     "@mui/base": "^5.0.0-beta.42",
-    "@next/third-parties": "^14.1.4",
+    "@next/third-parties": "^14.2.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.2.75",
-    "@types/react-dom": "^18.2.24",
-    "algoliasearch": "^4.23.2",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "algoliasearch": "^4.23.3",
     "autoprefixer": "^10.4.19",
     "axios": "^1.6.8",
     "clsx": "^2.1.0",
     "decanter": "^7.2.0",
     "drupal-jsonapi-params": "^2.3.1",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.1.4",
+    "eslint-config-next": "^14.2.2",
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.10",
-    "next": "^14.2.0-canary.64",
+    "next": "^14.2.2",
     "next-drupal": "^1.6.0",
     "postcss": "^8.4.38",
-    "qs": "^6.12.0",
+    "qs": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.11.2",
-    "react-instantsearch": "^7.7.1",
-    "react-instantsearch-nextjs": "^0.2.0",
+    "react-focus-lock": "^2.11.3",
+    "react-instantsearch": "^7.7.2",
+    "react-instantsearch-nextjs": "^0.2.1",
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.3",
@@ -58,14 +58,14 @@
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.0",
-    "@next/bundle-analyzer": "^14.1.4",
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
+    "@next/bundle-analyzer": "^14.2.2",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/nextjs": "^8.0.6",
-    "@storybook/react": "^8.0.6",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/nextjs": "^8.0.8",
+    "@storybook/react": "^8.0.8",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^8.2.2",
@@ -74,7 +74,7 @@
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^3.1.0",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.0.6",
+    "storybook": "^8.0.8",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "packageManager": "[email protected]"

diff --git a/src/components/config-pages/global-message.tsx b/src/components/config-pages/global-message.tsx
@@ -1,17 +1,23 @@
-import {BellIcon, CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon} from "@heroicons/react/20/solid";
-import {H2} from "@components/elements/headers";
+import {
+  BellIcon,
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+} from "@heroicons/react/20/solid";
+import { H2 } from "@components/elements/headers";
 import Wysiwyg from "@components/elements/wysiwyg";
-import Link from "@components/elements/link";
-import {clsx} from "clsx";
-import {StanfordGlobalMessage} from "@lib/gql/__generated__/drupal.d";
+import { StanfordGlobalMessage } from "@lib/gql/__generated__/drupal.d";
+import ActionLink from "@components/elements/action-link";
+import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
 
 const GlobalMessage = ({
   suGlobalMsgEnabled,
   suGlobalMsgType,
-  suGlobalMsgLabel,
   suGlobalMsgHeader,
+  suGlobalMsgLabel,
   suGlobalMsgLink,
-  suGlobalMsgMessage
+  suGlobalMsgMessage,
 }: StanfordGlobalMessage) => {
   if (!suGlobalMsgEnabled) return;
 
@@ -24,38 +30,50 @@ const GlobalMessage = ({
   });
 
   return (
-    <div className={wrapperClasses + " py-10"}>
-      <div className="centered flex flex-col lg:flex-row gap-10">
-        <div className="flex items-center leading-none shrink-0">
-          <MessageIcon messageType={suGlobalMsgType}/>
-          {suGlobalMsgLabel}:
-        </div>
-        <div className="[&_a]:text-white [&_a.btn]:bg-transparent [&_a.btn]:border-2 [&_a.btn]:border-white">
-          {suGlobalMsgHeader && <H2>{suGlobalMsgHeader}</H2>}
-
-          <Wysiwyg html={suGlobalMsgMessage?.processed}/>
+    <div className="bg-fog-light">
+      <div className="md:centered">
+        <div
+          className={twMerge(
+            wrapperClasses,
+            "px-16 py-10 rounded-b-[25px] w-full lg:w-3/4 flex flex-col md:flex-row items-center gap-10"
+          )}
+        >
+          {suGlobalMsgLabel && 
+            <div className="flex items-center leading-none shrink-0">
+              <MessageIcon messageType={suGlobalMsgType} />
+              {suGlobalMsgLabel}:
+            </div>
+          }
+          <div>
+            {suGlobalMsgHeader && <H2 className="text-23 mb-3">{suGlobalMsgHeader}</H2>}
+            <Wysiwyg html={suGlobalMsgMessage?.processed} />
+          </div>
 
-          {suGlobalMsgLink?.url &&
-            <Link href={suGlobalMsgLink.url} className="text-white">
+          {suGlobalMsgLink?.url && 
+            <ActionLink href={suGlobalMsgLink.url} className="w-full max-w-fit">
               {suGlobalMsgLink.title}
-            </Link>
+            </ActionLink>
           }
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-const MessageIcon = ({messageType}: { messageType: StanfordGlobalMessage["suGlobalMsgType"] }) => {
+const MessageIcon = ({
+  messageType,
+}: {
+  messageType: StanfordGlobalMessage["suGlobalMsgType"];
+}) => {
   switch (messageType) {
     case "info":
-      return <InformationCircleIcon width={40}/>
+      return <InformationCircleIcon width={40} />;
     case "success":
-      return <CheckCircleIcon width={40}/>
+      return <CheckCircleIcon width={40} />;
     case "plain":
-      return <BellIcon width={40}/>;
+      return <BellIcon width={40} />;
   }
-  return <ExclamationTriangleIcon width={40}/>;
-}
+  return <ExclamationTriangleIcon width={40} />;
+};
 
-export default GlobalMessage;
+export default GlobalMessage;