feat(block): Wire up Hero Block to Fields GEX-73 #237

bcimbali · 2025-02-11T21:16:45Z

PR to:

wire up content, image, & video fields to Hero block.
Make sure themes still work for each variant.
Refactor and collapse any redundant variants.

Storybook Story for HeroSection variants

TLDR Changes of note:

Remove variants 3 & 7.
Added imgClasses prop to ResponsivePayloadImage so we can pass Tailwind classes to the <img> element.
Set the global RichText component text color to text-foreground so light/dark toggle is built in.
Adds a conditional PayloadCMS field, imgPosition, for HeroSection variants that are side-by-side style text & image layout.
Update HeroSections for RichText field.
Toggle left & right imagePositions for all Hero variants in Storybook.

github-actions · 2025-02-11T21:19:50Z

Package	Line Rate	Branch Rate	Health
_templates.block.new	0%	0%	❌
_templates.block.port	0%	0%	❌
_templates.component.new	0%	0%	❌
_templates.icon.new	0%	0%	❌
_templates.package.new	0%	0%	❌
apps.web	0%	20%	❌
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.blocks.CtaSectionsBlock	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.blocks.HeroSectionsBlock	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.Wrapper	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Breadcrumb	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Button	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Carousel	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.ContextMenu	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.DropdownMenu	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Form	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Input	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.MenuBar	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.NavigationMenu	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Select	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Table	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Textarea	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Toast	100%	67%	✔
apps.web.vitest_test.test.1b785c6f-c240-41fa-80d5-52d7bc4a2edc.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.ToggleGroup	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.blocks.FeatureSection	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Accordion	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Alert	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.AlertDialog	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.AspectRatio	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Badge	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Calendar	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Collapsible	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Command	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Dialog	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Drawer	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.InputOtp	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Pagination	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Resizable	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.ScrollArea	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Sheet	100%	67%	✔
apps.web.vitest_test.test.265eeb24-f224-4ded-b258-7be8daee09a1.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Tooltip	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.blocks.HeaderSectionsBlock	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.Header	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.RichText	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Avatar	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Checkbox	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.HoverCard	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Popover	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Progress	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.RadioGroup	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Separator	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Skeleton	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Slider	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Switch	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.apps.web.src.components.ui.Tabs	100%	67%	✔
apps.web.vitest_test.test.e2e65bbd-e783-4ee8-ab7c-39891e42572b.home.runner.work.nextjs-vercel.nextjs-vercel.packages.ui.icons.stories	100%	67%	✔
apps.web.bin	0%	0%	❌
apps.web.src	0%	0%	❌
apps.web.src.app	0%	0%	❌
apps.web.src.app.(app).[locale]	0%	40%	❌
apps.web.src.app.(app).[locale].(blog).blog	0%	50%	❌
apps.web.src.app.(app).[locale].(blog).blog.[...slug]	0%	50%	❌
apps.web.src.app.(app).[locale].(blog).blog.components	0%	100%	❌
apps.web.src.app.(app).[locale].[...slug]	0%	0%	❌
apps.web.src.app.(app).[locale].draft	0%	0%	❌
apps.web.src.app.(app).[locale].draft.(blog).blog	0%	0%	❌
apps.web.src.app.(app).[locale].draft.(blog).blog.[...slug]	0%	0%	❌
apps.web.src.app.(app).[locale].draft.[...slug]	0%	0%	❌
apps.web.src.app.(payload)	0%	0%	❌
apps.web.src.app.(payload).admin	0%	0%	❌
apps.web.src.app.(payload).admin.[[...segments]]	0%	100%	❌
apps.web.src.app.(payload).api.[...slug]	0%	100%	❌
apps.web.src.app.(payload).api.graphql	0%	100%	❌
apps.web.src.app.(payload).api.graphql-playground	0%	100%	❌
apps.web.src.app.(payload).api.payload_actions.clear_cache	0%	0%	❌
apps.web.src.app.(payload).api.payload_actions.run_queue	0%	100%	❌
apps.web.src.blocks.CtaSectionsBlock	84%	88%	✔
apps.web.src.blocks.CtaSectionsBlock.layouts	41%	100%	❌
apps.web.src.blocks.FeatureSection	63%	97%	➖
apps.web.src.blocks.FeatureSection.variations	13%	18%	❌
apps.web.src.blocks.HeaderSectionBlock	33%	87%	❌
apps.web.src.blocks.HeaderSectionBlock.layouts	13%	33%	❌
apps.web.src.blocks.HeaderSectionsBlock	54%	87%	➖
apps.web.src.blocks.HeaderSectionsBlock.variations	0%	0%	❌
apps.web.src.blocks.HeroSectionsBlock	80%	85%	✔
apps.web.src.blocks.HeroSectionsBlock.layouts	12%	0%	❌
apps.web.src.collections	0%	71%	❌
apps.web.src.collections.Tags	0%	100%	❌
apps.web.src.components	0%	100%	❌
apps.web.src.components.AdminRowLabel	0%	100%	❌
apps.web.src.components.BlocksRenderer	0%	100%	❌
apps.web.src.components.CustomPayload.AfterNav	0%	100%	❌
apps.web.src.components.Header	100%	100%	✔
apps.web.src.components.Loading	0%	0%	❌
apps.web.src.components.NotFound	0%	0%	❌
apps.web.src.components.PageThemeObserver	0%	100%	❌
apps.web.src.components.RichText	100%	75%	✔
apps.web.src.components.RichText.Blocks.Embed	0%	100%	❌
apps.web.src.components.RichText.Features.eyebrow	0%	33%	❌
apps.web.src.components.RichText.Features.eyebrow.icons	0%	0%	❌
apps.web.src.components.RichText.Features.plugins	0%	100%	❌
apps.web.src.components.Wrapper	93%	73%	✔
apps.web.src.components.ui.Accordion	100%	25%	✔
apps.web.src.components.ui.Alert	100%	25%	✔
apps.web.src.components.ui.AlertDialog	100%	25%	✔
apps.web.src.components.ui.AspectRatio	100%	100%	✔
apps.web.src.components.ui.Avatar	100%	25%	✔
apps.web.src.components.ui.Badge	100%	100%	✔
apps.web.src.components.ui.Breadcrumb	100%	33%	✔
apps.web.src.components.ui.Button	100%	33%	✔
apps.web.src.components.ui.Calendar	100%	100%	✔
apps.web.src.components.ui.Card	100%	25%	✔
apps.web.src.components.ui.Carousel	90%	52%	✔
apps.web.src.components.ui.Chart	49%	36%	❌
apps.web.src.components.ui.Checkbox	100%	25%	✔
apps.web.src.components.ui.Collapsible	100%	100%	✔
apps.web.src.components.ui.Command	84%	25%	✔
apps.web.src.components.ui.ContextMenu	92%	25%	✔
apps.web.src.components.ui.Dialog	100%	25%	✔
apps.web.src.components.ui.Drawer	100%	25%	✔
apps.web.src.components.ui.DropdownMenu	94%	25%	✔
apps.web.src.components.ui.Form	90%	50%	✔
apps.web.src.components.ui.HoverCard	100%	25%	✔
apps.web.src.components.ui.Input	100%	40%	✔
apps.web.src.components.ui.InputOtp	100%	33%	✔
apps.web.src.components.ui.Label	100%	25%	✔
apps.web.src.components.ui.MenuBar	93%	25%	✔
apps.web.src.components.ui.NavigationMenu	100%	25%	✔
apps.web.src.components.ui.Pagination	100%	17%	✔
apps.web.src.components.ui.Popover	100%	25%	✔
apps.web.src.components.ui.Progress	100%	40%	✔
apps.web.src.components.ui.RadioGroup	100%	50%	✔
apps.web.src.components.ui.Resizable	100%	100%	✔
apps.web.src.components.ui.ScrollArea	97%	20%	✔
apps.web.src.components.ui.Select	100%	25%	✔
apps.web.src.components.ui.Separator	100%	50%	✔
apps.web.src.components.ui.Sheet	100%	25%	✔
apps.web.src.components.ui.Sidebar	0%	100%	❌
apps.web.src.components.ui.Skeleton	100%	100%	✔
apps.web.src.components.ui.Slider	100%	25%	✔
apps.web.src.components.ui.Sonner	100%	100%	✔
apps.web.src.components.ui.Switch	100%	25%	✔
apps.web.src.components.ui.Table	100%	25%	✔
apps.web.src.components.ui.Tabs	100%	25%	✔
apps.web.src.components.ui.Textarea	100%	40%	✔
apps.web.src.components.ui.Toast	92%	25%	✔
apps.web.src.components.ui.Toaster	68%	100%	➖
apps.web.src.components.ui.Toggle	100%	25%	✔
apps.web.src.components.ui.ToggleGroup	100%	29%	✔
apps.web.src.components.ui.Tooltip	100%	25%	✔
apps.web.src.globals.BlogIndex	0%	0%	❌
apps.web.src.globals.FourOhFour	0%	0%	❌
apps.web.src.globals.Home	0%	0%	❌
apps.web.src.globals.Layout	0%	0%	❌
apps.web.src.hooks	14%	50%	❌
apps.web.src.i18n	0%	50%	❌
apps.web.src.lib	3%	22%	❌
apps.web.src.lib.isExpandedDoc	0%	0%	❌
apps.web.src.migrations	0%	0%	❌
apps.web.src.payload	0%	0%	❌
apps.web.src.payload.fields	0%	100%	❌
apps.web.src.payload.fields.Inputs.Checkbox	0%	50%	❌
apps.web.src.payload.fields.Inputs.Select	0%	50%	❌
apps.web.src.payload.fields.Inputs.TextArea	0%	100%	❌
apps.web.src.payload.fields.Inputs.TextInput	0%	50%	❌
apps.web.src.payload.utils	21%	60%	❌
packages.types	100%	100%	✔
packages.ui	0%	0%	❌
packages.ui.components.BlogDetail	0%	100%	❌
packages.ui.components.BlogIndex	0%	100%	❌
packages.ui.components.CtaButton	0%	100%	❌
packages.ui.components.CtaLink	0%	100%	❌
packages.ui.components.Footer	0%	100%	❌
packages.ui.components.FormWrapper	0%	100%	❌
packages.ui.components.ImagePriorityContext	0%	100%	❌
packages.ui.components.MaybeThemed	0%	100%	❌
packages.ui.components.Modal	0%	0%	❌
packages.ui.components.Pagination	0%	100%	❌
packages.ui.components.RenderIcon	0%	100%	❌
packages.ui.components.StaticTag	0%	100%	❌
packages.ui.components.Video	0%	50%	❌
packages.ui.components.primitives.PayloadDate	0%	0%	❌
packages.ui.components.primitives.PayloadLink	0%	0%	❌
packages.ui.components.primitives.PayloadText	0%	0%	❌
packages.ui.components.primitives.ResponsivePayloadImage	11%	100%	❌
packages.ui.components.primitives.RichText	0%	100%	❌
packages.ui.components.primitives.RichText.utils	0%	100%	❌
packages.ui.icons.core	100%	48%	✔
packages.ui.icons.stories.util	100%	50%	✔
packages.ui.lib.hooks	0%	50%	❌
packages.ui.utils	0%	80%	❌
Summary	43% (6220 / 14433)	55% (539 / 978)	❌

github-actions · 2025-02-11T21:31:42Z

PR URL	Stories	DB Branch
Link 🚀	Link	Link 🐘

github-actions · 2025-02-11T21:32:48Z

Lighthouse Audit

Route	Performance	Accessibility	Best Practices	SEO	Full Report
/	🟢 92	🟢 100	🟢 96	🟢 100	Full Report
/kitchen-sink	🟢 95	🟢 93	🟢 96	🟠 80	Full Report
/blog	🟠 88	🟢 100	🟢 96	🟢 90	Full Report

bcimbali added 9 commits February 11, 2025 14:28

feat(block): add content field to HeroSectionsBlk

ce09168

cleanup(block): remove title field in HeroBlock

35def2e

feat(component): add imgClasses to RespPayloadImg

e374ec3

tweak(migration): tweak migrations after rebasing

43105bb

feat(story): add mockImg to heroBlock story

697633d

fix(component): set text-foreground on RichText

9d1b81b

feat(block): add richText content to all heroblks

27ca05d

fix(types): remove title in HeroBlockSeeds

ef0e791

feat(stories): update mockData for heroSections

8848b87

github-actions bot added the tests passed label Feb 11, 2025

fix(block): update heroSections7 img size

bd77924

github-actions bot added tests passed and removed tests passed labels Feb 11, 2025

feat(block): add bg image to HeroSections6

7e5dd80