Merge pull request #9964 from ethereum/dev

Deploy v7.10.0

Author: wackerow

.storybook/main.js

@@ -3,13 +3,7 @@ const { propNames } = require("@chakra-ui/react")
 const { babelConfig } = require("./babel-storybook-config")
 
 module.exports = {
-  stories: [
-    {
-      directory: "../src/components",
-      titlePrefix: "Components",
-      files: "**/*.stories.tsx",
-    },
-  ],
+  stories: ["../src/components/**/*.stories.tsx"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -87,7 +81,4 @@ module.exports = {
       },
     },
   },
-  docs: {
-    autodocs: true,
-  },
 }

.storybook/preview.js

@@ -31,9 +31,13 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  backgrounds: {
+    disable: true,
+  },
   chakra: {
     theme,
   },
+  layout: "centered",
   // Modify viewport selection to match Chakra breakpoints (or custom breakpoints)
   viewport: {
     viewports: chakraBreakpointArray.reduce((prevVal, currVal) => {

package.json

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

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

@@ -65,8 +65,8 @@ export {
  * @param styleObjs - The following style objects to be merged
  */
 export function defineMergeStyles(
-  defaultTheming?: SystemStyleObject,
-  ...styleObjs: SystemStyleObject[] | undefined[]
-) {
+  defaultTheming?: SystemStyleObject | unknown,
+  ...styleObjs: SystemStyleObject[] | unknown[]
+): Record<string, SystemStyleObject> {
   return merge(defaultTheming, ...styleObjs)
 }

src/components/Banners/BugBountyBanner.tsx

@@ -112,18 +112,6 @@ const BeaconChainActions: React.FC = () => {
             <Translation id="page-upgrades-index-staking-learn" />
           </ButtonLink>
         </Card>
-        <Card
-          w="full"
-          mr={0}
-          ml={{ base: 0, md: 4 }}
-          emoji=":computer:"
-          title={t("consensus-run-beacon-chain")}
-          description={t("consensus-run-beacon-chain-desc")}
-        >
-          <ButtonLink variant="outline" to="/upgrades/get-involved/">
-            <Translation id="consensus-run-beacon-chain" />
-          </ButtonLink>
-        </Card>
       </Flex>
       <H3>
         <Translation id="consensus-explore" />

src/components/BeaconChainActions.tsx

@@ -1,80 +1,17 @@
 import React from "react"
-import styled from "@emotion/styled"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
+import { Flex, FlexProps, Heading, Image, Text } from "@chakra-ui/react"
 
 import Translation from "./Translation"
 import { TranslationKey } from "../utils/translations"
 
-const StyledCard = styled.div`
-  display: flex;
-  flex-direction: row-reverse;
-  background: ${({ theme }) => theme.colors.layer2Gradient};
-  padding: 3rem;
-  margin: 1rem;
-  margin-top: 6rem;
-  margin-bottom: 10rem;
-  border-radius: 4px;
-
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    flex-direction: column;
-    margin-bottom: 1rem;
-    margin: 4rem 2rem;
-  }
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    padding: 2rem;
-  }
-`
-
-const Content = styled.div`
-  padding-left: 2rem;
-  flex: 1 0 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    margin-top: 2rem;
-    padding-left: 1rem;
-    flex-direction: column;
-    width: 100%;
-  }
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    padding-left: 0;
-  }
-`
-
-const Description = styled.p`
-  font-size: 1.25rem;
-  width: 90%;
-  line-height: 140%;
-  margin-bottom: 2rem;
-  color: ${(props) => props.theme.colors.text200};
-`
-
-const Image = styled(GatsbyImage)<{ maximagewidth?: number }>`
-  align-self: center; /* prevents crop */
-  width: 100%;
-  max-width: ${(props) => `${props.maximagewidth}px`};
-  margin-top: -6rem;
-  margin-bottom: -6rem;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    margin-bottom: 0rem;
-    margin-top: -6rem;
-  }
-`
-
-const H2 = styled.h2`
-  margin-top: 0rem;
-`
-
-export interface IProps {
+export interface IProps extends FlexProps {
   children?: React.ReactNode
   image: IGatsbyImageData
   maxImageWidth?: number
   titleKey: TranslationKey
   descriptionKey: TranslationKey
   alt: string
-  className?: string
-  id?: string
 }
 
 const CalloutBanner: React.FC<IProps> = ({
@@ -84,26 +21,49 @@ const CalloutBanner: React.FC<IProps> = ({
   descriptionKey,
   alt,
   children,
-  className,
-  id,
+  ...restProps
 }) => (
-  <StyledCard className={className} id={id}>
+  <Flex
+    direction={{ base: "column", lg: "row-reverse" }}
+    bg="layer2Gradient"
+    p={{ base: 8, sm: 12 }}
+    borderRadius="base"
+    {...restProps}
+  >
     <Image
+      as={GatsbyImage}
       image={image}
       alt={alt}
-      maximagewidth={maxImageWidth}
       objectFit="contain"
+      alignSelf="center"
+      w="full"
+      maxW={`${maxImageWidth}px`}
+      mt={-24}
+      mb={{ base: 0, lg: -24 }}
     />
-    <Content>
-      <H2>
+    <Flex
+      flexGrow={1}
+      flexShrink={0}
+      flexBasis="50%"
+      direction="column"
+      justifyContent="center"
+      pl={{ base: 0, sm: 4, lg: 8 }}
+      w={{ base: "full", lg: "inherit" }}
+    >
+      <Heading
+        as="h2"
+        mt={0}
+        fontSize={{ base: "2xl", sm: "2rem" }}
+        lineHeight="1.4"
+      >
         <Translation id={titleKey} />
-      </H2>
-      <Description>
+      </Heading>
+      <Text fontSize="xl" w="90%" lineHeight="140%" mb={8} color="text200">
         <Translation id={descriptionKey} />
-      </Description>
+      </Text>
       {children}
-    </Content>
-  </StyledCard>
+    </Flex>
+  </Flex>
 )
 
 export default CalloutBanner

src/components/CalloutBanner.tsx

@@ -125,7 +125,7 @@ const PageMetadata: React.FC<IProps> = ({
   if (pathname.includes("/dapps/")) {
     ogImage = getSrc(ogImageDapps)
   }
-  if (pathname.includes("/upgrades/")) {
+  if (pathname.includes("/roadmap/")) {
     ogImage = getSrc(ogImageUpgrades)
   }
   if (image) {

src/components/PageMetadata.tsx

@@ -10,10 +10,6 @@ import Translation from "../Translation"
 import { trackCustomEvent } from "../../utils/matomo"
 import { getImage } from "../../utils/image"
 
-const StyledCallout = styled(CalloutBanner)`
-  margin: 4rem 0;
-`
-
 const ButtonContainer = styled.div`
   display: flex;
   gap: 1rem;
@@ -50,8 +46,10 @@ const StakingCommunityCallout: React.FC<IProps> = (props) => {
   `)
 
   return (
-    <StyledCallout
+    <CalloutBanner
       {...props}
+      mx={0}
+      my={16}
       image={getImage(image)!}
       alt={t("page-staking-image-alt")}
       titleKey={"page-staking-join-community"}
@@ -95,7 +93,7 @@ const StakingCommunityCallout: React.FC<IProps> = (props) => {
           <Translation id="rollup-component-website" />
         </StyledButtonLink>
       </ButtonContainer>
-    </StyledCallout>
+    </CalloutBanner>
   )
 }