feat:(theme) Rename hero section to Image Banner and add height option

buildheadless · Dec 1, 2023 · 6b2efa3 · 6b2efa3
1 parent c33d3b9
commit 6b2efa3
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 33 deletions.
diff --git a/templates/hydrogen-theme/app/components/CmsSection.tsx b/templates/hydrogen-theme/app/components/CmsSection.tsx
@@ -84,9 +84,9 @@ function Fallback({type}: {type?: string}) {
       <div className="container py-10 text-center">
         <div className="rounded-md border-2 border-dashed border-gray-400 px-5 py-10">
           <div>
-            The section component
-            {type && <strong className="px-2 text-xl">{type}</strong>}
-            does not exist yet.
+            The section component{' '}
+            {type && <strong className="px-2 text-xl">{type}</strong>} does not
+            exist yet.
           </div>
         </div>
       </div>

diff --git a/templates/hydrogen-theme/app/components/cva/contentAlignment.tsx b/templates/hydrogen-theme/app/components/cva/contentAlignment.tsx
@@ -5,7 +5,7 @@ export type ContentAlignmentVariantProps = VariantProps<
   typeof contentAlignment
 >;
 
-export const contentAlignment = cva('flex', {
+export const contentAlignment = cva('flex h-full', {
   variants: {
     required: {
       top_left: 'items-start justify-start',

diff --git a/templates/hydrogen-theme/app/components/navigation/NestedNavigation.tsx b/templates/hydrogen-theme/app/components/navigation/NestedNavigation.tsx
@@ -25,7 +25,7 @@ export function NestedNavigation(props: {data?: SanityNestedNavigationProps}) {
       <NavigationTrigger link={data.link}>
         {data.name}
         <CaretDownIcon
-          className="transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
+          className="transition-transform duration-100 ease-in group-data-[state=open]:-rotate-180"
           aria-hidden
         />
       </NavigationTrigger>

diff --git a/templates/hydrogen-theme/app/components/navigation/NestedNavigationTrigger.tsx b/templates/hydrogen-theme/app/components/navigation/NestedNavigationTrigger.tsx
@@ -9,10 +9,10 @@ export function NavigationTrigger(props: {
   link: TypeFromSelection<typeof INTERNAL_LINK_FRAGMENT>['link'];
 }) {
   const {link} = props;
-  const className = 'group flex items-center gap-1';
+  const className = 'flex items-center gap-1';
 
   return (
-    <NavigationMenu.Trigger asChild>
+    <NavigationMenu.Trigger className="group" asChild>
       {link ? (
         <div>
           <SanityInternalLink

diff --git a/...e/app/components/sections/HeroSection.tsx → ...omponents/sections/ImageBannerSection.tsx b/...e/app/components/sections/HeroSection.tsx → ...omponents/sections/ImageBannerSection.tsx
@@ -1,33 +1,44 @@
 import type {TypeFromSelection} from 'groqd';
 import {vercelStegaCleanAll} from '@sanity/client/stega';
 
-import {type HERO_SECTION_FRAGMENT} from '~/qroq/sections';
+import {type IMAGE_BANNER_SECTION_FRAGMENT} from '~/qroq/sections';
 import {SanityImage} from '../sanity/SanityImage';
 import {SectionDefaultProps} from '~/lib/type';
 import {Overlay} from '../Overlay';
 import {contentAlignmentVariants} from '../cva/contentAlignment';
+import {CSSProperties} from 'react';
 
-type HeroSectionProps = TypeFromSelection<typeof HERO_SECTION_FRAGMENT>;
+type HeroSectionProps = TypeFromSelection<typeof IMAGE_BANNER_SECTION_FRAGMENT>;
 
-export function HeroSection(
+export function ImageBannerSection(
   props: SectionDefaultProps & {data: HeroSectionProps},
 ) {
   const {data} = props;
   const {title, contentAlignment, overlayOpacity} = data;
+  const bannerHeight = `${data.bannerHeight}px` || '200px';
   // Remove all stega encoded data
   const cleanContentAlignment = vercelStegaCleanAll(contentAlignment);
 
   // Todo: section size shouldn't be based on the padding, but on a height prop (number value || adapt to image height)
   // Todo: add encodeDataAttribute to SanityImage
   return title ? (
-    <>
-      <div className="absolute inset-0 overflow-hidden">
-        <SanityImage
-          className="h-full w-full object-cover"
-          sizes="100vw"
-          data={data.backgroundImage}
-        />
-      </div>
+    <div
+      className="h-[var(--banner-height)]"
+      style={
+        {
+          '--banner-height': bannerHeight,
+        } as CSSProperties
+      }
+    >
+      {data.backgroundImage && (
+        <div className="absolute inset-0 overflow-hidden">
+          <SanityImage
+            className="h-full w-full object-cover"
+            sizes="100vw"
+            data={data.backgroundImage}
+          />
+        </div>
+      )}
       <Overlay opacity={overlayOpacity} />
       <div className="container relative h-full">
         <div
@@ -38,6 +49,6 @@ export function HeroSection(
           <h1>{title}</h1>
         </div>
       </div>
-    </>
+    </div>
   ) : null;
 }
diff --git a/templates/hydrogen-theme/app/hooks/useSettingsCssVars.tsx b/templates/hydrogen-theme/app/hooks/useSettingsCssVars.tsx
@@ -47,8 +47,10 @@ export function useSettingsCssVars({
   };
 
   // Padding
-  const paddingTop = `${settings?.padding?.top}px` || '0px';
-  const paddingBottom = `${settings?.padding?.bottom}px` || '0px';
+  const paddingTop = settings?.padding ? `${settings.padding.top}px` : '0px';
+  const paddingBottom = settings?.padding
+    ? `${settings.padding.bottom}px`
+    : '0px';
 
   return {
     '--backgroundColor': scheme.background,

diff --git a/templates/hydrogen-theme/app/lib/sectionRelsolver.ts b/templates/hydrogen-theme/app/lib/sectionRelsolver.ts
@@ -3,9 +3,9 @@ import {lazy} from 'react';
 export const sections: {
   [key: string]: React.FC<any>;
 } = {
-  heroSection: lazy(() =>
-    import('../components/sections/HeroSection').then((module) => ({
-      default: module.HeroSection,
+  imageBannerSection: lazy(() =>
+    import('../components/sections/ImageBannerSection').then((module) => ({
+      default: module.ImageBannerSection,
     })),
   ),
   ctaSection: lazy(() =>

diff --git a/templates/hydrogen-theme/app/qroq/sections.ts b/templates/hydrogen-theme/app/qroq/sections.ts
@@ -40,11 +40,12 @@ export const SECTION_SETTINGS_FRAGMENT = q('settings').grab({
 | Hero Section
 |--------------------------------------------------------------------------
 */
-export const HERO_SECTION_FRAGMENT = {
-  _type: z.enum(['heroSection']),
+export const IMAGE_BANNER_SECTION_FRAGMENT = {
+  _type: z.enum(['imageBannerSection']),
   _key: q.string().nullable(),
   settings: SECTION_SETTINGS_FRAGMENT,
   backgroundImage: q('backgroundImage').grab(IMAGE_FRAGMENT).nullable(),
+  bannerHeight: q.number().nullable(),
   overlayOpacity: q.number().nullable(),
   contentAlignment: z.enum(contentAlignmentValues).nullable(),
   title: [
@@ -80,7 +81,7 @@ export const CTA_SECTION_FRAGMENT = {
 |--------------------------------------------------------------------------
 */
 export const SECTIONS_LIST_SELECTION = {
-  "_type == 'heroSection'": HERO_SECTION_FRAGMENT,
+  "_type == 'imageBannerSection'": IMAGE_BANNER_SECTION_FRAGMENT,
   "_type == 'ctaSection'": CTA_SECTION_FRAGMENT,
 };
 

diff --git a/templates/hydrogen-theme/studio/schemas/index.ts b/templates/hydrogen-theme/studio/schemas/index.ts
@@ -5,7 +5,7 @@ import page from './documents/page'
 import settings from './singletons/settings'
 import themeContent from './singletons/themeContent'
 import ctaSection from './objects/sections/ctaSection'
-import heroSection from './objects/sections/heroSection'
+import imageBannerSection from './objects/sections/imageBannerSection'
 import home from './singletons/home'
 import collection from './documents/collection'
 import product from './documents/product'
@@ -32,7 +32,7 @@ import contentAlignment from './objects/global/contentAlignment'
 
 const singletons = [home, header, footer, settings, themeContent]
 const documents = [page, color, collection, product, blogPost, productVariant]
-const sections = [heroSection, ctaSection]
+const sections = [imageBannerSection, ctaSection]
 const footers = [socialLinksOnly]
 const objects = [
   footersList,

diff --git a/templates/hydrogen-theme/studio/schemas/objects/global/sectionsList.ts b/templates/hydrogen-theme/studio/schemas/objects/global/sectionsList.ts
@@ -9,7 +9,7 @@ export default defineField({
   group: 'pagebuilder',
   of: [
     {
-      type: 'heroSection',
+      type: 'imageBannerSection',
     },
     {
       type: 'ctaSection',

diff --git a/...o/schemas/objects/sections/heroSection.ts → ...as/objects/sections/imageBannerSection.ts b/...o/schemas/objects/sections/heroSection.ts → ...as/objects/sections/imageBannerSection.ts
@@ -1,8 +1,8 @@
 import {defineField} from 'sanity'
 
 export default defineField({
-  name: 'heroSection',
-  title: 'Hero Section',
+  name: 'imageBannerSection',
+  title: 'Image Banner',
   type: 'object',
   fields: [
     defineField({
@@ -21,6 +21,16 @@ export default defineField({
         hotspot: true,
       },
     }),
+    defineField({
+      name: 'bannerHeight',
+      type: 'rangeSlider',
+      options: {
+        min: 0,
+        max: 2000,
+        suffix: 'px',
+      },
+      validation: (Rule: any) => Rule.min(0).max(2000),
+    }),
     defineField({
       name: 'overlayOpacity',
       type: 'overlayOpacity',
@@ -33,14 +43,17 @@ export default defineField({
   initialValue: {
     overlayOpacity: 0,
     contentAlignment: 'middle_center',
+    bannerHeight: 450,
   },
   preview: {
     select: {
       title: 'title',
+      media: 'backgroundImage',
     },
-    prepare({title}: any) {
+    prepare({title, media}: any) {
       return {
         title: title?.[0]?.value || 'Missing title',
+        media: media,
       }
     },
   },

diff --git a/...heme/studio/static/assets/heroSection.png → ...udio/static/assets/imageBannerSection.png b/...heme/studio/static/assets/heroSection.png → ...udio/static/assets/imageBannerSection.png