Guide page styling

src/components/CodeSnippet.module.scss

@@ -1,17 +1,21 @@
 .container {
   height: 170px;
-  width: 50%;
   font-family: Menlo;
   line-height: 1rem;
   font-size: 0.75rem;
   overflow-y: scroll;
+
   pre {
     margin: 0;
     height: 100%;
+    overflow-y: scroll;
+    padding: 20px 20px 20px 10px;
   }
 }
 
 .lineNumber {
+  display: inline-block;
+  width: 20px;
   text-align: right;
   padding-right: 1em;
   user-select: none;
@@ -23,13 +27,13 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  width: 50%;
   background: var(--color-neutrals-200);
   height: 35px;
   background-image: url('../images/copy.svg');
   background-size: 1rem;
   background-repeat: no-repeat;
   background-position: 83% 50%;
+
   button {
     padding-right: 1rem;
     font-size: 0.75rem;

src/components/Intro.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './Intro.module.scss';
+import Proptypes from 'prop-types';
+
+const Intro = ({ children }) => (
+  <div className={styles.container}>{children}</div>
+);
+
+Intro.propTypes = {
+  children: Proptypes.node,
+};
+
+export default Intro;

src/components/Intro.module.scss

@@ -0,0 +1,14 @@
+.container {
+  display: flex;
+  p {
+    width: 50%;
+    color: var(--color-neutrals-600);
+    font-size: 1.125rem;
+    line-height: 2rem;
+    margin-right: 1rem;
+  }
+  div {
+    width: 50%;
+    margin-left: 1rem;
+  }
+}

src/components/Step.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styles from './Step.module.scss';
+import Proptypes from 'prop-types';
+
+const Step = ({ children, stepNumber, stepTitle }) => (
+  <div className={styles.wrapper}>
+    {stepNumber && <p className={styles.stepNumber}>{`Step ${stepNumber}`}</p>}
+    {stepTitle && <p className={styles.stepTitle}>{stepTitle}</p>}
+    <div className={styles.container}>{children}</div>
+  </div>
+);
+
+Step.propTypes = {
+  children: Proptypes.node,
+  stepNumber: Proptypes.string,
+  stepTitle: Proptypes.string,
+};
+
+export default Step;

src/components/Step.module.scss

@@ -0,0 +1,27 @@
+.wrapper {
+  border-top: solid 1px var(--color-neutrals-100);
+  box-sizing: border-box;
+  padding-top: 1.5rem;
+  margin-top: 2rem;
+  .stepNumber {
+    font-size: 0.75rem;
+    color: var(--color-neutrals-600);
+  }
+  .stepTitle {
+    color: var(--color-neutrals-900);
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+}
+.container {
+  display: flex;
+}
+.container > p {
+  margin-right: 1rem;
+  width: 50%;
+  line-height: 1.5rem;
+}
+.container > pre {
+  width: 50%;
+  margin-left: 1rem;
+}

src/markdown-pages/example.mdx

@@ -1,24 +1,79 @@
 ---
-path: '/guides/graphql-api'
+path: '/guides/example'
 duration: '30 min'
-title: 'GraphQL API'
+title: 'Example Guide'
 template: 'GuideTemplate'
 ---
 
-## Lorem ipsum
+<Intro>
 
-Integer aliquam convallis scelerisque. Donec auctor dictum viverra. Praesent commodo porttitor tortor. Fusce eget sem arcu. Praesent convallis augue est. `Vestibulum` in mi sollicitudin, rhoncus est eu, rutrum augue. Ut in elit ac odio ultrices pharetra eget id magna. Donec tellus dui, volutpat ut malesuada eget, pharetra eget metus. Proin tortor lacus, vestibulum dignissim urna ac, rutrum vulputate orci. Sed justo tellus, convallis eu tincidunt at, euismod eu enim. Sed interdum viverra volutpat. Suspendisse eget accumsan nunc. Aliquam tempor in magna ut lobortis.
+This guide steps you through adding access to the New Relic time picker to a sample transaction overview application. You also add the selected time to the queries used in the application’s chart components. Start by setting up the sample application and running it locally. Then add the time picker, and some time picker features.
 
-```jsx
-import React from 'react';
+<Video youtubeId="inyshp3m7r" />
+</Intro>
 
-const FooBar = () => (
-  <div>Hello, World!</div>
-);
+This guide requires that you have the following:
 
-export default FooBar;
+- A github account
+- New Relic developer account
+- API Key
+- New Relic One CLI downloaded
+
+### Set up the sample application
+
+You can use this application for trying things out. Or, skip this section and start with "Add time picker" below, if you just want to add the time picker to an existing applicaiton. 
+
+<Step stepNumber="1 of 4" stepTitle="Clone the example application">
+
+This repo contains an example application and code that supports a handful of how to guides for cool and useful features you migth want in your applications. If you've tried other how to guides, you might have already cloned this repo, in which case, you should probably go ahead and update from master.
+
+```
+git clone https://github.com/newrelic/nr1-how-to.git
 ```
 
-Integer aliquam convallis scelerisque. Donec auctor dictum viverra. Praesent commodo porttitor tortor. Fusce eget sem arcu. Praesent convallis augue est. `Vestibulum` in mi sollicitudin, rhoncus est eu, rutrum augue. Ut in elit ac odio ultrices pharetra eget id magna. Donec tellus dui, volutpat ut malesuada eget, pharetra eget metus. Proin tortor lacus, vestibulum dignissim urna ac, rutrum vulputate orci. Sed justo tellus, convallis eu tincidunt at, euismod eu enim. Sed interdum viverra volutpat. Suspendisse eget accumsan nunc. Aliquam tempor in magna ut lobortis.
+</Step>
+
+<Step stepNumber="2 of 4" stepTitle="Set up and run the application locally">
+
+Use the New Relic One CLI to update the application UUID and run the application locally. In the terminal,  change to the time picker directory.
+
+```
+cd /nr1-howto/add-time-picker
+```
+</Step>
+
+<Step stepNumber="3 of 4" stepTitle="Make sure you're getting data from the right New Relic account">
+
+In your preferred text editor, open the `/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js` and then edit the following line to use your account ID (find your account ID in the Profile section of the Developer Center, where you downloaded the New Relic One CLI):
+
+```
+this.accountId = <REPLACE ME WITH YOUR ACCOUNT ID>;
+```
+
+</Step>
+
+<Step stepNumber="4 of 4">
+
+Update the UUID and serve the application by running the following:
+
+```
+nr1 nerdpack:uuid -gf
+nr1 nerdpack:serve
+```
+
+</Step>
+
+# Next Steps
+
+You'll get a URL to access New Relic One and see your application running locally: https://one.newrelic.com/?nerdpacks=local
+
+One the New Relic home page, there's a new launcher to the Add time picker application.
+
+Click the launcher, and the dashboard opens with your New Relic account transactions. 
+
+
+### Related info
 
-<Video youtubeId="ZagZfNQYJEU" />
+- [New Relic documentation](https://docs.newrelic.com)
+- [Community page for how to add a time picker](https://discuss.newrelic.com/t/how-to-add-the-time-picker-to-nrql-queries/94268)
+- 

src/templates/GuideTemplate.js

@@ -8,13 +8,17 @@ import Layout from '../components/Layout';
 import BreadcrumbBar from '../components/BreadcrumbBar';
 import Container from '../components/Container';
 import Video from '../components/Video';
+import Step from '../components/Step';
+import Intro from '../components/Intro';
 
 import createBreadcrumbs from '../utils/create-breadcrumbs';
 import pages from '../data/sidenav.json';
 import CodeSnippet from '../components/CodeSnippet';
 
 const components = {
   Video,
+  Step,
+  Intro,
   code: (props) => <CodeSnippet {...props} />,
 };
 
@@ -28,10 +32,10 @@ const GuideTemplate = ({ data }) => {
     <Layout>
       <BreadcrumbBar crumbs={crumbs} duration={frontmatter.duration} />
       <Container>
-        <div className="guideTemplate-container">
+        <div>
           <div>
             <h1>{frontmatter.title}</h1>
-            <div className="guideTemplate-content">
+            <div>
               <MDXProvider components={components}>
                 <MDXRenderer>{body}</MDXRenderer>
               </MDXProvider>