Image Gallery in storybook (#3)

.storybook/stories/paragraphs/Gallery.stories.tsx

@@ -0,0 +1,63 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {ComponentProps} from "react";
+import GalleryParagraph from '@components/paragraphs/stanford-gallery/gallery-paragraph';
+import { getStoryBookGalleryImage } from '../storybook-entities';
+
+type ComponentStoryProps = ComponentProps<typeof GalleryParagraph> & {
+  numberofimages: number
+}
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<ComponentStoryProps> = {
+  title: 'Design/Paragraphs/Gallery',
+  component: GalleryParagraph,
+  tags: ['autodocs'],
+  argTypes: {
+    numberofimages: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 20,
+      }
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ComponentStoryProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Gallery: Story = {
+  render: ({numberofimages, paragraph, ...args}) => {
+    paragraph.suGalleryImages = []
+    for (let i = 0; i < numberofimages; i++) {
+      paragraph.suGalleryImages.push(getStoryBookGalleryImage(undefined, 'Lorem Ipsum'))
+    }
+    return <GalleryParagraph paragraph={paragraph} {...args} />
+  },
+  args: {
+    numberofimages: 3,
+    paragraph:{
+      __typename: 'ParagraphStanfordGallery',
+      composition: {},
+      langcode: {},
+      created: {
+        offset: "",
+        timestamp: Math.round(new Date().getTime() / 1000),
+        time: new Date().toISOString(),
+        timezone: "America/Los_Angeles"
+      },
+      id: "1e0c21ee-7cb8-4eff-8877-862d16c9885c",
+      suGalleryButton: {
+        url: "http://stanford.edu",
+        title: "Button text",
+        internal:false,
+      },
+      suGalleryDescription: {
+        processed: "<p>Pepper jack fromage frais pecorino cheesecake cheesy grin camembert de normandie macaroni cheese the big cheese.</p>"
+      },
+      suGalleryHeadline: "This is a Gallery Headline",
+      suGalleryImages: []
+    }
+  }
+};

.storybook/stories/storybook-entities.tsx

@@ -1,4 +1,4 @@
-import {MediaImage, MediaVideo, TermInterface} from "@lib/gql/__generated__/drupal";
+import {MediaImage, MediaStanfordGalleryImage, MediaVideo, TermInterface} from "@lib/gql/__generated__/drupal";
 
 export const getStoryBookImage = (imageUrl?: string): MediaImage => {
   return {
@@ -31,6 +31,38 @@ export const getStoryBookImage = (imageUrl?: string): MediaImage => {
   }
 }
 
+export const getStoryBookGalleryImage = (imageUrl?: string, imageCaption?: string): MediaStanfordGalleryImage => {
+  return {
+    __typename: 'MediaStanfordGalleryImage',
+    name: makeid(),
+    path: "",
+    status: true,
+    id: makeid(),
+    changed: {
+      offset: "",
+      timestamp: Math.round(new Date().getTime() / 1000),
+      time: new Date().toISOString(),
+      timezone: "America/Los_Angeles"
+    },
+    created: {
+      offset: "",
+      timestamp: Math.round(new Date().getTime() / 1000),
+      time: new Date().toISOString(),
+      timezone: "America/Los_Angeles"
+    },
+    langcode: {},
+    metatag: [],
+    suGalleryCaption: imageCaption,
+    suGalleryImage: {
+      url: imageUrl || "https://placehold.co/1500x1500",
+      height: 1500,
+      width: 1500,
+      alt: "kittens",
+      size: 123,
+    }
+  }
+}
+
 export const getStoryBookVideo = (videoUrl?: string): MediaVideo => {
   return {
     __typename: 'MediaVideo',

src/components/elements/wysiwyg.tsx

@@ -58,7 +58,7 @@ const options: HTMLReactParserOptions = {
           return cleanMediaMarkup(domNode);
 
         case 'p':
-          nodeProps.className = twMerge(nodeProps.className, 'max-w-[100ch]');
+          nodeProps.className = twMerge(nodeProps.className, 'max-w-[100ch] leading-[1.7] text-21');
           return <NodeName {...nodeProps}>{domToReact(children, options)}</NodeName>
 
         case 'script':

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

@@ -37,9 +37,11 @@ const GalleryParagraph = ({paragraph, ...props}: Props) => {
       }
 
       {paragraph.suGalleryButton &&
-        <Button href={paragraph.suGalleryButton.url}>
-          {paragraph.suGalleryButton.title}
-        </Button>
+        <div>
+          <Button href={paragraph.suGalleryButton.url}>
+            {paragraph.suGalleryButton.title}
+          </Button>
+        </div>
       }
     </GalleryWrapper>
   )
@@ -68,7 +70,7 @@ const GalleryImage = ({image, galleryId}: {
       </div>
 
       {image.suGalleryCaption &&
-        <figcaption className="text-right">
+        <figcaption className="text-right basefont-19">
           {image.suGalleryCaption}
         </figcaption>
       }