Add proptypes

prismicio-types.d.ts

@@ -831,6 +831,26 @@ export interface MultipleColumnCardSliceDefaultPrimary {
    */
   id_key: prismic.KeyTextField;
 
+  /**
+   * Font Weight field in *MultipleColumnCard → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: multiple_column_card.primary.font_weight
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  font_weight: prismic.KeyTextField;
+
+  /**
+   * Line height field in *MultipleColumnCard → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: multiple_column_card.primary.line_height
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  line_height: prismic.KeyTextField;
+
   /**
    * Font Family Title field in *MultipleColumnCard → Primary*
    *
@@ -1473,6 +1493,36 @@ export interface PricingCardsSliceDefaultPrimary {
    */
   title: prismic.KeyTextField;
 
+  /**
+   * Weight field in *PricingCards → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: pricing_cards.primary.weight
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  weight: prismic.KeyTextField;
+
+  /**
+   * Line height field in *PricingCards → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: pricing_cards.primary.line_height
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  line_height: prismic.KeyTextField;
+
+  /**
+   * Size field in *PricingCards → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: pricing_cards.primary.size
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  size: prismic.KeyTextField;
+
   /**
    * Url field in *PricingCards → Primary*
    *
@@ -1502,6 +1552,16 @@ export interface PricingCardsSliceDefaultPrimary {
    * - **Documentation**: https://prismic.io/docs/field#key-text
    */
   margin: prismic.KeyTextField;
+
+  /**
+   * Margin Bottom field in *PricingCards → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: pricing_cards.primary.margin_bottom
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  margin_bottom: prismic.KeyTextField;
 }
 
 /**

slices/MultipleColumnCard/index.js

@@ -14,6 +14,8 @@ function MultipleColumnCard({ slice }) {
       marginBottom={slice?.primary?.margin_bottom}
       marginTop={slice?.primary?.margin_top}
       maxWidth={slice?.primary?.max_width}
+      fontWeight={slice?.primary?.font_weight}
+      lineHeight={slice?.primary?.line_height}
       columns={slice.items}
     />
   );

slices/MultipleColumnCard/mocks.json

@@ -32,6 +32,16 @@
 				"__TYPE__": "FieldContent",
 				"value": "leaving",
 				"type": "Text"
+			},
+			"font_weight": {
+				"__TYPE__": "FieldContent",
+				"value": "package",
+				"type": "Text"
+			},
+			"line_height": {
+				"__TYPE__": "FieldContent",
+				"value": "nervous",
+				"type": "Text"
 			}
 		},
 		"items": [

slices/MultipleColumnCard/model.json

@@ -20,6 +20,14 @@
           "type": "Text",
           "config": { "label": "Id key", "placeholder": "" }
         },
+        "font_weight": {
+          "type": "Text",
+          "config": { "label": "Font Weight", "placeholder": "" }
+        },
+        "line_height": {
+          "type": "Text",
+          "config": { "label": "Line height", "placeholder": "" }
+        },
         "font_family_title": {
           "type": "Select",
           "config": {

slices/PricingCards/index.js

@@ -15,6 +15,10 @@ function PricingCards({ slice }) {
       url={slice?.primary?.url}
       margin={slice?.primary?.margin}
       maxWidth={slice?.primary?.max_width}
+      fontSize={slice?.primary?.size}
+      fontWeight={slice?.primary?.weight}
+      lineHeight={slice?.primary?.line_height}
+      marginBottom={slice?.primary?.margin_bottom}
     />
   );
 }

slices/PricingCards/mocks.json

@@ -27,6 +27,26 @@
 				"__TYPE__": "FieldContent",
 				"value": "each",
 				"type": "Text"
+			},
+			"line_height": {
+				"__TYPE__": "FieldContent",
+				"value": "family",
+				"type": "Text"
+			},
+			"size": {
+				"__TYPE__": "FieldContent",
+				"value": "enough",
+				"type": "Text"
+			},
+			"weight": {
+				"__TYPE__": "FieldContent",
+				"value": "sell",
+				"type": "Text"
+			},
+			"margin_bottom": {
+				"__TYPE__": "FieldContent",
+				"value": "front",
+				"type": "Text"
 			}
 		},
 		"items": []

slices/PricingCards/model.json

@@ -20,6 +20,18 @@
           "type": "Text",
           "config": { "label": "Title", "placeholder": "" }
         },
+        "weight": {
+          "type": "Text",
+          "config": { "label": "Weight", "placeholder": "" }
+        },
+        "line_height": {
+          "type": "Text",
+          "config": { "label": "Line height", "placeholder": "" }
+        },
+        "size": {
+          "type": "Text",
+          "config": { "label": "Size", "placeholder": "" }
+        },
         "url": {
           "type": "Text",
           "config": { "label": "Url", "placeholder": "" }
@@ -31,6 +43,10 @@
         "margin": {
           "type": "Text",
           "config": { "label": "Margin", "placeholder": "" }
+        },
+        "margin_bottom": {
+          "type": "Text",
+          "config": { "label": "Margin Bottom", "placeholder": "" }
         }
       },
       "items": {}

src/common/components/MktMultipleColumnCard.jsx

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import Text from './Text';
 import useStyle from '../hooks/useStyle';
 
-function MktMultipleColumnCard({ id, title, columns, fontFamily, marginBottom, marginTop, maxWidth, ...rest }) {
+function MktMultipleColumnCard({ id, title, columns, fontFamily, marginBottom, marginTop, maxWidth, lineHeight, fontWeight, ...rest }) {
   const limitedColumns = columns.slice(0, 5);
   const { navbarBackground } = useStyle();
 
   return (
-    <Box maxWidth={maxWidth} textAlign="center" margin={`${marginTop} auto ${marginBottom || '40px'} auto`} {...rest}>
+    <Box id={id} maxWidth={maxWidth} textAlign="center" margin={`${marginTop} auto ${marginBottom || '40px'} auto`} {...rest}>
       {/* Título principal */}
-      <Text fontSize="34px" fontWeight="bold" mb={6}>
+      <Text fontSize="34px" fontWeight={fontWeight} lineHeight={lineHeight} mb={6}>
         {title}
       </Text>
 
@@ -55,6 +55,8 @@ MktMultipleColumnCard.propTypes = {
   marginBottom: PropTypes.string,
   marginTop: PropTypes.string,
   maxWidth: PropTypes.string,
+  lineHeight: PropTypes.string,
+  fontWeight: PropTypes.string,
 };
 
 MktMultipleColumnCard.defaultProps = {
@@ -66,6 +68,8 @@ MktMultipleColumnCard.defaultProps = {
   marginTop: '',
   marginBottom: '',
   maxWidth: '',
+  fontWeight: '',
+  lineHeight: '',
 };
 
 export default MktMultipleColumnCard;

src/common/components/MktPricingCards.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Flex } from '@chakra-ui/react';
+import { Flex, Heading } from '@chakra-ui/react';
 import PricingCard from './PricingCard';
 
-function MktPricingCards({ margin, maxWidth, url, id }) {
+function MktPricingCards({ margin, maxWidth, url, id, title, fontSize, fontWeight, lineHeight, marginBottom }) {
   const [plans, setPlans] = useState([]);
   useEffect(() => {
     if (!url) return;
@@ -17,16 +17,31 @@ function MktPricingCards({ margin, maxWidth, url, id }) {
   }, [url]);
 
   return (
-    <Flex id={id} flexWrap={{ base: 'wrap', lg: 'nowrap' }} justifyContent="center" gridGap="24px" margin={margin} maxWidth={maxWidth}>
-      {plans?.map((plan) => (
-        <PricingCard
-          key={plan?.plan_id}
+    <>
+      <Heading
+        as="h2"
+        size="sm"
+        textAlign="center"
+        mb={marginBottom || '1rem'}
+        // weight={weight}
+        lineHeight={lineHeight}
+        style={{ fontSize, fontWeight }}
+        mt="80px"
+      >
+        {title}
+      </Heading>
+      <Flex id={id} flexWrap={{ base: 'wrap', lg: 'nowrap' }} justifyContent="center" gridGap="24px" margin={margin} maxWidth={maxWidth}>
+        {plans?.map((plan) => (
+          <PricingCard
+            title={title}
+            key={plan?.plan_id}
         //   courseData={selectedCourseData}
-          item={plan}
-          width={{ base: '300px', md: '100%' }}
-        />
-      ))}
-    </Flex>
+            item={plan}
+            width={{ base: '300px', md: '100%' }}
+          />
+        ))}
+      </Flex>
+    </>
   );
 }
 
@@ -35,12 +50,22 @@ MktPricingCards.propTypes = {
   maxWidth: PropTypes.string,
   url: PropTypes.string.isRequired,
   id: PropTypes.string,
+  title: PropTypes.string,
+  fontSize: PropTypes.string,
+  fontWeight: PropTypes.string,
+  lineHeight: PropTypes.string,
+  marginBottom: PropTypes.string,
 };
 
 MktPricingCards.defaultProps = {
   margin: '',
   maxWidth: '',
   id: '',
+  title: '',
+  fontSize: '',
+  fontWeight: '',
+  lineHeight: '',
+  marginBottom: '',
 };
 
 export default MktPricingCards;