[UI lib] Button, Link & ButtonLink components

gatsby-config.ts

@@ -194,7 +194,7 @@ const config: GatsbyConfig = {
     {
       resolve: "@chakra-ui/gatsby-plugin",
       options: {
-        resetCSS: false,
+        resetCSS: true,
         isUsingColorMode: true,
       },
     },

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

@@ -0,0 +1,46 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+export const Button: ComponentStyleConfig = {
+  baseStyle: {
+    fontWeight: "normal",
+    borderRadius: "base",
+    _hover: {
+      textDecoration: "none",
+      boxShadow: "primary",
+    },
+  },
+  sizes: {
+    md: {
+      h: 42,
+    },
+  },
+  variants: {
+    // solid is the default variant used by chakra
+    solid: {
+      color: "buttonColor",
+      bg: "primary",
+      border: 0,
+      _hover: {
+        bg: "primary",
+        opacity: 0.8,
+      },
+      _active: {
+        bg: "primaryActive",
+      },
+    },
+    outline: {
+      color: "text",
+      bg: "transparent",
+      borderColor: "text",
+      _hover: {
+        color: "primary",
+        bg: "transparent",
+        border: "1px",
+        borderColor: "primary",
+      },
+      _active: {
+        bg: "secondaryButtonBackgroundActive",
+      },
+    },
+  },
+}

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

@@ -0,0 +1,8 @@
+import type { ComponentStyleConfig } from "@chakra-ui/theme"
+
+export const Link: ComponentStyleConfig = {
+  baseStyle: {
+    color: "primary",
+    textDecoration: "underline",
+  },
+}

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

@@ -0,0 +1,2 @@
+export * from "./Link"
+export * from "./Button"

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

@@ -1,7 +1,18 @@
 import colors from "./colors"
+import shadows from "./shadows"
 
 const foundations = {
+  // breakpoints,
+  // zIndices,
+  // radii,
+  // blur,
   colors,
+  // ...typography,
+  // sizes,
+  shadows,
+  // space: spacing,
+  // borders,
+  // transition,
 }
 
 export default foundations

src/@chakra-ui/gatsby-plugin/foundations/shadows.ts

@@ -0,0 +1,6 @@
+const shadows = {
+  // using css variables bc shadows do not support color tokens yet
+  primary: `4px 4px 0px 0px var(--eth-colors-primaryLight)`,
+}
+
+export default shadows

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

@@ -31,9 +31,9 @@ const semanticTokens = {
 
     // Design System colors
     primary: { _light: "blue.500", _dark: "orange.500" },
+    primaryLight: { _light: "blue.100", _dark: "orange.100" },
     primaryDark: { _light: "blue.700", _dark: "orange.800" },
     primaryHover: { _light: "blue.300", _dark: "orange.300" },
-    primaryLight: { _light: "blue.100", _dark: "orange.100"},
     body: { _light: "grey.700", _dark: "grey.100" },
     bodyLight: { _light: "grey.500", _dark: "grey.100" },
     disabled: { _light: "grey.300", _dark: "grey.500" },

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

@@ -10,6 +10,9 @@ import styles from "./styles"
 // Foundational style overrides
 import foundations from "./foundations"
 
+// Component style overrides
+import * as components from "./components"
+
 import semanticTokens from "./semanticTokens"
 
 const config: ThemeConfig = {
@@ -23,6 +26,7 @@ const theme: ThemeOverride = {
   styles,
   ...foundations,
   semanticTokens,
+  components,
 }
 
 export default extendTheme(theme)

src/components/ActionCard.tsx

@@ -57,6 +57,7 @@ const Card = styled(Link)`
 
   &:hover,
   &:focus {
+    text-decoration: none;
     border-radius: 4px;
     box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.15);
     background: ${(props) => props.theme.colors.tableBackgroundHover};

src/components/BeaconChainActions.tsx

@@ -156,7 +156,7 @@ const BeaconChainActions: React.FC = () => {
           <StyledButtonLink to="https://launchpad.ethereum.org">
             <Translation id="get-started" />
           </StyledButtonLink>
-          <ButtonLink isSecondary to="/staking/">
+          <ButtonLink variant="outline" to="/staking/">
             <Translation id="page-upgrades-index-staking-learn" />
           </ButtonLink>
         </StyledCardLeft>
@@ -168,7 +168,7 @@ const BeaconChainActions: React.FC = () => {
             intl
           )}
         >
-          <ButtonLink isSecondary to="/upgrades/get-involved/">
+          <ButtonLink variant="outline" to="/upgrades/get-involved/">
             <Translation id="consensus-run-beacon-chain" />
           </ButtonLink>
         </StyledCardRight>

src/components/Breadcrumbs.tsx

@@ -39,6 +39,7 @@ const CrumbLink = styled(Link)`
   color: ${(props) => props.theme.colors.textTableOfContents};
 
   &:hover {
+    text-decoration: none;
     color: ${(props) => props.theme.colors.primary};
   }
 

src/components/Button.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { Button as ChakraButton, ButtonProps } from "@chakra-ui/react"
+
+import { scrollIntoView } from "../utils/scrollIntoView"
+
+export interface IProps extends ButtonProps {
+  toId?: string
+}
+
+const Button: React.FC<IProps> = ({ toId, children, ...props }) => {
+  const handleOnClick = () => {
+    if (!toId) {
+      return
+    }
+
+    scrollIntoView(toId)
+  }
+
+  return (
+    <ChakraButton onClick={handleOnClick} {...props}>
+      {children}
+    </ChakraButton>
+  )
+}
+
+export default Button

src/components/ButtonDropdown.tsx

@@ -98,6 +98,7 @@ const NavLink = styled(Link)`
   padding: 0.5rem;
   color: ${(props) => props.theme.colors.text};
   &:hover {
+    text-decoration: none;
     color: ${(props) => props.theme.colors.primary};
   }
 `

src/components/ButtonLink.tsx

@@ -1,123 +1,15 @@
 import React from "react"
-import styled from "@emotion/styled"
-import { margin, MarginProps } from "styled-system"
+import { Button, ButtonProps } from "@chakra-ui/react"
 
-import { scrollIntoView } from "../utils/scrollIntoView"
+import Link, { IBaseProps as ILinkProps } from "./Link"
 
-import Link, { IProps as ILinkProps } from "./Link"
+export interface IProps extends ILinkProps, ButtonProps {}
 
-const buttonStyling = `
-  text-decoration: none;
-  display: inline-block;
-  padding: 0.5rem 0.75rem;
-  font-size: 1rem;
-  border-radius: 0.25em;
-  text-align: center;
-  cursor: pointer;
-  ${margin}
-`
-
-const StyledLinkButton = styled(Link)`
-  ${buttonStyling}
-`
-
-const StyledScrollButton = styled.button`
-  ${buttonStyling}
-`
-
-const PrimaryLink = styled(StyledLinkButton)`
-  background-color: ${(props) => props.theme.colors.primary};
-  color: ${(props) => props.theme.colors.buttonColor} !important;
-  border: 1px solid transparent;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.primaryHover};
-    box-shadow: ${(props) => props.theme.colors.cardBoxShadow};
-  }
-  &:active {
-    background-color: ${(props) => props.theme.colors.primaryActive};
-  }
-`
-
-const SecondaryLink = styled(StyledLinkButton)`
-  color: ${(props) => props.theme.colors.text};
-  border: 1px solid ${(props) => props.theme.colors.text};
-  background-color: transparent;
-
-  &:hover {
-    color: ${(props) => props.theme.colors.primary};
-    border: 1px solid ${(props) => props.theme.colors.primary};
-    box-shadow: ${(props) => props.theme.colors.cardBoxShadow};
-  }
-  &:active {
-    background-color: ${(props) =>
-      props.theme.colors.secondaryButtonBackgroundActive};
-  }
-`
-
-const PrimaryScrollLink = styled(StyledScrollButton)`
-  color: ${(props) => props.theme.colors.buttonColor} !important;
-  background-color: ${(props) => props.theme.colors.primary};
-  border: 1px solid transparent;
-
-  &:hover {
-    background-color: ${(props) => props.theme.colors.primaryHover};
-    box-shadow: ${(props) => props.theme.colors.cardBoxShadow};
-  }
-  &:active {
-    background-color: ${(props) => props.theme.colors.primaryActive};
-  }
-`
-
-const SecondaryScrollLink = styled(StyledScrollButton)`
-  color: ${(props) => props.theme.colors.text};
-  border: 1px solid ${(props) => props.theme.colors.text};
-  background-color: transparent;
-
-  &:hover {
-    color: ${(props) => props.theme.colors.primary};
-    border: 1px solid ${(props) => props.theme.colors.primary};
-    box-shadow: ${(props) => props.theme.colors.cardBoxShadow};
-  }
-  &:active {
-    background-color: ${(props) =>
-      props.theme.colors.secondaryButtonBackgroundActive};
-  }
-`
-
-export interface IProps extends ILinkProps, MarginProps {
-  toId?: string
-  isSecondary?: boolean
-}
-
-const ButtonLink: React.FC<IProps> = ({
-  to,
-  toId,
-  isSecondary,
-  children,
-  className,
-  hideArrow = false,
-  ...props
-}) => {
-  const handleOnClick = () => {
-    if (!toId) {
-      return
-    }
-
-    scrollIntoView(toId)
-  }
-
-  const Link = isSecondary ? SecondaryLink : PrimaryLink
-  const ScrollLink = isSecondary ? SecondaryScrollLink : PrimaryScrollLink
-
-  return to ? (
-    <Link to={to} hideArrow={hideArrow} className={className} {...props}>
-      {children}
-    </Link>
-  ) : (
-    <ScrollLink onClick={handleOnClick} className={className} {...props}>
+const ButtonLink: React.FC<IProps> = ({ children, ...props }) => {
+  return (
+    <Button as={Link} textDecoration="none" {...props}>
       {children}
-    </ScrollLink>
+    </Button>
   )
 }
 

src/components/CardList.tsx

@@ -38,6 +38,7 @@ const ItemLink = styled(Link)`
   width: 100%;
   color: #000000;
   &:hover {
+    text-decoration: none;
     border-radius: 4px;
     box-shadow: 0 0 1px ${(props) => props.theme.colors.primary};
     background: ${(props) => props.theme.colors.tableBackgroundHover};

src/components/DataProductCard.tsx

@@ -36,6 +36,7 @@ const Card = styled(Link)`
   border: 1px solid ${(props) => props.theme.colors.lightBorder};
   text-decoration: none;
   &:hover {
+    text-decoration: none;
     box-shadow: ${(props) => props.theme.colors.tableBoxShadow};
     background: ${(props) => props.theme.colors.tableBackgroundHover};
     transition: transform 0.1s;

src/components/DocLink.tsx

@@ -25,6 +25,7 @@ const Container = styled(Link)<{ isExternal: boolean }>`
   color: ${({ theme }) => theme.colors.text};
   border: 1px solid ${({ theme }) => theme.colors.border};
   &:hover {
+    text-decoration: none;
     box-shadow: 0 0 1px ${({ theme }) => theme.colors.primary};
     background: ${({ theme }) => theme.colors.tableBackgroundHover};
     border-radius: 4px;