From 303bcfa5ebd54e4785b0671f3bfe419feca77f63 Mon Sep 17 00:00:00 2001 From: Clark McAdoo Date: Thu, 21 Dec 2023 10:59:22 -0600 Subject: [PATCH 1/6] fix: significant update to css and remove unnecessary selection functions --- .../src/components/Walkthrough/Walkthrough.js | 11 +- .../components/Walkthrough/WalkthroughStep.js | 124 ++++++++---------- 2 files changed, 61 insertions(+), 74 deletions(-) diff --git a/packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js b/packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js index 2ad063fc6..925359d7f 100644 --- a/packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js +++ b/packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js @@ -11,13 +11,12 @@ const Walkthrough = ({ className, children }) => { return (
{ +const WalkthroughStep = ({ className, children, title, number, id }) => { return ( - <> +
Date: Thu, 21 Dec 2023 15:28:12 -0600 Subject: [PATCH 3/6] fix: center numbers more good --- .../src/components/Walkthrough/WalkthroughStep.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js b/packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js index a2bb2160b..a68648155 100644 --- a/packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js +++ b/packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js @@ -59,9 +59,11 @@ const WalkthroughStep = ({ className, children, title, number, id }) => { 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; right: calc((var(--timeline-width) * -1) / 2); text-align: center; From bdcb751efe385da95d9763686b1d3891cc19c10a Mon Sep 17 00:00:00 2001 From: Clark McAdoo Date: Wed, 27 Dec 2023 09:27:16 -0600 Subject: [PATCH 4/6] fix: replace TutorialSteps with Walkthrough in MDX component --- .../src/components/MDX.js | 7 +++---- .../components/Walkthrough/WalkthroughStep.js | 20 ++++++++++--------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/gatsby-theme-newrelic/src/components/MDX.js b/packages/gatsby-theme-newrelic/src/components/MDX.js index a44aeba9c..41f7b8326 100644 --- a/packages/gatsby-theme-newrelic/src/components/MDX.js +++ b/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, }; diff --git a/packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js b/packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js index a68648155..4516ec8b9 100644 --- a/packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js +++ b/packages/gatsby-theme-newrelic/src/components/Walkthrough/WalkthroughStep.js @@ -82,21 +82,23 @@ const WalkthroughStep = ({ className, children, title, number, id }) => {
-

- {title} -

+ {title && ( +

+ {title} +

+ )} {children}
From dd970bcf8420321c793d2869ed86cb2cae1c9092 Mon Sep 17 00:00:00 2001 From: Clark McAdoo Date: Thu, 4 Jan 2024 11:32:36 -0600 Subject: [PATCH 5/6] fix: remove unused components --- .../TutorialSteps/TutorialSection.js | 33 ------- .../components/TutorialSteps/TutorialStep.js | 88 ------------------- .../src/components/TutorialSteps/index.js | 1 - 3 files changed, 122 deletions(-) delete mode 100644 packages/gatsby-theme-newrelic/src/components/TutorialSteps/TutorialSection.js delete mode 100644 packages/gatsby-theme-newrelic/src/components/TutorialSteps/TutorialStep.js delete mode 100644 packages/gatsby-theme-newrelic/src/components/TutorialSteps/index.js diff --git a/packages/gatsby-theme-newrelic/src/components/TutorialSteps/TutorialSection.js b/packages/gatsby-theme-newrelic/src/components/TutorialSteps/TutorialSection.js deleted file mode 100644 index bb07faf1e..000000000 --- a/packages/gatsby-theme-newrelic/src/components/TutorialSteps/TutorialSection.js +++ /dev/null @@ -1,33 +0,0 @@ -import React, { Children, cloneElement } from 'react'; -import PropTypes from 'prop-types'; -import { css } from '@emotion/react'; -import { isMdxType } from '../../utils/mdx'; - -const TutorialSection = ({ children }) => { - const totalSteps = Children.toArray(children).filter( - (child) => isMdxType(child, 'TutorialStep') || isMdxType(child, 'Step') - ).length; - let step = 1; - - return ( -
- {Children.map(children, (child) => { - if (isMdxType(child, 'TutorialStep') || isMdxType(child, 'Step')) { - return cloneElement(child, { stepNumber: step++, totalSteps }); - } - - return child; - })} -
- ); -}; - -TutorialSection.propTypes = { - children: PropTypes.node, -}; - -export default TutorialSection; diff --git a/packages/gatsby-theme-newrelic/src/components/TutorialSteps/TutorialStep.js b/packages/gatsby-theme-newrelic/src/components/TutorialSteps/TutorialStep.js deleted file mode 100644 index 7debe4c82..000000000 --- a/packages/gatsby-theme-newrelic/src/components/TutorialSteps/TutorialStep.js +++ /dev/null @@ -1,88 +0,0 @@ -import React, { Children } from 'react'; -import PropTypes from 'prop-types'; -import { css } from '@emotion/react'; -import { isMdxType } from '../../utils/mdx'; - -const ALLOWED_HEADINGS = ['h2', 'h3', 'h4']; - -const TutorialStep = ({ children, stepNumber, totalSteps }) => { - children = Children.toArray(children); - - const title = ALLOWED_HEADINGS.some((level) => isMdxType(children[0], level)) - ? children[0] - : null; - - const content = title - ? children.filter((child) => child !== title) - : children; - - return ( -
- - {title} - {content.map((item) => { - return item; - })} -
- ); -}; - -TutorialStep.propTypes = { - children: PropTypes.node, - stepNumber: PropTypes.number.isRequired, - totalSteps: PropTypes.number.isRequired, -}; - -const StepCounter = ({ className, stepNumber, total }) => ( -
- Step{' '} - - {stepNumber} - {' '} - of{' '} - - {total} - -
-); - -StepCounter.propTypes = { - className: PropTypes.string, - stepNumber: PropTypes.number, - total: PropTypes.number, -}; - -export default TutorialStep; diff --git a/packages/gatsby-theme-newrelic/src/components/TutorialSteps/index.js b/packages/gatsby-theme-newrelic/src/components/TutorialSteps/index.js deleted file mode 100644 index dccc4f14a..000000000 --- a/packages/gatsby-theme-newrelic/src/components/TutorialSteps/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './TutorialSection'; From 3fa5da91efe27d99e64eef6f4109312536cc6a6d Mon Sep 17 00:00:00 2001 From: Clark McAdoo Date: Fri, 5 Jan 2024 14:22:27 -0600 Subject: [PATCH 6/6] fix: add top/bottom padding to Walkthrough component --- .../src/components/Walkthrough/Walkthrough.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js b/packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js index 925359d7f..277bc3267 100644 --- a/packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js +++ b/packages/gatsby-theme-newrelic/src/components/Walkthrough/Walkthrough.js @@ -17,6 +17,7 @@ const Walkthrough = ({ className, children }) => { display: flex; flex-direction: column; + padding: 1rem 0; @media screen and (max-width: 1000px) { grid-template-columns: 100%;