chore: Avoiding passing props from the Carousel and Modal components …

…to the Card component
catho · Apr 25, 2024 · b83a882 · b83a882
1 parent ff76215
commit b83a882
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 11 deletions.
diff --git a/components/Carousel/sub-components/DescriptionCard.jsx b/components/Carousel/sub-components/DescriptionCard.jsx
@@ -14,7 +14,11 @@ const cardMeasures = {
   },
 };
 
-const AdaptedCard = styled(Card)`
+const propsNotContainedInTheCard = ['theme', 'cardMeasure'];
+
+const AdaptedCard = styled(Card).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   ${({
     theme: {
       spacing: { xxxsmall, xsmall },
@@ -27,7 +31,9 @@ const AdaptedCard = styled(Card)`
   ${({ cardMeasure: { height } }) => `height: ${height}px;`}
 `;
 
-const Content = styled(Card.Content)`
+const Content = styled(Card.Content).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   height: 100%;
   ${({
     theme: {
@@ -39,7 +45,9 @@ const Content = styled(Card.Content)`
   box-sizing: border-box;
 `;
 
-const Media = styled(Card.Media)`
+const Media = styled(Card.Media).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   width: 192px;
   height: 104px;
   padding-bottom: 0;
@@ -49,7 +57,9 @@ const Media = styled(Card.Media)`
   `};
 `;
 
-const Title = styled(Card.Title)`
+const Title = styled(Card.Title).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   ${({
     theme: {
       baseFontSize: baseFont,
@@ -66,7 +76,9 @@ const Title = styled(Card.Title)`
   text-overflow: ellipsis;
 `;
 
-const Description = styled(Card.Description)`
+const Description = styled(Card.Description).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   ${({
     theme: {
       baseFontSize: baseFont,

diff --git a/components/Carousel/sub-components/ThumbCard.jsx b/components/Carousel/sub-components/ThumbCard.jsx
@@ -5,8 +5,11 @@ import { colors, spacing, baseFontSize } from '../../shared/theme';
 
 const SQUARE_CARD_SIZE = 80;
 const SQUARE_THUMB_SIZE = 64;
+const propsNotContainedInTheCard = ['theme'];
 
-const AdaptedCard = styled(Card)`
+const AdaptedCard = styled(Card).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   ${({
     theme: {
       spacing: { xxxsmall, xxsmall },
@@ -20,7 +23,9 @@ const AdaptedCard = styled(Card)`
   width: ${SQUARE_CARD_SIZE}px;
 `;
 
-const Content = styled(Card.Content)`
+const Content = styled(Card.Content).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   height: 100%;
   ${({
     theme: {

diff --git a/components/Modal/Modal.jsx b/components/Modal/Modal.jsx
@@ -13,6 +13,7 @@ import { breakpoints, colors, spacing, components } from '../shared/theme';
 import isSSR from '../shared/isSSR';
 
 const closeButtonPadding = spacing.medium;
+const propsNotContainedInTheCard = ['theme'];
 
 function getBreakpoint({ theme: { breakpoints: themeBreakpoints } }) {
   const sizes = {
@@ -27,7 +28,9 @@ function getBreakpoint({ theme: { breakpoints: themeBreakpoints } }) {
   );
 }
 
-const ModalCard = styled(Card)`
+const ModalCard = styled(Card).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   header {
     padding-right: ${({
       theme: {

diff --git a/components/Modal/sub-components/Content.jsx b/components/Modal/sub-components/Content.jsx
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import Card from '../../Card';
 import { spacing } from '../../shared/theme';
 
-const Content = styled(Card.Content)`
+const propsNotContainedInTheCard = ['theme'];
+
+const Content = styled(Card.Content).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   font-size: 16px;
   max-height: 70vh;
   overflow-y: auto;

diff --git a/components/Modal/sub-components/Header.jsx b/components/Modal/sub-components/Header.jsx
@@ -3,7 +3,11 @@ import PropTypes from 'prop-types';
 import Card from '../../Card';
 import { spacing } from '../../shared/theme';
 
-const Header = styled(Card.Header)`
+const propsNotContainedInTheCard = ['theme'];
+
+const Header = styled(Card.Header).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   padding: ${({
     theme: {
       spacing: { medium },

diff --git a/components/Modal/sub-components/Title.jsx b/components/Modal/sub-components/Title.jsx
@@ -1,7 +1,11 @@
 import styled from 'styled-components';
 import Card from '../../Card';
 
-const Title = styled(Card.Title)`
+const propsNotContainedInTheCard = ['theme'];
+
+const Title = styled(Card.Title).withConfig({
+  shouldForwardProp: (prop) => !propsNotContainedInTheCard.includes(prop),
+})`
   font-weight: 700;
   line-height: 1.25;
 `;