Skip to content

Chakra UI: Migrate Action card #8009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
corwintines merged 12 commits into from
Mar 27, 2023
Merged

Chakra UI: Migrate Action card #8009

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bc3e13d
chore(actionCard): use chakra title & heading
nikkhielseath Sep 24, 2022
2f0eb48
chore(actionCard): use chakra box
nikkhielseath Sep 24, 2022
4a76a84
chore(imageWrapper): use chakra flex
nikkhielseath Sep 24, 2022
9f8df89
chore(card): use chakra props to customise link
nikkhielseath Sep 24, 2022
e8adc7a
fix(linkFocusStyle): define correct type
nikkhielseath Nov 5, 2022
1fb7316
refactor(actionCard): use Link Box & Overlay
nikkhielseath Nov 5, 2022
69f7f1a
refactor(actionCardImage): use chakra image
nikkhielseath Nov 5, 2022
70159a0
fix: strings without braces
nikkhielseath Nov 5, 2022
8c9acfe
refactor(description): color instead of opacity
nikkhielseath Jan 28, 2023
093c2b6
fix(ImageWrapper): use correct breakpoints
nikkhielseath Jan 28, 2023
c4d0f04
Update src/components/ActionCard.tsx
corwintines Feb 21, 2023
cfdcf29
Refactor Image component
corwintines Feb 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 90 additions & 74 deletions src/components/ActionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,30 @@
import React, { ReactNode } from "react"
import styled from "@emotion/styled"
import {
Box,
Flex,
Text,
Heading,
BoxProps,
LinkBox,
LinkOverlay,
Image,
useColorModeValue,
} from "@chakra-ui/react"
import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"

import Link from "./Link"

const Content = styled.div`
padding: 1.5rem;
`

const Description = styled.p`
opacity: 0.8;
margin-bottom: 0rem;
`

const ChildrenContainer = styled.div`
margin-top: 2rem;
`

const ImageWrapper = styled.div<{
isRight: boolean | undefined
isBottom: boolean | undefined
}>`
display: flex;
flex-direction: row;
justify-content: ${(props) => (props.isRight ? `flex-end` : `center`)};
align-items: ${(props) => (props.isBottom ? `flex-end` : `center`)};
background: ${(props) => props.theme.colors.cardGradient};
box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
min-height: 260px;
`

const Title = styled.h3`
margin-top: 0.5rem;
margin-bottom: 1rem;
`

const Image = styled(GatsbyImage)`
width: 100%;
height: 100%;
min-width: 100px;
min-height: 100px;
max-width: 372px;
max-height: 257px;
@media (max-width: ${(props) => props.theme.breakpoints.s}) {
max-width: 311px;
}
`

const Card = styled(Link)`
text-decoration: none;
flex: 1 1 372px;
color: ${(props) => props.theme.colors.text};
box-shadow: 0px 14px 66px rgba(0, 0, 0, 0.07),
0px 10px 17px rgba(0, 0, 0, 0.03), 0px 4px 7px rgba(0, 0, 0, 0.05);
margin: 1rem;
const linkBoxFocusStyles: BoxProps = {
borderRadius: "base",
boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
bg: "tableBackgroundHover",
transition: "transform 0.1s",
transform: "scale(1.02)",
}

&: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};
transition: transform 0.1s;
transform: scale(1.02);
}
`
const linkFocusStyles: BoxProps = {
textDecoration: "none",
}

export interface IProps {
children?: React.ReactNode
Expand All @@ -90,25 +50,81 @@ const ActionCard: React.FC<IProps> = ({
isBottom = true,
}) => {
const isImageURL = typeof image === "string"
const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")

return (
<Card to={to} className={className} hideArrow={true}>
<ImageWrapper
isRight={isRight}
isBottom={isBottom}
<LinkBox
Copy link
Contributor Author

@nikkhielseath nikkhielseath Nov 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have divided the Link styles between LinkBox and Overlay.

boxShadow="
0px 14px 66px rgba(0, 0, 0, 0.07),
0px 10px 17px rgba(0, 0, 0, 0.03), 0px 4px 7px rgba(0, 0, 0, 0.05)"
color="text"
flex="1 1 372px"
_hover={linkBoxFocusStyles}
_focus={linkBoxFocusStyles}
className={className}
m={4}
>
<Flex
minH="260px"
bg="cardGradient"
direction="row"
justify={isRight ? "flex-end" : "center"}
align={isBottom ? "flex-end" : "center"}
className="action-card-image-wrapper"
Copy link
Member

@pettinarip pettinarip Sep 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
>
{!isImageURL && <Image image={image} alt={alt || ""} />}
{!isImageURL && (
<Image
alt={alt || ""}
as={GatsbyImage}
maxH="257px"
maxW={{ base: "311px", sm: "372px" }}
minW="100px"
minH="100px"
image={image}
sizes="full"
/>
)}
{isImageURL && (
<img src={image} alt={alt} className="action-card-image" />
<Image
alt={alt || ""}
maxH="257px"
maxW={{ base: "311px", sm: "372px" }}
minW="100px"
minH="100px"
src={image}
sizes="full"
className="action-card-image"
/>
)}
</ImageWrapper>
<Content className="action-card-content">
<Title>{title}</Title>
<Description>{description}</Description>
{children && <ChildrenContainer>{children}</ChildrenContainer>}
</Content>
</Card>
</Flex>
<Box p={6} className="action-card-content">
Copy link
Member

@pettinarip pettinarip Sep 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<Heading
as="h3"
fontSize="2xl"
mt={2}
mb={4}
fontWeight={600}
lineHeight={1.4}
>
<LinkOverlay
Copy link
Contributor Author

@nikkhielseath nikkhielseath Nov 5, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrapping the title with LinkOverlay based on the suggested refactor

as={Link}
color="text"
hideArrow
textDecoration="none"
to={to}
_hover={linkFocusStyles}
_focus={linkFocusStyles}
>
{title}
</LinkOverlay>
</Heading>
<Text mb={0} color={descriptionColor}>
{description}
</Text>
{children && <Box mt={8}>{children}</Box>}
</Box>
</LinkBox>
)
}

Expand Down