Merge pull request #15147 from ethereum/patch-stories-intl

Patch stories affected by intl setup changes

Author: wackerow

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -14,9 +14,9 @@ export default meta
 export const Breadcrumbs: StoryObj = {
   render: () => (
     <Stack className="gap-8">
-      <BreadcrumbsComponent slug="/en/staking/" />
-      <BreadcrumbsComponent slug="/en/staking/solo/" />
-      <BreadcrumbsComponent slug="/en/roadmap/merge/issuance/" />
+      <BreadcrumbsComponent slug="/staking/" />
+      <BreadcrumbsComponent slug="/staking/solo/" />
+      <BreadcrumbsComponent slug="/roadmap/merge/issuance/" />
     </Stack>
   ),
 }

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

@@ -30,7 +30,7 @@ export default meta
 
 export const MdxHero: StoryObj<typeof meta> = {
   args: {
-    breadcrumbs: { slug: "/en/staking/solo/" },
+    breadcrumbs: { slug: "/staking/solo/" },
     title: "Solo stake your Eth",
   },
 }

src/components/Quiz/stories/QuizButtonGroup.stories.tsx

@@ -1,4 +1,3 @@
-import { useTranslations } from "next-intl"
 import type { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 
@@ -7,6 +6,8 @@ import { QuizContent } from "../QuizWidget/QuizContent"
 
 import { LAYER_2_QUIZ_TITLE_KEY, layer2Questions } from "./utils"
 
+import useTranslation from "@/hooks/useTranslation"
+
 const meta = {
   title: "Molecules / Display Content / Quiz / QuizWidget / ButtonGroup",
   component: QuizButtonGroup,
@@ -28,7 +29,7 @@ const meta = {
   },
   decorators: [
     (Story, { args }) => {
-      const t = useTranslations()
+      const { t } = useTranslation()
       return (
         <QuizContent
           title={t(LAYER_2_QUIZ_TITLE_KEY)}

src/components/Quiz/stories/QuizProgressBar.stories.tsx

@@ -1,4 +1,3 @@
-import { useTranslations } from "next-intl"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import allQuizzesData from "@/data/quizzes"
@@ -8,6 +7,8 @@ import { QuizProgressBar } from "../QuizWidget/QuizProgressBar"
 
 import { LAYER_2_QUIZ_KEY, layer2Questions } from "./utils"
 
+import useTranslation from "@/hooks/useTranslation"
+
 const meta = {
   title: "Molecules / Display Content / Quiz / QuizWidget / ProgressBar",
   component: QuizProgressBar,
@@ -16,7 +17,7 @@ const meta = {
   },
   decorators: [
     (Story, { args }) => {
-      const t = useTranslations()
+      const { t } = useTranslation()
 
       return (
         <QuizContent

src/components/Quiz/stories/QuizRadioGroup.stories.tsx

@@ -1,4 +1,3 @@
-import { useTranslations } from "next-intl"
 import type { Meta, StoryObj } from "@storybook/react"
 import { expect, fireEvent, fn, within } from "@storybook/test"
 
@@ -7,12 +6,14 @@ import { QuizRadioGroup } from "../QuizWidget/QuizRadioGroup"
 
 import { LAYER_2_QUIZ_TITLE_KEY, layer2Questions } from "./utils"
 
+import useTranslation from "@/hooks/useTranslation"
+
 const meta = {
   title: "Molecules / Display Content / Quiz / QuizWidget / RadioGroup",
   component: QuizRadioGroup,
   decorators: [
     (Story, { args }) => {
-      const t = useTranslations()
+      const { t } = useTranslation()
       return (
         <QuizContent
           title={t(LAYER_2_QUIZ_TITLE_KEY)}

src/components/Quiz/stories/QuizSummary.stories.tsx

@@ -1,11 +1,12 @@
-import { useTranslations } from "next-intl"
 import type { Meta, StoryObj } from "@storybook/react"
 
 import { QuizContent } from "../QuizWidget/QuizContent"
 import { QuizSummary } from "../QuizWidget/QuizSummary"
 
 import { LAYER_2_QUIZ_TITLE_KEY, layer2Questions } from "./utils"
 
+import useTranslation from "@/hooks/useTranslation"
+
 const meta = {
   title: "Molecules / Display Content / Quiz / QuizWidget / Summary",
   component: QuizSummary,
@@ -14,7 +15,7 @@ const meta = {
   },
   decorators: [
     (Story) => {
-      const t = useTranslations()
+      const { t } = useTranslation()
       return (
         <QuizContent title={t(LAYER_2_QUIZ_TITLE_KEY)} answerStatus={null}>
           <Story />

src/components/Quiz/stories/QuizzesList.stories.tsx

@@ -1,4 +1,3 @@
-import { useTranslations } from "next-intl"
 import type { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 
@@ -8,6 +7,8 @@ import { ethereumBasicsQuizzes } from "@/data/quizzes"
 
 import QuizzesListComponent from "../QuizzesList"
 
+import useTranslation from "@/hooks/useTranslation"
+
 /**
  * This story also renders the `QuizItem` component.
  *
@@ -19,8 +20,8 @@ const meta = {
   component: QuizzesListComponent,
   args: {
     content: ethereumBasicsQuizzes,
-    headingId: "learn-quizzes.basics",
-    descriptionId: "learn-quizzes.basics-description",
+    headingId: "basics",
+    descriptionId: "basics-description",
     userStats: {
       score: 0,
       average: [],
@@ -34,7 +35,16 @@ const meta = {
 export default meta
 
 export const Default: StoryObj<typeof meta> = {
-  render: (args) => <QuizzesListComponent {...args} />,
+  render: (args) => {
+    const { t } = useTranslation("learn-quizzes")
+    return (
+      <QuizzesListComponent
+        {...args}
+        headingId={t(args.headingId)}
+        descriptionId={t(args.descriptionId)}
+      />
+    )
+  },
 }
 
 export const OneCompletedQuiz: StoryObj<typeof meta> = {
@@ -50,7 +60,7 @@ export const OneCompletedQuiz: StoryObj<typeof meta> = {
     },
   },
   render: (args) => {
-    const t = useTranslations()
+    const { t } = useTranslation("learn-quizzes")
     return (
       <QuizzesListComponent
         {...args}