DOP-4436: Add explicit height/width for leafy-green icons (#1042)

mongodb · Mar 21, 2024 · 9a767ef · 9a767ef
1 parent b623b6f
commit 9a767ef
Show file tree

Hide file tree

Showing 10 changed files with 199 additions and 166 deletions.
diff --git a/src/components/Card/index.js b/src/components/Card/index.js
@@ -60,6 +60,11 @@ const cardDriverStyle = css`
   padding: ${theme.size.default} ${theme.size.medium};
   align-items: center;
 
+  // override "height" HTML attribute
+  img {
+    height: 100%;
+  }
+
   p {
     margin: 0 0 0 18px;
     font-weight: 400;
@@ -76,12 +81,7 @@ const landingBottomStyling = css`
   }
 `;
 
-const CardIcon = styled('img')`
-  width: ${theme.size.large};
-`;
-
-const CompactIcon = styled('img')`
-  width: ${theme.size.medium};
+const compactIconStyle = `
   @media ${theme.screenSize.upToSmall} {
     width: 20px;
   }
@@ -140,12 +140,19 @@ const Card = ({
   const template = page?.options?.template;
 
   const isLanding = template === 'landing';
-  const Icon = ['landing', 'product-landing'].includes(template) ? CardIcon : CompactIcon;
 
   /* If tag == 'landing-bottom', this is 2nd group of cards on 
   landing page which we want to keep exempt from landing styles */
   const isLandingBottom = tag === 'landing-bottom';
 
+  let imgSize;
+  if (isLanding && isLandingBottom) imgSize = '50px';
+  else if (isLanding) imgSize = theme.size.xlarge;
+  else if (template === 'product-landing') imgSize = theme.size.large;
+  else imgSize = theme.size.medium;
+
+  const useCompactIcon = !['landing', 'product-landing'].includes(template);
+
   const styling = [
     cardBaseStyles,
     isForDrivers ? cardDriverStyle : cardStyling,
@@ -156,7 +163,15 @@ const Card = ({
 
   return (
     <LeafyGreenCard className={cx(styling)} onClick={url ? () => onCardClick(url) : undefined}>
-      {icon && <Icon src={withPrefix(icon)} alt={iconAlt} />}
+      {icon && (
+        <img
+          src={withPrefix(icon)}
+          alt={iconAlt}
+          width={imgSize}
+          height={imgSize}
+          className={useCompactIcon ? cx(compactIconStyle) : ''}
+        />
+      )}
       <ConditionalWrapper
         condition={isCompact || isExtraCompact}
         wrapper={(children) => <CompactTextWrapper>{children}</CompactTextWrapper>}

diff --git a/src/components/Permalink.js b/src/components/Permalink.js
@@ -64,7 +64,7 @@ const Permalink = ({ id, description, buffer }) => {
         title={'Permalink to this ' + description}
         onClick={handleClick}
       >
-        <LinkIcon src={withPrefix('assets/link.svg')} />
+        <LinkIcon src={withPrefix('assets/link.svg')} width={10} height={10} />
         <Tooltip
           className={cx(tooltipStyle)}
           triggerEvent="click"

diff --git a/src/templates/NotFound.js b/src/templates/NotFound.js
@@ -37,15 +37,7 @@ const NotFoundImage = () => {
   const altText = 'Page not found';
   const imgPath = 'assets/404.png';
 
-  return (
-    <img
-      src={withPrefix(imgPath)}
-      alt={altText}
-      css={css`
-        width: 444px;
-      `}
-    />
-  );
+  return <img src={withPrefix(imgPath)} alt={altText} height={444} width={444} />;
 };
 
 const ErrorBoxContainer = () => {

diff --git a/tests/unit/__snapshots__/Card.test.js.snap b/tests/unit/__snapshots__/Card.test.js.snap
@@ -49,17 +49,7 @@ exports[`renders correctly 1`] = `
   margin-bottom: 0;
 }
 
-.emotion-1 {
-  width: 24px;
-}
-
-@media only screen and (max-width: 480px) {
-  .emotion-1 {
-    width: 20px;
-  }
-}
-
-.emotion-4 {
+.emotion-2 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -76,7 +66,7 @@ exports[`renders correctly 1`] = `
   margin-right: auto;
 }
 
-.emotion-5 {
+.emotion-3 {
   margin: unset;
   font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #001E2B;
@@ -89,12 +79,12 @@ exports[`renders correctly 1`] = `
   margin: 16px 0 8px 0;
 }
 
-.emotion-5 strong,
-.emotion-5 b {
+.emotion-3 strong,
+.emotion-3 b {
   font-weight: 700;
 }
 
-.emotion-6 {
+.emotion-4 {
   margin: unset;
   font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #001E2B;
@@ -105,12 +95,12 @@ exports[`renders correctly 1`] = `
   margin-bottom: 16px;
 }
 
-.emotion-6 strong,
-.emotion-6 b {
+.emotion-4 strong,
+.emotion-4 b {
   font-weight: 700;
 }
 
-.emotion-7 {
+.emotion-5 {
   margin: unset;
   font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
   color: #001E2B;
@@ -120,16 +110,16 @@ exports[`renders correctly 1`] = `
   font-weight: 400;
 }
 
-.emotion-7 strong,
-.emotion-7 b {
+.emotion-5 strong,
+.emotion-5 b {
   font-weight: 700;
 }
 
-.emotion-7 a {
+.emotion-5 a {
   line-height: unset;
 }
 
-.emotion-8 {
+.emotion-6 {
   font-size: 13px;
   line-height: 20px;
   font-family: 'Euclid Circular A','Helvetica Neue',Helvetica,Arial,sans-serif;
@@ -151,22 +141,22 @@ exports[`renders correctly 1`] = `
   text-decoration: none!important;
 }
 
-.emotion-8:hover,
-.emotion-8:focus,
-.emotion-8:visited {
+.emotion-6:hover,
+.emotion-6:focus,
+.emotion-6:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-8:focus {
+.emotion-6:focus {
   outline: none;
 }
 
-.emotion-9 {
+.emotion-7 {
   position: relative;
 }
 
-.emotion-9::after {
+.emotion-7::after {
   content: '';
   position: absolute;
   width: 100%;
@@ -176,11 +166,11 @@ exports[`renders correctly 1`] = `
   border-radius: 2px;
 }
 
-.lg-ui-0001:focus .emotion-9::after {
+.lg-ui-0001:focus .emotion-7::after {
   background-color: #0498EC;
 }
 
-.lg-ui-0001:hover .emotion-9::after {
+.lg-ui-0001:hover .emotion-7::after {
   background-color: #E8EDEB;
 }
 
@@ -189,35 +179,41 @@ exports[`renders correctly 1`] = `
   >
     <img
       alt="MongoDB University icon"
-      class="emotion-1 emotion-2"
+      class="
+  @media only screen and (max-width: 480px) {
+    width: 20px;
+  }
+"
+      height="24px"
       src="/images/icons/university.svg"
+      width="24px"
     />
     <span
-      class="emotion-3 emotion-4"
+      class="emotion-1 emotion-2"
     >
       Test card tag
     </span>
     <div>
       <p
-        class="emotion-5"
+        class="emotion-3"
       >
         Test card headline
       </p>
       <p
-        class="emotion-6"
+        class="emotion-4"
       >
         Test card paragraph
       </p>
       <p
-        class="emotion-7"
+        class="emotion-5"
       >
         <a
-          class="lg-ui-0001 emotion-8"
+          class="lg-ui-0001 emotion-6"
           href="https://university.mongodb.com/courses/M001/about"
           target="_self"
         >
           <span
-            class="emotion-9"
+            class="emotion-7"
           >
             Test card CTA
           </span>