adding newsletter_card as ImageIconCard variant with a button

starknet-io · May 6, 2024 · 507d35c · 507d35c
1 parent cbd8907
commit 507d35c
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 95 deletions.
diff --git a/_data/pages/home.yml b/_data/pages/home.yml
@@ -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

diff --git a/workspaces/cms-config/src/blocks.ts b/workspaces/cms-config/src/blocks.ts
@@ -848,6 +848,12 @@ export const blocks = [
         name: "description",
         widget: "string",
       },
+      {
+        crowdin: true,
+        label: "buttonText",
+        name: "buttonText",
+        widget: "string",
+      },
     ],
   },
   {

diff --git a/workspaces/cms-data/src/pages.ts b/workspaces/cms-data/src/pages.ts
@@ -205,6 +205,7 @@ export interface VideoSectionBlock {
 
 export interface NewsletterBlock {
   readonly type: "newsletter_popup";
+  readonly buttonText: string;
   readonly title: string;
   readonly description: string;
 }

diff --git a/workspaces/website/src/components/Card/ImageIconCard.tsx b/workspaces/website/src/components/Card/ImageIconCard.tsx
@@ -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,
@@ -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;
@@ -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";
@@ -102,81 +117,145 @@ 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" }}
-      onClick={onClick}
-    >
+    <LinkBox sx={{ textDecoration: "none!important" }} 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" && (
@@ -188,7 +267,7 @@ export const ImageIconCard = ({
                     lineHeight="24px"
                   >
                     {description}{" "}
-                    {variant === "community_card" && href !== '#' && (
+                    {isVariantCommunityOrNewsLetterCard && href !== "#" && (
                       <CustomLink
                         variant={linkVariant as linkVariantType}
                         color="selected.main"
@@ -200,6 +279,13 @@ export const ImageIconCard = ({
                     )}
                   </Text>
                 )}
+                {link && variant === "newsletter_card" && (
+                  <ButtonGroup spacing="2">
+                    <Button href={href} variant={buttonVariant}>
+                      {label} &rarr;
+                    </Button>
+                  </ButtonGroup>
+                )}
               </Stack>
             </CardBody>
 
@@ -213,20 +299,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>