feat(call to contribute): add calltocontribute story [#13733]

Author: Baystef

.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 "../Buttons"
+import InlineLink from "../Link"
+import OldHeading from "../OldHeading"
+import Text from "../OldText"
+import Translation from "../Translation"
 
 export type CallToContributeProps = {
   editPath: string

src/styles/global.css

@@ -74,6 +74,9 @@
     /* ! Deprecating primary-pressed */
     --primary-pressed: var(--blue-400);
 
+      /* To be reviewed */
+    --secondary: "#666666";
+
     --body: var(--gray-800);
     --body-medium: var(--gray-500);
     --body-light: var(--gray-200);
@@ -143,6 +146,9 @@
     /* ! Deprecating primary-pressed */
     --primary-pressed: var(--orange-800);
 
+     /* To be reviewed */
+    --secondary: "#b2b2b2";
+
     --body: var(--gray-100);
     --body-medium: var(--gray-400);
     --body-light: var(--gray-600);
@@ -170,7 +176,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);
@@ -278,3 +284,10 @@
     }
   }
 }
+
+/* styles for classes within markdown */
+@layer components {
+  .citation p {
+    @apply text-secondary;
+  }
+}

tailwind.config.ts

@@ -113,6 +113,9 @@ const config = {
           dark: "var(--primary-dark)",
           pressed: "var(--primary-pressed)",
         },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+        },
         body: {
           DEFAULT: "var(--body)",
           medium: "var(--body-medium)",