Merge pull request #10908 from ethereum/staging

Deploy v7.18.0

Author: wackerow

.all-contributorsrc

@@ -10384,6 +10384,15 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "perriefidelis",
+      "name": "Peace Ojemeh",
+      "avatar_url": "https://avatars.githubusercontent.com/u/30669761?v=4",
+      "profile": "https://github.com/perriefidelis",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1624,6 +1624,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/MwitahJob"><img src="https://avatars.githubusercontent.com/u/136892656?v=4?s=100" width="100px;" alt="Mwitah "/><br /><sub><b>Mwitah </b></sub></a><br /><a href="#content-MwitahJob" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/TucksonDev"><img src="https://avatars.githubusercontent.com/u/105675159?v=4?s=100" width="100px;" alt="Tuckson"/><br /><sub><b>Tuckson</b></sub></a><br /><a href="#content-TucksonDev" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://twitter.com/_Akamig"><img src="https://avatars.githubusercontent.com/u/6278999?v=4?s=100" width="100px;" alt="Akamig"/><br /><sub><b>Akamig</b></sub></a><br /><a href="#content-Akamig" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/perriefidelis"><img src="https://avatars.githubusercontent.com/u/30669761?v=4?s=100" width="100px;" alt="Peace Ojemeh"/><br /><sub><b>Peace Ojemeh</b></sub></a><br /><a href="#content-perriefidelis" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>

package.json

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

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

@@ -39,6 +39,10 @@ const variantSolid = defineStyle({
   color: "background.base",
   bg: "primary.base",
   borderColor: "transparent",
+  _disabled: {
+    bg: "disabled",
+    color: "background.base",
+  },
   _hover: {
     color: "background.base",
     bg: "primary.hover",

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

@@ -0,0 +1,93 @@
+import { tableAnatomy } from "@chakra-ui/anatomy"
+import {
+  createMultiStyleConfigHelpers,
+  cssVar,
+  defineStyle,
+} from "@chakra-ui/react"
+import { defineMergeStyles, tableDefaultTheme } from "./components.utils"
+
+const { defineMultiStyleConfig, definePartsStyle } =
+  createMultiStyleConfigHelpers(tableAnatomy.keys)
+
+const $bgColor = cssVar("bg-color")
+
+const cellPadding = defineStyle({
+  p: 4,
+})
+
+const baseStyle = defineMergeStyles(
+  tableDefaultTheme.baseStyle,
+  definePartsStyle({
+    table: {
+      [$bgColor.variable]: "colors.background.highlight",
+      minW: "556px",
+    },
+    th: {
+      borderBottom: "1px",
+      borderColor: "body.base",
+      color: "body.base",
+      textTransform: "capitalize",
+      verticalAlign: "bottom",
+      ...cellPadding,
+    },
+    tr: {
+      "th, td": {
+        _notLast: {
+          borderRight: "2px",
+          borderRightColor: "background.base",
+        },
+      },
+    },
+    td: {
+      ...cellPadding,
+    },
+    tbody: {
+      tr: {
+        verticalAlign: "top",
+        _hover: {
+          /**
+           * Override specificity when hovering
+           * over even rows in 'striped' variant.
+           */
+          bg: $bgColor.reference,
+        },
+      },
+    },
+  })
+)
+
+const variantMinimalStriped = definePartsStyle({
+  tbody: {
+    tr: {
+      _even: {
+        bg: $bgColor.reference,
+      },
+    },
+  },
+})
+
+const variantSimpleStriped = definePartsStyle({
+  ...variantMinimalStriped,
+  thead: {
+    bg: $bgColor.reference,
+  },
+})
+
+const variantSimple = definePartsStyle({
+  thead: {
+    bg: $bgColor.reference,
+  },
+})
+
+export const Table = defineMultiStyleConfig({
+  baseStyle,
+  variants: {
+    minimal: {},
+    "minimal-striped": variantMinimalStriped,
+    simple: variantSimple,
+    "simple-striped": variantSimpleStriped,
+  },
+  defaultProps: {
+    variant: "simple",
+  },
+})

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

@@ -8,6 +8,7 @@ import { Modal } from "./Modal"
 import { Checkbox } from "./Checkbox"
 import { Progress } from "./Progress"
 import { Tabs } from "./Tabs"
+import { Table } from "./Table"
 import { Radio } from "./Radio"
 import { Select } from "./Select"
 import { Switch } from "./Switch"
@@ -24,7 +25,6 @@ import {
   headingDefaultTheme,
   menuDefaultTheme,
   spinnerDefaultTheme,
-  tableDefaultTheme,
 } from "./components.utils"
 
 export default {
@@ -51,7 +51,7 @@ export default {
   Select,
   Spinner: spinnerDefaultTheme,
   Switch,
-  Table: tableDefaultTheme,
+  Table,
   Tabs,
   Tag,
 }

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -60,7 +60,7 @@ const semanticTokens = {
       base: { _light: "white", _dark: "gray.700" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
-    disabled: { _light: "gray.300", _dark: "gray.500" },
+    disabled: { _light: "gray.400", _dark: "gray.500" },
     // ! Deprecating neutral
     neutral: { _light: "white", _dark: "gray.900" },
 

src/assets/use-cases/refi-regenerative-economy-diagram.png

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import BreadcrumbsComponent from "."
+
+type BreadcumbsType = typeof BreadcrumbsComponent
+
+const meta: Meta<BreadcumbsType> = {
+  title: "Molecules / Navigation / Breadcrumbs",
+  component: BreadcrumbsComponent,
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Breadcrumbs: Story = {
+  render: () => (
+    <>
+      <BreadcrumbsComponent slug="/en/staking/" />
+      <BreadcrumbsComponent slug="/en/staking/solo/" />
+      <BreadcrumbsComponent slug="/en/roadmap/merge/issuance/" />
+    </>
+  ),
+}

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -7,7 +7,7 @@ import {
   BreadcrumbProps,
 } from "@chakra-ui/react"
 
-import Link from "./Link"
+import Link from "../Link"
 
 export interface IProps extends BreadcrumbProps {
   slug: string
@@ -73,10 +73,10 @@ const Breadcrumbs: React.FC<IProps> = ({
       position="relative"
       zIndex="1"
       mb={8}
+      spacing="2.5"
       listProps={{
         m: 0,
-        lineHeight: 1,
-        rowGap: 1.5,
+        lineHeight: 1.6,
         flexWrap: "wrap",
       }}
       {...restProps}
@@ -87,10 +87,8 @@ const Breadcrumbs: React.FC<IProps> = ({
           <BreadcrumbItem
             key={idx}
             isCurrentPage={isCurrentPage}
-            color="textTableOfContents"
-            fontSize="sm"
+            color="body.medium"
             letterSpacing="wider"
-            lineHeight="140%"
             m={0}
           >
             <BreadcrumbLink
@@ -99,6 +97,15 @@ const Breadcrumbs: React.FC<IProps> = ({
               isPartiallyActive={isCurrentPage}
               _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>