From 3c2fbc1941cb4d59d93afd6fcafc518d07429d44 Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Mon, 29 Jun 2020 13:49:59 -0700
Subject: [PATCH] feat(GuideTile): content alignment via prop

---
 src/components/GuideTile/GuideTile.js         | 17 +++++++++++-
 .../GuideTile/GuideTile.module.scss           | 26 ++++++++++++++-----
 src/pages/index.js                            |  2 +-
 src/pages/index.module.scss                   | 10 -------
 src/templates/OverviewTemplate.js             |  1 +
 5 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/src/components/GuideTile/GuideTile.js b/src/components/GuideTile/GuideTile.js
index 9f175a864..7bf4240a2 100644
--- 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
index 36f65b5bd..abfb84aef 100644
--- 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;
 }
 
 .button {
@@ -62,3 +56,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/pages/index.js b/src/pages/index.js
index 3ab1510d1..76ab2c4a3 100644
--- 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
index 58b0bf880..0b158d561 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -101,13 +101,3 @@
   margin-top: 1rem;
   grid-auto-rows: minmax(180px, 180px);
 }
-
-.allGuidesGuide {
-  p,
-  h2 {
-    text-align: left;
-  }
-  p {
-    padding: 0;
-  }
-}
diff --git a/src/templates/OverviewTemplate.js b/src/templates/OverviewTemplate.js
index efeadd8db..73bfb6565 100644
--- 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>