feat(GuideTile): content alignment via prop

newrelic · Jun 29, 2020 · 3c2fbc1 · 3c2fbc1
1 parent 0fc7dd2
commit 3c2fbc1
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 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;
 }
 
 .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
@@ -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 @@
   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
@@ -35,6 +35,7 @@ const OverviewTemplate = ({ data }) => {
                   frontmatter.description
                 }
                 path={frontmatter.path}
+                alignment={GuideTile.ALIGNMENT.LEFT}
               />
             ))}
           </GuideListing.List>