add wysiwyg typography example

SU-SOE · Nov 5, 2024 · 33f397d · 33f397d
1 parent 216954d
commit 33f397d
Show file tree

Hide file tree

Showing 22 changed files with 196 additions and 60 deletions.
diff --git a/app/components/MediaCaptionImage/MediaCaptionImage.tsx b/app/components/MediaCaptionImage/MediaCaptionImage.tsx
@@ -9,6 +9,8 @@ interface MediaCaptionImageProps extends HTMLAttributes<HTMLElement> {
   imageAlt?: string;
   link?: string;
   caption: string;
+  imageClasses?: string;
+  aspectRatio?: "default" | "square";
 }
 
 const MediaCaptionImage = ({
@@ -17,6 +19,8 @@ const MediaCaptionImage = ({
   imageAlt = "",
   link,
   caption,
+  aspectRatio = "default",
+  imageClasses,
   ...props
 }: MediaCaptionImageProps) => {
   return (
@@ -27,7 +31,13 @@ const MediaCaptionImage = ({
         props.className,
       )}
     >
-      <div className="relative aspect-[16/9] w-full">
+      <div
+        className={cnb(
+          "relative w-full overflow-hidden",
+          aspectRatio === "square" ? "aspect-[1/1]" : "aspect-[16/9]",
+          imageClasses,
+        )}
+      >
         <Image
           className="object-cover"
           src={imageSrc}

diff --git a/app/components/Typography/Heading.tsx b/app/components/Typography/Heading.tsx
@@ -9,7 +9,6 @@ type HeadingProps = Omit<TypographyProps, "as"> &
 // Convenience component for paragraphs
 export const Heading = ({
   as = "h2",
-  font = "serif",
   weight = "bold",
   ...rest
-}: HeadingProps) => <Text {...rest} font={font} weight={weight} as={as} />;
+}: HeadingProps) => <Text {...rest} weight={weight} as={as} />;
diff --git a/app/components/Typography/Text.tsx b/app/components/Typography/Text.tsx
@@ -37,17 +37,17 @@ export type TextProps = TypographyProps &
 
 export const Text = ({
   as: AsComponent = "div",
-  font = "sans",
+  font = "dm-sans",
   size,
   weight,
   align,
   color = "default",
   variant,
   leading,
-  useDefaultTracking = font === "ds-sans",
+  useDefaultTracking = font === "dm-sans",
   italic,
   srOnly,
-  uppercase = font === "ds-sans",
+  uppercase,
   icon,
   iconProps,
   className,
@@ -60,6 +60,7 @@ export const Text = ({
     <AsComponent
       {...rest}
       className={cnb(
+        "rs-mb-2",
         font ? styles.fontFamilies[font] : "",
         size ? styles.fontSizes[size] : "",
         weight ? styles.fontWeights[weight] : "",
@@ -71,7 +72,7 @@ export const Text = ({
         srOnly ? "sr-only" : "",
         uppercase ? "uppercase" : "",
         useDefaultTracking ? "tracking-normal" : "",
-        font === "ds-sans" ? "tracking-normal sm:tracking-wide" : "",
+        font === "dm-sans" ? "tracking-normal sm:tracking-wide" : "",
         className,
       )}
     >

diff --git a/app/components/Typography/typography.styles.ts b/app/components/Typography/typography.styles.ts
@@ -1,7 +1,7 @@
 export const fontFamilies = {
   sans: "font-sans",
   serif: "font-serif",
-  "ds-sans": "font-ds-sans",
+  "dm-sans": "font-dm-sans",
 };
 
 export const fontWeights = {

diff --git a/app/example/page.tsx b/app/example/page.tsx
@@ -8,6 +8,7 @@ import { loadTimelineData } from "@/utilities/loadTimelineData";
 import { GradientBanner } from "@/components/GradientBanner/GradientBanner";
 import TimelineEven from "@/components/TimelineEven/TimelineOverview";
 import MediaCaptionImage from "@/components/MediaCaptionImage/MediaCaptionImage";
+import { Container } from "@/components/Container";
 
 const ExamplePage = async () => {
   const timelineData = await loadTimelineData();
@@ -48,11 +49,134 @@ const ExamplePage = async () => {
         </Text>
       </FeatureHero>
       <ShapeAnimation />
-      <MediaCaptionImage
-        imageSrc="https://placecats.com/neo/1500/1000"
-        caption="Caption/credit lorem ipsum"
-      />
       <PageTitle heading="100 years of" bigText="Impact" />
+      <Container width="site" py={9} className="font-dm-sans">
+        <MediaCaptionImage
+          imageSrc="https://placecats.com/neo/1500/1000"
+          caption="Caption/credit lorem ipsum aspect ratio square"
+          aspectRatio="square"
+          imageClasses="w-[500px] rounded-lg"
+        />
+        <MediaCaptionImage
+          imageSrc="https://placecats.com/neo/1500/1000"
+          caption="Caption/credit lorem ipsum aspect ratio 16/9"
+        />
+        <Text className="type-3 intro-text">
+          Overview style lorem ipsum dolar sit amet vestibulum parimentium elit
+          rhoncus donec. Scelerisque urna et euismod in daphibus nec leo euismod
+          nisi, pharetra raesent nec. Aliquam dignissim nisi convalis quis, leo
+          vestibulum duis euismod.
+        </Text>
+        <Text className="big-paragraph">
+          Long copy paragraph text style raesent nec dapibus odio. Aliquam
+          dignissim nisi nisi, pharetra faucibus elit rhoncus in. Donec
+          efficitur scelerisque urna et sollicitudin. Donec euismod enim a dui
+          convallis, quis suscipit leo vestibulum. Duis aliquam euismod enim,
+          sit amet
+        </Text>
+        <Heading>Header Two</Heading>
+        <Text className="big-paragraph">
+          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
+          erat, imperdiet eu fermentum sed in text link. Praesent nec dapibus
+          odio. Aliquam dignissim nisi nisi, pharetra faucibus elit rhoncus in.
+          Donec efficitur scelerisque urna et sollicitudin. Duis aliquam euismod
+          enim, sit amet in text link hover state. Aliquam sodales consequat
+          arcu in egestas. Aliquam condimentum viverra eros.Donec efficitur
+          scelerisque urna et sollicitudin. Duis aliquam euismod enim, sit amet.
+        </Text>
+        <Heading as="h3">Header Three</Heading>
+        <Text className="big-paragraph">
+          Aenean sollicitudin facilisis ex, in tincidunt velit sodales ac.
+          Nullam consequat leo ut sem pharetra, a fringilla massa commodo. Etiam
+          molestie, justo nec congue ultricies, augue massa tempus ante, nec
+          sagittis dui tellus ac lectus. Duis aliquam euismod enim, sit amet
+          lobortis ante porttitor. Donec efficitur scelerisque urna et
+          sollicitudin. Duis aliquam euismod enim, sit amet.
+        </Text>
+        <Heading as="h4">Header Four</Heading>
+        <Text className="big-paragraph">
+          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
+          erat, imperdiet eu fermentum sed, egestas quis mi. Praesent nec
+          dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
+          rhoncus in.
+        </Text>
+        <Heading as="h5">Header Five</Heading>
+        <Text className="big-paragraph">
+          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
+          erat, imperdiet eu fermentum sed, egestas quis mi. Praesent nec
+          dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
+          rhoncus in. Donec efficitur scelerisque urna et sollicitudin. Donec
+          euismod enim a dui convallis, quis suscipit leo vestibulum. Duis
+          aliquam euismod enim, sit amet lobortis ante porttitor. Donec
+          efficitur scelerisque urna et sollicitudin. Duis aliquam euismod enim,
+          sit amet.
+        </Text>
+        <Text className="big-paragraph">
+          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
+          erat, imperdiet eu fermentum sed, egestas quis mi. Praesent nec
+          dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
+          rhoncus in. Donec efficitur scelerisque urna et sollicitudin. Donec
+          efficitur scelerisque urna et sollicitudin.
+        </Text>
+        <Text className="big-paragraph">
+          <ul>
+            <li>Fusce sem enim, tempus nec massa id, mollis faucibus sem.</li>
+            <li>
+              Sem enim, tempus nec massa id, mollis faucibus sem imperdiet eu
+              fermentum nec massa mollis donec efficitur scelerisque urna et
+              sollicitudin.
+            </li>
+            <li>
+              Ut ipsum erat, imperdiet eu fermentum sed, egestas quis mi
+              praesent dapibus odio aliquam dignissim nisi nisi pharetra
+              faucibus elit
+            </li>
+            <li>
+              Donec efficitur scelerisque urna et sollicitudin. Donec euismod
+              enim a dui convallis, quis suscipit leo vestibulum. Duis aliquam
+              euismod enim lobortis ante porttitor aliquam praesent Sodales
+              consequat arcu in egestas Aliquam condimentum viverra eros, in
+              dapibus purus faucibus ut
+            </li>
+          </ul>
+        </Text>
+        <Text className="big-paragraph">
+          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
+          erat, imperdiet eu fermentum sed, egestas quis mi. Praesent nec
+          dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
+          rhoncus in. Donec efficitur scelerisque urna et sollicitudin. Donec
+          efficitur scelerisque urna et sollicitudin.
+        </Text>
+        <Text className="big-paragraph">
+          <ol>
+            <li>Fusce sem enim, tempus nec massa id, mollis faucibus sem.</li>
+            <li>
+              Sem enim, tempus nec massa id, mollis faucibus sem imperdiet eu
+              fermentum nec massa mollis donec efficitur scelerisque urna et
+              sollicitudin.
+            </li>
+            <li>
+              Ut ipsum erat, imperdiet eu fermentum sed, egestas quis mi
+              praesent dapibus odio aliquam dignissim nisi nisi pharetra
+              faucibus elit
+            </li>
+            <li>
+              Donec efficitur scelerisque urna et sollicitudin. Donec euismod
+              enim a dui convallis, quis suscipit leo vestibulum. Duis aliquam
+              euismod enim lobortis ante porttitor aliquam praesent Sodales
+              consequat arcu in egestas Aliquam condimentum viverra eros, in
+              dapibus purus faucibus ut
+            </li>
+          </ol>
+        </Text>
+        <Text className="big-paragraph">
+          Fusce sem enim, tempus nec massa id, mollis faucibus sem. Ut ipsum
+          erat, imperdiet eu fermentum sed, egestas quis mi. Praesent nec
+          dapibus odio. Aliquam dignissim nisi nisi, pharetra faucibus elit
+          rhoncus in. Donec efficitur scelerisque urna et sollicitudin. Donec
+          efficitur scelerisque urna et sollicitudin.
+        </Text>
+      </Container>
       <GradientBanner>
         <Heading
           as="h1"

diff --git a/out/404.html b/out/404.html
diff --git a/...ext/static/chunks/216-3fd68cad97dc5ace.js → ...ext/static/chunks/216-0ae1eb690f63c2c2.js b/...ext/static/chunks/216-3fd68cad97dc5ace.js → ...ext/static/chunks/216-0ae1eb690f63c2c2.js
diff --git a/out/_next/static/chunks/app/example/page-3e170ededa9a683e.js b/out/_next/static/chunks/app/example/page-3e170ededa9a683e.js