wip: applying theme for surfaces

newrelic · Jul 28, 2020 · 471e104 · 471e104
1 parent e3c8b3d
commit 471e104
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 45 deletions.
diff --git a/src/components/GuideTile/GuideTile.js b/src/components/GuideTile/GuideTile.js
@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { css } from '@emotion/core';
+import { Surface } from '@newrelic/gatsby-theme-newrelic';
 import FeatherIcon from '../FeatherIcon';
 import NewRelicIcon from '../NewRelicIcon';
 import Button from './Button';
 
-import cx from 'classnames';
 import styles from './GuideTile.module.scss';
 
 const GuideTile = ({
@@ -18,13 +19,57 @@ const GuideTile = ({
   alignment,
   ...props
 }) => (
-  <Component
+  <Surface
     {...props}
-    className={cx(styles.tile, className, {
-      [styles.tileWithIcon]: icon,
-      [styles.tileLeftAligned]: alignment === GuideTile.ALIGNMENT.LEFT,
-      [styles.tileCenterAligned]: alignment === GuideTile.ALIGNMENT.CENTER,
-    })}
+    as={Component}
+    className={className}
+    base={Surface.BASE.PRIMARY}
+    css={css`
+      display: grid;
+      grid-template-rows: auto auto 1fr auto;
+      border-radius: 0.25rem;
+      position: relative;
+      padding: 1rem;
+      transition: all 0.15s ease-out;
+
+      &:hover {
+        transform: translateY(-2px);
+        border-color: var(--border-hover-color);
+      }
+
+      ${
+        icon &&
+        `
+        h2 {
+          margin-top: 1rem;
+        }
+      `
+      }
+
+      ${
+        alignment === GuideTile.ALIGNMENT.LEFT &&
+        `
+        .title, .desicription {
+          text-align: left;
+        }
+        .description {
+          padding: 0;
+        }
+      `
+      }
+
+      ${
+        alignment === GuideTile.ALIGNMENT.LEFT &&
+        `
+        .title, .desicription {
+          text-align: center;
+        }
+        .description {
+          padding: 0 0.5rem;
+        }
+      `
+      }
+    `}
   >
     {icon && (
       <div className={styles.iconContainer}>
@@ -42,7 +87,7 @@ const GuideTile = ({
     <h3 className={styles.title}>{title}</h3>
     <p className={styles.description}>{description}</p>
     {children}
-  </Component>
+  </Surface>
 );
 
 GuideTile.Button = Button;

diff --git a/src/components/GuideTile/GuideTile.module.scss b/src/components/GuideTile/GuideTile.module.scss
@@ -1,26 +1,20 @@
 .tile {
-  display: grid;
-  grid-template-rows: auto auto 1fr auto;
-  background: var(
-    --surface-background-color,
-    var(--primary-surface-background-color)
-  );
-  box-shadow: var(--boxshadow);
-  padding: 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 0.25rem;
-  position: relative;
-  transition: all 0.15s ease-out;
+  // display: grid;
+  // grid-template-rows: auto auto 1fr auto;
+  // box-shadow: var(--boxshadow);
+  // border-radius: 0.25rem;
+  // position: relative;
+  // transition: all 0.15s ease-out;
 
-  &:hover {
-    transform: translateY(-2px);
-    border-color: var(--border-hover-color);
-  }
+  // &:hover {
+  //   transform: translateY(-2px);
+  //   border-color: var(--border-hover-color);
+  // }
 }
 
-.tileWithIcon h2 {
-  margin-top: 1rem;
-}
+// .tileWithIcon h2 {
+//   margin-top: 1rem;
+// }
 
 .timeEstimate {
   font-size: 0.75rem;
@@ -66,22 +60,22 @@
   margin-right: 0.25rem;
 }
 
-.tileLeftAligned {
-  .title,
-  .description {
-    text-align: left;
-  }
-  .description {
-    padding: 0;
-  }
-}
+// .tileLeftAligned {
+//   .title,
+//   .description {
+//     text-align: left;
+//   }
+//   .description {
+//     padding: 0;
+//   }
+// }
 
-.tileCenterAligned {
-  .title,
-  .description {
-    text-align: center;
-  }
-  .description {
-    padding: 0 0.5rem;
-  }
-}
+// .tileCenterAligned {
+//   .title,
+//   .description {
+//     text-align: center;
+//   }
+//   .description {
+//     padding: 0 0.5rem;
+//   }
+// }