feat(Hero): apply chromatic viewport modes to all Hero stories

Author: TylerAPfledderer

src/components/Hero/ContentHero/ContentHero.stories.tsx

@@ -1,17 +1,23 @@
 import { useTranslation } from "next-i18next"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { allModes } from "../../../../.storybook/modes"
+import contentHeroImg from "../../../../public/mainnet.png"
+
 import ContentHeroComponent, { ContentHeroProps } from "."
 
 type ContentHeroType = typeof ContentHeroComponent
 
-import contentHeroImg from "../../../../public/mainnet.png"
-
 const meta = {
   title: "Organisms / Layouts / Hero",
   component: ContentHeroComponent,
   parameters: {
     layout: "none",
+    chromatic: {
+      modes: {
+        ...allModes,
+      },
+    },
   },
   argTypes: {
     heroImg: {

src/components/Hero/HomeHero/HomeHero.stories.tsx

@@ -1,6 +1,9 @@
 import * as React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { allModes } from "../../../../.storybook/modes"
+import homeHeroImg from "../../../../public/home/hero.png"
+
 import HomeHeroComponent from "."
 
 type HomeHeroType = typeof HomeHeroComponent
@@ -10,6 +13,11 @@ const meta = {
   component: HomeHeroComponent,
   parameters: {
     layout: "none",
+    chromatic: {
+      modes: {
+        ...allModes,
+      },
+    },
   },
   argTypes: {
     heroImg: {
@@ -22,8 +30,6 @@ const meta = {
 
 export default meta
 
-import homeHeroImg from "../../../../public/home/hero.png"
-
 export const HomeHero: StoryObj<typeof meta> = {
   args: {
     heroImg: homeHeroImg,

src/components/Hero/MdxHero/MdxHero.stories.tsx

@@ -1,6 +1,8 @@
 import { HStack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
+import { allModes } from "../../../../.storybook/modes"
+
 import MdxHeroComponent from "./"
 
 type MdxHeroType = typeof MdxHeroComponent
@@ -9,6 +11,11 @@ const meta = {
   title: "Organisms / Layouts / Hero",
   parameters: {
     layout: "none",
+    chromatic: {
+      modes: {
+        ...allModes,
+      },
+    },
   },
   decorators: [
     (Story) => (