feat: Add label support to horizontal default cards (#2513)

* feature: adds label + icon support for horizontal default cards * chore: add isLive to propTypes * chore: update snapshots * chore: tweak to color of label, fill of icon, and size of text * chore: updated snaps * chore: refactor of horizontal default card props * chore: removed unused props and refactor LabelComponent, also update snaps * chore: update snaps * chore: manually updated snap for ContentSingleFeaturesConnected * chore: refactor checkmark logic * chore: abstracted more logic to the initial prop on LabelText * chore: added back label prop for tests * chore: moved the margin from the label text to the icon as a flexed view * chore: move icon padding to its own component and remove label prop * chore: updated connected snaps * chore: added a CompletedLabel component that is conditionally rendered * chore: add a labelColor prop and moved color logic * chore: updated snaps * chore: updated connected snaps * chore: manually update ContentSingleConnected snap * chore: made CompletedLabel a functional component and added a labelColor prop * fix: fixed a prop typo Co-authored-by: nlewis84 <nathan@differential.com>
ApollosProject · Jun 1, 2022 · 602b684 · 602b684
1 parent 718b7fe
commit 602b684
Show file tree

Hide file tree

Showing 18 changed files with 5,446 additions and 5,083 deletions.
diff --git a/...os-ui-connected/src/ContentFeedConnected/__snapshots__/ContentFeedConnected.tests.js.snap b/...os-ui-connected/src/ContentFeedConnected/__snapshots__/ContentFeedConnected.tests.js.snap
@@ -143,12 +143,13 @@ exports[`content feed query component renders a feedview after successful query
                     }
                   >
                     <Text
+                      labelColor="rgba(39, 39, 46, 0.6)"
                       style={
                         Object {
                           "color": "rgba(39, 39, 46, 0.6)",
-                          "fontFamily": "InterUI-Bold",
-                          "fontSize": 16,
-                          "lineHeight": 24,
+                          "fontFamily": "InterUI-Medium",
+                          "fontSize": 14,
+                          "lineHeight": 21,
                         }
                       }
                     >
@@ -283,12 +284,13 @@ exports[`content feed query component renders a feedview after successful query
                     }
                   >
                     <Text
+                      labelColor="rgba(39, 39, 46, 0.6)"
                       style={
                         Object {
                           "color": "rgba(39, 39, 46, 0.6)",
-                          "fontFamily": "InterUI-Bold",
-                          "fontSize": 16,
-                          "lineHeight": 24,
+                          "fontFamily": "InterUI-Medium",
+                          "fontSize": 14,
+                          "lineHeight": 21,
                         }
                       }
                     >

diff --git a/...ContentSingleFeaturesConnected/__snapshots__/ContentSingleFeaturesConnected.tests.js.snap b/...ContentSingleFeaturesConnected/__snapshots__/ContentSingleFeaturesConnected.tests.js.snap
@@ -212,12 +212,13 @@ exports[`ContentSingleFeaturesConnected should render 1`] = `
             }
           >
             <Text
+              labelColor="rgba(39, 39, 46, 0.6)"
               style={
                 Object {
                   "color": "rgba(39, 39, 46, 0.6)",
-                  "fontFamily": "InterUI-Bold",
-                  "fontSize": 16,
-                  "lineHeight": 24,
+                  "fontFamily": "InterUI-Medium",
+                  "fontSize": 14,
+                  "lineHeight": 21,
                 }
               }
             >
@@ -839,12 +840,13 @@ exports[`ContentSingleFeaturesConnected should render with nodeId 1`] = `
             }
           >
             <Text
+              labelColor="rgba(39, 39, 46, 0.6)"
               style={
                 Object {
                   "color": "rgba(39, 39, 46, 0.6)",
-                  "fontFamily": "InterUI-Bold",
-                  "fontSize": 16,
-                  "lineHeight": 24,
+                  "fontFamily": "InterUI-Medium",
+                  "fontSize": 14,
+                  "lineHeight": 21,
                 }
               }
             >

diff --git a/...nnected/src/HeroListFeatureConnected/__snapshots__/HeroListFeatureConnected.tests.js.snap b/...nnected/src/HeroListFeatureConnected/__snapshots__/HeroListFeatureConnected.tests.js.snap
@@ -208,12 +208,13 @@ exports[`The HeroListFeatureConnected component should render 1`] = `
               }
             >
               <Text
+                labelColor="rgba(39, 39, 46, 0.6)"
                 style={
                   Object {
                     "color": "rgba(39, 39, 46, 0.6)",
-                    "fontFamily": "InterUI-Bold",
-                    "fontSize": 16,
-                    "lineHeight": 24,
+                    "fontFamily": "InterUI-Medium",
+                    "fontSize": 14,
+                    "lineHeight": 21,
                   }
                 }
               >
@@ -1096,12 +1097,13 @@ exports[`The HeroListFeatureConnected component should render without actions 1`
               }
             >
               <Text
+                labelColor="rgba(39, 39, 46, 0.6)"
                 style={
                   Object {
                     "color": "rgba(39, 39, 46, 0.6)",
-                    "fontFamily": "InterUI-Bold",
-                    "fontSize": 16,
-                    "lineHeight": 24,
+                    "fontFamily": "InterUI-Medium",
+                    "fontSize": 14,
+                    "lineHeight": 21,
                   }
                 }
               >

diff --git a/...icalCardListFeatureConnected/__snapshots__/VerticalCardListFeatureConnected.tests.js.snap b/...icalCardListFeatureConnected/__snapshots__/VerticalCardListFeatureConnected.tests.js.snap
@@ -272,12 +272,13 @@ exports[`The VerticalCardListFeatureConnected component should render 1`] = `
                     }
                   >
                     <Text
+                      labelColor="rgba(39, 39, 46, 0.6)"
                       style={
                         Object {
                           "color": "rgba(39, 39, 46, 0.6)",
-                          "fontFamily": "InterUI-Bold",
-                          "fontSize": 16,
-                          "lineHeight": 24,
+                          "fontFamily": "InterUI-Medium",
+                          "fontSize": 14,
+                          "lineHeight": 21,
                         }
                       }
                     >
@@ -3259,12 +3260,13 @@ exports[`The VerticalCardListFeatureConnected component should render as a featu
                   }
                 >
                   <Text
+                    labelColor="rgba(39, 39, 46, 0.6)"
                     style={
                       Object {
                         "color": "rgba(39, 39, 46, 0.6)",
-                        "fontFamily": "InterUI-Bold",
-                        "fontSize": 16,
-                        "lineHeight": 24,
+                        "fontFamily": "InterUI-Medium",
+                        "fontSize": 14,
+                        "lineHeight": 21,
                       }
                     }
                   >