Skip to content

Commit

Permalink
SOEOPSFY24-309 | scaffold story line art banner
Browse files Browse the repository at this point in the history
  • Loading branch information
@rebeccahongsf
rebeccahongsf committed Dec 11, 2024
1 parent 13444e0 commit 2f519b3
Show file tree
Hide file tree
Showing 20 changed files with 213 additions and 49 deletions.
22 changes: 22 additions & 0 deletions app/example/textarea/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage"
import { Container } from "@/components/Container";
import { ContributeStoryBanner } from "@/components/ContributeStoryBanner";
import Metadata from "@/components/Layout/Metadata";
import { LineBanner } from "@/components/StoryBanners";

const TextareaExamplePage = async () => {
return (
Expand All @@ -13,6 +14,27 @@ const TextareaExamplePage = async () => {
description="Example page containing typography styles"
/>
<Masthead isLight />

<LineBanner
hasLineArt
heading="Exploring the reengineering of immune cells"
superhead="Change Makers"
body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
byline="by Jess Alvarenga"
src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
lineVariant="a"
/>
<LineBanner
hasLineArt
heading="Exploring the reengineering of immune cells"
superhead="Change Makers"
body="The Sarafan ChEM-H Institute scholar is building a multidisciplinary lab to explore the reengineering of immune cells. Before coming to Stanford, she says, “I was thinking in terms of understanding. Now I feel that I can start thinking in terms of creating."
byline="by Jess Alvarenga"
src="/soe-centennial-nextjs/assets/images/lt-flynn-1994.jpeg"
caption="Caption/credit lorem ipsum dolar sit amet vestibulum perimentium"
lineVariant="b"
/>
<Container width="site" py={9} className="font-dm-sans">
<MediaCaptionImage
imageSrc="https://placecats.com/neo/1500/1000"
Expand Down
52 changes: 24 additions & 28 deletions components/StoryBanners/LineBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { BgColorType, Container } from "@/components/Container";
import { Heading, Text } from "@/components/Typography";
import BannerLineart from "@/components/images/banner-lineart";
import { cnb } from "cnbuilder";
import { Button } from "../Cta";
import { FlexBox } from "@/components/FlexBox";

type LineBannerProps = HTMLAttributes<HTMLDivElement> & {
Expand All @@ -16,11 +15,20 @@ type LineBannerProps = HTMLAttributes<HTMLDivElement> & {
caption?: string;
src: string;
alt?: string;
lineVariant?: "a" | "b" | "default";
};

export const LineBanner = ({
bgColor = "red-gradient",
hasLineArt = false,
heading,
superhead,
body,
byline,
caption,
src,
alt,
lineVariant,
...props
}: LineBannerProps) => (
<Container
Expand All @@ -45,40 +53,28 @@ export const LineBanner = ({
width="full"
>
{hasLineArt && (
<BannerLineart className="absolute top-0 left-0 flex justify-center items-center z-10" />
<BannerLineart
variant={lineVariant}
className="absolute top-0 left-0 flex justify-center items-center z-10"
/>
)}
<div className="w-full 2xl:max-w-[1050px] flex flex-col xl:flex-row items-center sm:items-start xl:items-center justify-center h-full justify-between xl:gap-50">
<FlexBox direction="col" className="z-50 max-w-full lg:max-w-[670px]">
<Heading mb={5} className="font-normal">
Contribute{" "}
<span
className={cnb("underline decoration-4 underline-offset-8", {
"text-digital-red-xlight": bgColor === "red-gradient",
"text-stone-dark": bgColor !== "red-gradient",
})}
>
your stories
</span>
<Heading size={6} weight="normal" mb="none">
{heading}
</Heading>
<Text
size={2}
mb="none"
font="dm-mono"
className="order-first font-dm-mono mb-1 mt-70"
>
Get involved
<Text className="order-first" mb={2} font="dm-mono">
{superhead}
</Text>
<Text size={1} mb="none">
Cras felis tortor, bibendum quis porttitor at, ullamcorper eu diam.
Aenean iaculis efficitur quam, quis dignissim lacus. Cras nec dui id
mi blandit lobortis eget in enim.
<Text variant="overview" mb="none" className="rs-mt-5">
{body}
</Text>
{byline && (
<Text mb="none" size="base" className="rs-mt-4">
{byline}
</Text>
)}
</FlexBox>
<div className="shrink-0 z-50 my-48 md:mb-0">
<Button isLight={bgColor !== "red-gradient" ? true : false} href="/">
Submit your story
</Button>
</div>
</div>
</Container>
</Container>
Expand Down
152 changes: 149 additions & 3 deletions components/images/banner-lineart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ import React from "react";

interface BannerLineartProps {
className?: string;
variant?: "oval" | "triangle";
variant?: "a" | "b" | "default";
}

const BannerLineart = ({ className, variant = "oval" }: BannerLineartProps) => {
if (variant === "triangle") {
const BannerLineart = ({
className,
variant = "default",
}: BannerLineartProps) => {
if (variant === "a") {
return (
<>
<svg
Expand Down Expand Up @@ -150,6 +153,149 @@ const BannerLineart = ({ className, variant = "oval" }: BannerLineartProps) => {
</>
);
}
if (variant === "b") {
return (
<>
<svg
width="1508"
height="986"
viewBox="0 0 1508 986"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cnb("hidden 2xl:block", className)}
style={{
height: "100%",
width: "100%",
maxWidth: "100%",
}}
preserveAspectRatio="none"
>
<path
vectorEffect="non-scaling-stroke"
d="M1337.5 89C1268 89 1268 3 1337.5 3C1359.5 3 1379 3 1423 3C1467 3 1466.5 52.9346 1424 52.9346C1359.8 54.2569 1184 54 1141 54C1098 54 69.0008 52.9999 37.0009 52.9999C5.00086 52.9999 3.00085 70.9999 3.00085 94.9999C3.00085 119 3.00085 921 3.00085 947C3.00085 973 9.00086 983 37.0009 983C65.0008 983 1439 983 1467 983C1495 983 1505 971 1505 947C1505 925.53 1505 271.367 1505 132.5C1505 104.5 1494 89 1467 89C1451 89 1337.5 89 1337.5 89Z"
stroke="#F83535"
stroke-width="5"
stroke-linecap="round"
/>
</svg>
{/* XL SVG */}
<svg
width="1003"
height="986"
viewBox="0 0 1003 986"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cnb("hidden xl:block 2xl:hidden", className)}
style={{
height: "100%",
width: "100%",
maxWidth: "100%",
}}
preserveAspectRatio="none"
>
<path
vectorEffect="non-scaling-stroke"
d="M832.5 89C762.999 89 762.999 3 832.5 3C854.5 3 873.999 3 917.999 3C961.999 3 961.499 54.9346 918.999 54.9346C854 54.9346 678.998 54 635.999 54C593 54 69 52.9999 37 52.9999C5.00001 52.9999 3 70.9999 3 94.9999C3 119 3 921 3 947C3 973 9.00001 983 37 983C65 983 934 983 962 983C990 983 1000 971 1000 947C1000 925.53 1000 271.367 1000 132.5C1000 104.5 988.999 89 961.999 89C945.999 89 832.5 89 832.5 89Z"
stroke="#F83535"
stroke-width="5"
stroke-linecap="round"
/>
</svg>
{/* LG SVG */}
<svg
width="817"
height="986"
viewBox="0 0 817 986"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cnb("hidden lg:block xl:hidden", className)}
style={{
height: "100%",
width: "100%",
maxWidth: "100%",
}}
preserveAspectRatio="none"
>
<path
vectorEffect="non-scaling-stroke"
d="M646.5 89C576.999 89 576.999 3 646.5 3C668.5 3 687.999 3 731.999 3C775.999 3 775.499 54.9346 732.999 54.9346C667 54.9346 492.998 54 449.999 54C407 54 69 52.9999 37 52.9999C5.00001 52.9999 3 70.9999 3 94.9999C3 119 3 921 3 947C3 973 9.00001 983 37 983C65 983 748 983 776 983C804 983 814 971 814 947C814 925.53 814 271.367 814 132.5C814 104.5 802.999 89 775.999 89C759.999 89 646.5 89 646.5 89Z"
stroke="#F83535"
stroke-width="5"
stroke-linecap="round"
/>
</svg>
{/* MD SVG */}
<svg
width="697"
height="766"
viewBox="0 0 697 766"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cnb("hidden md:block lg:hidden", className)}
style={{
height: "100%",
width: "100%",
maxWidth: "100%",
}}
preserveAspectRatio="none"
>
<path
vectorEffect="non-scaling-stroke"
d="M556 76C512 76 509 3 556 3C578 3 577.998 3 611.999 3C646 3 647 44.9346 612.999 44.9346C548.5 44.9346 372.998 44 329.999 44C287 44 69 42.9999 37 42.9999C5.00001 42.9999 3 60.9999 3 84.9999C3 109 3 701 3 727C3 753 9.00001 763 37 763C65 763 628 763 656 763C684 763 694 751 694 727C694 705.531 694 254.367 694 115.5C694 87.5 688.999 76 661.999 76C645.999 76 556 76 556 76Z"
stroke="#F83535"
stroke-width="5"
stroke-linecap="round"
/>
</svg>
{/* SM SVG */}
<svg
width="509"
height="620"
viewBox="0 0 509 620"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cnb("hidden sm:block md:hidden", className)}
style={{
height: "100%",
width: "100%",
maxWidth: "100%",
}}
preserveAspectRatio="none"
>
<path
vectorEffect="non-scaling-stroke"
d="M406.146 55.3092C373.99 55.3092 371.797 2 406.146 2C422.224 2 422.223 2 447.072 2C471.92 2 472.651 33.1628 447.802 33.1628C401 33.1628 272.404 31.9408 240.979 31.9408C209.554 31.9408 50.2344 31.2105 26.8481 31.2105C3.46166 31.2105 2 44.3552 2 61.8815C2 79.4078 2 572.013 2 591C2 609.987 6.38496 617.289 26.8481 617.289C47.3111 617.289 458.765 617.29 479.229 617.29C499.692 617.29 507 608.526 507 591C507 575.322 507 185.564 507 84.1546C507 63.7072 499.732 55.3092 480 55.3092C468.307 55.3092 406.146 55.3092 406.146 55.3092Z"
stroke="#F83535"
stroke-width="4"
stroke-linecap="round"
/>
</svg>
{/* XS SVG */}
<svg
width="323"
height="779"
viewBox="0 0 323 779"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={cnb("block sm:hidden", className)}
style={{
height: "100%",
width: "100%",
maxWidth: "100%",
}}
preserveAspectRatio="none"
>
<path
vectorEffect="non-scaling-stroke"
d="M245.146 45.3092C212.99 45.3092 210.797 2 245.146 2C272 2 246.223 2 271.072 2C295.92 2 296.349 28.5 271.5 28.5C224 28.5 139.425 27.9408 108 27.9408C76.5752 27.9408 45.3864 27.2105 22 27.2105C9 27.2105 2.15195 38.3092 2.15195 49.8815C2.15195 67.4078 2.15195 740.921 2.15195 757.711C2.15195 774.5 8 777 18 777C28 777 278.765 777 299.229 777C315 777 321 769.389 321 753.711C321 738.032 321 170.564 321 69.1546C321 54.5 317.5 45.3092 302.613 45.3092C290.92 45.3092 245.146 45.3092 245.146 45.3092Z"
stroke="#F83535"
stroke-width="3"
stroke-linecap="round"
/>
</svg>
</>
);
}

return (
<>
Expand Down
Loading

0 comments on commit 2f519b3

Please sign in to comment.