make heading and paragraph as optional fields for MediaShowcase

kryptonum-dev · Dec 3, 2024 · eb99ae5 · eb99ae5
1 parent 16cffcd
commit eb99ae5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/apps/astro/src/components/global/MediaShowcase.astro b/apps/astro/src/components/global/MediaShowcase.astro
@@ -22,8 +22,8 @@ export const MediaShowcase_Query = `
 type Props = {
   index: number
   sectionId?: string
-  heading: PortableTextValue
-  paragraph: PortableTextValue
+  heading?: PortableTextValue
+  paragraph?: PortableTextValue
   layout: '50/50' | '30/70' | '70/30'
   media: Array<
     | {
@@ -75,16 +75,21 @@ const { index, sectionId, heading, paragraph, layout, media } = Astro.props as P
       </div>
     )
   }
-  <header>
-    <PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="heading" />
-    <PortableText value={paragraph} class="paragraph" />
-  </header>
+  {
+    heading && (
+      <header>
+        <PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="heading" />
+        {paragraph && <PortableText value={paragraph} class="paragraph" />}
+      </header>
+    )
+  }
 </section>
 
 <style lang="scss">
   .MediaShowcase {
     padding: clamp(2rem, calc(3vw / 0.48), 3rem) 0;
     header {
+      margin-top: clamp(1.5rem, calc(2vw / 0.48), 2rem);
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: clamp(1.5rem, calc(3vw / 0.48), 3rem) 1.5rem;
@@ -94,7 +99,7 @@ const { index, sectionId, heading, paragraph, layout, media } = Astro.props as P
       }
     }
     .media-wrapper {
-      margin: 0 calc(var(--page-margin) * -1) clamp(1.5rem, calc(2vw / 0.48), 2rem);
+      margin: 0 calc(var(--page-margin) * -1);
       display: grid;
       .media {
         height: 100%;

diff --git a/apps/sanity/schema/components/MediaShowcase.ts b/apps/sanity/schema/components/MediaShowcase.ts
@@ -16,14 +16,18 @@ export default defineField({
     defineField({
       name: 'heading',
       type: 'Heading',
-      title: 'Heading',
-      validation: Rule => Rule.required(),
+      title: 'Heading (optional)',
     }),
     defineField({
       name: 'paragraph',
       type: 'PortableText',
       title: 'Paragraph',
-      validation: Rule => Rule.required(),
+      hidden: ({ parent }) => !parent?.heading,
+      validation: Rule => Rule.custom((value, context) => {
+        const isHeading = !!(context.parent as { heading: string }).heading
+        if (isHeading && !value) return 'Paragraph is required'
+        return true
+      })
     }),
     defineField({
       name: 'layout',