Merge pull request #13782 from Baystef/feat/calltocontribute-story

Create story tests for CallToContribute component [#13733]

Author: corwintines

.storybook/i18next.ts

@@ -22,6 +22,7 @@ export const ns = [
   "page-developers-index",
   "page-what-is-ethereum",
   "page-upgrades-index",
+  "page-developers-docs",
 ] as const
 const supportedLngs = Object.keys(baseLocales)
 

src/components/CallToContribute/CallToContribute.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from "@storybook/react"
+
+import { ChildOnlyProp } from "@/lib/types"
+
+import { langViewportModes } from "../../../.storybook/modes"
+
+import CallToContributeComponent from "."
+
+const meta = {
+  title: "Molecules / Navigation / CallToContribute",
+  component: CallToContributeComponent,
+  args: {
+    editPath:
+      "https://github.com/ethereum/ethereum-org-website/tree/dev/public/content/developers/docs/index.md",
+  },
+  parameters: {
+    layout: "fullscreen",
+    chromatic: {
+      modes: {
+        ...langViewportModes,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ContentContainer>
+        <Content>
+          <Story />
+        </Content>
+      </ContentContainer>
+    ),
+  ],
+} satisfies Meta<typeof CallToContributeComponent>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const ContentContainer = (props: ChildOnlyProp) => {
+  return (
+    <div
+      className="flex w-full justify-between bg-background-highlight py-0 ps-0 lg:pe-8"
+      {...props}
+    />
+  )
+}
+
+const Content = (props: ChildOnlyProp) => {
+  return (
+    <div
+      className="mx-auto w-full flex-1 px-8 pb-8 pt-8 md:px-16 md:pb-16 md:pt-12 lg:w-0"
+      {...props}
+    />
+  )
+}
+
+export const CallToContribute: Story = {}

src/components/CallToContribute.tsx renamed to src/components/CallToContribute/index.tsx

@@ -4,11 +4,11 @@ import { Flex, FlexProps, Icon } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
-import { ButtonLink } from "./Buttons"
-import InlineLink from "./Link"
-import OldHeading from "./OldHeading"
-import Text from "./OldText"
-import Translation from "./Translation"
+import { ButtonLink } from "@/components/Buttons"
+import InlineLink from "@/components/Link"
+import OldHeading from "@/components/OldHeading"
+import Text from "@/components/OldText"
+import Translation from "@/components/Translation"
 
 export type CallToContributeProps = {
   editPath: string

src/styles/global.css

@@ -170,7 +170,7 @@
     /* ! Deprecating success-neutral */
     --success-neutral: var(--green-900);
 
-    /* Misc sematics: light mode */
+    /* Misc sematics: dark mode */
     --tooltip-shadow: rgba(255, 255, 255, 0.24);
     --switch-background: rgba(255, 255, 255, 0.24);
     --hub-hero-content-bg: rgba(34, 34, 34, 0.8);