Merge remote-tracking branch 'origin/dev' into fix/input-misalignment

Author: TylerAPfledderer

.all-contributorsrc

@@ -10432,6 +10432,97 @@
         "doc",
         "bug"
       ]
+    },
+    {
+      "login": "mteam88",
+      "name": "Matthew",
+      "avatar_url": "https://avatars.githubusercontent.com/u/84196639?v=4",
+      "profile": "https://mteam88.github.io",
+      "contributions": [
+        "bug",
+        "doc"
+      ]
+    },
+    {
+      "login": "avalidurl",
+      "name": "gokhan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/11991363?v=4",
+      "profile": "https://github.com/avalidurl",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "0xadri",
+      "name": "Adri",
+      "avatar_url": "https://avatars.githubusercontent.com/u/738533?v=4",
+      "profile": "https://github.com/0xadri",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "DSherryD",
+      "name": "Sherry.Du",
+      "avatar_url": "https://avatars.githubusercontent.com/u/130898085?v=4",
+      "profile": "https://github.com/DSherryD",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "FrancescoXX",
+      "name": "Francesco Ciulla",
+      "avatar_url": "https://avatars.githubusercontent.com/u/18360871?v=4",
+      "profile": "http://francescociulla.com",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "blazingrome",
+      "name": "blazingrome",
+      "avatar_url": "https://avatars.githubusercontent.com/u/136898739?v=4",
+      "profile": "https://github.com/blazingrome",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "etan-status",
+      "name": "Etan Kissling",
+      "avatar_url": "https://avatars.githubusercontent.com/u/89844309?v=4",
+      "profile": "https://github.com/etan-status",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "kritik-sah",
+      "name": "kritik sah",
+      "avatar_url": "https://avatars.githubusercontent.com/u/57076429?v=4",
+      "profile": "https://linktr.ee/kritik",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "Fuliggine",
+      "name": "Fuliggine",
+      "avatar_url": "https://avatars.githubusercontent.com/u/56844974?v=4",
+      "profile": "https://github.com/Fuliggine",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "Omsify",
+      "name": "Omsify",
+      "avatar_url": "https://avatars.githubusercontent.com/u/87442202?v=4",
+      "profile": "https://github.com/Omsify",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.storybook/i18next.ts

@@ -14,6 +14,7 @@ const ns = [
   "common",
   "glossary",
   "page-about",
+  "page-index",
   "page-upgrades",
   "page-developers-index",
 ]

README.md

@@ -121,7 +121,7 @@ To use an existing function locally you don't need to do anything. Just check th
 
 To create a new function, you will need to create two files:
 
-- One in `src/lambdas` where the logic will live. These are the ones that will be deployed to Netlify. These functions follow [this format](https://docs.netlify.com/functions/build-with-javascript/#synchronous-function-format).
+- One in `src/lambda` where the logic will live. These are the ones that will be deployed to Netlify. These functions follow [this format](https://docs.netlify.com/functions/build-with-javascript/#synchronous-function-format).
 - One in `src/api` that will be just a wrapper around the previous one in order to be compatible with Gatsby functions. More on the [Gatbsy docs](https://www.gatsbyjs.com/docs/reference/functions/getting-started/) for the format they follow.
 
 Typically, you will develop and test functions in the Gatsby context, by running `yarn start`.
@@ -1631,6 +1631,18 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/LadyDhaga"><img src="https://avatars.githubusercontent.com/u/106376368?v=4?s=100" width="100px;" alt="chinaman123"/><br /><sub><b>chinaman123</b></sub></a><br /><a href="#ideas-LadyDhaga" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://t.me/mevsinternet"><img src="https://avatars.githubusercontent.com/u/32142853?v=4?s=100" width="100px;" alt="Alex"/><br /><sub><b>Alex</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=z0rats" title="Documentation">📖</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Az0rats" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://mteam88.github.io"><img src="https://avatars.githubusercontent.com/u/84196639?v=4?s=100" width="100px;" alt="Matthew"/><br /><sub><b>Matthew</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Amteam88" title="Bug reports">🐛</a> <a href="https://github.com/ethereum/ethereum-org-website/commits?author=mteam88" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/avalidurl"><img src="https://avatars.githubusercontent.com/u/11991363?v=4?s=100" width="100px;" alt="gokhan"/><br /><sub><b>gokhan</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Aavalidurl" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xadri"><img src="https://avatars.githubusercontent.com/u/738533?v=4?s=100" width="100px;" alt="Adri"/><br /><sub><b>Adri</b></sub></a><br /><a href="#content-0xadri" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/DSherryD"><img src="https://avatars.githubusercontent.com/u/130898085?v=4?s=100" width="100px;" alt="Sherry.Du"/><br /><sub><b>Sherry.Du</b></sub></a><br /><a href="#content-DSherryD" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://francescociulla.com"><img src="https://avatars.githubusercontent.com/u/18360871?v=4?s=100" width="100px;" alt="Francesco Ciulla"/><br /><sub><b>Francesco Ciulla</b></sub></a><br /><a href="#content-FrancescoXX" title="Content">🖋</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/blazingrome"><img src="https://avatars.githubusercontent.com/u/136898739?v=4?s=100" width="100px;" alt="blazingrome"/><br /><sub><b>blazingrome</b></sub></a><br /><a href="#content-blazingrome" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/etan-status"><img src="https://avatars.githubusercontent.com/u/89844309?v=4?s=100" width="100px;" alt="Etan Kissling"/><br /><sub><b>Etan Kissling</b></sub></a><br /><a href="#content-etan-status" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://linktr.ee/kritik"><img src="https://avatars.githubusercontent.com/u/57076429?v=4?s=100" width="100px;" alt="kritik sah"/><br /><sub><b>kritik sah</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Akritik-sah" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Fuliggine"><img src="https://avatars.githubusercontent.com/u/56844974?v=4?s=100" width="100px;" alt="Fuliggine"/><br /><sub><b>Fuliggine</b></sub></a><br /><a href="#content-Fuliggine" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Omsify"><img src="https://avatars.githubusercontent.com/u/87442202?v=4?s=100" width="100px;" alt="Omsify"/><br /><sub><b>Omsify</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AOmsify" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

docs/ds-implementation.md

@@ -0,0 +1,43 @@
+# DS implementation guide
+
+This is a reference for implementing the new Design System components and styles defined in a public [Figma file](https://www.figma.com/file/NrNxGjBL0Yl1PrNrOT8G2B/ethereum.org-Design-System).
+
+This is part of our [Design System implementation epic](https://github.com/ethereum/ethereum-org-website/issues/9546). Currently we are implementing the v1, check the remaining tasks [here](https://github.com/ethereum/ethereum-org-website/issues/9548).
+
+## Basics
+
+- Use Chakra tokens for spacing, sizes, and breakpoints. [Chakra theme docs](https://chakra-ui.com/docs/styled-system/theme)
+- For colors use the semantic tokens defined in [this file](https://github.com/ethereum/ethereum-org-website/blob/dev/src/@chakra-ui/gatsby-plugin/semanticTokens.ts). These tokens will match the color variables used in the DS Figma file
+- Use as many Chakra components and utils as possible
+- Read the [Best Practices doc](https://github.com/ethereum/ethereum-org-website/blob/dev/docs/best-practices.md) for more examples and info
+
+**IMPORTANT**
+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.)
+```
+
+## Components creation/modification from the DS
+
+If you are implementing:
+
+- A base component (a component that already exists in the [Chakra components list](https://chakra-ui.com/docs/components/), for example, the button or inputs)
+  - Try to avoid creating a new component file `/ComponentA/index.tsx` if there is no additional or custom logic we need to add to them
+  - Create a theme file to override the default Chakra styles with the DS specs. See examples under the [Chakra theme folder](https://github.com/ethereum/ethereum-org-website/blob/dev/src/@chakra-ui/gatsby-plugin/components/)
+  - Create a `.stories.tsx` file under `src/components/BaseStories`
+- A new custom component (e.g. the PageHero)
+  - Use as many Chakra components as possible
+  - Avoid implementing previous implementation details or styles if Chakra offers a solution for that
+
+## Stories
+
+As defined in the new directory structure, each created or adapted component must have a story attached to it.
+
+- Follow the [Applying Storybook documentation](https://github.com/ethereum/ethereum-org-website/blob/dev/docs/applying-storybook.md)
+- Follow the [proposed Storybook structure](https://www.figma.com/file/Ne3iAassyfAcJ0AlgqioAP/DS-to-storybook-structure)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.19.2",
+  "version": "7.21.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",

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

@@ -10,6 +10,7 @@ const baseStyle = defineMergeStyles(defaultBaseStyle, {
   fontWeight: "initial",
   py: 1,
   px: 2,
+  lineHeight: "1.6rem",
   textTransform: "uppercase",
 })
 

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

@@ -0,0 +1,39 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+import { headingDefaultTheme } from "./components.utils"
+
+const { sizes: defaultSizes } = headingDefaultTheme
+
+const lineHeightScale = {
+  "4xl": "6xs",
+  "3xl": ["5xs", null, "6xs"],
+  "2xl": ["5xs", null, "4xs"],
+  xl: ["3xs", null, "2xs"],
+  lg: ["3xs", null, "2xs"],
+  md: "xs",
+  sm: "base",
+  xs: "base",
+}
+
+/*
+ * Instead of rewriting the entire sizes object, take the existing value from the
+ * default theme and replace the lineHeight values.
+ */
+const sizes = Object.entries(defaultSizes || {}).reduceRight(
+  (acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: defineStyle({
+        ...value,
+        lineHeight: lineHeightScale[key],
+      }),
+    }
+  },
+  {
+    ...defaultSizes,
+  }
+)
+
+export const Heading = defineStyleConfig({
+  ...headingDefaultTheme,
+  sizes,
+})

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

@@ -1,5 +1,7 @@
 import { defineStyleConfig } from "@chakra-ui/react"
+import components from "."
 import { defineMergeStyles, linkDefaultTheme } from "./components.utils"
+import { Text } from "./Text"
 
 export const Link = defineStyleConfig({
   baseStyle: defineMergeStyles(linkDefaultTheme.baseStyle, {
@@ -22,4 +24,5 @@ export const Link = defineStyleConfig({
       },
     },
   }),
+  sizes: Text.sizes,
 })

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

@@ -20,7 +20,6 @@ const baseStyle = defineMergeStyles(
   definePartsStyle({
     table: {
       [$bgColor.variable]: "colors.background.highlight",
-      minW: "556px",
     },
     th: {
       borderBottom: "1px",

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

@@ -0,0 +1,48 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+
+const sizes = {
+  "6xl": defineStyle({
+    fontSize: "6xl",
+    lineHeight: "4xs",
+  }),
+  "5xl": defineStyle({
+    fontSize: "5xl",
+    lineHeight: "4xs",
+  }),
+  "4xl": defineStyle({
+    fontSize: "4xl",
+    lineHeight: "sm",
+  }),
+  "3xl": defineStyle({
+    fontSize: "3xl",
+    lineHeight: "sm",
+  }),
+  "2xl": defineStyle({
+    fontSize: "2xl",
+    lineHeight: "sm",
+  }),
+  xl: defineStyle({
+    fontSize: "xl",
+    lineHeight: "sm",
+  }),
+  lg: defineStyle({
+    fontSize: "lg",
+    lineHeight: "base",
+  }),
+  md: defineStyle({
+    fontSize: "md",
+    lineHeight: "base",
+  }),
+  sm: defineStyle({
+    fontSize: "sm",
+    lineHeight: "base",
+  }),
+  xs: defineStyle({
+    fontSize: "xs",
+    lineHeight: "base",
+  }),
+}
+
+export const Text = defineStyleConfig({
+  sizes,
+})