-
Notifications
You must be signed in to change notification settings - Fork 152
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.
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
fix: Buyer guarantee refactor QA fixes #8440
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,8 +6,22 @@ import { | |
Flex, | ||
IconProps, | ||
Text, | ||
themeProps, | ||
} from "@artsy/palette" | ||
import { Media } from "v2/Utils/Responsive" | ||
import { useMatchMedia } from "v2/Utils/Hooks/useMatchMedia" | ||
|
||
interface ConditionalWrapperProps { | ||
condition: boolean | ||
wrapper: (children: React.ReactElement) => JSX.Element | ||
children: React.ReactElement | ||
} | ||
|
||
const ConditionalWrapper: React.FC<ConditionalWrapperProps> = ({ | ||
condition, | ||
wrapper, | ||
children, | ||
}) => (condition ? wrapper(children) : children) | ||
|
||
interface FeatureProps { | ||
title: string | ||
|
@@ -24,6 +38,7 @@ export const Feature: React.FC<FeatureProps> = ({ | |
icon, | ||
onClick, | ||
}) => { | ||
const isMobile = useMatchMedia(themeProps.mediaQueries.xs) | ||
const Icon = icon | ||
const learnMore = ( | ||
<Flex pt={2} justifyContent="center"> | ||
|
@@ -47,19 +62,40 @@ export const Feature: React.FC<FeatureProps> = ({ | |
<Box> | ||
<Icon height={60} width={60} /> | ||
</Box> | ||
<Flex flexDirection={["row", "column"]} alignItems="center"> | ||
<Text fontWeight="bold" my={2} variant="sm"> | ||
{title} | ||
</Text> | ||
<Media greaterThan="xs"> | ||
<Text variant="xs">{text}</Text> | ||
{!!forcedSecondLine && <Text variant="xs">{forcedSecondLine}</Text>} | ||
{!!onClick && <Box>{learnMore}</Box>} | ||
</Media> | ||
<Media lessThan="sm"> | ||
{!!onClick && <ArrowRightIcon height="20px" width="20px" my={2} />} | ||
</Media> | ||
</Flex> | ||
<ConditionalWrapper | ||
condition={isMobile! && onClick} | ||
wrapper={children => ( | ||
<Button | ||
inline | ||
variant="noOutline" | ||
onClick={onClick} | ||
style={{ whiteSpace: "pre-wrap" }} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Bonus: addresses links not wrapping and overlapping on smaller screens |
||
> | ||
{children} | ||
</Button> | ||
)} | ||
> | ||
<Flex flexDirection={["row", "column"]} alignItems="center"> | ||
<Text fontWeight="bold" my={2} variant="sm"> | ||
{title} | ||
</Text> | ||
<Media greaterThan="xs"> | ||
<Text variant="xs">{text}</Text> | ||
{!!forcedSecondLine && <Text variant="xs">{forcedSecondLine}</Text>} | ||
{!!onClick && <Box>{learnMore}</Box>} | ||
</Media> | ||
<Media lessThan="sm"> | ||
{!!onClick && ( | ||
<ArrowRightIcon | ||
height="20px" | ||
width="20px" | ||
my={2} | ||
mr={isMobile ? "-20px" : 0} | ||
/> | ||
)} | ||
</Media> | ||
</Flex> | ||
</ConditionalWrapper> | ||
</Flex> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -75,10 +75,10 @@ export const BuyerGuaranteeIndex: React.FC = () => { | |
} | ||
|
||
const learnMoreButton = (width?: string) => ( | ||
<RouterLink to={supportArticleURL} target="_blank"> | ||
<RouterLink noUnderline to={supportArticleURL} target="_blank"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Removing underline |
||
<Button | ||
width={width ? width : ["100%", "80%", "50%"]} | ||
variant="secondaryOutline" | ||
variant={isMobile ? "secondaryOutline" : "primaryBlack"} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Filled in CTA for desktop |
||
> | ||
Learn More | ||
</Button> | ||
|
@@ -229,7 +229,7 @@ export const BuyerGuaranteeIndex: React.FC = () => { | |
</Flex> | ||
</Flex> | ||
{/* Artsy Guarantee Sections desktop */} | ||
<GridColumns gridColumnGap={4} gridRowGap={[6, 12]} my={[6, 12]}> | ||
<GridColumns gridColumnGap={[0, 4]} gridRowGap={[6, 12]} my={[6, 12]}> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Addresses responsive cropping |
||
<Column span={6}> | ||
{authenticityGuaranteeImageURL && ( | ||
<Image | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Conditional wrapper to avoid duplicate code