chore: add button and link variants

2 years ago · 217410852f
parent d1ee8d02ff
commit 217410852f
6 changed files with 74 additions and 80 deletions
--- a/src/components/UI/homepage/HomeSection.tsx
+++ b/src/components/UI/homepage/HomeSection.tsx
@ -6,7 +6,7 @@ interface Props {
  imgSrc?: string;
  imgAltText?: string;
  sectionTitle: string;
-  buttonLabel: string;
+  linkLabel: string;
  buttonHref: string;
  children?: React.ReactNode;
 }
@ -15,7 +15,7 @@ export const HomeSection: FC<Props> = ({
  imgSrc,
  imgAltText,
  sectionTitle,
-  buttonLabel,
+  linkLabel,
  buttonHref,
  children
 }) => {
@ -51,29 +51,8 @@ export const HomeSection: FC<Props> = ({

      <Stack sx={{ mt: '0 !important' }}>
        <NextLink href={buttonHref} passHref>
-          <Link
-            color='brand.light.primary'
-            bg='green.50'
-            _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
-            _focus={{
-              textDecoration: 'none',
-              bg: 'brand.light.primary',
-              color: 'yellow.50',
-              boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
-            }}
-            _active={{ textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }}
-            isExternal={buttonHref.startsWith('http')}
-          >
-            <Text
-              fontFamily='"JetBrains Mono", monospace'
-              // TODO: move to theme colors
-              fontWeight={700}
-              textTransform='uppercase'
-              textAlign='center'
-              p={4}
-            >
-              {buttonLabel}
-            </Text>
+          <Link variant='secondary' isExternal={buttonHref.startsWith('http')}>
+            <Text textStyle='home-section-link-label'>{linkLabel}</Text>
          </Link>
        </NextLink>
      </Stack>
--- a/src/components/UI/homepage/QuickLinks.tsx
+++ b/src/components/UI/homepage/QuickLinks.tsx
@ -21,13 +21,11 @@ export const QuickLinks: FC = () => {
          borderColor='brand.light.primary'
        >
          <Stack p={4} h='100%'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+            <Text textStyle='quick-link-text' mb={-1}>
              Don&apos;t know where to start?
            </Text>

-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
-              We can help.
-            </Text>
+            <Text textStyle='quick-link-text'>We can help.</Text>
          </Stack>
        </GridItem>
        <GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
@ -52,19 +50,7 @@ export const QuickLinks: FC = () => {
                h='100%'
                p={4}
              >
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  fontWeight={700}
-                  textTransform='uppercase'
-                  textAlign='center'
-                  color='brand.light.primary'
-                  _groupHover={{ color: 'yellow.50' }}
-                  _groupActive={{ color: 'yellow.50' }}
-                  _groupFocus={{ color: 'yellow.50' }}
-                >
-                  Get started
-                </Text>
+                <Text textStyle='quick-link-label'>Get started</Text>
              </Stack>
            </Link>
          </NextLink>
@ -77,13 +63,11 @@ export const QuickLinks: FC = () => {
          borderColor='brand.light.primary'
        >
          <Stack p={4} h='100%'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+            <Text textStyle='quick-link-text' mb={-1}>
              Have doubts?
            </Text>

-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
-              Check the FAQ section in the documentation.
-            </Text>
+            <Text textStyle='quick-link-text'>Check the FAQ section in the documentation.</Text>
          </Stack>
        </GridItem>
        <GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
@ -93,21 +77,22 @@ export const QuickLinks: FC = () => {
                data-group
                bg='green.50'
                _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
+                _focus={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.primary',
+                  color: 'yellow.50',
+                  boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+                }}
+                _active={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.secondary',
+                  color: 'yellow.50'
+                }}
                justifyContent='center'
                h='100%'
                p={4}
              >
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  fontWeight={700}
-                  textTransform='uppercase'
-                  textAlign='center'
-                  color='brand.light.primary'
-                  _groupHover={{ color: 'yellow.50' }}
-                >
-                  Go to the FAQ
-                </Text>
+                <Text textStyle='quick-link-label'>Go to the FAQ</Text>
              </Stack>
            </Link>
          </NextLink>
@ -116,13 +101,11 @@ export const QuickLinks: FC = () => {
        {/* how to contribute */}
        <GridItem borderRight='2px solid' borderColor='brand.light.primary'>
          <Stack p={4} h='100%'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+            <Text textStyle='quick-link-text' mb={-1}>
              Want to know how to contribute?
            </Text>

-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
-              Get more information in the documentation.
-            </Text>
+            <Text textStyle='quick-link-text'>Get more information in the documentation.</Text>
          </Stack>
        </GridItem>
        <GridItem>
@ -132,21 +115,22 @@ export const QuickLinks: FC = () => {
                data-group
                bg='green.50'
                _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
+                _focus={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.primary',
+                  color: 'yellow.50',
+                  boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+                }}
+                _active={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.secondary',
+                  color: 'yellow.50'
+                }}
                justifyContent='center'
                h='100%'
                p={4}
              >
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to text style
-                  fontWeight={700}
-                  textTransform='uppercase'
-                  textAlign='center'
-                  color='brand.light.primary'
-                  _groupHover={{ color: 'yellow.50' }}
-                >
-                  How to contribute
-                </Text>
+                <Text textStyle='quick-link-label'>How to contribute</Text>
              </Stack>
            </Link>
          </NextLink>
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@ -26,7 +26,7 @@ const HomePage: NextPage = ({}) => {
            imgSrc='/images/pages/gopher-home-front.svg'
            imgAltText='Gopher greeting'
            sectionTitle='What is Geth'
-            buttonLabel='Get started with Geth'
+            linkLabel='Get started with Geth'
            buttonHref={`${DOCS_PAGE}/getting-started`}
          >
            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
@ -100,7 +100,7 @@ const HomePage: NextPage = ({}) => {
            imgSrc='/images/pages/glyph-home-light.svg'
            imgAltText='Ethereum glyph'
            sectionTitle='What is Ethereum'
-            buttonLabel='Learn more on Ethereum.org'
+            linkLabel='Learn more on Ethereum.org'
            buttonHref={ETHEREUM_ORG_URL}
          >
            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
@ -115,7 +115,7 @@ const HomePage: NextPage = ({}) => {
            imgSrc='/images/pages/gopher-home-nodes.svg'
            imgAltText='Gopher staring at nodes'
            sectionTitle='Why run a node?'
-            buttonLabel='Read more about running a node'
+            linkLabel='Read more about running a node'
            buttonHref={ETHEREUM_ORG_RUN_A_NODE_URL}
          >
            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
@ -132,7 +132,7 @@ const HomePage: NextPage = ({}) => {
          {/* SECTION:Contribute to Geth */}
          <HomeSection
            sectionTitle='Contribute to Geth'
-            buttonLabel='Read our contribution guidelines'
+            linkLabel='Read our contribution guidelines'
            buttonHref={CONTRIBUTING_PAGE}
          >
            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
@ -165,7 +165,7 @@ const HomePage: NextPage = ({}) => {
          {/* SECTION: About the Team */}
          <HomeSection
            sectionTitle='About the Team'
-            buttonLabel='Read more about the Ethereum Foundation'
+            linkLabel='Read more about the Ethereum Foundation'
            buttonHref={ETHEREUM_FOUNDATION_URL}
          >
            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
--- a/src/theme/components/Link.ts
+++ b/src/theme/components/Link.ts
@ -0,0 +1,16 @@
+export const Link = {
+  variants: {
+    secondary: {
+      color: 'brand.light.primary',
+      bg: 'green.50',
+      _hover: { textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' },
+      _focus: {
+        textDecoration: 'none',
+        bg: 'brand.light.primary',
+        color: 'yellow.50',
+        boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+      },
+      _active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }
+    }
+  }
+};
--- a/src/theme/components/index.ts
+++ b/src/theme/components/index.ts
@ -1 +1,2 @@
 export * from './Button';
+export * from './Link';
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@ -1,12 +1,13 @@
 import { extendTheme } from '@chakra-ui/react';

 import { colors, sizes } from './foundations';
-import { Button } from './components';
+import { Button, Link } from './components';

 const overrides = {
  colors,
  components: {
-    Button
+    Button,
+    Link
  },
  sizes,
  styles: {
@ -16,7 +17,6 @@ const overrides = {
      }
    })
  },
-  // TODO: fix textStyles
  textStyles: {
    h1: {
      fontFamily: '"JetBrains Mono", monospace',
@ -47,6 +47,20 @@ const overrides = {
      fontWeight: 700,
      textTransform: 'uppercase'
    },
+    'quick-link-text': {
+      fontFamily: '"Inter", sans-serif',
+      lineHeight: '26px'
+    },
+    'quick-link-label': {
+      fontFamily: '"JetBrains Mono", monospace',
+      fontWeight: 700,
+      textTransform: 'uppercase',
+      textAlign: 'center',
+      color: 'brand.light.primary',
+      _groupHover: { color: 'yellow.50' },
+      _groupActive: { color: 'yellow.50' },
+      _groupFocus: { color: 'yellow.50' }
+    },
    'hero-text-small': {
      fontSize: '13px',
      fontFamily: '"Inter", sans-serif'