From c7f5f4610edd5a7d7fae63b01c173dd30eb3c612 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Fri, 23 Oct 2020 15:16:10 -0700
Subject: [PATCH] fix: update guides to use the <Callout /> component

---
 .../5-mins-tag-resources.mdx                  |  4 ++--
 .../automate-workflows/automated-tagging.mdx  |  8 +++----
 .../get-started-kubernetes.mdx                |  4 ++--
 .../kubernetes-helm-deployment.mdx            |  4 ++--
 .../build-apps/add-nerdgraphquery-guide.mdx   | 20 ++++++++--------
 .../build-apps/add-time-picker-guide.mdx      | 24 +++++++++----------
 .../explore-docs/nerdstorage.mdx              |  4 ++--
 src/pages/kubecon-europe-2020.js              |  7 +++---
 8 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx b/src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx
index 6b3f57ef1..cf6fb20ed 100644
--- a/src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx
+++ b/src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx
@@ -113,10 +113,10 @@ What if you want to add multiple tags? You can use tag sets for that: While tags
 
 `tag1:value1,tag2:value2`
 
-<Important>
+<Callout variant="important">
   Adding tags is an asynchronous operation: it could take a little while for the
   tags to get created.
-</Important>
+</Callout>
 
 ```bash lineNumbers=false
 # Adding a single tag
diff --git a/src/markdown-pages/automate-workflows/automated-tagging.mdx b/src/markdown-pages/automate-workflows/automated-tagging.mdx
index 6f5b59e61..53d9f527d 100644
--- a/src/markdown-pages/automate-workflows/automated-tagging.mdx
+++ b/src/markdown-pages/automate-workflows/automated-tagging.mdx
@@ -178,11 +178,11 @@ The first section is `services`:
 
 `services` defines one service, `app1`, which lives on `host1` at port `5001`. It uses the Demo Nodetron you learned about earlier in this guide as its source.
 
-<Important>
+<Callout variant="important">
 
 In this example, some HTML has been removed for clarity. To run the deployer, you need to use the real content in `hello.json`.
 
-</Important>
+</Callout>
 
 The second section is `global_tags`:
 
@@ -288,11 +288,11 @@ Visit your application by navigating to the `app1` url in your browser:
 
 From there, you can follow the instructions to send traffic to New Relic.
 
-<Important>
+<Callout variant="important">
 
 Your `app1` url will be different than the url shown in this guide.
 
-</Important>
+</Callout>
 
 </Step>
 
diff --git a/src/markdown-pages/automate-workflows/get-started-kubernetes.mdx b/src/markdown-pages/automate-workflows/get-started-kubernetes.mdx
index d7e35f460..548c4db4a 100644
--- a/src/markdown-pages/automate-workflows/get-started-kubernetes.mdx
+++ b/src/markdown-pages/automate-workflows/get-started-kubernetes.mdx
@@ -222,12 +222,12 @@ We have a Kubernetes test cluster ready for you in 2 minutes. By following this
 
 Good luck!
 
-<Important>
+<Callout variant="important">
 
 Some browsers automatically disable the use of iframes. If the module isn't loading
 please check your browser settings.
 
-</Important>
+</Callout>
 
 <iframe
   title="Instruct K8 Operator Module"
diff --git a/src/markdown-pages/automate-workflows/kubernetes-helm-deployment.mdx b/src/markdown-pages/automate-workflows/kubernetes-helm-deployment.mdx
index 2715df878..699b6d7d2 100644
--- a/src/markdown-pages/automate-workflows/kubernetes-helm-deployment.mdx
+++ b/src/markdown-pages/automate-workflows/kubernetes-helm-deployment.mdx
@@ -126,12 +126,12 @@ We can have a Kubernetes test cluster ready for you in a few minutes. By followi
 
 Good luck!
 
-<Important>
+<Callout variant="important">
 
 Some browsers automatically disable the use of iframes. If the module isn't loading
 please check your browser settings.
 
-</Important>
+</Callout>
 
 <iframe
   title="Instruct K8s Helm Module"
diff --git a/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx b/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx
index ced9a2b31..af91aeb87 100644
--- a/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx
+++ b/src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx
@@ -25,11 +25,11 @@ NerdGraph is our GraphQL implementation. GraphQL has some key differences when c
 - The client, not the server, determines what data is returned.
 - You can easily collect data from multiple sources. For example, in a single query, you can get account information, infrastructure data, and issue a NRQL request.
 
-<Important>
+<Callout variant="important">
 
 Before completing this exercise, you can experiment with GraphQL queries in our [NerdGraph API explorer](https://api.newrelic.com/graphiql).
 
-</Important>
+</Callout>
 
 We also have a 14-minute video that covers the steps below.
 
@@ -44,11 +44,11 @@ To develop projects, you need our New Relic One CLI (command line interface). If
 * Install [Node.js](https://nodejs.org/en/download/).
 * Complete steps 1–4 of our [CLI quick start](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==), and be sure to make a copy of your account ID from step 1 because you’ll need it later.
 
-<Important>
+<Callout variant="important">
 
 If you've already installed the New Relic One CLI, but you can't remember your account ID, start the [CLI quick start](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==) again, and then click the **Get your API key** down arrow. The account ID is the number preceding your account name.
 
-</Important>
+</Callout>
 
 For additional details, see [Set up your development environment](set-up-dev-env).
 
@@ -88,11 +88,11 @@ In your preferred text editor, open `index.js`.
 
 Replace `<ADD YOUR ACCOUNT ID>` with your account id:
 
-<Important>
+<Callout variant="important">
 
 Your account ID is available in the CLI quick start (see **Before you begin**).
 
-</Important>
+</Callout>
 
 ```jsx
 this.accountId = <ADD YOUR ACCOUNT ID>;
@@ -149,11 +149,11 @@ After launching the **Use NerdGraph** application, you see a dashboard that give
 
 Now you can create a dropdown menu for changing the account the application is viewing. The first step is to import the `NerdGraphQuery` component into the application's `index.js` file.
 
-<Important>
+<Callout variant="important">
 
 If you need more details about our example below, see the APIs and components page on [https://developer.newrelic.com](https://developer.newrelic.com/client-side-sdk/index.html#data-fetching/NerdGraphQuery)
 
-</Important>
+</Callout>
 
 <Steps>
 
@@ -184,11 +184,11 @@ The `NerdGraphQuery` component takes a query object that states the source you w
 
 Add the following code to your `index.js` file in the `render` method:
 
-<Important>
+<Callout variant="important">
 
 In the browser console, you can see the data from your query returned in an object that follows the same structure of the object in the initial query.
 
-</Important>
+</Callout>
 
 ```jsx
 const query = `
diff --git a/src/markdown-pages/build-apps/add-time-picker-guide.mdx b/src/markdown-pages/build-apps/add-time-picker-guide.mdx
index 308d1e704..67d2e3d28 100644
--- a/src/markdown-pages/build-apps/add-time-picker-guide.mdx
+++ b/src/markdown-pages/build-apps/add-time-picker-guide.mdx
@@ -37,11 +37,11 @@ To develop projects, you need our New Relic One CLI (command line interface). If
 * Install [Node.js](https://nodejs.org/en/download/).
 * Complete steps 1–4 of the [CLI quick start](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==). In step 1, be sure to make a copy of the number preceding your account name. This is your accound ID, and you’ll need it later.
 
-<Important>
+<Callout variant="important">
 
   If you've already installed the New Relic One CLI, but you can't remember your account ID, start the [CLI quick start](https://one.newrelic.com/launcher/developer-center.launcher?pane=eyJuZXJkbGV0SWQiOiJkZXZlbG9wZXItY2VudGVyLmRldmVsb3Blci1jZW50ZXIifQ==) again, and then click the **Get your API key** down arrow. The account ID is the number preceding your account name.
 
-</Important>
+</Callout>
 
 For additional details, see [Set up your development environment](set-up-dev-env).
 
@@ -81,11 +81,11 @@ In your preferred text editor, open `index.js`.
 
 Replace `<ADD YOUR ACCOUNT ID>` with your account id:
 
-<Important>
+<Callout variant="important">
 
   Your account ID is available in the CLI quick start (see **Before you begin**).
   
-</Important>
+</Callout>
 
 ```jsx
 this.accountId = <ADD YOUR ACCOUNT ID>;
@@ -134,11 +134,11 @@ In the following sections, you'll add the time picker to the example application
 
 The first step in adding the time picker is to import the `PlatformStateContext` component.
 
-<Important>
+<Callout variant="important">
 
 If you need more details about the `PlatformStateContext` example that follows, see the [APIs and components page](/components/platform-state-context)
 
-</Important>
+</Callout>
 
 Here's what the `PlatformStateContext` component does:
 
@@ -297,11 +297,11 @@ In your console, you should see some data from the New Relic platform state. Now
 
 This step requires you to import the `timeRangeToNrql` utility method from the New Relic One community library.
 
-<Important>
+<Callout variant="important">
 
 You can get more details on the New Relic One community library from our [GitHub repo](https://github.com/newrelic/nr1-community).
 
-</Important>
+</Callout>
 
 This helper method takes your `PlatformState.timeRange` duration data, formats it from milliseconds, and returns a formatted `SINCE` statement to add to your `NRQL`.
 
@@ -311,11 +311,11 @@ This helper method takes your `PlatformState.timeRange` duration data, formats i
 
 Import the `timeRangeToNrql` method by inserting this line of code below the other `import` sections:
 
-<Important>
+<Callout variant="important">
 
 You don't need to include the `AccountDropdown` from the community import example.
 
-</Important>
+</Callout>
 
 ```jsx
 import { timeRangeToNrql } from '@newrelic/nr1-community';
@@ -347,11 +347,11 @@ After creating the `since` variable, go through the code in the `PlatformStateCo
 
 After you update all of the chart components, confirm that the final `index.js` file looks similar to this:
 
-<Important>
+<Callout variant="important">
 
 This completed sample code is in your `nerdlet final.js`.
 
-</Important>
+</Callout>
 
 ```jsx
 import React from 'react';
diff --git a/src/markdown-pages/explore-docs/nerdstorage.mdx b/src/markdown-pages/explore-docs/nerdstorage.mdx
index 21dd711a2..a33d1e39c 100644
--- a/src/markdown-pages/explore-docs/nerdstorage.mdx
+++ b/src/markdown-pages/explore-docs/nerdstorage.mdx
@@ -61,11 +61,11 @@ Each NerdStorage level has different properties and purpose:
 - **Documents**: A document is formed by an identifier (`documentId`) and a set of data associated with it.
 - **Data** associated with a document: NerdStorage accepts any sort of data associated to a `documentId`. Query and mutation components that are provided work by serializing and deserializing JSON.
 
-<Caution>
+<Callout variant="caution">
 
 NerdStorage is not encrypted. Do not store secrets, API keys, personal access tokens or license keys here.
 
-</Caution>
+</Callout>
 
 ### Limits
 
diff --git a/src/pages/kubecon-europe-2020.js b/src/pages/kubecon-europe-2020.js
index 159e7c27e..56b9afa5d 100644
--- a/src/pages/kubecon-europe-2020.js
+++ b/src/pages/kubecon-europe-2020.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import cx from 'classnames';
 import SEO from '../components/Seo';
-import { Button, Video } from '@newrelic/gatsby-theme-newrelic';
+import { Button, Callout, Video } from '@newrelic/gatsby-theme-newrelic';
 import PageLayout from '../components/PageLayout';
 import ExternalLink from '../components/ExternalLink';
 import FeatherIcon from '../components/FeatherIcon';
 import kubeconHeader from '../images/kubecon-europe-2020/kubecon-europe-2020.jpg';
 import styles from './kubecon-europe-2020.module.scss';
-import Important from '../components/Important';
 
 const KubeConPage = () => {
   return (
@@ -49,10 +48,10 @@ const KubeConPage = () => {
           </section>
           <section className={styles.section}>
             <h2>Attend one of our lightning talks</h2>
-            <Important>
+            <Callout variant="important">
               Go to the virtual expo tab, and find New Relic in Silver Hall B to
               attend a lightning talk.
-            </Important>
+            </Callout>
           </section>
           <section className={cx(styles.section, styles.assetTable)}>
             <div className={styles.point}>