From 65914551502044ec4dca69d696e996bb8a4679b7 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Mon, 5 Sep 2022 23:59:29 -0300 Subject: [PATCH 1/6] initial migration on CardList --- src/components/CardList.tsx | 177 ++++++++++++++++-------------------- 1 file changed, 80 insertions(+), 97 deletions(-) diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx index ab44363678e..c1e09c87e8e 100644 --- a/src/components/CardList.tsx +++ b/src/components/CardList.tsx @@ -1,78 +1,10 @@ import React, { ReactNode } from "react" -import styled from "@emotion/styled" import { GatsbyImage } from "gatsby-plugin-image" +import { Box, Flex } 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; -` - export type CardListItem = { title?: ReactNode description?: ReactNode @@ -83,50 +15,101 @@ export type CardListItem = { export interface IProps { content: Array - className?: string clickHandler?: (idx: string | number) => void } -const CardList: React.FC = ({ - content, - className, - clickHandler = () => null, -}) => ( - +const CardList: React.FC = ({ content, clickHandler = () => null }) => ( + {content.map((listItem, idx) => { const { title, description, caption, link, image, alt, id } = listItem const isLink = !!link return isLink ? ( - - {image && } - - {title} + + {image && ( + + )} + + {title} - {description} - + + {description} + + {caption && ( - - {caption} - + + + {caption} + + )} - + ) : ( - clickHandler(idx)}> - {image && } - - {title} + clickHandler(idx)} + textDecoration="none" + justify="space-between" + p={4} + mb={4} + color="text" + border="1px solid" + borderColor="border" + _hover={{ + borderRadius: "base", + boxShadow: "0 0 1px var(--eth-colors-primary)", + background: "tableBackgroundHover", + }} + > + {image && ( + + )} + + {title} - {description} - + + {description} + + {caption && ( - - {caption} - + + + {caption} + + )} - + ) })} -
+ ) export default CardList From 523ae6254057d4ea6b344b32c8a35974b5c68229 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 6 Sep 2022 00:11:43 -0300 Subject: [PATCH 2/6] use link overlay for a11y --- src/components/CardList.tsx | 100 ++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 55 deletions(-) diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx index c1e09c87e8e..3e1621b4ae9 100644 --- a/src/components/CardList.tsx +++ b/src/components/CardList.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react" import { GatsbyImage } from "gatsby-plugin-image" -import { Box, Flex } from "@chakra-ui/react" +import { Box, Flex, LinkBox, LinkOverlay } from "@chakra-ui/react" import Link from "./Link" import { ImageProp } from "../types" @@ -18,70 +18,60 @@ export interface IProps { clickHandler?: (idx: string | number) => void } +const CardContainer = (props) => { + return ( + + ) +} + const CardList: React.FC = ({ content, clickHandler = () => null }) => ( {content.map((listItem, idx) => { const { title, description, caption, link, image, alt, id } = listItem const isLink = !!link return isLink ? ( - - {image && ( - - )} - - {title} + + + {image && ( + + )} + + {title} - - {description} - - - {caption && ( - - {caption} + {description} - )} - + {caption && ( + + + {caption} + + + )} + + ) : ( - clickHandler(idx)} - textDecoration="none" - justify="space-between" - p={4} - mb={4} - color="text" - border="1px solid" - borderColor="border" - _hover={{ - borderRadius: "base", - boxShadow: "0 0 1px var(--eth-colors-primary)", - background: "tableBackgroundHover", - }} - > + clickHandler(idx)} mb={4}> {image && ( = ({ content, clickHandler = () => null }) => ( )} - + ) })} From 59178a483c78d6a3923717279d7619e2885a60a4 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 6 Sep 2022 00:25:37 -0300 Subject: [PATCH 3/6] refactor --- src/components/CardList.tsx | 99 +++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 54 deletions(-) diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx index 3e1621b4ae9..29dc7e1d8f0 100644 --- a/src/components/CardList.tsx +++ b/src/components/CardList.tsx @@ -2,7 +2,6 @@ import React, { ReactNode } from "react" import { GatsbyImage } from "gatsby-plugin-image" import { Box, Flex, LinkBox, LinkOverlay } from "@chakra-ui/react" -import Link from "./Link" import { ImageProp } from "../types" export type CardListItem = { @@ -36,67 +35,59 @@ const CardContainer = (props) => { ) } +const Card = (props) => { + const { title, description, caption, link, image, alt } = props + + const isLink = !!link + const Title = isLink ? LinkOverlay : Box + + return ( + + {image && ( + + )} + + {title} + + + {description} + + + {caption && ( + + + {caption} + + + )} + + ) +} + const CardList: React.FC = ({ content, clickHandler = () => null }) => ( {content.map((listItem, idx) => { - const { title, description, caption, link, image, alt, id } = listItem + const { link, id } = listItem const isLink = !!link + return isLink ? ( - - {image && ( - - )} - - {title} - - - {description} - - - {caption && ( - - - {caption} - - - )} - + ) : ( - clickHandler(idx)} mb={4}> - {image && ( - - )} - - {title} - - - {description} - - - {caption && ( - - - {caption} - - - )} - + clickHandler(idx)} + mb={4} + {...listItem} + /> ) })} From a3a6b3188e7d91b6135aa7877d71242199e18124 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 6 Sep 2022 10:09:55 -0300 Subject: [PATCH 4/6] fix types --- src/components/CardList.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx index 29dc7e1d8f0..13f69c7ca01 100644 --- a/src/components/CardList.tsx +++ b/src/components/CardList.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react" import { GatsbyImage } from "gatsby-plugin-image" -import { Box, Flex, LinkBox, LinkOverlay } from "@chakra-ui/react" +import { Box, Flex, FlexProps, LinkBox, LinkOverlay } from "@chakra-ui/react" import { ImageProp } from "../types" @@ -9,7 +9,7 @@ export type CardListItem = { description?: ReactNode caption?: ReactNode link?: string - id?: string | number + id?: string } & ImageProp export interface IProps { @@ -17,7 +17,7 @@ export interface IProps { clickHandler?: (idx: string | number) => void } -const CardContainer = (props) => { +const CardContainer = (props: FlexProps) => { return ( { ) } -const Card = (props) => { - const { title, description, caption, link, image, alt } = props +const Card = (props: CardListItem & Omit) => { + const { title, description, caption, link, image, alt, ...rest } = props const isLink = !!link const Title = isLink ? LinkOverlay : Box return ( - + {image && ( Date: Tue, 6 Sep 2022 11:16:36 -0300 Subject: [PATCH 5/6] display arrow icon on external links --- src/components/CardList.tsx | 61 +++++++++++++++++++++++++------------ 1 file changed, 42 insertions(+), 19 deletions(-) diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx index 13f69c7ca01..42df945c55e 100644 --- a/src/components/CardList.tsx +++ b/src/components/CardList.tsx @@ -1,14 +1,24 @@ import React, { ReactNode } from "react" import { GatsbyImage } from "gatsby-plugin-image" -import { Box, Flex, FlexProps, LinkBox, LinkOverlay } from "@chakra-ui/react" +import { + Box, + Flex, + HStack, + LinkBox, + LinkOverlay, + StackProps, + Text, +} from "@chakra-ui/react" import { ImageProp } from "../types" +import Link from "./Link" export type CardListItem = { title?: ReactNode description?: ReactNode caption?: ReactNode link?: string + isExternal: boolean id?: string } & ImageProp @@ -17,11 +27,11 @@ export interface IProps { clickHandler?: (idx: string | number) => void } -const CardContainer = (props: FlexProps) => { +const CardContainer = (props: StackProps) => { return ( - { ) } -const Card = (props: CardListItem & Omit) => { - const { title, description, caption, link, image, alt, ...rest } = props +const Card = (props: CardListItem & Omit) => { + const { + title, + description, + caption, + link, + image, + alt, + isExternal = true, + ...rest + } = props const isLink = !!link - const Title = isLink ? LinkOverlay : Box return ( - {image && ( - - )} - - {title} + {image && } + + {isLink ? ( + + {title} + + ) : ( + {title} + )} {description} @@ -67,6 +89,7 @@ const Card = (props: CardListItem & Omit) => { )} + {isExternal && ↗} ) } From 82190f9b52de6fb8fd64bd88e3f81ab0b628e815 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 6 Sep 2022 11:31:41 -0300 Subject: [PATCH 6/6] refactor url util functions --- src/components/CardList.tsx | 17 ++++------------- src/components/Link.tsx | 15 ++++++--------- src/utils/url.ts | 14 ++++++++++++++ 3 files changed, 24 insertions(+), 22 deletions(-) create mode 100644 src/utils/url.ts diff --git a/src/components/CardList.tsx b/src/components/CardList.tsx index 42df945c55e..cc27069d997 100644 --- a/src/components/CardList.tsx +++ b/src/components/CardList.tsx @@ -7,10 +7,10 @@ import { LinkBox, LinkOverlay, StackProps, - Text, } from "@chakra-ui/react" import { ImageProp } from "../types" +import * as url from "../utils/url" import Link from "./Link" export type CardListItem = { @@ -18,7 +18,6 @@ export type CardListItem = { description?: ReactNode caption?: ReactNode link?: string - isExternal: boolean id?: string } & ImageProp @@ -46,18 +45,10 @@ const CardContainer = (props: StackProps) => { } const Card = (props: CardListItem & Omit) => { - const { - title, - description, - caption, - link, - image, - alt, - isExternal = true, - ...rest - } = props + const { title, description, caption, link, image, alt, ...rest } = props const isLink = !!link + const isExternal = url.isExternal(link || "") return ( @@ -89,7 +80,7 @@ const Card = (props: CardListItem & Omit) => { )} - {isExternal && ↗} + {isExternal && ↗} ) } diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 56c468a0e10..f820e9282f9 100644 --- a/src/components/Link.tsx +++ b/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 LinkWrapper: React.FC = ({ // 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`, diff --git a/src/utils/url.ts b/src/utils/url.ts new file mode 100644 index 00000000000..c6a83b988ec --- /dev/null +++ b/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")