Deploy v7.18.0

.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/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -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.tsx → src/components/Breadcrumbs/index.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>

src/components/Button/Button.stories.tsx

@@ -47,7 +47,12 @@ export const StyleVariants: Story = {
     <VStack spacing={4}>
       {variants.map((variant, idx) => {
         if (args.isSecondary && variant === "solid") return
-        return <Button key={idx} variant={variant} {...args} />
+        return (
+          <HStack spacing={4} key={idx}>
+            <Button variant={variant} {...args} />
+            <Button variant={variant} isDisabled {...args} />
+          </HStack>
+        )
       })}
     </VStack>
   ),

src/components/Nav/useNav.ts

@@ -70,6 +70,10 @@ export const useNav = ({ path }: { path: string }) => {
           text: t("decentralized-science"),
           to: "/desci/",
         },
+        {
+          text: t("regenerative-finance"),
+          to: "/refi/",
+        },
       ],
     },
     learn: {

src/components/PageHero.tsx

@@ -95,7 +95,9 @@ const PageHero: React.FC<IProps> = ({
             {subtitle}
           </Text>
           {buttons && (
-            <Wrap spacing={2} overflow="visible">
+            // FIXME: remove the `ul` override once removed the corresponding
+            // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
+            <Wrap spacing={2} overflow="visible" sx={{ ul: { m: 0 } }}>
               {buttons.map((button, idx) => {
                 if (isButtonLink(button)) {
                   return (

src/components/Quiz/QuizzesModal.tsx

@@ -18,7 +18,7 @@ const QuizzesModal: React.FC<IProps> = ({ children, ...rest }) => {
 
   const statusColor =
     quizStatus === "neutral"
-      ? "white"
+      ? "neutral"
       : quizStatus === "success"
       ? "success.light"
       : "error.light"
@@ -30,10 +30,7 @@ const QuizzesModal: React.FC<IProps> = ({ children, ...rest }) => {
       scrollBehavior="inside"
       {...rest}
     >
-      <ModalOverlay
-        bg="blackAlpha.700"
-        display={{ base: "none", md: "block" }}
-      />
+      <ModalOverlay bg="blackAlpha.700" hideBelow="md" />
 
       <ModalContent justifyContent="center" bg={statusColor}>
         <ModalCloseButton size="lg" p={6} zIndex={1} />

src/components/Table/index.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import {
+  Table as ChakraTable,
+  TableContainer,
+  Td,
+  Th,
+  Tr,
+  ThemingProps,
+  Tbody,
+  Thead,
+} from "@chakra-ui/react"
+import { MDXProviderComponentsProp } from "@mdx-js/react"
+
+/*
+ * TODO: Currently, there are cell spacing issues with some table content.
+ * Prefer `layout="fixed"` in the future when content has been addressed
+ * to provide equal cell widths.
+ */
+
+interface TableProps extends ThemingProps<"Table"> {
+  children: React.ReactNode
+}
+
+const Table = (props: TableProps) => {
+  const { variant, ...rest } = props
+  return (
+    <TableContainer whiteSpace="normal">
+      <ChakraTable variant={variant} {...rest} />
+    </TableContainer>
+  )
+}
+
+export const mdxTableComponents: MDXProviderComponentsProp = {
+  table: Table,
+  th: ({ align, ...rest }) => <Th textAlign={align} {...rest} />,
+  td: ({ align, ...rest }) => <Td textAlign={align} {...rest} />,
+  tr: (props) => <Tr {...props} />,
+  tbody: (props) => <Tbody {...props} />,
+  thead: (props) => <Thead {...props} />,
+}
+
+export default Table