Merge branch 'dev' into issue#9978

Author: Saiteja-Basam

src/components/Callout.tsx

@@ -1,13 +1,15 @@
 // Libraries
 import React from "react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
-import Translation from "./Translation"
-import { TranslationKey } from "../utils/translations"
+import { Flex, FlexProps, Heading, Image, Text } from "@chakra-ui/react"
+
 // Components
+import Translation from "./Translation"
 import Emoji from "./Emoji"
-import { Flex, Heading, Image, Text } from "@chakra-ui/react"
 
-export interface IProps {
+import type { TranslationKey } from "../utils/translations"
+
+export interface IProps extends FlexProps {
   children?: React.ReactNode
   image?: IGatsbyImageData
   emoji?: string
@@ -25,6 +27,7 @@ const Callout: React.FC<IProps> = ({
   descriptionKey,
   children,
   className,
+  ...rest
 }) => (
   <Flex
     direction="column"
@@ -40,6 +43,7 @@ const Callout: React.FC<IProps> = ({
     mb={{ base: 16, lg: 4 }}
     borderRadius="base"
     className={className}
+    {...rest}
   >
     {image && (
       <Image

src/components/CardList.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react"
 import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image"
 import {
   Box,
+  BoxProps,
   Flex,
   HStack,
   LinkBox,
@@ -23,7 +24,7 @@ export type CardListItem = {
   alt?: string
 }
 
-export interface IProps {
+export interface IProps extends BoxProps {
   content: Array<CardListItem>
   clickHandler?: (idx: string | number) => void
 }
@@ -91,8 +92,12 @@ const Card = (props: CardListItem & Omit<StackProps, "title" | "id">) => {
   )
 }
 
-const CardList: React.FC<IProps> = ({ content, clickHandler = () => null }) => (
-  <Box bg="background" width="full">
+const CardList: React.FC<IProps> = ({
+  content,
+  clickHandler = () => null,
+  ...rest
+}) => (
+  <Box bg="background" w="full" {...rest}>
     {content.map((listItem, idx) => {
       const { link, id } = listItem
       const isLink = !!link

src/components/HorizontalCard.tsx

@@ -1,11 +1,9 @@
 import React, { ReactNode } from "react"
 import Emoji from "./Emoji"
-import { Text, Box, Flex } from "@chakra-ui/react"
+import { Text, Box, Flex, FlexProps } from "@chakra-ui/react"
 
-export interface IProps {
-  children?: React.ReactNode
+export interface IProps extends FlexProps {
   emoji: string
-  title?: ReactNode
   description: ReactNode
   className?: string
   emojiSize?: number
@@ -18,15 +16,16 @@ const HorizontalCard: React.FC<IProps> = ({
   children,
   className,
   emojiSize,
+  ...rest
 }) => (
-  <Flex borderRadius="base" className={className}>
+  <Flex borderRadius="base" className={className} {...rest}>
     <Emoji fontSize={`${emojiSize}rem`} text={emoji} />
     <Box flexGrow="0" flexShrink="1" flexBasis="75%" ml="8">
       <Text fontSize="lg">{title}</Text>
       <Text opacity="0.8" mt="-4" mb="2">
         {description}
       </Text>
-      {children}
+      <>{children}</>
     </Box>
   </Flex>
 )