From 64c99fc7f36a202ceda11a8513bd0ac238085c2c Mon Sep 17 00:00:00 2001 From: avanegas Date: Fri, 24 Jan 2025 16:43:24 -0500 Subject: [PATCH] Add proptypes --- prismicio-types.d.ts | 60 +++++++++++++++++++ slices/MultipleColumnCard/index.js | 2 + slices/MultipleColumnCard/mocks.json | 10 ++++ slices/MultipleColumnCard/model.json | 8 +++ slices/PricingCards/index.js | 4 ++ slices/PricingCards/mocks.json | 20 +++++++ slices/PricingCards/model.json | 16 +++++ .../components/MktMultipleColumnCard.jsx | 10 +++- src/common/components/MktPricingCards.jsx | 47 +++++++++++---- 9 files changed, 163 insertions(+), 14 deletions(-) diff --git a/prismicio-types.d.ts b/prismicio-types.d.ts index e6378c8e9c..76be2add8f 100644 --- a/prismicio-types.d.ts +++ b/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; } /** diff --git a/slices/MultipleColumnCard/index.js b/slices/MultipleColumnCard/index.js index e41d4b86b0..5301312283 100644 --- a/slices/MultipleColumnCard/index.js +++ b/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} /> ); diff --git a/slices/MultipleColumnCard/mocks.json b/slices/MultipleColumnCard/mocks.json index 154ea3e914..984dc95137 100644 --- a/slices/MultipleColumnCard/mocks.json +++ b/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": [ diff --git a/slices/MultipleColumnCard/model.json b/slices/MultipleColumnCard/model.json index fd63b5355e..9eb0c6c013 100644 --- a/slices/MultipleColumnCard/model.json +++ b/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": { diff --git a/slices/PricingCards/index.js b/slices/PricingCards/index.js index e74671c7d9..53dc745a5d 100644 --- a/slices/PricingCards/index.js +++ b/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} /> ); } diff --git a/slices/PricingCards/mocks.json b/slices/PricingCards/mocks.json index 32a7ba68b9..0f023ea980 100644 --- a/slices/PricingCards/mocks.json +++ b/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": [] diff --git a/slices/PricingCards/model.json b/slices/PricingCards/model.json index bc8a447130..31fe5b518f 100644 --- a/slices/PricingCards/model.json +++ b/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": {} diff --git a/src/common/components/MktMultipleColumnCard.jsx b/src/common/components/MktMultipleColumnCard.jsx index 508ffab102..ba29318d1b 100644 --- a/src/common/components/MktMultipleColumnCard.jsx +++ b/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 ( - + {/* Título principal */} - + {title} @@ -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; diff --git a/src/common/components/MktPricingCards.jsx b/src/common/components/MktPricingCards.jsx index 7ace87cc01..ffcf3775a7 100644 --- a/src/common/components/MktPricingCards.jsx +++ b/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 ( - - {plans?.map((plan) => ( - + + {title} + + + {plans?.map((plan) => ( + - ))} - + item={plan} + width={{ base: '300px', md: '100%' }} + /> + ))} + + ); } @@ -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;