Merge pull request #7721 from ethereum/ui-migrate-cardlist

UI migrate `CardList`

src/components/CardList.tsx

@@ -1,132 +1,110 @@
 import React, { ReactNode } from "react"
-import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
+import {
+  Box,
+  Flex,
+  HStack,
+  LinkBox,
+  LinkOverlay,
+  StackProps,
+} from "@chakra-ui/react"
 
-import Link from "./Link"
 import { ImageProp } from "../types"
-
-const Table = styled.div`
-  background-color: ${(props) => props.theme.colors.background};
-  width: 100%;
-`
-
-const Item = styled.div`
-  cursor: pointer;
-  text-decoration: none;
-  display: flex;
-  justify-content: space-between;
-  color: ${(props) => props.theme.colors.text} !important;
-  border: 1px solid ${(props) => props.theme.colors.border};
-  padding: 1rem;
-  width: 100%;
-  color: #000000;
-  margin-bottom: 1rem;
-  &:hover {
-    border-radius: 4px;
-    box-shadow: 0 0 1px ${(props) => props.theme.colors.primary};
-    background: ${(props) => props.theme.colors.tableBackgroundHover};
-  }
-`
-
-const ItemLink = styled(Link)`
-  text-decoration: none;
-  display: flex;
-  justify-content: space-between;
-  color: ${(props) => props.theme.colors.text} !important;
-  border: 1px solid ${(props) => props.theme.colors.border};
-  padding: 1rem;
-  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};
-  }
-`
-
-const ItemTitle = styled.div``
-
-const ItemDesc = styled.div`
-  font-size: ${(props) => props.theme.fontSizes.s};
-  margin-bottom: 0;
-  opacity: 0.6;
-`
-
-const LeftContainer = styled.div`
-  flex: 1 1 75%;
-  display: flex;
-  flex-direction: column;
-  margin-right: 2rem;
-`
-const RightContainer = styled.div`
-  flex: 1 0 25%;
-  display: flex;
-  align-items: center;
-  margin-right: 1rem;
-  flex-wrap: wrap;
-`
-
-const Image = styled(GatsbyImage)`
-  min-width: 20px;
-  margin-right: 1rem;
-  margin-top: 4px;
-`
+import * as url from "../utils/url"
+import Link from "./Link"
 
 export type CardListItem = {
   title?: ReactNode
   description?: ReactNode
   caption?: ReactNode
   link?: string
-  id?: string | number
+  id?: string
 } & ImageProp
 
 export interface IProps {
   content: Array<CardListItem>
-  className?: string
   clickHandler?: (idx: string | number) => void
 }
 
-const CardList: React.FC<IProps> = ({
-  content,
-  className,
-  clickHandler = () => null,
-}) => (
-  <Table className={className}>
+const CardContainer = (props: StackProps) => {
+  return (
+    <HStack
+      spacing={4}
+      p={4}
+      color="text"
+      border="1px solid"
+      borderColor="border"
+      _hover={{
+        borderRadius: "base",
+        boxShadow: "0 0 1px var(--eth-colors-primary)",
+        background: "tableBackgroundHover",
+      }}
+      {...props}
+    />
+  )
+}
+
+const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
+  const { title, description, caption, link, image, alt, ...rest } = props
+
+  const isLink = !!link
+  const isExternal = url.isExternal(link || "")
+
+  return (
+    <CardContainer {...rest}>
+      {image && <Box as={GatsbyImage} image={image} alt={alt} minW="20px" />}
+      <Flex flex="1 1 75%" direction="column">
+        {isLink ? (
+          <LinkOverlay
+            as={Link}
+            href={link}
+            hideArrow
+            color="text"
+            textDecoration="none"
+            _hover={{ textDecoration: "none" }}
+          >
+            {title}
+          </LinkOverlay>
+        ) : (
+          <Box>{title}</Box>
+        )}
+
+        <Box fontSize="sm" mb={0} opacity={0.6}>
+          {description}
+        </Box>
+      </Flex>
+      {caption && (
+        <Flex flex="1 0 25%" align="center" wrap="wrap" mr={4}>
+          <Box fontSize="sm" mb={0} opacity={0.6}>
+            {caption}
+          </Box>
+        </Flex>
+      )}
+      {isExternal && <Box>↗</Box>}
+    </CardContainer>
+  )
+}
+
+const CardList: React.FC<IProps> = ({ content, clickHandler = () => null }) => (
+  <Box bg="background" width="full">
     {content.map((listItem, idx) => {
-      const { title, description, caption, link, image, alt, id } = listItem
+      const { link, id } = listItem
       const isLink = !!link
-      return isLink ? (
-        <ItemLink key={id || idx} to={link}>
-          {image && <Image image={image} alt={alt} />}
-          <LeftContainer>
-            <ItemTitle>{title}</ItemTitle>
 
-            <ItemDesc>{description}</ItemDesc>
-          </LeftContainer>
-          {caption && (
-            <RightContainer>
-              <ItemDesc>{caption}</ItemDesc>
-            </RightContainer>
-          )}
-        </ItemLink>
+      return isLink ? (
+        <LinkBox key={id || idx}>
+          <Card {...listItem} />
+        </LinkBox>
       ) : (
-        <Item key={idx} onClick={() => clickHandler(idx)}>
-          {image && <Image image={image} alt={alt} />}
-          <LeftContainer>
-            <ItemTitle>{title}</ItemTitle>
-
-            <ItemDesc>{description}</ItemDesc>
-          </LeftContainer>
-          {caption && (
-            <RightContainer>
-              <ItemDesc>{caption}</ItemDesc>
-            </RightContainer>
-          )}
-        </Item>
+        <Card
+          key={idx}
+          onClick={() => clickHandler(idx)}
+          mb={4}
+          {...listItem}
+        />
       )
     })}
-  </Table>
+  </Box>
 )
 
 export default CardList

src/components/Link.tsx

@@ -9,12 +9,9 @@ import { BsQuestionSquareFill } from "react-icons/bs"
 
 import { Lang } from "../utils/languages"
 import { trackCustomEvent, EventOptions } from "../utils/matomo"
+import * as url from "../utils/url"
 import { Direction } from "../types"
 
-const HASH_PATTERN = /^#.*/
-
-const isHashLink = (to: string): boolean => HASH_PATTERN.test(to)
-
 export interface IBaseProps {
   to?: string
   href?: string
@@ -60,11 +57,11 @@ const Link: React.FC<IProps> = ({
   // this is to support the ButtonLink component which uses the `to` prop
   const to = (toProp || href)!
 
-  const isExternal = to.includes("http") || to.includes("mailto:")
-  const isHash = isHashLink(to)
-  const isGlossary = to.includes("glossary") && to.includes("#")
-  const isStatic = to.includes("static")
-  const isPdf = to.includes(".pdf")
+  const isExternal = url.isExternal(to)
+  const isHash = url.isHash(to)
+  const isGlossary = url.isGlossary(to)
+  const isStatic = url.isStatic(to)
+  const isPdf = url.isPdf(to)
 
   const eventOptions: EventOptions = {
     eventCategory: `External link`,

src/utils/url.ts

@@ -0,0 +1,14 @@
+const HASH_PATTERN = /^#.*/
+const isHashLink = (href: string): boolean => HASH_PATTERN.test(href)
+
+export const isExternal = (href: string): boolean =>
+  href.includes("http") || href.includes("mailto:")
+
+export const isHash = (href: string): boolean => isHashLink(href)
+
+export const isGlossary = (href: string): boolean =>
+  href.includes("glossary") && href.includes("#")
+
+export const isStatic = (href: string): boolean => href.includes("static")
+
+export const isPdf = (href: string): boolean => href.includes(".pdf")