Merge pull request #12015 from TylerAPfledderer/fix/CallToAction-index-prop

fix(CallToAction): update and constrain prop object type shape

Author: wackerow

src/components/Hero/CallToAction.tsx

@@ -4,17 +4,21 @@ import { Button, type ButtonProps } from "@/components/Buttons"
 
 import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 
-export type CallToActionProps = Omit<ButtonProps, "children" | "content"> & {
+export type CallToActionProps = Omit<
+  ButtonProps,
+  "children" | "content" | "variant" | "isSecondary"
+> & {
   content: ReactNode
   matomo: MatomoEventOptions
+  index: number
 }
 
-export function CallToAction({
+export const CallToAction = ({
   content,
   matomo,
-  key: index,
+  index,
   ...props
-}: CallToActionProps) {
+}: CallToActionProps) => {
   const handleClick = () => trackCustomEvent(matomo)
 
   const buttonProps: ButtonProps = {

src/components/Hero/ContentHero/index.tsx

@@ -38,7 +38,7 @@ const ContentHero = (props: ContentHeroProps) => {
             <HStack spacing="4">
               {buttons!.map((button, idx) => {
                 if (!button) return
-                return <CallToAction key={idx} {...button} />
+                return <CallToAction key={idx} index={idx} {...button} />
               })}
             </HStack>
           </Stack>

src/components/Hero/HubHero/index.tsx

@@ -71,9 +71,9 @@ const HubHero = ({
           <Text size="lg">{description}</Text>
         </Stack>
         <HStack justify={{ md: "center", xl: "start" }} spacing="4">
-          {(buttons || []).map((button, idx) => {
+          {buttons?.map((button, idx) => {
             if (!button) return
-            return <CallToAction key={idx} {...button} />
+            return <CallToAction key={idx} index={idx} {...button} />
           })}
         </HStack>
       </Stack>

src/lib/types.ts

@@ -372,12 +372,14 @@ export type IRemarkTocOptions = {
   callback: (toc: TocNodeType) => void
 }
 
+type HeroButtonProps = Omit<CallToActionProps, "index">
+
 export type CommonHeroProps = {
   heroImg: StaticImageData
   header: string
   title: string
   description: string
-  buttons?: [CallToActionProps, CallToActionProps?]
+  buttons?: [HeroButtonProps, HeroButtonProps?]
 }
 
 // Learning Tools

src/pages/layer-2.tsx

@@ -137,7 +137,6 @@ const Layer2Page = () => {
       {
         content: t("layer-2-hero-button-1"),
         toId: "what-is-layer-2",
-        variant: "solid",
         matomo: {
           eventCategory: "layer 2 hero buttons",
           eventAction: "click",
@@ -147,7 +146,6 @@ const Layer2Page = () => {
       {
         content: t("layer-2-hero-button-2"),
         toId: "use-layer-2",
-        variant: "outline",
         matomo: {
           eventCategory: "layer 2 hero buttons",
           eventAction: "click",

src/pages/learn.tsx

@@ -198,7 +198,6 @@ const LearnPage = () => {
           eventAction: "click",
           eventName: "lets get started",
         },
-        variant: "solid",
       },
     ],
   }