Creating Stories for Card, Banner, Media with Caption.

.storybook/stories/elements/lockup/Lockup.stories.tsx

@@ -98,13 +98,6 @@ export const LockupM: Story = {
     suLockupOptions: "m"
   }
 }
-export const LockupN: Story = {
-  render: LockupDisplay.render,
-  args: {
-    ...LockupDisplay.args,
-    suLockupOptions: "n"
-  }
-}
 export const LockupO: Story = {
   render: LockupDisplay.render,
   args: {

.storybook/stories/paragraphs/Banner.stories.tsx

@@ -0,0 +1,47 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ComponentProps} from "react";
+import {ParagraphStanfordBanner, Text} from "@lib/gql/__generated__/drupal";
+import BannerParagraph from '@components/paragraphs/stanford-banner/banner-paragraph';
+import { getStoryBookImage } from '../storybook-entities';
+
+type ComponentStoryProps = ComponentProps<typeof BannerParagraph> & {
+  text: Text["processed"]
+}
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<ComponentStoryProps> = {
+  title: 'Design/Paragraphs/Banner',
+  component: BannerParagraph,
+  tags: ['autodocs'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<ComponentStoryProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Banner: Story = {
+  render: ({...args}) => {
+    return <BannerParagraph {...args}/>
+  },
+  args: {
+    paragraph:{
+      __typename: 'ParagraphStanfordBanner',
+      composition: {},
+      langcode: {},
+      created: {
+        offset: "",
+        timestamp: Math.round(new Date().getTime() / 1000),
+        time: new Date().toISOString(),
+        timezone: "America/Los_Angeles"
+      },
+      id: "9954cc81-919b-4498-9151-bf930831fca7",
+      suBannerHeader: "Nam scelerisque, urna vitae auctor efficitur, tortor nunc cursus tortor, ut blandit purus arcu quis sapien",
+      suBannerBody: {
+        processed: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae dignissim felis. Nullam nulla leo, venenatis at feugiat sit amet, ultricies non lorem.</p>"
+      },
+      suBannerImage: getStoryBookImage(),
+      suBannerSupHeader: "Vestibulum"
+    }
+  }
+};

.storybook/stories/paragraphs/MediaWithCaption.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ComponentProps } from "react";
+import StanfordMediaCaption from '@components/paragraphs/stanford-media-caption/media-caption-paragraph';
+import { getStoryBookImage } from '../storybook-entities';
+
+type ComponentStoryProps = ComponentProps<typeof StanfordMediaCaption> & {
+  // text: Text["processed"]
+}
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<ComponentStoryProps> = {
+  title: 'Design/Paragraphs/MediaCaption',
+  component: StanfordMediaCaption,
+  tags: ['autodocs'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<ComponentStoryProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Caption: Story = {
+  render: ({ ...args }) => {
+    return <StanfordMediaCaption {...args} />
+  },
+  args: {
+    paragraph: {
+      id:"6fa23537-dda7-4861-930a-648445d9904c",
+      __typename: 'ParagraphStanfordMediaCaption',
+      composition: {},
+      langcode: {},
+      created: {
+        offset: "",
+        timestamp: Math.round(new Date().getTime() / 1000),
+        time: new Date().toISOString(),
+        timezone: "America/Los_Angeles"
+      },
+      suMediaCaptionCaption: {
+        processed:"<p>Here is my caption.</p>"
+      },
+      suMediaCaptionLink: {
+        title:"Link text.",
+        url:"/publications",
+        internal:true
+      },
+      suMediaCaptionMedia: getStoryBookImage(),
+    }
+  }
+};
+

src/components/elements/button.tsx

@@ -33,7 +33,7 @@ export const Button = ({
       '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 bg-digital-red text-white hocus:bg-black hocus:text-white py-4 px-8 no-underline hocus:underline transition': !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,
     }
   )
 

src/components/elements/lockup/lockup-a.tsx

@@ -6,7 +6,7 @@ const LockupA = ({line1, line5, siteName, logoUrl}: FooterLockupProps) => {
   return (
     <div className="py-10">
       <Link href="/" className="no-underline text-black">
-        <div className="flex flex-col lg:flex-row gap-4">
+        <div className="flex flex-col items-start lg:flex-row gap-4">
           <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
 
           <div className="w-[1px] bg-black shrink-0"/>
@@ -16,7 +16,7 @@ const LockupA = ({line1, line5, siteName, logoUrl}: FooterLockupProps) => {
         </div>
 
         {line5 &&
-          <div className="font-semibold uppercase">
+          <div className="font-semibold uppercase mt-4 border-t border-black lg:border-t-0">
             {line5}
           </div>
         }

src/components/elements/lockup/lockup-h.tsx

@@ -9,7 +9,7 @@ const LockupH = ({line1, line3, line4, siteName, logoUrl}: FooterLockupProps) =>
         <div className="flex flex-col lg:flex-row gap-4">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-            <div className="font-semibold text-m2">{line4}</div>
+            <div className="font-semibold uppercase text-m1">{line4}</div>
           </div>
 
           <div className="w-[1px] bg-black shrink-0"/>

src/components/elements/lockup/lockup-i.tsx

@@ -9,7 +9,7 @@ const LockupI = ({line1, line3, line4, siteName, logoUrl}: FooterLockupProps) =>
         <div className="flex flex-col lg:flex-row gap-4">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-            <div className="font-semibold text-m2 uppercase">{line4}</div>
+            <div className="font-semibold text-m1 uppercase">{line4}</div>
           </div>
 
           <div className="w-[1px] bg-black shrink-0"/>

src/components/elements/lockup/lockup-p.tsx

@@ -9,7 +9,7 @@ const LockupP = ({line1, line4, siteName, logoUrl}: FooterLockupProps) => {
         <div className="flex flex-col lg:flex-row gap-4">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-            <div className="font-semibold text-m1">{line4}</div>
+            <div className="font-semibold uppercase text-m1">{line4}</div>
           </div>
 
           <div className="w-[1px] bg-black shrink-0"/>

src/components/elements/lockup/lockup-r.tsx

@@ -9,7 +9,7 @@ const LockupR = ({line5, siteName, logoUrl}: FooterLockupProps) => {
         <div className="flex flex-col lg:flex-row gap-4">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName}/>
-            <div className="font-normal">{line5}</div>
+            <div className="font-normal uppercase mt-4">{line5}</div>
           </div>
         </div>
       </Link>

src/components/global/page-header.tsx

@@ -22,7 +22,7 @@ const PageHeader = async () => {
       <div className="bg-cardinal-red">
         <div className="centered py-3">
           <a
-            className="font-stanford no-underline hocus:underline text-white hocus:text-white leading-none"
+            className="font-stanford no-underline font-regular text-20 hocus:underline text-white hocus:text-white leading-none"
             href="https://www.stanford.edu"
           >
             Stanford University

src/components/menu/main-menu.tsx

@@ -101,7 +101,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
   const inTrail = activeTrail.includes(id) && !isCurrent;
 
   const linkStyles = clsx(
-    'w-full relative inline-block text-white lg:text-cardinal-red hocus:text-white lg:hocus:text-black no-underline hocus:underline py-5 lg:pl-0 border-l-[6px]',
+    'w-full relative inline-block text-white lg:text-digital-red hocus:text-white lg:hocus:text-black no-underline hocus:underline py-5 lg:pl-0 border-l-[6px]',
     leftPadding[level],
     // Top menu item styles.
     {
@@ -150,7 +150,7 @@ const MenuItem = ({id, url, title, activeTrail, children, level}: MenuItemProps)
             {level === 0 && <div className="block ml-5 w-[1px] h-[25px] mb-[6px]  bg-archway-light shrink-0"/>}
             <button
               ref={buttonRef}
-              className="shrink-0 mb-[6px] relative right-10 lg:right-0 text-white lg:text-cardinal-red bg-cardinal-red lg:bg-transparent rounded-full lg:rounded-none group border-b border-transparent hocus:border-black hocus:bg-white"
+              className="shrink-0 mb-[6px] relative right-10 lg:right-0 text-white lg:text-digital-red bg-digital-red lg:bg-transparent rounded-full lg:rounded-none group border-b border-transparent hocus:border-black hocus:bg-white"
               onClick={toggleSubmenu}
               aria-expanded={submenuOpen}
             >

src/components/paragraphs/stanford-banner/banner-paragraph.tsx

@@ -23,7 +23,7 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
 
   return (
     <div {...props}>
-      <div className="@container md:min-h-[400px] mb-20">
+      <div className="@container md:min-h-[400px] rs-mb-5">
         <div
           className="aspect-[16/9] @6xl:aspect-auto relative @6xl:absolute w-full @6xl:h-full bg-cool-grey">
           {paragraph.suBannerImage?.mediaImage.url &&
@@ -40,7 +40,7 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
 
         {hasCard &&
           <div
-            className={twMerge("w-full relative shadow-lg flex flex-col gap-10 py-20 px-10 @6xl:bg-white @6xl:max-w-[550px] @6xl:my-20 @6xl:z-10", behaviors.hero_pattern?.overlay_position === "right" ? "@6xl:ml-auto @6xl:mr-20" : "@6xl:mr-auto @6xl:ml-20")}>
+            className={twMerge("w-full relative shadow-lg flex flex-col gap-10 rs-p-2 @6xl:bg-white @6xl:max-w-[550px] @6xl:my-20 @6xl:z-10", behaviors.hero_pattern?.overlay_position === "right" ? "@6xl:ml-auto @6xl:mr-20" : "@6xl:mr-auto @6xl:ml-20")}>
 
             {paragraph.suBannerHeader &&
               <div className={twMerge("order-2", behaviors.hero_pattern?.hide_heading && "sr-only")}>
@@ -60,12 +60,12 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
             }
 
             {paragraph.suBannerSupHeader &&
-              <div className="order-1 font-semibold">
+              <div className="order-1 text-09em font-semibold">
                 {paragraph.suBannerSupHeader}
               </div>
             }
 
-            <Wysiwyg html={paragraph.suBannerBody?.processed} className="order-3"/>
+            <Wysiwyg html={paragraph.suBannerBody?.processed} className="order-3 text-m0"/>
 
             {paragraph.suBannerButton?.url &&
               <div className="order-4">

src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx

@@ -30,7 +30,7 @@ const MediaCaptionParagraph = ({paragraph, ...props}: Props) => {
         }
         {videoUrl && <Oembed url={videoUrl}/>}
 
-        <figcaption className="text-right">
+        <figcaption className="text-right text-m0 text-cool-grey color">
           {paragraph.suMediaCaptionLink?.url &&
             <Link href={paragraph.suMediaCaptionLink.url} className="">
               {paragraph.suMediaCaptionLink.title}