Merge pull request #10991 from ethereum/staging

Deploy v7.19.2

.all-contributorsrc

@@ -10404,6 +10404,24 @@
         "content",
         "bug"
       ]
+    },
+    {
+      "login": "gunal-123",
+      "name": "Gunal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/103403219?v=4",
+      "profile": "https://github.com/gunal-123",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "LadyDhaga",
+      "name": "chinaman123",
+      "avatar_url": "https://avatars.githubusercontent.com/u/106376368?v=4",
+      "profile": "https://github.com/LadyDhaga",
+      "contributions": [
+        "ideas"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1626,6 +1626,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <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>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/woseK"><img src="https://avatars.githubusercontent.com/u/110729731?v=4?s=100" width="100px;" alt="woseK"/><br /><sub><b>woseK</b></sub></a><br /><a href="#content-woseK" title="Content">🖋</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AwoseK" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/gunal-123"><img src="https://avatars.githubusercontent.com/u/103403219?v=4?s=100" width="100px;" alt="Gunal"/><br /><sub><b>Gunal</b></sub></a><br /><a href="#content-gunal-123" title="Content">🖋</a></td>
+    </tr>
+    <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>
     </tr>
   </tbody>
 </table>

gatsby-browser.tsx

@@ -7,11 +7,6 @@
 import Prism from "prism-react-renderer/prism"
 ;(typeof global !== "undefined" ? global : window).Prism = Prism
 
-// FormatJS Polyfill imports - Used for intl number formatting
-import "@formatjs/intl-locale/polyfill"
-import "@formatjs/intl-numberformat/polyfill"
-import "@formatjs/intl-numberformat/locale-data/en"
-
 // Default languages included:
 // https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js
 require("prismjs/components/prism-solidity")

gatsby-ssr.tsx

@@ -18,21 +18,5 @@ export const onRenderBody = ({ setHeadComponents }: RenderBodyArgs) => {
       crossOrigin="anonymous"
       key="interFont"
     />,
-    <link
-      rel="preload"
-      href="/fonts/Inter-Regular.woff"
-      as="font"
-      type="font/woff"
-      crossOrigin="anonymous"
-      key="interFont"
-    />,
-    <link
-      rel="preload"
-      href="/fonts/IBMPlexMono-Regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossOrigin="anonymous"
-      key="interFont"
-    />,
   ])
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.19.1",
+  "version": "7.19.2",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",
@@ -15,8 +15,6 @@
     "@docsearch/react": "^3.3.3",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@formatjs/intl-locale": "^2.4.14",
-    "@formatjs/intl-numberformat": "^6.1.4",
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "algoliasearch": "^4.3.0",

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

@@ -10,17 +10,15 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
  */
 const ICON_SELECTOR = "& svg"
 
-const getBaseColor = (isSecondary: boolean) =>
-  !isSecondary ? "primary.base" : "body.base"
-
-const baseStyle = defineStyle((props) => ({
+const baseStyle = defineStyle({
   borderRadius: "base",
   border: "1px",
-  color: getBaseColor(props.isSecondary),
+  color: "primary.base",
   lineHeight: "1.6",
   transitionProperty: "common",
   transitionDuration: "normal",
   whiteSpace: "normal",
+  p: "unset",
   _focusVisible: {
     outline: "4px solid",
     outlineColor: "primary.hover",
@@ -33,7 +31,16 @@ const baseStyle = defineStyle((props) => ({
   _hover: {
     color: "primary.hover",
   },
-}))
+  "&[data-secondary='true']": {
+    color: "body.base",
+  },
+  "&.chakra-link": {
+    textDecoration: "none",
+    _hover: {
+      textDecoration: "none",
+    },
+  },
+})
 
 const variantSolid = defineStyle({
   color: "background.base",
@@ -68,7 +75,6 @@ const variantGhost = {
 
 const variantLink = defineStyle({
   borderColor: "transparent",
-  color: "primary.base",
   fontWeight: 700,
   textDecor: "underline",
   py: 0,
@@ -78,47 +84,29 @@ const variantLink = defineStyle({
   },
 })
 
-/**
- * @deprecated This is no longer needed. Styling for just the icon is not
- * unique compared to the variants used for text (as of the new DS)
- */
-const variantIcon = defineStyle({
-  appearance: "none",
-  background: "inherit",
-  padding: "initial",
-  border: 0,
-  color: "inherit",
-  boxShadow: "none",
-  _hover: {
-    color: "primary.base",
-    boxShadow: "none",
-  },
-})
-
 const sizes = {
-  md: {
-    py: "2 !important",
-    px: "4 !important",
+  md: defineStyle({
+    py: "2",
+    px: "4",
     [ICON_SELECTOR]: {
       fontSize: "2xl",
     },
-  },
-  sm: {
+  }),
+  sm: defineStyle({
     fontSize: "xs",
-    py: "1.5 !important",
-    px: "2 !important",
+    py: "1.5",
+    px: "2",
     [ICON_SELECTOR]: {
       fontSize: "md",
     },
-  },
+  }),
 }
 
 const variants = {
   solid: variantSolid,
   outline: variantOutline,
   ghost: variantGhost,
   link: variantLink,
-  icon: variantIcon,
 }
 
 export const Button = defineStyleConfig({

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

@@ -4,13 +4,22 @@ import { defineMergeStyles, linkDefaultTheme } from "./components.utils"
 export const Link = defineStyleConfig({
   baseStyle: defineMergeStyles(linkDefaultTheme.baseStyle, {
     color: "primary.base",
-    textDecoration: "underline",
-    _focus: {
-      boxShadow: "none",
-    },
+    textDecor: "underline",
+    textUnderlineOffset: "3px",
     _focusVisible: {
       boxShadow: "none",
-      outline: "auto",
+      outline: "2px solid",
+      outlineColor: "primary.hover",
+      outlineOffset: "2px",
+      borderRadius: "sm",
+    },
+    _hover: {
+      color: "primary.hover",
+    },
+    "&[data-inline-link]": {
+      _visited: {
+        color: "primary.visited",
+      },
     },
   }),
 })

src/components/ActionCard.tsx

@@ -13,7 +13,7 @@ import {
 } from "@chakra-ui/react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 
-import Link from "./Link"
+import { BaseLink } from "./Link"
 
 const linkBoxFocusStyles: BoxProps = {
   borderRadius: "base",
@@ -111,7 +111,7 @@ const ActionCard: React.FC<IProps> = ({
           lineHeight={1.4}
         >
           <LinkOverlay
-            as={Link}
+            as={BaseLink}
             color="text"
             hideArrow
             textDecoration="none"

src/components/Avatar/index.tsx

@@ -6,13 +6,13 @@ import {
   CenterProps,
   FlexProps,
   forwardRef,
-  Link,
   LinkBox,
   LinkOverlay,
   LinkProps,
   ThemingProps,
 } from "@chakra-ui/react"
 import { RxExternalLink } from "react-icons/rx"
+import { BaseLink } from "../Link"
 
 type AssignAvatarProps = Required<Pick<AvatarProps, "name" | "src">> &
   AvatarProps
@@ -44,7 +44,7 @@ const Avatar = forwardRef<AvatarLinkProps, "div" | "a">((props, ref) => {
     return (
       <LinkBox as={Center} ref={ref} flexDirection={_direction} columnGap="1">
         <LinkOverlay
-          as={Link}
+          as={BaseLink}
           data-peer
           display="inline-flex"
           textDecoration="none"
@@ -65,7 +65,7 @@ const Avatar = forwardRef<AvatarLinkProps, "div" | "a">((props, ref) => {
 
   return (
     <ChakraAvatar
-      as={Link}
+      as={BaseLink}
       ref={ref}
       showBorder
       {...avatarProps}

src/components/BannerNotification/DismissableBanner.stories.tsx

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+import DismissableBanner from "../Banners/DismissableBanner"
+
+export default {
+  component: DismissableBanner,
+} as Meta<typeof DismissableBanner>
+
+/**
+ * Story taken from DismissableBanner component
+ */
+const dismissableBannerStoryPageKey = "dismissableBannerStoryPageKey"
+const bannerText = "This is a dismissable banner"
+
+export const DismissableBannerStory: StoryObj<typeof DismissableBanner> = {
+  play: () => {
+    localStorage.setItem(dismissableBannerStoryPageKey, "false")
+  },
+  render: () => {
+    const children = <div>{bannerText}</div>
+    return (
+      <DismissableBanner
+        children={children}
+        storageKey={dismissableBannerStoryPageKey}
+      />
+    )
+  },
+}

src/components/BaseStories/Link.stories.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { Box, Center, ListItem, Text, UnorderedList } from "@chakra-ui/react"
+import { Meta, StoryObj } from "@storybook/react"
+import Link from "../Link"
+
+type LinkType = typeof Link
+
+const meta = {
+  title: "Molecules / Navigation / Links",
+  component: Link,
+  decorators: [
+    (Story) => (
+      <Center maxW="prose">
+        <Story />
+      </Center>
+    ),
+  ],
+} satisfies Meta<LinkType>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const MockParagraph = ({ to }: { to?: string }) => (
+  <Text>
+    Text body normal. Ethereum is open access to digital money and data-friendly
+    services for everyone – no matter your background or location. It's a{" "}
+    <Link to={to}>community-built</Link> technology behind the cryptocurrency
+    ether (ETH) and thousands of applications you can use today.
+  </Text>
+)
+
+export const InternalLink: Story = {
+  args: {
+    to: "#",
+  },
+  render: (args) => <MockParagraph {...args} />,
+}
+
+export const ExternalLink: Story = {
+  args: {
+    to: "https://example.com",
+  },
+  render: (args) => <MockParagraph {...args} />,
+}
+
+export const LinkList: Story = {
+  render: () => (
+    <Box>
+      <Text>
+        Text body normal. Ethereum is open access to digital money and
+        data-friendly services for everyone – no matter your background or
+        location. It's a community-built technology behind the cryptocurrency
+        ether (ETH) and thousands of applications you can use today.
+      </Text>
+      <UnorderedList>
+        {Array.from({ length: 9 }).map((_, idx) => (
+          <ListItem key={idx + 1}>
+            <Link
+              to={idx % 2 === 0 ? "https://example.com" : "#"}
+            >{`List Item ${idx % 2 === 0 ? "External" : "Internal"} ${
+              idx + 1
+            }`}</Link>
+          </ListItem>
+        ))}
+      </UnorderedList>
+    </Box>
+  ),
+}

src/components/Breadcrumbs/index.tsx

@@ -7,7 +7,7 @@ import {
   BreadcrumbProps,
 } from "@chakra-ui/react"
 
-import Link from "../Link"
+import { BaseLink } from "../Link"
 
 export interface IProps extends BreadcrumbProps {
   slug: string
@@ -92,9 +92,10 @@ const Breadcrumbs: React.FC<IProps> = ({
             m={0}
           >
             <BreadcrumbLink
-              as={Link}
+              as={BaseLink}
               to={crumb.fullPath}
               isPartiallyActive={isCurrentPage}
+              fontWeight="normal"
               _hover={{ color: "primary.base", textDecor: "none" }}
               _active={{ color: "primary.base" }}
               sx={{