Merge branch 'dev' into ashiskumar-dev

Author: pettinarip

.github/labeler.yml

@@ -29,12 +29,10 @@
 "translation 🌍":
   - public/content/translations/**/*
   - src/intl/**/*
-  - !src/intl/en/**
 
 "content 🖋️":
   - src/intl/en/**
   - public/content/**/*
-  - !public/content/translations/**/*
 
 "event 📅":
   - src/data/community-events.json

.github/workflows/label.yml

@@ -11,3 +11,26 @@ jobs:
       - uses: actions/labeler@v2
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
+
+      - name: Refine labels
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            try {
+              const { owner, repo, number: pull_number } = context.issue;
+              const { data: files } = await github.pulls.listFiles({ owner, repo, pull_number });
+
+              const allInEn = files.every(file => file.filename.startsWith('src/intl/en/'));
+              const allInTranslations = files.every(file => file.filename.startsWith('public/content/translations/'));
+              
+              if (allInEn) {
+                await github.issues.removeLabel({ owner, repo, issue_number: pull_number, name: 'translation 🌍' });
+              }
+              
+              if (allInTranslations) {
+                await github.issues.removeLabel({ owner, repo, issue_number: pull_number, name: 'content 🖋️' });
+              }
+            } catch (error) {
+              console.warn("Problem occurred refining labels")
+            }

.storybook/i18next.ts

@@ -13,6 +13,7 @@ export const baseLocales = {
 const ns = [
   "common",
   "glossary",
+  "learn-quizzes",
   "page-about",
   "page-index",
   "page-learn",
@@ -49,6 +50,7 @@ const resources: Resource = ns.reduce((acc, n) => {
 
   return acc
 }, {})
+console.log("🚀 ~ constresources:Resource=ns.reduce ~ resources:", resources)
 
 i18n.use(initReactI18next).init({
   debug: true,
@@ -57,6 +59,7 @@ i18n.use(initReactI18next).init({
   react: { useSuspense: false },
   supportedLngs,
   resources,
+  defaultNS: "common",
 })
 
 export default i18n

.storybook/manager.ts

@@ -10,5 +10,5 @@ addons.setConfig({
 // In order to override the default favicon, and inject a data hash link to the png
 const link = document.createElement("link")
 link.setAttribute("rel", "shortcut icon")
-link.setAttribute("href", favicon)
+link.setAttribute("href", favicon.src)
 document.head.appendChild(link)

.storybook/preview.ts

@@ -1,11 +1,15 @@
 import type { Preview } from "@storybook/react"
+import isChromatic from "chromatic/isChromatic"
 
 import theme from "../src/@chakra-ui/theme"
 
 import { ChakraDecorator } from "./ChakraDecorator"
 import i18n, { baseLocales } from "./i18next"
 
 import "../src/styles/global.css"
+import { MotionGlobalConfig } from "framer-motion"
+
+MotionGlobalConfig.skipAnimations = isChromatic()
 
 const chakraBreakpointArray = Object.entries(theme.breakpoints) as [
   string,
@@ -43,6 +47,9 @@ const preview: Preview = {
     backgrounds: {
       disable: true,
     },
+    chromatic: {
+      prefersReducedMotion: "reduce",
+    },
     options: {
       storySort: {
         order: ["Atoms", "Molecules", "Organisms", "Templates", "Pages"],

.storybook/theme.ts

@@ -1,8 +1,5 @@
 import { create } from "@storybook/theming"
 
-// @ts-ignore
-import brandImage from "./preview-logo.svg"
-
 export default create({
   base: "dark",
 
@@ -11,7 +8,7 @@ export default create({
   appBorderRadius: 4,
 
   brandTitle: "Ethereum.org",
-  brandImage,
+  brandImage: "./preview-logo.svg",
   brandUrl: "https://www.ethereum.org",
 
   barSelectedColor: "#ff7324",

package.json

@@ -67,7 +67,7 @@
     "@storybook/addon-links": "7.6.6",
     "@storybook/nextjs": "7.6.6",
     "@storybook/react": "7.6.6",
-    "@storybook/testing-library": "0.2.2",
+    "@storybook/test": "8.0.0",
     "@svgr/webpack": "^8.1.0",
     "@types/decompress": "^4.2.7",
     "@types/hast": "^3.0.0",

src/components/CrowdinContributors.tsx

@@ -1,10 +1,11 @@
 import * as React from "react"
 import { Box, Stack } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
+import { expect, fireEvent, waitFor, within } from "@storybook/test"
 
-import FeedbackWidgetComponent from "./"
+import FeedbackWidget from "./"
 
-type FeedbackWidgetType = typeof FeedbackWidgetComponent
+type FeedbackWidgetType = typeof FeedbackWidget
 
 const meta = {
   title: "FeedbackWidget",
@@ -23,6 +24,27 @@ const meta = {
 
 export default meta
 
-export const FeedbackWidget: StoryObj<FeedbackWidgetType> = {
-  render: () => <FeedbackWidgetComponent />,
+type Story = StoryObj<typeof meta>
+
+export const WidgetButton: Story = {
+  render: () => <FeedbackWidget />,
+}
+
+export const WidgetModal: Story = {
+  render: () => <FeedbackWidget />,
+  play: async ({ canvasElement }) => {
+    // Add delay for snapshot capture of the modal
+    const canvas = within(canvasElement)
+    const canvasParent = within(canvasElement.parentElement!)
+
+    const feedbackButton = canvas.getByTestId("feedback-widget-button")
+
+    fireEvent.click(feedbackButton)
+
+    await waitFor(async () => {
+      await expect(
+        canvasParent.getByTestId("feedback-widget-modal")
+      ).toBeVisible()
+    })
+  },
 }

src/components/FeedbackWidget/FeedbackWidget.stories.tsx

@@ -12,6 +12,7 @@ const FixedDot = ({ bottomOffset, isExpanded, ...props }: FixedDotProps) => {
   const size = "12"
   return (
     <Button
+      data-testid="feedback-widget-button"
       h={size}
       w={{ base: size, lg: isExpanded ? "15rem" : size }}
       borderRadius="full"