Merge pull request #557 from catho/QTM-696

chore(QTM-696): Avoiding passing props from the Carousel and Modal components to the Card component
catho · Apr 26, 2024 · 9b503a0 · 9b503a0
2 parents ff76215 + 67f84ce
commit 9b503a0
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 511 deletions.
diff --git a/components/Carousel/__snapshots__/Carousel.unit.test.jsx.snap b/components/Carousel/__snapshots__/Carousel.unit.test.jsx.snap
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/Carousel/sub-components/__snapshots__/CarouselCard.unit.test.jsx.snap b/components/Carousel/sub-components/__snapshots__/CarouselCard.unit.test.jsx.snap
@@ -39,11 +39,9 @@ exports[`<CarouselCard /> should match the snapshots 1`] = `
 
 <article
     class="c0 Card-module__card-wrapper___HvjEg shadow-1"
-    theme="[object Object]"
   >
     <div
       class="c1 Content-module__content___itVo9"
-      theme="[object Object]"
     >
       <img
         alt="a11y image description"
@@ -146,33 +144,27 @@ exports[`<CarouselCard /> should match the snapshots 2`] = `
 }
 
 <article
-    cardmeasure="[object Object]"
     class="c0 Card-module__card-wrapper___HvjEg shadow-1"
-    theme="[object Object]"
   >
     <div
       class="c1 Content-module__content___itVo9"
-      theme="[object Object]"
     >
       <div
         class="c2 Media-module__media-wrapper___Uu7hp"
       >
         <img
           alt="a11y image description"
-          cardmeasure="[object Object]"
           class="Media-module__media-image___vWBVj"
           src="https://assets.catho.com.br/logo/svg/blue.svg"
         />
       </div>
       <h2
         class="c3 Title-module__title___3S2cv Title-module__title-small___4mNd0"
-        theme="[object Object]"
       >
         Card title
       </h2>
       <div
         class="c4 Description-module__description-content___FVBwO"
-        theme="[object Object]"
       >
         Lorem ipsum dolor avec
       </div>
@@ -272,33 +264,27 @@ exports[`<CarouselCard /> should match the snapshots 3`] = `
 }
 
 <article
-    cardmeasure="[object Object]"
     class="c0 Card-module__card-wrapper___HvjEg shadow-1"
-    theme="[object Object]"
   >
     <div
       class="c1 Content-module__content___itVo9"
-      theme="[object Object]"
     >
       <div
         class="c2 Media-module__media-wrapper___Uu7hp"
       >
         <img
           alt="a11y image description"
-          cardmeasure="[object Object]"
           class="Media-module__media-image___vWBVj"
           src="https://assets.catho.com.br/logo/svg/blue.svg"
         />
       </div>
       <h2
         class="c3 Title-module__title___3S2cv Title-module__title-small___4mNd0"
-        theme="[object Object]"
       >
         Card title
       </h2>
       <div
         class="c4 Description-module__description-content___FVBwO"
-        theme="[object Object]"
       >
         Lorem ipsum dolor avec
       </div>

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/__snapshots__/Modal.unit.test.jsx.snap b/components/Modal/__snapshots__/Modal.unit.test.jsx.snap
@@ -199,11 +199,9 @@ exports[`<Modal /> Snapshots should match the snapshot 1`] = `
   <article
     class="c1 Card-module__card-wrapper___HvjEg shadow-1"
     tabindex="0"
-    theme="[object Object]"
   >
     <header
       class="c2 Header-module__header-wrapper___G5kEL"
-      theme="[object Object]"
     >
       <div
         class="HeaderText-module__header-text___TE5FD"
@@ -217,7 +215,6 @@ exports[`<Modal /> Snapshots should match the snapshot 1`] = `
     </header>
     <div
       class="c4 Content-module__content___itVo9"
-      theme="[object Object]"
     >
       Modal Content
     </div>
@@ -422,11 +419,9 @@ exports[`<Modal /> Snapshots should match the snapshot 2`] = `
 <article
   class="c0 Card-module__card-wrapper___HvjEg shadow-1"
   tabindex="0"
-  theme="[object Object]"
 >
   <header
     class="c1 Header-module__header-wrapper___G5kEL"
-    theme="[object Object]"
   >
     <div
       class="HeaderText-module__header-text___TE5FD"
@@ -440,7 +435,6 @@ exports[`<Modal /> Snapshots should match the snapshot 2`] = `
   </header>
   <div
     class="c3 Content-module__content___itVo9"
-    theme="[object Object]"
   >
     Modal Content
   </div>

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;
 `;