feat: new styles for subtask in lab

newrelic · Jan 25, 2022 · 5e89f3b · 5e89f3b
1 parent 2d7a304
commit 5e89f3b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/src/components/GuideTile/GuideTile.js b/src/components/GuideTile/GuideTile.js
@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Link, Icon, Surface } from '@newrelic/gatsby-theme-newrelic';
 
-const GuideTile = ({ duration, title, description, className, to }) => (
+const GuideTile = ({
+  duration,
+  title,
+  description,
+  className,
+  to,
+  procIdxisNotInteger,
+}) => (
   <Surface
     as={Link}
     to={to}
@@ -13,6 +20,8 @@ const GuideTile = ({ duration, title, description, className, to }) => (
     css={css`
       display: grid;
       grid-template-rows: auto 1fr auto;
+      width: ${procIdxisNotInteger ? '100%' : '90%'};
+      margin-left: ${procIdxisNotInteger ? '0' : '10%'};
       border-radius: 0.25rem;
       position: relative;
       padding: 1rem;
@@ -22,7 +31,7 @@ const GuideTile = ({ duration, title, description, className, to }) => (
     <h3
       css={css`
         font-size: 1rem;
-        margin-bottom: 0.5rem;
+        margin-bottom: ${procIdxisNotInteger ? '1rem' : '0.1rem'};
       `}
     >
       {title}
@@ -34,6 +43,7 @@ const GuideTile = ({ duration, title, description, className, to }) => (
         flex: 1;
         text-align: left;
         padding: 0;
+        margin-bottom: ${procIdxisNotInteger ? '0.8rem' : '0.1rem'};
       `}
     >
       {description}
@@ -64,6 +74,7 @@ GuideTile.propTypes = {
   description: PropTypes.string.isRequired,
   className: PropTypes.string,
   to: PropTypes.string.isRequired,
+  procIdxisNotInteger: PropTypes.bool,
 };
 
 export default GuideTile;
diff --git a/src/templates/LabOverviewTemplate.js b/src/templates/LabOverviewTemplate.js
@@ -47,21 +47,29 @@ const LabOverviewTemplate = ({ data, location }) => {
               <GuideListing.List className={labOverviewStyles.labGuideList}>
                 {guides?.nodes
                   .sort(sortProcedures)
-                  .map(({ fields, frontmatter }, index) => (
-                    <GuideTile
-                      className={labOverviewStyles.labGuideCard}
-                      to={fields.slug}
-                      key={index}
-                      duration={frontmatter.duration}
-                      title={`${frontmatter.procIdx}. ${
-                        frontmatter.tileShorthand?.title || frontmatter.title
-                      }`}
-                      description={
-                        frontmatter.tileShorthand?.description ||
-                        frontmatter.description
-                      }
-                    />
-                  ))}
+                  .map(({ fields, frontmatter }, index) => {
+                    const procIdxisNotInteger = Number.isInteger(
+                      frontmatter.procIdx
+                    );
+                    return (
+                      <GuideTile
+                        procIdxisNotInteger={procIdxisNotInteger}
+                        className={labOverviewStyles.labGuideCard}
+                        to={fields.slug}
+                        key={index}
+                        duration={frontmatter.duration}
+                        title={`${
+                          procIdxisNotInteger ? `${frontmatter.procIdx}.` : ''
+                        } ${
+                          frontmatter.tileShorthand?.title || frontmatter.title
+                        }`}
+                        description={
+                          frontmatter.tileShorthand?.description ||
+                          frontmatter.description
+                        }
+                      />
+                    );
+                  })}
               </GuideListing.List>
             </>
           )}