Merge branch 'master' into jerel/guide-tiles-tweaks

newrelic · Jun 29, 2020 · 123b15b · 123b15b
2 parents 4feac2a + fd3e770
commit 123b15b
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 34 deletions.
diff --git a/src/components/GuideTile/GuideTile.js b/src/components/GuideTile/GuideTile.js
@@ -15,11 +15,16 @@ const GuideTile = ({
   description,
   className,
   children,
+  alignment,
   ...props
 }) => (
   <Component
     {...props}
-    className={cx(styles.tile, className, { [styles.tileWithIcon]: icon })}
+    className={cx(styles.tile, className, {
+      [styles.tileWithIcon]: icon,
+      [styles.tileLeftAligned]: alignment === GuideTile.ALIGNMENT.LEFT,
+      [styles.tileCenterAligned]: alignment === GuideTile.ALIGNMENT.CENTER,
+    })}
   >
     {icon && (
       <div className={styles.iconContainer}>
@@ -42,6 +47,11 @@ const GuideTile = ({
 
 GuideTile.Button = Button;
 
+GuideTile.ALIGNMENT = {
+  LEFT: 'left',
+  CENTER: 'center',
+};
+
 GuideTile.propTypes = {
   duration: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
@@ -50,6 +60,11 @@ GuideTile.propTypes = {
   icon: PropTypes.string,
   children: PropTypes.node,
   as: PropTypes.elementType,
+  alignment: PropTypes.oneOf(Object.values(GuideTile.ALIGNMENT)),
+};
+
+GuideTile.defaultProps = {
+  alignment: GuideTile.ALIGNMENT.CENTER,
 };
 
 export default GuideTile;
diff --git a/src/components/GuideTile/GuideTile.module.scss b/src/components/GuideTile/GuideTile.module.scss
@@ -13,11 +13,6 @@
   margin-top: 1rem;
 }
 
-.title,
-.description {
-  text-align: center;
-}
-
 .timeEstimate {
   font-size: 0.75rem;
   display: flex;
@@ -48,7 +43,6 @@
   margin-bottom: 1.5rem;
   color: var(--color-neutrals-600);
   flex: 1;
-  padding: 0 0.5rem;
 
   &:last-child {
     margin-bottom: 0;
@@ -66,3 +60,23 @@
 .timeIcon {
   margin-right: 0.25rem;
 }
+
+.tileLeftAligned {
+  .title,
+  .description {
+    text-align: left;
+  }
+  .description {
+    padding: 0;
+  }
+}
+
+.tileCenterAligned {
+  .title,
+  .description {
+    text-align: center;
+  }
+  .description {
+    padding: 0 0.5rem;
+  }
+}
diff --git a/src/data/sidenav.json b/src/data/sidenav.json
@@ -87,7 +87,6 @@
   },
   {
     "displayName": "Explore docs",
-    "url": "/explore-docs",
     "children": [
       {
         "displayName": "New Relic One CLI",

diff --git a/src/markdown-pages/automate-workflows/5-min-tag-resources.mdx b/src/markdown-pages/automate-workflows/5-min-tag-resources.mdx
@@ -1,5 +1,5 @@
 ---
-path: '/guides/5-min-tag-resources'
+path: '/automate-workflows/5-min-tag-resources'
 duration: '5 min'
 title: 'Quickly tag a set of resources'
 template: 'GuideTemplate'

diff --git a/src/markdown-pages/explore-docs/index.mdx b/src/markdown-pages/explore-docs/index.mdx
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -134,7 +134,6 @@ const IndexPage = ({ data, pageContext }) => {
               <GuideTile
                 as={Link}
                 to={frontmatter.path}
-                className={styles.allGuidesGuide}
                 key={index}
                 duration={frontmatter.duration}
                 title={frontmatter.tileShorthand?.title || frontmatter.title}
@@ -143,6 +142,7 @@ const IndexPage = ({ data, pageContext }) => {
                   frontmatter.description
                 }
                 path={frontmatter.path}
+                alignment={GuideTile.ALIGNMENT.LEFT}
               />
             ))}
           </GuideListing.List>

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -101,13 +101,3 @@
 .allGuidesListing {
   margin-top: 1rem;
 }
-
-.allGuidesGuide {
-  p,
-  h2 {
-    text-align: left;
-  }
-  p {
-    padding: 0;
-  }
-}
diff --git a/src/templates/OverviewTemplate.js b/src/templates/OverviewTemplate.js
@@ -35,6 +35,7 @@ const OverviewTemplate = ({ data }) => {
                   frontmatter.description
                 }
                 path={frontmatter.path}
+                alignment={GuideTile.ALIGNMENT.LEFT}
               />
             ))}
           </GuideListing.List>