Skip to content
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

Adding CTA to news letter card #2810

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

Adding CTA to news letter card #2810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
507d35c
adding newsletter_card as ImageIconCard variant with a button
TalBenAvi May 6, 2024
a9913ff
fixing jump to top of page and adding cursor
TalBenAvi May 7, 2024
a215f87
removing href
TalBenAvi May 7, 2024
d63f9b0
Merge branch 'dev' into Newsletter-box-on-SN-HP
TalBenAvi May 9, 2024
71997e0
Merge branch 'dev' into Newsletter-box-on-SN-HP
TalBenAvi May 9, 2024
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
1 change: 1 addition & 0 deletions _data/pages/home.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ blocks:
- type: newsletter_popup
title: Starknet Devs Newsletter
description: Stay up to date on Starknet news and version updates.
buttonText: Join Now
- type: flex_layout
heading_variant: h3
base: 1
Expand Down
6 changes: 6 additions & 0 deletions workspaces/cms-config/src/blocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -855,6 +855,12 @@ export const blocks = [
name: "description",
widget: "string",
},
{
crowdin: true,
label: "buttonText",
name: "buttonText",
widget: "string",
},
],
},
{
Expand Down
1 change: 1 addition & 0 deletions workspaces/cms-data/src/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ export interface VideoSectionBlock {

export interface NewsletterBlock {
readonly type: "newsletter_popup";
readonly buttonText: string;
readonly title: string;
readonly description: string;
}
Expand Down
250 changes: 172 additions & 78 deletions workspaces/website/src/components/Card/ImageIconCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,33 +18,44 @@ import { LinkData } from "@starknet-io/cms-data/src/settings/main-menu";
import { Button } from "@ui/Button";

type Props = {
variant?: "image_icon_link_card" | "icon_link_card" | "dapp" | "large_card" | "community_card";
variant?:
| "image_icon_link_card"
| "icon_link_card"
| "dapp"
| "large_card"
| "community_card"
| "newsletter_card";
title: string;
link?: LinkData;
icon?: string;
defaultIcon?: string;
description?: string;
locale: string,
size?: "large" | "small",
withIllustration?: boolean,
withBackground?: boolean,
columns?: number,
locale: string;
size?: "large" | "small";
withIllustration?: boolean;
withBackground?: boolean;
columns?: number;
color?:
| "blue-default"
| "orange"
| "blue"
| "purple"
| "peach"
| "cyan"
| "pink"
| "grey",
orientation?: "left" | "right" | "vertical"
| "blue-default"
| "orange"
| "blue"
| "purple"
| "peach"
| "cyan"
| "pink"
| "grey";
orientation?: "left" | "right" | "vertical";
onClick?: () => void;
};

type titleVariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
type linkVariantType = "cardBody" | "breadcrumbs" | "footerLink" | "textLink";
type descriptionVariantType = "body" | "cardBody" | "breadcrumbs" | "footerLink" | "textLink";
type descriptionVariantType =
| "body"
| "cardBody"
| "breadcrumbs"
| "footerLink"
| "textLink";

export const ImageIconCard = ({
title,
Expand All @@ -59,12 +70,15 @@ export const ImageIconCard = ({
variant = "image_icon_link_card",
columns = 4,
orientation = "left",
onClick
onClick,
}: Props) => {
const { href , label } = getComputedLinkData(locale, link ?? {
custom_title: '',
custom_internal_link: ''
});
const { href, label } = getComputedLinkData(
locale,
link ?? {
custom_title: "",
custom_internal_link: "",
}
);
let titleVariant;
let descriptionVariant;
let linkVariant;
Expand All @@ -82,7 +96,8 @@ export const ImageIconCard = ({
titleVariant = size === "large" ? "h3" : "h4";
linkVariant = size === "large" ? "cardLink" : "smallCardLink";
cardFooterPadding = "16px 0 0 0";
globalPadding = columns === 4 ? "120px 40px 48px 32px" : "68px 48px 36px 48px";
globalPadding =
columns === 4 ? "120px 40px 48px 32px" : "68px 48px 36px 48px";
break;
case "dapp":
titleVariant = "h3";
Expand All @@ -102,81 +117,151 @@ export const ImageIconCard = ({
cardFooterPadding = "0 0 0 40px";
linkVariant = "mediumCardLink";
break;
case "newsletter_card":
titleVariant = "h4";
descriptionVariant = "body";
cardFooterPadding = "0 0 0 40px";
linkVariant = "mediumCardLink";
buttonVariant = "gradient";
break;
default:
cardFooterPadding = "24px 0 0 0";
titleVariant = size === "large" ? "h3" : "h4";
descriptionVariant = size === "large" ? "body" : "cardBody";
linkVariant = size === "large" ? "cardLink" : "smallCardLink";
}

const isVariantCommunityOrNewsLetterCard =
variant === "community_card" || variant === "newsletter_card";
return (
<LinkBox
sx={{ textDecoration: "none!important" }}
sx={{
textDecoration: "none!important",
cursor: variant === "newsletter_card" ? "pointer" : "unset",
}}
onClick={onClick}
>
<CardGradientBorder
padding="0"
borderRadius={{ base: "24px", md: variant === "community_card" ? "104px" : "24px" }}
borderRadius={{
base: "24px",
md: isVariantCommunityOrNewsLetterCard ? "104px" : "24px",
}}
>
<Card
overflow="hidden"
borderRadius={{ base: "24px", md: variant === "community_card" ? "104px" : "24px" }}
borderRadius={{
base: "24px",
md: isVariantCommunityOrNewsLetterCard ? "104px" : "24px",
}}
boxShadow="none"
bg="card-bg"
flexDirection={
{ base: "column", md: (orientation === "right" && variant === "large_card") ? "row-reverse" :
(orientation === "left" && variant === "large_card") ? "row" :
variant === "community_card" ? "row" : "column"
flexDirection={{
base: "column",
md:
orientation === "right" && variant === "large_card"
? "row-reverse"
: orientation === "left" && variant === "large_card"
? "row"
: isVariantCommunityOrNewsLetterCard
? "row"
: "column",
}}
padding={{
base: variant === "community_card" ? "24px" : variant === "large_card" ? "24px" : "0",
md: variant === "community_card" ? "16px" : variant === "large_card" ? "48px" : "0"
base: isVariantCommunityOrNewsLetterCard
? "24px"
: variant === "large_card"
? "24px"
: "0",
md: isVariantCommunityOrNewsLetterCard
? "16px"
: variant === "large_card"
? "48px"
: "0",
}}
{...(orientation !== "vertical" &&
variant === "large_card" && {
justifyContent: "center",
})}
alignItems={{
base: "center",
lg: variant === "large_card" ? "center" : "initial",
}}
{...(orientation !== "vertical" && variant === "large_card" && {
justifyContent: "center"
})}
alignItems={{ base: 'center', lg: variant === "large_card" ? "center" : "initial" }}
height="100%"
>
<ImageIconBox title={title} variant={variant} color={color} size={size} icon={variant === "community_card" ? defaultIcon : icon} withIllustration={withIllustration} />
<ImageIconBox
title={title}
variant={variant}
color={color}
size={size}
icon={isVariantCommunityOrNewsLetterCard ? defaultIcon : icon}
withIllustration={withIllustration}
/>
<Box
padding={{
base: variant === "community_card" ? "24px 32px 0 0" : (size === "large" && icon && variant === "image_icon_link_card") ?
"48px 32px 48px 32px" :
variant === "large_card" ?
"32px 0 0 0" :
(variant === "icon_link_card" && !icon) ?
globalPadding :
variant === "dapp" ?
"40px 32px 48px 32px" :
"32px 32px 40px 32px",
md: variant === "community_card" ? "24px 32px 24px 40px" : (size === "large" && icon && variant === "image_icon_link_card") ?
"48px 32px 48px 32px" :
(orientation === "right" && variant === "large_card") ?
"1px 80px 0 0" :
(orientation === "left" && variant === "large_card") ?
"2px 0 0 80px" :
(variant === "icon_link_card" && !icon) ?
globalPadding :
variant === "dapp" ?
"40px 32px 48px 32px" :
"32px 32px 40px 32px"
base: isVariantCommunityOrNewsLetterCard
? "24px 32px 0 0"
: size === "large" && icon && variant === "image_icon_link_card"
? "48px 32px 48px 32px"
: variant === "large_card"
? "32px 0 0 0"
: variant === "icon_link_card" && !icon
? globalPadding
: variant === "dapp"
? "40px 32px 48px 32px"
: "32px 32px 40px 32px",
md: isVariantCommunityOrNewsLetterCard
? "24px 32px 24px 40px"
: size === "large" && icon && variant === "image_icon_link_card"
? "48px 32px 48px 32px"
: orientation === "right" && variant === "large_card"
? "1px 80px 0 0"
: orientation === "left" && variant === "large_card"
? "2px 0 0 80px"
: variant === "icon_link_card" && !icon
? globalPadding
: variant === "dapp"
? "40px 32px 48px 32px"
: "32px 32px 40px 32px",
}}
{...(variant === "large_card" && {
justifyContent: "center",
display: "flex",
flexDirection: "column",
})}
borderLeft={
isVariantCommunityOrNewsLetterCard
? { base: "none", md: "1px solid #EFEFEF" }
: "none"
}
_dark={{
borderLeft: isVariantCommunityOrNewsLetterCard
? { base: "none", md: "1px solid #313131" }
: "none",
_hover: {
borderLeft: isVariantCommunityOrNewsLetterCard
? { base: "none", md: "1px solid #C507E4" }
: "none",
},
}}
{...(variant === "large_card" && { justifyContent: "center", display: "flex", flexDirection: "column" })}
borderLeft={variant === "community_card" ? {base: "none", md: "1px solid #EFEFEF"} : "none"}
_dark={{borderLeft:variant === "community_card" ? {base: "none", md: "1px solid #313131"} : "none",
_hover: {borderLeft:variant === "community_card" ? {base: "none", md: "1px solid #C507E4"} : "none"}}}
marginLeft={variant === "community_card" ? {base: "0", md: "44px"} : "0"}
marginLeft={
isVariantCommunityOrNewsLetterCard
? { base: "0", md: "44px" }
: "0"
}
>
<CardBody
padding="0"
{...(variant === "large_card" && {
flex: "inherit",
maxWidth: '460px'
maxWidth: "460px",
})}
>
<Stack spacing="3">
<Heading variant={titleVariant as titleVariantType} lineHeight="100%" {...(variant === "large_card" && { paddingBottom: "8px" })}>
<Heading
variant={titleVariant as titleVariantType}
lineHeight="100%"
{...(variant === "large_card" && { paddingBottom: "8px" })}
>
{title}
</Heading>
{variant !== "icon_link_card" && (
Expand All @@ -188,7 +273,7 @@ export const ImageIconCard = ({
lineHeight="24px"
>
{description}{" "}
{variant === "community_card" && href !== '#' && (
{isVariantCommunityOrNewsLetterCard && href !== "#" && (
<CustomLink
variant={linkVariant as linkVariantType}
color="selected.main"
Expand All @@ -200,6 +285,11 @@ export const ImageIconCard = ({
)}
</Text>
)}
{link && variant === "newsletter_card" && (
<ButtonGroup spacing="2">
<Button variant={buttonVariant}>{label} &rarr;</Button>
</ButtonGroup>
)}
</Stack>
</CardBody>

Expand All @@ -213,20 +303,24 @@ export const ImageIconCard = ({
</CardFooter>
)}

{link && variant !== "dapp" && variant !== "community_card" && variant !== "large_card" && (
<CardFooter padding={cardFooterPadding}>
<ButtonGroup spacing="2">
<CustomLink
variant={linkVariant as linkVariantType}
color="selected.main"
href={href}
_hover={{ textDecoration: "underline!important" }}
{link &&
variant !== "dapp" &&
variant !== "newsletter_card" &&
variant !== "community_card" &&
variant !== "large_card" && (
<CardFooter padding={cardFooterPadding}>
<ButtonGroup spacing="2">
<CustomLink
variant={linkVariant as linkVariantType}
color="selected.main"
href={href}
_hover={{ textDecoration: "underline!important" }}
>
{label} &rarr;
</CustomLink>
</ButtonGroup>
</CardFooter>
)}
{label} &rarr;
</CustomLink>
</ButtonGroup>
</CardFooter>
)}
</Box>
</Card>
</CardGradientBorder>
Expand Down
Loading
Loading