Walkthrough Component update

packages/gatsby-theme-newrelic/src/components/MDX.js

@@ -14,8 +14,7 @@ import MDXLink from './MDXLink';
 import MDXTable from './MDXTable';
 import MDXVideo from './MDXVideo';
 import SideBySide from './SideBySide';
-import TutorialStep from './TutorialSteps/TutorialStep';
-import TutorialSection from './TutorialSteps/TutorialSection';
+import Walkthrough from './Walkthrough';
 
 const defaultComponents = {
   a: MDXLink,
@@ -30,8 +29,8 @@ const defaultComponents = {
   InlineCode,
   Link,
   SideBySide,
-  Steps: TutorialSection,
-  Step: TutorialStep,
+  Steps: Walkthrough,
+  Step: Walkthrough.Step,
   table: MDXTable,
   Video: MDXVideo,
 };

packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js

@@ -11,13 +11,13 @@ const Walkthrough = ({ className, children }) => {
   return (
     <div
       css={css`
-        --timeline-width: 4px;
-        --ring-size: 1.75rem;
-        --ring-border-width: 3px;
+        --timeline-width: 2px;
+        --ring-size: 2.5rem;
+        --ring-border-width: 2px;
 
-        display: grid;
-        grid-template-columns: auto minmax(0, 1fr);
-        grid-column-gap: 2rem;
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 0;
 
         @media screen and (max-width: 1000px) {
           grid-template-columns: 100%;

packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js

@@ -2,66 +2,50 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 
-const WalkthroughStep = ({
-  className,
-  children,
-  title,
-  active = false,
-  number,
-  onMouseOver,
-  onFocus,
-  id,
-}) => {
+const WalkthroughStep = ({ className, children, title, number, id }) => {
   return (
-    <>
+    <div
+      css={css`
+        display: flex;
+
+        &:hover {
+          aside {
+            div {
+              border-color: var(--brand-button-primary-accent);
+              color: var(--brand-button-primary-accent);
+              font-weight: 600;
+              transition: border 325ms, color 325ms, font-weight 325ms;
+            }
+
+            &::after {
+              background: var(--brand-button-primary-accent);
+              transition: background 325ms;
+            }
+          }
+        }
+      `}
+    >
       <aside
-        onMouseOver={onMouseOver}
-        onFocus={onFocus}
         css={css`
-          --timeline-color: ${active
-            ? 'var(--brand-button-primary-accent)'
-            : 'var(--border-color)'};
-
+          margin-right: 2rem;
           position: relative;
-          padding-right: 2rem;
-          text-align: right;
 
           &::after {
+            background: var(--secondary-text-color);
+            bottom: 0;
             content: '';
             position: absolute;
-            width: var(--timeline-width);
-            background: var(--timeline-color);
             right: calc(var(--timeline-width) * -1);
-            z-index: -1;
             top: 0;
-            bottom: -5px;
-          }
-
-          &:first-child:after {
-            top: calc(var(--ring-size) / 2);
-          }
-
-          &:nth-last-child(2):after {
-            bottom: calc(100% - (var(--ring-size) / 2));
+            transition: background 325ms;
+            width: var(--timeline-width);
+            z-index: -1;
           }
 
-          ${active &&
-          css`
-            &::after {
-              bottom: -10px;
-              top: 5px;
-            }
-            & + div + aside {
-              &::after {
-                top: 10px;
-              }
-            }
-          `}
-
           @media screen and (max-width: 1000px) {
-            text-align: left;
             border-right: none;
-            padding-right: 0;
+            margin-right: 0;
+            text-align: left;
 
             &::after {
               display: none;
@@ -71,21 +55,22 @@ const WalkthroughStep = ({
       >
         <div
           css={css`
+            background: var(--primary-background-color);
+            border-radius: 50%;
+            border: var(--ring-border-width) var(--secondary-text-color) solid;
+            color: var(--secondary-text-color);
+            display: grid;
+            font-size: 23px; // Centering gets weird w/ circle divs
+            font-weight: 400;
+            height: var(--ring-size);
+            place-items: center;
             position: absolute;
-            top: 3px;
             right: calc((var(--timeline-width) * -1) / 2);
+            text-align: center;
+            top: -4px;
             transform: translateX(50%);
+            transition: border 325ms, color 325ms;
             width: var(--ring-size);
-            height: var(--ring-size);
-            border-radius: 50%;
-            background: var(--timeline-color);
-            color: var(--timeline-color);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-weight: bold;
-            background: var(--primary-background-color);
-            border: var(--ring-border-width) var(--timeline-color) solid;
 
             @media screen and (max-width: 1000px) {
               display: none;
@@ -97,28 +82,35 @@ const WalkthroughStep = ({
       </aside>
       <div
         css={css`
-          margin-bottom: 2rem;
+          border-bottom: solid 1px var(--border-color);
+          margin-bottom: 1.25rem;
+          padding-bottom: 2rem;
+          width: 100%;
         `}
         className={className}
-        onMouseOver={onMouseOver}
-        onFocus={onFocus}
       >
-        <h2 id={id}>{title}</h2>
+        {title && (
+          <h3
+            css={css`
+              font-size: 1.25rem;
+            `}
+            id={id}
+          >
+            {title}
+          </h3>
+        )}
         {children}
       </div>
-    </>
+    </div>
   );
 };
 
 WalkthroughStep.propTypes = {
-  className: PropTypes.string,
   children: PropTypes.node,
-  title: PropTypes.string,
-  active: PropTypes.bool,
-  number: PropTypes.number,
-  onFocus: PropTypes.func,
-  onMouseOver: PropTypes.func,
+  className: PropTypes.string,
   id: PropTypes.string,
+  number: PropTypes.number,
+  title: PropTypes.string,
 };
 
 export default WalkthroughStep;