Merge remote-tracking branch 'origin/master' into jerel/dark-mode

gatsby/wrap-page-element.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import { BreadcrumbContext } from '../src/components/BreadcrumbContext';
 import { PageContext } from '../src/components/PageContext';

package.json

@@ -8,8 +8,8 @@
     "classnames": "^2.2.6",
     "date-fns": "^2.14.0",
     "eslint-plugin-react-hooks": "^4.0.4",
-    "gatsby": "^2.23.0",
-    "gatsby-image": "^2.4.6",
+    "gatsby": "^2.23.1",
+    "gatsby-image": "^2.4.9",
     "gatsby-plugin-google-tagmanager": "^2.3.4",
     "gatsby-plugin-manifest": "^2.4.10",
     "gatsby-plugin-mdx": "^1.2.14",
@@ -19,13 +19,13 @@
     "gatsby-plugin-react-helmet": "^3.3.3",
     "gatsby-plugin-robots-txt": "^1.5.1",
     "gatsby-plugin-sass": "^2.3.3",
-    "gatsby-plugin-sharp": "^2.6.10",
+    "gatsby-plugin-sharp": "^2.6.14",
     "gatsby-plugin-sitemap": "^2.4.4",
     "gatsby-plugin-use-dark-mode": "^1.1.2",
     "gatsby-remark-images": "^3.3.9",
     "gatsby-source-filesystem": "^2.3.10",
     "gatsby-transformer-remark": "^2.8.14",
-    "gatsby-transformer-sharp": "^2.5.4",
+    "gatsby-transformer-sharp": "^2.5.7",
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
     "prism-react-renderer": "^1.1.1",

src/components/Button.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './Button.module.scss';
+
+const Button = ({
+  as: Component = 'button',
+  children,
+  className,
+  variant,
+  ...props
+}) => (
+  <Component
+    {...props}
+    className={cx(className, styles.button, styles[variant])}
+  >
+    {children}
+  </Component>
+);
+
+Button.VARIANT = {
+  PLAIN: 'plain',
+  PRIMARY: 'primary',
+  NORMAL: 'normal',
+};
+
+Button.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  variant: PropTypes.oneOf(Object.values(Button.VARIANT)).isRequired,
+};
+
+export default Button;

src/components/Button.module.scss

@@ -0,0 +1,32 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 3px;
+  font-family: var(--primary-font-family);
+  line-height: 1;
+  cursor: pointer;
+  border-width: 1px;
+  border-style: solid;
+}
+
+.primary {
+  color: #fff;
+  border-color: var(--color-brand-800);
+  background-color: var(--color-brand-800);
+}
+
+.normal {
+  color: var(--color-neutrals-800);
+  border-color: var(--color-neutrals-100);
+  background-color: var(--color-neutrals-100);
+}
+
+.plain {
+  color: var(--color-brand-800);
+  border-color: transparent;
+  background-color: transparent;
+}

src/components/CodeSnippet.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from './Button';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import lightTheme from 'prism-react-renderer/themes/github';
 import darkTheme from 'prism-react-renderer/themes/nightOwl';
@@ -77,18 +78,19 @@ const CodeSnippet = ({
             )}
           </div>
           {copy !== 'false' && (
-            <button
+            <Button
               className={styles.copyButton}
               type="button"
               onClick={() => copyCode(formattedCode.trim())}
+              variant={Button.VARIANT.PLAIN}
             >
               <FeatherIcon
                 name="copy"
                 size="1rem"
                 className={styles.copyIcon}
               />
               {copied ? 'Copied!' : 'Copy output'}
-            </button>
+            </Button>
           )}
         </div>
       )}

src/components/GuideListing/GuideListing.module.scss

@@ -24,7 +24,7 @@
   display: grid;
   grid-template-columns: repeat(3, minmax(260px, 1fr));
   grid-gap: 1rem;
-  grid-auto-rows: minmax(calc(248px - 2rem), auto);
+  grid-auto-rows: minmax(var(--guide-list-row-height, 150px), auto);
   align-items: stretch;
   width: 100%;
 

src/components/GuideTile/Button.js

@@ -1,16 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Button from '../Button';
 import styles from './GuideTile.module.scss';
+import { Link } from 'gatsby';
 
-const Button = ({ onClick, text }) => (
-  <button type="button" className={styles.button} onClick={onClick}>
-    {text}
-  </button>
+const GuideTileButton = ({ className, ...props }) => (
+  <Button
+    as={Link}
+    variant={Button.VARIANT.PRIMARY}
+    className={cx(styles.button, className)}
+    {...props}
+  />
 );
 
-Button.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  text: PropTypes.string.isRequired,
+GuideTileButton.propTypes = {
+  className: PropTypes.string,
 };
 
-export default Button;
+export default GuideTileButton;

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;

src/components/GuideTile/GuideTile.module.scss

@@ -10,21 +10,18 @@
   border: 1px solid var(--border-color);
   border-radius: 0.25rem;
   position: relative;
+  transition: all 0.15s ease-out;
 
-  button:hover {
-    transform: translateY(-1px);
+  &:hover {
+    transform: translateY(-2px);
+    border: 1px solid var(--color-neutrals-400);
   }
 }
 
 .tileWithIcon h2 {
   margin-top: 1rem;
 }
 
-.title,
-.description {
-  text-align: center;
-}
-
 .timeEstimate {
   font-size: 0.75rem;
   display: flex;
@@ -55,13 +52,40 @@
   margin-bottom: 1.5rem;
   color: var(--secondary-text-color);
   flex: 1;
-  padding: 0 0.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .button {
   justify-self: center;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
 }
 
 .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;
+  }
+}