From 375081657d8d9595388ce6e3eb2117bd904c1064 Mon Sep 17 00:00:00 2001 From: Rebecca Hong <34019925+rebeccahongsf@users.noreply.github.com> Date: Wed, 24 Apr 2024 09:59:44 -0700 Subject: [PATCH] SUM-47 Theme & Style local footer (#1) --- app/layout.tsx | 5 +- src/components/config-pages/local-footer.tsx | 188 +++++++++--------- src/components/elements/action-link.tsx | 18 +- src/components/elements/button.tsx | 35 ++-- .../elements/icons/InstagramIcon.tsx | 13 +- .../elements/icons/LinkedInIcon.tsx | 12 +- src/styles/fonts.tsx | 11 +- tailwind.config.js | 5 +- 8 files changed, 151 insertions(+), 136 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index e5383aff..d05fd537 100644 --- 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 ( - + {/* Add Google Analytics and SiteImprove when not in preview mode. */} {!isPreview && diff --git a/src/components/config-pages/local-footer.tsx b/src/components/config-pages/local-footer.tsx index be5332c0..d16ae392 100644 --- a/src/components/config-pages/local-footer.tsx +++ b/src/components/config-pages/local-footer.tsx @@ -14,13 +14,15 @@ import LockupP from "@components/elements/lockup/lockup-p"; import LockupR from "@components/elements/lockup/lockup-r"; import LockupS from "@components/elements/lockup/lockup-s"; import LockupT from "@components/elements/lockup/lockup-t"; -import {JSX} from "react"; -import {H2} from "@components/elements/headers"; +import { JSX } from "react"; +import { H2 } from "@components/elements/headers"; import TwitterIcon from "@components/elements/icons/TwitterIcon"; import YoutubeIcon from "@components/elements/icons/YoutubeIcon"; import FacebookIcon from "@components/elements/icons/FacebookIcon"; -import { Maybe, StanfordLocalFooter} from "@lib/gql/__generated__/drupal.d"; -import {buildUrl} from "@lib/drupal/utils"; +import { Maybe, StanfordLocalFooter } from "@lib/gql/__generated__/drupal.d"; +import { buildUrl } from "@lib/drupal/utils"; +import InstagramIcon from "@components/elements/icons/InstagramIcon"; +import LinkedInIcon from "@components/elements/icons/LinkedInIcon"; const LocalFooter = ({ suFooterEnabled, @@ -55,23 +57,22 @@ const LocalFooter = ({ line3: suLocalFootLine3, line4: suLocalFootLine4, line5: suLocalFootLine5, - logoUrl: !suLocalFootUseLogo && suLocalFootLocImg?.url ? buildUrl(suLocalFootLocImg?.url).toString() : undefined, - } + logoUrl: + !suLocalFootUseLogo && suLocalFootLocImg?.url + ? buildUrl(suLocalFootLocImg?.url).toString() + : undefined, + }; return (
-
- -
- -
-
+
+
+ +
- {suLocalFootAddress && -
- } +
+ {suLocalFootAddress &&
} {suLocalFootAction &&
    @@ -79,173 +80,176 @@ const LocalFooter = ({ if (!link.url) return; return (
  • - - {link.title} - + {link.title}
    • - ) + ); })}
} - {suLocalFootSocial && -
    + + + {suLocalFootSocial && ( +
      {suLocalFootSocial.map((link, index) => { if (!link.url) return; return (
    • - - + + {link.title}
      • - ) + ); })}
    - } - - + )}
-
- {suLocalFootPrimeH && -

{suLocalFootPrimeH}

} - {suLocalFootPrimary && +
+ {suLocalFootPrimeH &&

{suLocalFootPrimeH}

} + {suLocalFootPrimary && (
    {suLocalFootPrimary.map((link, index) => { if (!link.url) return; return (
  • - + {link.title}
    • - ) + ); })}
- } - - + )} +
-
- {suLocalFootSecondH && -

{suLocalFootSecondH}

} +
+ {suLocalFootSecondH &&

{suLocalFootSecondH}

} - {suLocalFootSecond && + {suLocalFootSecond &&
    {suLocalFootSecond.map((link, index) => { if (!link.url) return; return (
  • - + {link.title}
    • - ) + ); })}
} - - +
- - +
- ) -} - -const SocialIcon = ({url}: { url: string }) => { - if (url.includes("twitter.com")) return - if (url.includes("youtube.com")) return - if (url.includes("facebook")) return + ); +}; + +const SocialIcon = ({ url }: { url: string }) => { + if (url.includes("facebook")) return ; + if (url.includes("linkedin")) return ; + if (url.includes("twitter.com")) return ; + if (url.includes("instagram.com")) return ; + if (url.includes("youtube.com")) return ; return null; -} +}; export interface FooterLockupProps { - useDefault?: Maybe - siteName?: Maybe - lockupOption?: Maybe - line1?: Maybe - line2?: Maybe - line3?: Maybe - line4?: Maybe - line5?: Maybe - logoUrl?: Maybe + useDefault?: Maybe; + siteName?: Maybe; + lockupOption?: Maybe; + line1?: Maybe; + line2?: Maybe; + line3?: Maybe; + line4?: Maybe; + line5?: Maybe; + logoUrl?: Maybe; } -const FooterLockup = ({useDefault = true, siteName, lockupOption, ...props}: FooterLockupProps): JSX.Element => { +const FooterLockup = ({ + useDefault = true, + siteName, + lockupOption, + ...props +}: FooterLockupProps): JSX.Element => { const lockupProps = { - ...props - } + ...props, + }; - lockupOption = useDefault ? "default" : lockupOption + lockupOption = useDefault ? "default" : lockupOption; switch (lockupOption) { case "none": return (
- - + +
- ) + ); case "a": - return ; + return ; case "b": - return ; + return ; case "d": - return ; + return ; case "e": - return ; + return ; case "h": - return ; + return ; case "i": - return ; + return ; case "m": - return ; + return ; case "o": - return ; + return ; case "p": - return ; + return ; case "r": - return ; + return ; case "s": - return ; + return ; case "t": - return ; + return ; } - return (
- - + + -
+
{siteName || "University"}
- ) - -} -export default LocalFooter; \ No newline at end of file + ); +}; +export default LocalFooter diff --git a/src/components/elements/action-link.tsx b/src/components/elements/action-link.tsx index 7d8ec90b..3671655d 100644 --- a/src/components/elements/action-link.tsx +++ b/src/components/elements/action-link.tsx @@ -1,21 +1,21 @@ import Link from "@components/elements/link"; -import {ChevronRightIcon} from "@heroicons/react/20/solid"; -import {HtmlHTMLAttributes} from "react"; -import {twMerge} from "tailwind-merge"; +import { ArrowRightIcon } from "@heroicons/react/20/solid"; +import { HtmlHTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; type Props = HtmlHTMLAttributes & { /** * Link url. */ href: string -} +}; -const ActionLink = ({children, ...props}: Props) => { +const ActionLink = ({ children, ...props }: Props) => { return ( {children} - + - ) -} -export default ActionLink; \ No newline at end of file + ); +}; +export default ActionLink diff --git a/src/components/elements/button.tsx b/src/components/elements/button.tsx index 6b907455..e895a996 100644 --- a/src/components/elements/button.tsx +++ b/src/components/elements/button.tsx @@ -1,8 +1,9 @@ import Link from "@components/elements/link"; -import {twMerge} from "tailwind-merge" -import {HtmlHTMLAttributes, MouseEventHandler} from "react"; -import {Maybe} from "@lib/gql/__generated__/drupal.d"; -import {clsx} from "clsx"; +import { twMerge } from "tailwind-merge"; +import { HtmlHTMLAttributes, MouseEventHandler } from "react"; +import { Maybe } from "@lib/gql/__generated__/drupal.d"; +import { clsx } from "clsx"; +import { ArrowRightIcon } from "@heroicons/react/20/solid"; type Props = HtmlHTMLAttributes & { /** @@ -53,17 +54,18 @@ export const Button = ({ className, ...props }: Props) => { - - const standardClasses = clsx( - { - "flex items-center w-fit mx-auto": centered, - "inline-block text-center w-fit": !centered, - "btn btn--big transition text-5xl text-white hocus:text-white bg-digital-red hocus:bg-black no-underline hocus:underline py-6 px-12 font-normal": big && !secondary, - "btn btn--secondary transition text-digital-red border-2 border-digital-red hocus:border-black no-underline hocus:underline py-4 px-8 font-normal": !big && secondary, - "btn btn--big btn--secondary transition text-5xl text-digital-red border-2 border-digital-red hocus:border-black no-underline hocus:underline py-6 px-12 font-normal": big && secondary, - "btn bg-digital-red font-normal text-white hocus:bg-black hocus:text-white py-4 px-8 no-underline hocus:underline transition": !big && !secondary, - } - ) + const standardClasses = clsx({ + "flex items-center w-fit mx-auto": centered, + "inline-block text-center w-fit": !centered, + "btn btn--big transition text-5xl text-white hocus:text-white bg-digital-red border-2 border-white hocus:outline hocus:outline-3 hocus:outline-digital-red no-underline hocus:underline py-6 px-12 font-normal rounded-full m-4": + big && !secondary, + "btn btn--secondary transition text-digital-red hocus:text-white hocus:bg-digital-red border-2 border-digital-red hocus:border-white no-underline hocus:underline hocus:outline hocus:outline-3 hocus:outline-digital-red py-4 px-16 font-normal rounded-full": + !big && secondary, + "btn btn--big btn--secondary transition text-5xl text-digital-red hocus:text-white hocus:bg-digital-red border-2 border-digital-red hocus:border-white no-underline hocus:underline hocus:outline hocus:outline-3 hocus:outline-digital-red py-6 px-20 font-normal rounded-full": + big && secondary, + "btn bg-digital-red font-normal text-white border-2 border-white hocus:text-white hocus:outline hocus:outline-3 hocus:outline-digital-red py-4 px-8 no-underline hocus:underline transition rounded-full m-4": + !big && !secondary, + }) if (!href || buttonElem) { return ( @@ -84,8 +86,9 @@ export const Button = ({ {...props} > {children} + ) } -export default Button \ No newline at end of file +export default Button diff --git a/src/components/elements/icons/InstagramIcon.tsx b/src/components/elements/icons/InstagramIcon.tsx index 2540ed08..185df308 100644 --- a/src/components/elements/icons/InstagramIcon.tsx +++ b/src/components/elements/icons/InstagramIcon.tsx @@ -1,14 +1,15 @@ -import {HTMLAttributes} from "react"; +import { HTMLAttributes } from "react"; const InstagramIcon = (props: HTMLAttributes) => { return ( - + Instagram icon + d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" + /> - ) -} + ); +}; -export default InstagramIcon; \ No newline at end of file +export default InstagramIcon diff --git a/src/components/elements/icons/LinkedInIcon.tsx b/src/components/elements/icons/LinkedInIcon.tsx index f5ff42c0..67e4b14b 100644 --- a/src/components/elements/icons/LinkedInIcon.tsx +++ b/src/components/elements/icons/LinkedInIcon.tsx @@ -1,15 +1,11 @@ -import {HTMLAttributes} from "react"; +import { HTMLAttributes } from "react"; const LinkedInIcon = (props: HTMLAttributes) => ( - + -) -export default LinkedInIcon; \ No newline at end of file +); +export default LinkedInIcon diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx index 7f897512..c3772587 100644 --- a/src/styles/fonts.tsx +++ b/src/styles/fonts.tsx @@ -1,7 +1,14 @@ -import {Source_Sans_3} from "next/font/google"; +import { Roboto, Source_Sans_3 } from "next/font/google"; export const sourceSans3 = Source_Sans_3({ subsets: ["latin"], display: "swap", variable: "--font-sans", -}) \ No newline at end of file +}); + +export const roboto = Roboto({ + subsets: ["latin"], + display: "swap", + variable: "--font-roboto", + weight: "400" +}); diff --git a/tailwind.config.js b/tailwind.config.js index 9f7692c0..dc643f78 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -43,7 +43,10 @@ module.exports = { }, scale: { '-100': '-1' - } + }, + fontFamily: { + roboto: ['var(--font-roboto)', 'sans-serif'], + }, }, }, plugins: [