DOP-3185: update icon sizing (#675)

* DOP-2583: type now uses the typography component (#662) * update LG card to v6 * update jest snapshots * attempt 1 * continuing * fix package lock merge conflicts * more fixes * comment deletion * cleaning up more comments * tweak * MARGINAL MARGINS * address typography in cards. TODO: update links styling * remove log * update header component for PLP * more cleanup of margins, breadcrumbs, general code quality * let leafygreen color text in callouts * cleeeeanup * bump sidenav, fix various things, confused why on this page is wonkus * tidying up side nav and contents * update package-lock * Revert "DOP-3167: dangling punctuation after Link (#661)" This reverts commit ee2e40c. * fix intro text color on guides landing * updated with seungs comments * minor fix for admonition margins * fixes from allison's feedback * updated with graces feedback * fix button on guides and remove redundant margins on plp * missed css fix * DOP-2578: update cards to use new typography (#673) * update cards+driver tiles to use typography. TODO: chapters * overwrite new card attributes with existing styling * minor. wrap line on card * address feedback w card * update operation and quiz choice components * tiles have no link inside card * remove border radius overwrite for guides. uniform font for tiles * font size on sidenav in landing, unsquish internal nav * DOP-2577: update LG/tabs to v8 (post typography update) (#674) update tabs to v8. tested with PLP and hidden tabs * increase line height on products list Co-authored-by: Seung Park <[email protected]> Co-authored-by: Seung Park <[email protected]> * update icon size * determine icon size based on plp or landing * minor. reduce margin on icon+description * update card tests Co-authored-by: Allison Reinheimer Moore <[email protected]> Co-authored-by: Seung Park <[email protected]>
mongodb · Sep 16, 2022 · 690752f · 690752f
1 parent e938b4a
commit 690752f
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 107 deletions.
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
@@ -23,7 +23,14 @@ const StyledCard = styled(LeafyGreenCard)`
 `;
 
 const CardIcon = styled('img')`
+  width: ${theme.size.large};
+`;
+
+const CompactIcon = styled('img')`
   width: ${theme.size.medium};
+  @media ${theme.screenSize.upToSmall} {
+    width: 20px;
+  }
 `;
 
 const H4 = styled(Body)`
@@ -43,30 +50,11 @@ const CompactCard = styled(StyledCard)`
   padding: ${theme.size.large} ${theme.size.medium};
 `;
 
-const CompactIcon = styled('img')`
-  margin: auto;
-  width: ${theme.size.medium};
-  @media ${theme.screenSize.upToSmall} {
-    width: 20px;
-  }
-`;
-
-const CompactIconCircle = styled('div')`
-  display: flex;
-  flex-shrink: 0 !important;
-  height: 48px;
-  width: 48px;
-  @media ${theme.screenSize.upToSmall} {
-    height: 40px;
-    width: 40px;
-  }
-`;
-
 const CompactTextWrapper = styled('div')`
   display: flex;
   flex-direction: column;
   height: 100%;
-  margin-left: ${theme.size.medium};
+  margin-left: ${theme.size.small};
   @media ${theme.screenSize.upToSmall} {
     margin-left: ${theme.size.default};
   }
@@ -89,23 +77,19 @@ const onCardClick = (url) => {
 const Card = ({
   isCompact,
   isExtraCompact,
+  page,
   nodeData: {
     children,
     options: { cta, headline, icon, 'icon-alt': iconAlt, tag, url },
   },
 }) => {
   const Card = isCompact || isExtraCompact ? CompactCard : StyledCard;
-  const Icon = isCompact ? CompactIcon : CardIcon;
+  const template = page?.options?.template;
+  const Icon = ['landing', 'product-landing'].includes(template) ? CardIcon : CompactIcon;
+
   return (
     <Card onClick={url ? () => onCardClick(url) : undefined}>
-      {icon && (
-        <ConditionalWrapper
-          condition={isCompact}
-          wrapper={(children) => <CompactIconCircle>{children}</CompactIconCircle>}
-        >
-          <Icon src={withPrefix(icon)} alt={iconAlt} />
-        </ConditionalWrapper>
-      )}
+      {icon && <Icon src={withPrefix(icon)} alt={iconAlt} />}
       <ConditionalWrapper
         condition={isCompact || isExtraCompact}
         wrapper={(children) => <CompactTextWrapper>{children}</CompactTextWrapper>}
@@ -142,6 +126,7 @@ Card.propTypes = {
       url: PropTypes.string,
     }),
   }).isRequired,
+  page: PropTypes.object,
 };
 
 export default Card;
diff --git a/tests/unit/__snapshots__/Card.test.js.snap b/tests/unit/__snapshots__/Card.test.js.snap
@@ -56,6 +56,12 @@ exports[`renders correctly 1`] = `
   width: 24px;
 }
 
+@media only screen and (max-width: 480px) {
+  .emotion-3 {
+    width: 20px;
+  }
+}
+
 .emotion-6 {
   -webkit-align-items: center;
   -webkit-box-align: center;

diff --git a/tests/unit/__snapshots__/CardGroup.test.js.snap b/tests/unit/__snapshots__/CardGroup.test.js.snap
@@ -97,36 +97,16 @@ exports[`renders correctly 1`] = `
 }
 
 .emotion-5 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-shrink: 0!important;
-  -ms-flex-negative: 0!important;
-  flex-shrink: 0!important;
-  height: 48px;
-  width: 48px;
-}
-
-@media only screen and (max-width: 480px) {
-  .emotion-5 {
-    height: 40px;
-    width: 40px;
-  }
-}
-
-.emotion-7 {
-  margin: auto;
   width: 24px;
 }
 
 @media only screen and (max-width: 480px) {
-  .emotion-7 {
+  .emotion-5 {
     width: 20px;
   }
 }
 
-.emotion-9 {
+.emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -135,24 +115,24 @@ exports[`renders correctly 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
-  margin-left: 24px;
+  margin-left: 8px;
 }
 
 @media only screen and (max-width: 480px) {
-  .emotion-9 {
+  .emotion-7 {
     margin-left: 16px;
   }
 }
 
-.emotion-9 p {
+.emotion-7 p {
   line-height: 24px;
 }
 
-.emotion-11 {
+.emotion-9 {
   margin-bottom: 16px;
 }
 
-.emotion-13 {
+.emotion-11 {
   margin: unset;
   font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #001E2B;
@@ -162,16 +142,16 @@ exports[`renders correctly 1`] = `
   font-weight: 400;
 }
 
-.emotion-13 strong,
-.emotion-13 b {
+.emotion-11 strong,
+.emotion-11 b {
   font-weight: 700;
 }
 
-.emotion-14 a {
+.emotion-12 a {
   line-height: unset;
 }
 
-.emotion-17 {
+.emotion-15 {
   font-size: 13px;
   line-height: 20px;
   font-family: 'Euclid Circular A',Akzidenz,'Helvetica Neue',Helvetica,Arial,sans-serif;
@@ -193,15 +173,15 @@ exports[`renders correctly 1`] = `
   text-decoration: none!important;
 }
 
-.emotion-17:focus {
+.emotion-15:focus {
   outline: none;
 }
 
-.emotion-18 {
+.emotion-16 {
   position: relative;
 }
 
-.emotion-18::after {
+.emotion-16::after {
   content: '';
   position: absolute;
   width: 100%;
@@ -211,15 +191,15 @@ exports[`renders correctly 1`] = `
   border-radius: 2px;
 }
 
-.constant-classname:focus .emotion-18::after {
+.constant-classname:focus .emotion-16::after {
   background-color: #0498EC;
 }
 
-.constant-classname:hover .emotion-18::after {
+.constant-classname:hover .emotion-16::after {
   background-color: #E8EDEB;
 }
 
-.emotion-36 {
+.emotion-32 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -235,34 +215,30 @@ exports[`renders correctly 1`] = `
     <div
       class="emotion-2 emotion-3 emotion-4"
     >
-      <div
+      <img
+        alt="MongoDB Atlas icon"
         class="emotion-5 emotion-6"
-      >
-        <img
-          alt="MongoDB Atlas icon"
-          class="emotion-7 emotion-8"
-          src="/images/icons/atlas.svg"
-        />
-      </div>
+        src="/images/icons/atlas.svg"
+      />
       <div
-        class="emotion-9 emotion-10"
+        class="emotion-7 emotion-8"
       >
         <p
-          class="emotion-11 emotion-12 emotion-13"
+          class="emotion-9 emotion-10 emotion-11"
         >
           Use Compass to connect to your Atlas cluster
         </p>
         <p
-          class="emotion-14 emotion-15 emotion-13"
+          class="emotion-12 emotion-13 emotion-11"
         >
           <a
-            class="constant-classname emotion-17"
+            class="constant-classname emotion-15"
             href="https://docs.atlas.mongodb.com/getting-started/"
             rel="noopener noreferrer"
             target="_blank"
           >
             <span
-              class="emotion-18"
+              class="emotion-16"
             >
               Read Atlas docs
             </span>
@@ -273,41 +249,37 @@ exports[`renders correctly 1`] = `
     <div
       class="emotion-2 emotion-3 emotion-4"
     >
-      <div
+      <img
+        alt="MongoDB University icon"
         class="emotion-5 emotion-6"
-      >
-        <img
-          alt="MongoDB University icon"
-          class="emotion-7 emotion-8"
-          src="/images/icons/university.svg"
-        />
-      </div>
+        src="/images/icons/university.svg"
+      />
       <div
-        class="emotion-9 emotion-10"
+        class="emotion-7 emotion-8"
       >
         <p
-          class="emotion-11 emotion-12 emotion-13"
+          class="emotion-9 emotion-10 emotion-11"
         >
           Learn MongoDB Basics with MongoDB University
         </p>
         <p
-          class="emotion-14 emotion-15 emotion-13"
+          class="emotion-12 emotion-13 emotion-11"
         >
           <a
-            class="constant-classname emotion-17"
+            class="constant-classname emotion-15"
             href="https://university.mongodb.com/courses/M001/about"
             rel="noopener noreferrer"
             target="_blank"
           >
             <span
-              class="emotion-18"
+              class="emotion-16"
             >
               Learn MongoDB Basics
             </span>
             <svg
               alt=""
               aria-hidden="true"
-              class="emotion-36"
+              class="emotion-32"
               height="16"
               role="presentation"
               viewBox="0 0 16 16"
@@ -329,34 +301,30 @@ exports[`renders correctly 1`] = `
     <div
       class="emotion-2 emotion-3 emotion-4"
     >
-      <div
+      <img
+        alt="MongoDB Server icon"
         class="emotion-5 emotion-6"
-      >
-        <img
-          alt="MongoDB Server icon"
-          class="emotion-7 emotion-8"
-          src="/images/icons/server.svg"
-        />
-      </div>
+        src="/images/icons/server.svg"
+      />
       <div
-        class="emotion-9 emotion-10"
+        class="emotion-7 emotion-8"
       >
         <p
-          class="emotion-11 emotion-12 emotion-13"
+          class="emotion-9 emotion-10 emotion-11"
         >
           Access more in-depth examples of querying data
         </p>
         <p
-          class="emotion-14 emotion-15 emotion-13"
+          class="emotion-12 emotion-13 emotion-11"
         >
           <a
-            class="constant-classname emotion-17"
+            class="constant-classname emotion-15"
             href="https://docs.mongodb.com/manual/tutorial/getting-started/"
             rel="noopener noreferrer"
             target="_blank"
           >
             <span
-              class="emotion-18"
+              class="emotion-16"
             >
               Read Server docs
             </span>

diff --git a/tests/unit/__snapshots__/CardRef.test.js.snap b/tests/unit/__snapshots__/CardRef.test.js.snap
@@ -81,6 +81,12 @@ exports[`card correctly with and without url 1`] = `
   width: 24px;
 }
 
+@media only screen and (max-width: 480px) {
+  .emotion-5 {
+    width: 20px;
+  }
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -90,7 +96,7 @@ exports[`card correctly with and without url 1`] = `
   -ms-flex-direction: column;
   flex-direction: column;
   height: 100%;
-  margin-left: 24px;
+  margin-left: 8px;
 }
 
 @media only screen and (max-width: 480px) {