Merge pull request #768 from gympass/RTN-938

🚀 [RTN-938] - Update ActionRequirement component to use the correct font-weight
gympass · Mar 21, 2024 · 173ef05 · 173ef05
2 parents 28f54c9 + 30881dc
commit 173ef05
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 29 deletions.
diff --git a/packages/yoga/src/ActionRequirement/native/ActionRequirement.jsx b/packages/yoga/src/ActionRequirement/native/ActionRequirement.jsx
@@ -27,13 +27,13 @@ function ActionRequirement(props) {
       ) : (
         <Title>{title}</Title>
       )}
-      <Text mt="small" color="deep">
+      <Text.Body1 mt="small" color="deep">
         {description}
-      </Text>
+      </Text.Body1>
       {list && (
-        <Text mt="small" color="deep">
+        <Text.Body1 mt="small" color="deep">
           <Box mt="xxxlarge">{list}</Box>
-        </Text>
+        </Text.Body1>
       )}
       {checkable && <Box mt="xxxlarge">{checkable}</Box>}
       <View>{children}</View>

diff --git a/packages/yoga/src/ActionRequirement/native/ActionRequirementStyles.js b/packages/yoga/src/ActionRequirement/native/ActionRequirementStyles.js
@@ -3,7 +3,9 @@ import Text from '../../Text/index.native';
 import Box from '../../Box/index.native';
 import Button from '../../Button/index.native';
 
-export const Title = styled(Text.H4)`
+export const Title = styled(Text.H4).attrs({
+  bold: true,
+})`
   ${({
     theme: {
       yoga: { fontSizes },

diff --git a/packages/yoga/src/ActionRequirement/native/__snapshots__/ActionRequirement.test.jsx.snap b/packages/yoga/src/ActionRequirement/native/__snapshots__/ActionRequirement.test.jsx.snap
@@ -142,6 +142,7 @@ exports[`<ActionRequirement /> should match snapshot 1`] = `
     </RNSVGSvgView>
   </View>
   <Text
+    bold={true}
     style={
       [
         {
@@ -157,11 +158,7 @@ exports[`<ActionRequirement /> should match snapshot 1`] = `
     Welcome to the world of feeling good!
   </Text>
   <Text
-    bold={false}
     color="deep"
-    fontSize="medium"
-    inverted={false}
-    light={false}
     mt="small"
     style={
       [
@@ -179,11 +176,7 @@ exports[`<ActionRequirement /> should match snapshot 1`] = `
     Lets make it a good day!
   </Text>
   <Text
-    bold={false}
     color="deep"
-    fontSize="medium"
-    inverted={false}
-    light={false}
     mt="small"
     style={
       [
@@ -586,11 +579,7 @@ exports[`<ActionRequirement /> should match snapshot with text display 1`] = `
     Welcome to the world of feeling good!
   </Text>
   <Text
-    bold={false}
     color="deep"
-    fontSize="medium"
-    inverted={false}
-    light={false}
     mt="small"
     style={
       [

diff --git a/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx b/packages/yoga/src/ActionRequirement/web/ActionRequirement.jsx
@@ -81,13 +81,13 @@ function ActionRequirement(props) {
         ) : (
           <Title>{title}</Title>
         )}
-        <Text mt="small" color="deep">
+        <Text.Body1 mt="small" color="deep">
           {description}
-        </Text>
+        </Text.Body1>
         {list && (
-          <Text mt="large" color="deep">
+          <Text.Body1 mt="large" color="deep">
             <Box>{list}</Box>
-          </Text>
+          </Text.Body1>
         )}
         {checkable && <Box mt="xxlarge">{checkable}</Box>}
         <Actions mt="xlarge">

diff --git a/packages/yoga/src/ActionRequirement/web/ActionRequirementStyles.js b/packages/yoga/src/ActionRequirement/web/ActionRequirementStyles.js
@@ -6,6 +6,7 @@ import Button from '../../Button';
 
 export const Title = styled(Text.H4).attrs({
   as: 'p',
+  bold: true,
 })`
   ${({
     theme: {

diff --git a/packages/yoga/src/ActionRequirement/web/__snapshots__/ActionRequirement.test.jsx.snap b/packages/yoga/src/ActionRequirement/web/__snapshots__/ActionRequirement.test.jsx.snap
@@ -11,7 +11,6 @@ exports[`<ActionRequirement /> should default match snapshot 1`] = `
   font-weight: 400;
   margin-top: 16px;
   color: #6B6B78;
-  font-size: 16px;
 }
 
 .c2 {
@@ -121,7 +120,6 @@ exports[`<ActionRequirement /> should default match snapshot 1`] = `
       <p
         class="c3"
         color="deep"
-        font-size="medium"
       >
         description
       </p>
@@ -144,7 +142,6 @@ exports[`<ActionRequirement /> should match snapshot with list 1`] = `
   font-weight: 400;
   margin-top: 16px;
   color: #6B6B78;
-  font-size: 16px;
 }
 
 .c4 {
@@ -157,7 +154,6 @@ exports[`<ActionRequirement /> should match snapshot with list 1`] = `
   font-weight: 400;
   margin-top: 24px;
   color: #6B6B78;
-  font-size: 16px;
 }
 
 .c5 {
@@ -291,14 +287,12 @@ exports[`<ActionRequirement /> should match snapshot with list 1`] = `
       <p
         class="c3"
         color="deep"
-        font-size="medium"
       >
         description
       </p>
       <p
         class="c4"
         color="deep"
-        font-size="medium"
       >
         <div
           class=""
@@ -355,7 +349,6 @@ exports[`<ActionRequirement /> should match snapshot with text display 1`] = `
   font-weight: 400;
   margin-top: 16px;
   color: #6B6B78;
-  font-size: 16px;
 }
 
 .c4 {
@@ -446,7 +439,6 @@ exports[`<ActionRequirement /> should match snapshot with text display 1`] = `
       <p
         class="c3"
         color="deep"
-        font-size="medium"
       >
         description
       </p>