Skip to content

Commit

Permalink
SUM-47 Theme & Style local footer (#1)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rebeccahongsf
rebeccahongsf authored Apr 24, 2024
1 parent 0f63ee6 commit 3750816
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 136 deletions.
5 changes: 3 additions & 2 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down Expand Up @@ -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/>
Expand Down
188 changes: 96 additions & 92 deletions src/components/config-pages/local-footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -55,197 +57,199 @@ 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 (
<div className="local-footer bg-foggy-light py-20">
<div className="centered">
<div className="mb-20">
<FooterLockup {...lockupProps} />
</div>

<div
className="grid md:grid-cols-2 lg:grid-cols-4 gap-32 [&_a]:font-normal [&_a]:no-underline [&_a:hover]:underline [&_a:hover]:text-black [&_a:focus]:underline [&_a:focus]:text-black [&_a]:transition">
<div>
<div className="grid grid-cols-6 md:grid-cols-12 gap-32 md:gap-y-0 [&_a]:font-semibold [&_a]:no-underline [&_a:hover]:underline [&_a:focus]:underline [&_a]:transition">
<div className="col-span-6 md:col-span-7 2xl:col-span-5 md:col-start-1 2xl:col-start-2 md:col-span-5 md:rs-mb-4">
<FooterLockup {...lockupProps} />
</div>

{suLocalFootAddress &&
<Address {...suLocalFootAddress}/>
}
<div className="col-span-6 md:col-span-7 2xl:col-span-5 md:col-start-1 2xl:col-start-2 md:col-span-5">
{suLocalFootAddress && <Address {...suLocalFootAddress} />}

{suLocalFootAction &&
<ul className="list-unstyled">
{suLocalFootAction.map((link, index) => {
if (!link.url) return;
return (
<li key={`footer-action-link-${index}`}>
<Link href={link.url}>
{link.title}
</Link>
<Link href={link.url}>{link.title}</Link>
</li>
)
);
})}
</ul>
}

{suLocalFootSocial &&
<ul className="list-unstyled flex gap-2">
<Wysiwyg
html={suLocalFootPrCo?.processed}
className="text-archway"
/>

{suLocalFootSocial && (
<ul className="rs-mt-4 list-unstyled flex gap-11 items-center children:mb-0">
{suLocalFootSocial.map((link, index) => {
if (!link.url) return;
return (
<li key={`footer-action-link-${index}`}>
<Link href={link.url}>
<SocialIcon url={link.url}/>
<Link href={link.url} className="text-archway">
<SocialIcon url={link.url} />
<span className="sr-only">{link.title}</span>
</Link>
</li>
)
);
})}
</ul>
}

<Wysiwyg html={suLocalFootPrCo?.processed}/>
)}
</div>

<div>
{suLocalFootPrimeH &&
<H2 className="text-m1">{suLocalFootPrimeH}</H2>}
{suLocalFootPrimary &&
<div className="col-span-6 sm:col-span-3 md:col-span-2 md:col-start-8 2xl:col-start-7 font-roboto">
{suLocalFootPrimeH && <H2 className="text-m1 font-normal">{suLocalFootPrimeH}</H2>}
{suLocalFootPrimary && (
<ul className="list-unstyled">
{suLocalFootPrimary.map((link, index) => {
if (!link.url) return;
return (
<li key={`footer-primary-link-${index}`}>
<Link href={link.url}>
<Link href={link.url} className="link--action">
{link.title}
</Link>
</li>
)
);
})}
</ul>
}
<Wysiwyg html={suLocalFootSeCo?.processed}/>

)}
<Wysiwyg html={suLocalFootSeCo?.processed} />
</div>

<div>
{suLocalFootSecondH &&
<H2 className="text-m1">{suLocalFootSecondH}</H2>}
<div className="col-span-6 sm:col-span-3 md:col-start-10 2xl:col-start-9 font-roboto">
{suLocalFootSecondH && <H2 className="text-m1 font-normal">{suLocalFootSecondH}</H2>}

{suLocalFootSecond &&
{suLocalFootSecond &&
<ul className="list-unstyled">
{suLocalFootSecond.map((link, index) => {
if (!link.url) return;
return (
<li key={`footer-second-link-${index}`}>
<Link href={link.url}>
<Link href={link.url} className="link--action">
{link.title}
</Link>
</li>
)
);
})}
</ul>
}

<Wysiwyg html={suLocalFootTr2Co?.processed}/>

<Wysiwyg html={suLocalFootTr2Co?.processed} />
</div>

<Wysiwyg html={suLocalFootTrCo?.processed}/>

<Wysiwyg html={suLocalFootTrCo?.processed} />
</div>
</div>
</div>
)
}

const SocialIcon = ({url}: { url: string }) => {
if (url.includes("twitter.com")) return <TwitterIcon/>
if (url.includes("youtube.com")) return <YoutubeIcon/>
if (url.includes("facebook")) return <FacebookIcon/>
);
};

const SocialIcon = ({ url }: { url: string }) => {
if (url.includes("facebook")) return <FacebookIcon />;
if (url.includes("linkedin")) return <LinkedInIcon />;
if (url.includes("twitter.com")) return <TwitterIcon />;
if (url.includes("instagram.com")) return <InstagramIcon />;
if (url.includes("youtube.com")) return <YoutubeIcon />;
return null;
}
};

export interface FooterLockupProps {
useDefault?: Maybe<boolean>
siteName?: Maybe<string>
lockupOption?: Maybe<string>
line1?: Maybe<string>
line2?: Maybe<string>
line3?: Maybe<string>
line4?: Maybe<string>
line5?: Maybe<string>
logoUrl?: Maybe<string>
useDefault?: Maybe<boolean>;
siteName?: Maybe<string>;
lockupOption?: Maybe<string>;
line1?: Maybe<string>;
line2?: Maybe<string>;
line3?: Maybe<string>;
line4?: Maybe<string>;
line5?: Maybe<string>;
logoUrl?: Maybe<string>;
}

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 (
<div className="py-10">
<Link href="/"
className="flex flex-col lg:flex-row gap-4 no-underline">
<LockupLogo {...lockupProps}/>
<Link
href="/"
className="flex flex-row gap-4 no-underline font-roboto"
>
<LockupLogo {...lockupProps} />
</Link>
</div>
)
);

case "a":
return <LockupA {...lockupProps}/>;
return <LockupA {...lockupProps} />;

case "b":
return <LockupB {...lockupProps}/>;
return <LockupB {...lockupProps} />;

case "d":
return <LockupD {...lockupProps}/>;
return <LockupD {...lockupProps} />;

case "e":
return <LockupE {...lockupProps}/>;
return <LockupE {...lockupProps} />;

case "h":
return <LockupH {...lockupProps}/>;
return <LockupH {...lockupProps} />;

case "i":
return <LockupI {...lockupProps}/>;
return <LockupI {...lockupProps} />;

case "m":
return <LockupM {...lockupProps}/>;
return <LockupM {...lockupProps} />;

case "o":
return <LockupO {...lockupProps}/>;
return <LockupO {...lockupProps} />;

case "p":
return <LockupP {...lockupProps}/>;
return <LockupP {...lockupProps} />;

case "r":
return <LockupR {...lockupProps}/>;
return <LockupR {...lockupProps} />;

case "s":
return <LockupS {...lockupProps}/>;
return <LockupS {...lockupProps} />;

case "t":
return <LockupT {...lockupProps}/>;
return <LockupT {...lockupProps} />;
}


return (
<div className="py-10">
<Link href="/" className="flex flex-col lg:flex-row gap-4 no-underline">
<LockupLogo {...lockupProps}/>
<Link href="/" className="flex flex-row gap-4 no-underline">
<LockupLogo {...lockupProps} />

<div className="w-[1px] bg-black shrink-0"/>
<div className="w-[1px] bg-black shrink-0" />
<div className="font-normal text-black text-m2 leading-none">
{siteName || "University"}
</div>
</Link>
</div>
)

}
export default LocalFooter;
);
};
export default LocalFooter
18 changes: 9 additions & 9 deletions src/components/elements/action-link.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<HTMLAnchorElement> & {
/**
* Link url.
*/
href: string
}
};

const ActionLink = ({children, ...props}: Props) => {
const ActionLink = ({ children, ...props }: Props) => {
return (
<Link {...props} className={twMerge("relative", props.className)}>
{children}
<ChevronRightIcon height={25} className="ml-2 inline-block"/>
<ArrowRightIcon width={20} className="ml-2 inline-block" />
</Link>
)
}
export default ActionLink;
);
};
export default ActionLink
Loading

0 comments on commit 3750816

Please sign in to comment.