Release candidate: v7.22.2

.all-contributorsrc

@@ -10577,6 +10577,69 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "Coderoostr",
+      "name": "Marcos González",
+      "avatar_url": "https://avatars.githubusercontent.com/u/103231131?v=4",
+      "profile": "https://coderoostr.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "natpicone",
+      "name": "Natalino Picone",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4753402?v=4",
+      "profile": "http://nozominetworks.com",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "hammadsaedi",
+      "name": "Hammad Saaedi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/71373419?v=4",
+      "profile": "https://github.com/hammadsaedi",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "srn08",
+      "name": "Shaunak Nagrecha",
+      "avatar_url": "https://avatars.githubusercontent.com/u/105499798?v=4",
+      "profile": "https://github.com/srn08",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "schwindtkevin",
+      "name": "Kevin Schwindt",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1700789?v=4",
+      "profile": "https://github.com/schwindtkevin",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "robertkodra",
+      "name": "Robert",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36516516?v=4",
+      "profile": "https://github.com/robertkodra",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "0xObsidian",
+      "name": "obsidian",
+      "avatar_url": "https://avatars.githubusercontent.com/u/131651958?v=4",
+      "profile": "https://github.com/0xObsidian",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1656,6 +1656,15 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://mirror.xyz/umede.eth"><img src="https://avatars.githubusercontent.com/u/122288558?v=4?s=100" width="100px;" alt="umede"/><br /><sub><b>umede</b></sub></a><br /><a href="#content-umededoteth" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://taminobaumann.com"><img src="https://avatars.githubusercontent.com/u/48290617?v=4?s=100" width="100px;" alt="Tamino"/><br /><sub><b>Tamino</b></sub></a><br /><a href="#content-taminobaumann" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/keccers"><img src="https://avatars.githubusercontent.com/u/770277?v=4?s=100" width="100px;" alt="Katherine Champagne"/><br /><sub><b>Katherine Champagne</b></sub></a><br /><a href="#content-keccers" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://coderoostr.com"><img src="https://avatars.githubusercontent.com/u/103231131?v=4?s=100" width="100px;" alt="Marcos González"/><br /><sub><b>Marcos González</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Coderoostr" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://nozominetworks.com"><img src="https://avatars.githubusercontent.com/u/4753402?v=4?s=100" width="100px;" alt="Natalino Picone"/><br /><sub><b>Natalino Picone</b></sub></a><br /><a href="#content-natpicone" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/hammadsaedi"><img src="https://avatars.githubusercontent.com/u/71373419?v=4?s=100" width="100px;" alt="Hammad Saaedi"/><br /><sub><b>Hammad Saaedi</b></sub></a><br /><a href="#content-hammadsaedi" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/srn08"><img src="https://avatars.githubusercontent.com/u/105499798?v=4?s=100" width="100px;" alt="Shaunak Nagrecha"/><br /><sub><b>Shaunak Nagrecha</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Asrn08" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/schwindtkevin"><img src="https://avatars.githubusercontent.com/u/1700789?v=4?s=100" width="100px;" alt="Kevin Schwindt"/><br /><sub><b>Kevin Schwindt</b></sub></a><br /><a href="#content-schwindtkevin" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/robertkodra"><img src="https://avatars.githubusercontent.com/u/36516516?v=4?s=100" width="100px;" alt="Robert"/><br /><sub><b>Robert</b></sub></a><br /><a href="#content-robertkodra" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xObsidian"><img src="https://avatars.githubusercontent.com/u/131651958?v=4?s=100" width="100px;" alt="obsidian"/><br /><sub><b>obsidian</b></sub></a><br /><a href="#content-0xObsidian" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

docs/ds-implementation.md

@@ -17,10 +17,10 @@ Follow the new component directory structure:
 ```markdown
 src/
 └── components/
-    └── ComponentA/
-          ├── index.tsx
-          ├── ComponentA.stories.tsx
-          └── // Any other files as applicable (utils, child components, useHook, etc.)
+└── ComponentA/
+├── index.tsx
+├── ComponentA.stories.tsx
+└── // Any other files as applicable (utils, child components, useHook, etc.)
 ```
 
 ## Components creation/modification from the DS

docs/schema.md

@@ -1,12 +1,12 @@
 # Schema
 
-Our schema, used in the Gatsby GraphQL layer, is defined under the `src/schema` folder. These files are then grabbed by the createSchemaCustomization`Gatsby hook in`gatsby-node.ts`.
+Our schema, used in the Gatsby GraphQL layer, is defined under the `src/schema` folder. These files are then grabbed by the `createSchemaCustomization` Gatsby hook in `gatsby-node.ts`.
 There are two ways to define a schema in Gatsby:
 
 - GraphQL SDL, the traditional way using [template literals](https://graphql.org/learn/schema/)
 - And a more "programmatic" approach, which has more flexibility, [Gatsby Type Builders](https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#gatsby-type-builders) with `schema.buildObjectType`
 
-That is why you see two folders in /schema
+That is why you see two folders in `/schema`
 
 - `src/schema/sdls` for GraphQL SDL
 - `src/schema/builders` for Gatsby Type Builders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.22.1",
+  "version": "7.22.2",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",

redirects.json

@@ -335,6 +335,10 @@
     "fromPath": "/staking/withdraws",
     "toPath": "/en/staking/withdrawals/"
   },
+  {
+    "fromPath": "/*/writing-cohort",
+    "toPath": "https://ethereumwriterscohort.carrd.co/"
+  },
   {
     "fromPath": "/*/staking/withdraws",
     "toPath": "/:splat/staking/withdrawals/"

src/@chakra-ui/gatsby-plugin/components/Breadcrumb.ts

@@ -0,0 +1,45 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react"
+import { breadcrumbAnatomy } from "@chakra-ui/anatomy"
+import { breadcrumbDefaultTheme, defineMergeStyles } from "./components.utils"
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+  breadcrumbAnatomy.keys
+)
+
+const baseStyle = defineMergeStyles(breadcrumbDefaultTheme.baseStyle, {
+  list: {
+    m: 0,
+    lineHeight: "base",
+    flexWrap: "wrap",
+  },
+  item: {
+    color: "body.medium",
+    letterSpacing: "wider",
+    m: 0,
+  },
+  link: {
+    fontWeight: "normal",
+    _hover: {
+      color: "primary.base",
+      textDecor: "none",
+    },
+    _active: {
+      color: "primary.base",
+    },
+    /*
+     * `&[aria-current="page"]`
+     * Redundancy to ensure styling on the active
+     * link is applied.
+     */
+    _activeLink: {
+      color: "primary.base",
+    },
+  },
+  separator: {
+    mx: "2.5",
+  },
+})
+
+export const Breadcrumb = defineMultiStyleConfig({
+  baseStyle,
+})

src/@chakra-ui/gatsby-plugin/components/Input.ts

@@ -1,4 +1,5 @@
 import { inputAnatomy } from "@chakra-ui/anatomy"
+import { cssVar } from "@chakra-ui/react"
 import {
   createMultiStyleConfigHelpers,
   defineStyle,
@@ -8,6 +9,9 @@ import { defineMergeStyles, inputDefaultTheme } from "./components.utils"
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(inputAnatomy.keys)
 
+// From the default theme
+const $height = cssVar("input-height")
+
 const baseStyle = definePartsStyle((props) => {
   const {
     focusBorderColor: fc = "primaryHover",
@@ -19,10 +23,10 @@ const baseStyle = definePartsStyle((props) => {
     inputDefaultTheme.variants?.outline(props),
     {
       field: {
-        borderColor: "currentColor",
         borderRadius: "base",
         outline: "3px solid transparent",
         lineHeight: 1,
+        px: "2",
         _placeholder: {
           color: "disabled",
           opacity: 1,
@@ -34,9 +38,6 @@ const baseStyle = definePartsStyle((props) => {
           boxShadow: "none",
         },
         _hover: null, // override default
-        _groupHover: {
-          borderColor: "primary.hover",
-        },
         _invalid: {
           borderColor: ec,
           boxShadow: "none",
@@ -46,10 +47,14 @@ const baseStyle = definePartsStyle((props) => {
           opacity: 1,
         },
         "&:not(:disabled)": {
+          borderColor: "body.base",
           _active: {
             bg: "background.highlight",
             borderColor: "primary.highContrast",
           },
+          "[data-group] &:hover, &:hover": {
+            borderColor: "primary.hover",
+          },
         },
       },
       element: {
@@ -84,12 +89,10 @@ const baseStyle = definePartsStyle((props) => {
 
 const size = {
   md: defineStyle({
-    h: 10.5,
-    px: 2,
+    [$height.variable]: "sizes.10.5",
   }),
   sm: defineStyle({
-    h: 8,
-    px: 1,
+    [$height.variable]: "sizes.8",
   }),
 }
 

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -2,6 +2,7 @@ import { Alert } from "./Alert"
 import { Avatar } from "./Avatar"
 import { Badge } from "./Badge"
 import { Button } from "./Button"
+import { Breadcrumb } from "./Breadcrumb"
 import { Heading } from "./Heading"
 import { Link } from "./Link"
 import { Tag } from "./Tag"
@@ -17,7 +18,6 @@ import { Switch } from "./Switch"
 import { Input } from "./Input"
 import {
   accordionDefaultTheme,
-  breadcrumbDefaultTheme,
   closeButtonDefaultTheme,
   codeDefaultTheme,
   dividerDefaultTheme,
@@ -34,7 +34,7 @@ export default {
   Alert,
   Avatar,
   Badge,
-  Breadcrumb: breadcrumbDefaultTheme,
+  Breadcrumb,
   Button,
   Checkbox,
   CloseButton: closeButtonDefaultTheme,

src/components/Banners/Implementations/WritersCohortBanner.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { Text } from "@chakra-ui/react"
+
+import DismissableBanner from "../DismissableBanner"
+import Link from "../../Link"
+
+interface IProps {
+  pathname: string
+}
+
+const WritersCohortBanner: React.FC<IProps> = ({ pathname }) => {
+  if (
+    pathname.includes("contributing") ||
+    pathname.includes("community") ||
+    pathname === "/"
+  ) {
+    return (
+      <DismissableBanner storageKey="writersCohort">
+        <Text m={0}>
+          🎉 Join the 2nd edition of ethereum.org's Writers Cohort, starting
+          October 20th.{" "}
+          <Link to="https://ethereumwriterscohort.carrd.co/">
+            Sign up here!
+          </Link>
+        </Text>
+      </DismissableBanner>
+    )
+  }
+
+  return null
+}
+
+export default WritersCohortBanner

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { Stack } from "@chakra-ui/react"
 import BreadcrumbsComponent from "."
 
 type BreadcumbsType = typeof BreadcrumbsComponent
@@ -15,10 +16,10 @@ type Story = StoryObj<typeof meta>
 
 export const Breadcrumbs: Story = {
   render: () => (
-    <>
+    <Stack spacing="8">
       <BreadcrumbsComponent slug="/en/staking/" />
       <BreadcrumbsComponent slug="/en/staking/solo/" />
       <BreadcrumbsComponent slug="/en/roadmap/merge/issuance/" />
-    </>
+    </Stack>
   ),
 }

src/components/Breadcrumbs/index.tsx

@@ -68,45 +68,15 @@ const Breadcrumbs: React.FC<IProps> = ({
     .slice(startDepth)
 
   return (
-    <Breadcrumb
-      dir="auto"
-      position="relative"
-      zIndex="1"
-      mb={8}
-      spacing="2.5"
-      listProps={{
-        m: 0,
-        lineHeight: 1.6,
-        flexWrap: "wrap",
-      }}
-      {...restProps}
-    >
+    <Breadcrumb dir="auto" {...restProps}>
       {crumbs.map((crumb, idx) => {
         const isCurrentPage = slug === crumb.fullPath
         return (
-          <BreadcrumbItem
-            key={idx}
-            isCurrentPage={isCurrentPage}
-            color="body.medium"
-            letterSpacing="wider"
-            m={0}
-          >
+          <BreadcrumbItem key={idx} isCurrentPage={isCurrentPage}>
             <BreadcrumbLink
               as={BaseLink}
               to={crumb.fullPath}
               isPartiallyActive={isCurrentPage}
-              fontWeight="normal"
-              _hover={{ color: "primary.base", textDecor: "none" }}
-              _active={{ color: "primary.base" }}
-              sx={{
-                /*
-                 * Redundancy to ensure styling on the active
-                 * link is applied.
-                 */
-                '&[aria-current="page"]': {
-                  color: "primary.base",
-                },
-              }}
             >
               {crumb.text.toUpperCase()}
             </BreadcrumbLink>

src/components/Buttons/ButtonTwoLines/index.tsx

@@ -87,13 +87,20 @@ const ButtonTwoLines = (props: ButtonTwoLinesProps) => {
       >
         <Text
           as="span"
-          fontSize="md"
+          size="md"
           fontWeight={size === "md" ? "bold" : "normal"}
         >
           {mainText}
         </Text>
-        {/* TODO: use `size='xs'` instead when the Text theme is added  */}
-        <Text as="span" fontSize="xs">
+        <Text
+          as="span"
+          size="xs"
+          color={
+            rest.variant === "outline" || rest.isSecondary
+              ? "body.medium"
+              : undefined
+          }
+        >
           {helperText}
         </Text>
       </Stack>