SOEOPSFY-337 | add background trapezoid svg

SU-SOE · Nov 22, 2024 · 16eac6e · 16eac6e
1 parent f358f48
commit 16eac6e
Show file tree

Hide file tree

Showing 17 changed files with 90 additions and 22 deletions.
diff --git a/components/Timeline/TimelineCard.styles.ts b/components/Timeline/TimelineCard.styles.ts
@@ -1,8 +1,8 @@
 import { cnb } from "cnbuilder";
 export const wrapper = (align: string, isHorizontal: boolean) =>
-  cnb("flex-col w-fit", {
+  cnb("relative z-50 flex-col w-fit", {
     "lg:flex-row": isHorizontal,
-    "lg:ml-auto": align === "right",
+    "ml-auto": isHorizontal && align === "right",
   });
 export const contentWrapper = (isHorizontal: boolean) =>
   cnb("rs-px-2 flex flex-col", {

diff --git a/components/Timeline/TimelineCard.tsx b/components/Timeline/TimelineCard.tsx
@@ -8,7 +8,17 @@ import { TimelineImage } from "./TimelineImage";
 import { ArrowRightIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
 import { AnimateInView, AnimationType } from "@/components/Animate";
-import { PaddingType, paddingVerticals } from "@/utilities/datasource";
+import {
+  paddingTops,
+  paddingBottoms,
+  paddingVerticals,
+  marginTops,
+  marginBottoms,
+  marginVerticals,
+  type MarginType,
+  type PaddingType,
+} from "@/utilities/datasource";
+import { Trapezoid } from "../images/trapezoid";
 
 type TimelineCardProps = HTMLAttributes<HTMLDivElement> & {
   as?: types.TimelineCardElementType;
@@ -23,12 +33,22 @@ type TimelineCardProps = HTMLAttributes<HTMLDivElement> & {
   align?: "right" | "left";
   width?: types.WidthType;
   isHorizontal?: boolean;
+  pt?: PaddingType;
+  pb?: PaddingType;
   py?: PaddingType;
+  mt?: MarginType;
+  mb?: MarginType;
+  my?: MarginType;
 };
 
 export const TimelineCard = ({
   as: AsComponent = "div",
-  py = 5,
+  py,
+  pt = 9,
+  pb = 3,
+  mt = 3,
+  mb,
+  my,
   heading,
   year,
   body,
@@ -50,11 +70,28 @@ export const TimelineCard = ({
       <AsComponent
         {...props}
         className={cnb(
+          "h-fit relative",
           bgColor ? styles.bgColors[bgColor] : "",
           py ? paddingVerticals[py] : "",
+          pt ? paddingTops[pt] : "",
+          pb ? paddingBottoms[pb] : "",
+          my ? marginVerticals[my] : "",
+          mt ? marginTops[mt] : "",
+          mb ? marginBottoms[mb] : "",
           width ? styles.widths[width] : "",
         )}
       >
+        {isHorizontal && (
+          <Trapezoid
+            className={cnb(
+              "absolute top-0 z-0 flex items-center overflow-hidden",
+              {
+                "right-0": align === "right",
+                "left-0 rotate-180": align === "left",
+              },
+            )}
+          />
+        )}
         <FlexBox
           alignItems="center"
           className={styles.wrapper(align, isHorizontal)}

diff --git a/components/images/trapezoid.tsx b/components/images/trapezoid.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+interface TrapezoidProps {
+  fill?: string;
+  height?: number | string;
+  width?: number | string;
+  className?: string;
+}
+
+export const Trapezoid = ({
+  fill,
+  height = "909",
+  width = "495",
+  className,
+}: TrapezoidProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 495 909"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M559.14 907.342L23.1398 781.435C9.58301 778.251 0 766.156 0 752.23V140.481C0 126.232 10.0237 113.948 23.9838 111.091L559.984 1.37244C578.585 -2.43514 596 11.7764 596 30.763V878.136C596 897.477 577.968 911.764 559.14 907.342Z"
+        fill={fill || "#F4F8FA"}
+      />
+    </svg>
+  );
+};
diff --git a/out/404.html b/out/404.html
diff --git a/...c/kl_HGxkKw62rGQGM-O7A2/_buildManifest.js → ...c/4UUHSwfds7o3nUa5jjSOb/_buildManifest.js b/...c/kl_HGxkKw62rGQGM-O7A2/_buildManifest.js → ...c/4UUHSwfds7o3nUa5jjSOb/_buildManifest.js
diff --git a/...tic/kl_HGxkKw62rGQGM-O7A2/_ssgManifest.js → ...tic/4UUHSwfds7o3nUa5jjSOb/_ssgManifest.js b/...tic/kl_HGxkKw62rGQGM-O7A2/_ssgManifest.js → ...tic/4UUHSwfds7o3nUa5jjSOb/_ssgManifest.js
diff --git a/out/_next/static/css/ee9003b80d57e4a5.css → out/_next/static/css/26ec5e9e1d541cb6.css b/out/_next/static/css/ee9003b80d57e4a5.css → out/_next/static/css/26ec5e9e1d541cb6.css
diff --git a/out/example.html b/out/example.html
diff --git a/out/example.txt b/out/example.txt
@@ -12,8 +12,8 @@ f:I[3120,[],"MetadataBoundary"]
 5:HL["/soe-centennial-nextjs/_next/static/media/b27868729ad8c262-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
 6:HL["/soe-centennial-nextjs/_next/static/media/d90e10e85a15eaad-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
 7:HL["/soe-centennial-nextjs/_next/static/media/db3cc5ff6037fbad-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
-8:HL["/soe-centennial-nextjs/_next/static/css/ee9003b80d57e4a5.css","style"]
-0:{"P":null,"b":"kl_HGxkKw62rGQGM-O7A2","p":"/soe-centennial-nextjs","c":["","example"],"i":false,"f":[[["",{"children":["example",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$9","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/soe-centennial-nextjs/_next/static/css/ee9003b80d57e4a5.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_6f86a8 __variable_cf1540 __variable_2df5e6 __variable_0f68e0","children":["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]}]]}],{"children":["example",["$","$9","c",{"children":[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","example","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]]}],{"children":["__PAGE__",["$","$9","c",{"children":["$Lc",null,["$","$Ld",null,{"children":"$Le"}]]}],{},null]},null]},null],["$","$9","h",{"children":[null,["$","$9","KUayTW6MrZc5cDLSPlxbN",{"children":[["$","$Lf",null,{"children":"$L10"}],["$","$L11",null,{"children":"$L12"}],["$","meta",null,{"name":"next-size-adjust"}]]}]]}]]],"m":"$undefined","G":["$13","$undefined"],"s":false,"S":true}
+8:HL["/soe-centennial-nextjs/_next/static/css/26ec5e9e1d541cb6.css","style"]
+0:{"P":null,"b":"4UUHSwfds7o3nUa5jjSOb","p":"/soe-centennial-nextjs","c":["","example"],"i":false,"f":[[["",{"children":["example",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",true],["",["$","$9","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/soe-centennial-nextjs/_next/static/css/26ec5e9e1d541cb6.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_6f86a8 __variable_cf1540 __variable_2df5e6 __variable_0f68e0","children":["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]}]]}],{"children":["example",["$","$9","c",{"children":[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","example","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]]}],{"children":["__PAGE__",["$","$9","c",{"children":["$Lc",null,["$","$Ld",null,{"children":"$Le"}]]}],{},null]},null]},null],["$","$9","h",{"children":[null,["$","$9","SkxOoVPMoXqN9yvNzI6Fx",{"children":[["$","$Lf",null,{"children":"$L10"}],["$","$L11",null,{"children":"$L12"}],["$","meta",null,{"name":"next-size-adjust"}]]}]]}]]],"m":"$undefined","G":["$13","$undefined"],"s":false,"S":true}
 14:I[5218,["595","static/chunks/595-c960df0f7bf72802.js","804","static/chunks/804-97eaa2891920dc20.js","890","static/chunks/890-37e8c633a343a2e0.js","654","static/chunks/654-b4f59b7c19cd3abc.js","915","static/chunks/app/example/page-1034e2d2dd683ec7.js"],"Skiplink"]
 21:I[7543,["595","static/chunks/595-c960df0f7bf72802.js","804","static/chunks/804-97eaa2891920dc20.js","890","static/chunks/890-37e8c633a343a2e0.js","654","static/chunks/654-b4f59b7c19cd3abc.js","915","static/chunks/app/example/page-1034e2d2dd683ec7.js"],"FeatureHero"]
 22:I[1597,["595","static/chunks/595-c960df0f7bf72802.js","804","static/chunks/804-97eaa2891920dc20.js","890","static/chunks/890-37e8c633a343a2e0.js","654","static/chunks/654-b4f59b7c19cd3abc.js","915","static/chunks/app/example/page-1034e2d2dd683ec7.js"],"ShapeAnimation"]

diff --git a/out/example/quote.html b/out/example/quote.html
diff --git a/out/example/quote.txt b/out/example/quote.txt
diff --git a/out/example/story.html b/out/example/story.html
diff --git a/out/example/story.txt b/out/example/story.txt
@@ -12,8 +12,8 @@ f:I[3120,[],"MetadataBoundary"]
 5:HL["/soe-centennial-nextjs/_next/static/media/b27868729ad8c262-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
 6:HL["/soe-centennial-nextjs/_next/static/media/d90e10e85a15eaad-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
 7:HL["/soe-centennial-nextjs/_next/static/media/db3cc5ff6037fbad-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
-8:HL["/soe-centennial-nextjs/_next/static/css/ee9003b80d57e4a5.css","style"]
-0:{"P":null,"b":"kl_HGxkKw62rGQGM-O7A2","p":"/soe-centennial-nextjs","c":["","example","story"],"i":false,"f":[[["",{"children":["example",{"children":["story",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",["$","$9","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/soe-centennial-nextjs/_next/static/css/ee9003b80d57e4a5.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_6f86a8 __variable_cf1540 __variable_2df5e6 __variable_0f68e0","children":["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]}]]}],{"children":["example",["$","$9","c",{"children":[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","example","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]]}],{"children":["story",["$","$9","c",{"children":[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","example","children","story","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]]}],{"children":["__PAGE__",["$","$9","c",{"children":["$Lc",null,["$","$Ld",null,{"children":"$Le"}]]}],{},null]},null]},null]},null],["$","$9","h",{"children":[null,["$","$9","Es73PmgLWJFjNOStR7mW4",{"children":[["$","$Lf",null,{"children":"$L10"}],["$","$L11",null,{"children":"$L12"}],["$","meta",null,{"name":"next-size-adjust"}]]}]]}]]],"m":"$undefined","G":["$13","$undefined"],"s":false,"S":true}
+8:HL["/soe-centennial-nextjs/_next/static/css/26ec5e9e1d541cb6.css","style"]
+0:{"P":null,"b":"4UUHSwfds7o3nUa5jjSOb","p":"/soe-centennial-nextjs","c":["","example","story"],"i":false,"f":[[["",{"children":["example",{"children":["story",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",["$","$9","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/soe-centennial-nextjs/_next/static/css/26ec5e9e1d541cb6.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":["$","body",null,{"className":"__variable_6f86a8 __variable_cf1540 __variable_2df5e6 __variable_0f68e0","children":["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":"404"}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],"notFoundStyles":[]}]}]}]]}],{"children":["example",["$","$9","c",{"children":[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","example","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]]}],{"children":["story",["$","$9","c",{"children":[null,["$","$La",null,{"parallelRouterKey":"children","segmentPath":["children","example","children","story","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$Lb",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined"}]]}],{"children":["__PAGE__",["$","$9","c",{"children":["$Lc",null,["$","$Ld",null,{"children":"$Le"}]]}],{},null]},null]},null]},null],["$","$9","h",{"children":[null,["$","$9","7p0c1JJeQ2KM3vAvChTj3",{"children":[["$","$Lf",null,{"children":"$L10"}],["$","$L11",null,{"children":"$L12"}],["$","meta",null,{"name":"next-size-adjust"}]]}]]}]]],"m":"$undefined","G":["$13","$undefined"],"s":false,"S":true}
 14:I[5218,["595","static/chunks/595-c960df0f7bf72802.js","804","static/chunks/804-97eaa2891920dc20.js","654","static/chunks/654-b4f59b7c19cd3abc.js","352","static/chunks/app/example/story/page-6fbc5d30688eb883.js"],"Skiplink"]
 21:I[7543,["595","static/chunks/595-c960df0f7bf72802.js","804","static/chunks/804-97eaa2891920dc20.js","654","static/chunks/654-b4f59b7c19cd3abc.js","352","static/chunks/app/example/story/page-6fbc5d30688eb883.js"],"FeatureHero"]
 22:I[4812,["595","static/chunks/595-c960df0f7bf72802.js","804","static/chunks/804-97eaa2891920dc20.js","654","static/chunks/654-b4f59b7c19cd3abc.js","352","static/chunks/app/example/story/page-6fbc5d30688eb883.js"],"TimelineSidebar"]

diff --git a/out/index.html b/out/index.html
diff --git a/out/index.txt b/out/index.txt
diff --git a/out/timeline.html b/out/timeline.html