Merge pull request #1864 from newrelic/jerel/update-tile-design

Update tile design

COMPONENT_GUIDE.md

@@ -20,7 +20,7 @@ It takes the title provided in the front matter and accepts plain text for the d
 ```
 ---
 path: '/example'
-duration: '30 min'
+duration: 30
 title: 'Example Guide'
 template: 'GuideTemplate'
 description: 'Example guide page'

STYLE_GUIDE.md

@@ -286,7 +286,7 @@ The value that is assigned to the key slug is used in order to navigate to your
 ### GuideTemplate Frontmatter slugs
 
 - `path`: the relative path to the file
-- `duration`: the estimated time to complete the exercise
+- `duration`: the estimated time to complete the exercise in minutes
 - `title`: the title of the page
 - `template`: the Gatsby template used
 - `description`: the description of the page
@@ -312,7 +312,7 @@ The value that is assigned to the key slug is used in order to navigate to your
 ```md
 ---
 path: '/build-apps/add-time-picker-guide'
-duration: '20 min'
+duration: 20
 title: 'Add the time picker to a sample application'
 template: 'GuideTemplate'
 description: 'Learn how to add a time picker to a sample application'

src/components/FeaturedGuideTile.js

@@ -65,8 +65,7 @@ const FeaturedGuideTile = ({
           `}
           name="fe-clock"
         />
-
-        {duration}
+        {duration} min
       </div>
     </div>
     <h3

src/components/GuideTile/GuideTile.js

@@ -8,7 +8,7 @@ const GuideTile = ({ duration, title, description, className, to }) => (
     as={Link}
     to={to}
     className={className}
-    base={Surface.BASE.PRIMARY}
+    base={Surface.BASE.SECONDARY}
     interactive
     css={css`
       display: grid;
@@ -19,39 +19,14 @@ const GuideTile = ({ duration, title, description, className, to }) => (
       transition: all 0.15s ease-out;
     `}
   >
-    <div
+    <h3
       css={css`
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-gap: 0.5rem;
-        align-items: baseline;
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
       `}
     >
-      <h3>{title}</h3>
-      <div
-        css={css`
-          font-size: 0.75rem;
-          display: flex;
-          align-items: center;
-          text-align: right;
-          color: var(--accent-text-color);
-          padding: 0.3rem 0 0.2rem 1.2rem;
-          justify-self: end;
-        `}
-      >
-        {duration ? (
-          <Icon
-            css={css`
-              margin-right: 0.25rem;
-            `}
-            name="fe-clock"
-          />
-        ) : (
-          <span>&nbsp;</span>
-        )}
-        {duration}
-      </div>
-    </div>
+      {title}
+    </h3>
     <p
       css={css`
         font-size: 0.875rem;
@@ -63,6 +38,23 @@ const GuideTile = ({ duration, title, description, className, to }) => (
     >
       {description}
     </p>
+
+    {duration && (
+      <div
+        css={css`
+          font-size: 0.75rem;
+          display: inline-flex;
+          gap: 0.25rem;
+          align-items: center;
+          color: var(--accent-text-color);
+          border-radius: 0.25rem;
+          justify-self: start;
+        `}
+      >
+        <Icon name="fe-clock" />
+        {duration} min
+      </div>
+    )}
   </Surface>
 );
 

src/markdown-pages/automate-workflows/5-mins-tag-resources.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/5-mins-tag-resources'
-duration: '5 min'
+duration: 5
 title: 'Quickly tag a set of resources'
 template: 'GuideTemplate'
 description: 'Add tags to applications you instrument for easier filtering and organization.'

src/markdown-pages/automate-workflows/automated-tagging.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/automated-tagging'
-duration: '30 min'
+duration: 30
 title: 'Automate tagging of your entire stack'
 template: 'GuideTemplate'
 description: 'A quick demo application that automates the provisioning, deployment, instrumentation, and tagging of a simple app.'

src/markdown-pages/automate-workflows/diagnose-problems/error-alerts.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/diagnose-problems/error-alerts'
-duration: '20 min'
+duration: 20
 title: 'Diagnose error alerts'
 template: 'GuideTemplate'
 description: 'Learn how to use New Relic to diagnose error alerts in your services.'
@@ -255,4 +255,5 @@ Now, as a Telco Lite developer, you have enough information to debug the issue c
 
 This procedure is part of a lab that teaches you how to diagnose common issues using New Relic. Now that you've diagnosed all the issues affecting Telco Lite, [tear down your services](/automate-workflows/diagnose-problems/tear-down).
 
-</Callout>
+</Callout>
+

src/markdown-pages/automate-workflows/diagnose-problems/high-response-times.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/diagnose-problems/high-response-times'
-duration: '15 min'
+duration: 15
 title: 'Diagnose high response time'
 template: 'GuideTemplate'
 description: 'Learn how to use New Relic to diagnose high response times in your services.'

src/markdown-pages/automate-workflows/diagnose-problems/spin-up-acme.mdx

@@ -3,7 +3,7 @@ path: '/automate-workflows/diagnose-problems/spin-up-acme'
 title: 'Spin up Acme Telco Lite architecture'
 template: 'GuideTemplate'
 description: 'Set up your your environment to deploy Acme Telco Lite.'
-duration: '15 min'
+duration: 15
 procIdx: 1
 ---
 

src/markdown-pages/automate-workflows/diagnose-problems/tear-down.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/diagnose-problems/tear-down'
-duration: '15 min'
+duration: 15
 title: 'Tear Down Telco Lite'
 template: 'GuideTemplate'
 description: 'Once you finish diagnosing all the issues affecting Telco Lite, tear down your services.'

src/markdown-pages/automate-workflows/diagnose-problems/view-your-services.mdx

@@ -3,7 +3,7 @@ path: '/automate-workflows/diagnose-problems/view-your-services'
 title: 'View your services'
 template: 'GuideTemplate'
 description: 'View your services in New Relic to diagnose the problem.'
-duration: '5 min'
+duration: 5
 procIdx: 2
 ---
 

src/markdown-pages/automate-workflows/get-started-kubernetes.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/get-started-kubernetes'
-duration: '20 min'
+duration: 20
 title: 'Set up New Relic using the Kubernetes operator'
 template: 'GuideTemplate'
 description: 'Learn how to provision New Relic resources using the [Kubernetes operator](https://github.com/newrelic/newrelic-kubernetes-operator).'

src/markdown-pages/automate-workflows/get-started-new-relic-cli.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/get-started-new-relic-cli'
-duration: '20 min'
+duration: 20
 title: 'Get started with the New Relic CLI'
 template: 'GuideTemplate'
 description: 'Learn the essentials of the New Relic CLI, from install and configuration to basic usage.'

src/markdown-pages/automate-workflows/get-started-terraform.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/get-started-terraform'
-duration: '30 min'
+duration: 30
 title: 'Getting started with New Relic and Terraform'
 template: 'GuideTemplate'
 description: 'Learn how to provision New Relic resources using [Terraform](https://www.terraform.io/).'

src/markdown-pages/automate-workflows/kubernetes-helm-deployment.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/automate-workflows/kubernetes-helm-deployment'
-duration: '20 min'
+duration: 20
 title: 'Set up New Relic using Helm charts'
 template: 'GuideTemplate'
 description: 'Learn how to deploy New Relic using [Helm charts](https://github.com/newrelic/helm-charts).'

src/markdown-pages/build-apps/add-nerdgraphquery-guide.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/add-nerdgraphquery-guide'
-duration: '20 minutes'
+duration: 20
 title: 'Add the NerdGraphQuery component to an application'
 template: 'GuideTemplate'
 description: 'The NerdGraphQuery component allows you to query data from your account and add it to a dropdown menu in an application'

src/markdown-pages/build-apps/add-query-mutate-data-NerdStorage.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/add-query-mutate-data-nerdstorage'
-duration: '45 min'
+duration: 45
 title: 'Add, query, and mutate data using NerdStorage'
 template: 'GuideTemplate'
 description: 'NerdStorage is a document database accessible within New Relic One. It allows you to modify, save, and retrieve documents from one session to the next.'

src/markdown-pages/build-apps/add-time-picker-guide.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/add-time-picker-guide'
-duration: '20 min'
+duration: 20
 title: 'Add a time picker'
 template: 'GuideTemplate'
 description: 'Add a time picker to a sample application'

src/markdown-pages/build-apps/add-visualizations-to-dashboard.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/add-visualizations-to-dashboard'
-duration: '10 min'
+duration: 10
 title: 'Add your custom visualization to a dashboard'
 template: 'GuideTemplate'
 description: 'Add your custom visualization to a New Relic dashboard'

src/markdown-pages/build-apps/build-hello-world-app.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/build-hello-world-app'
-duration: '15 min'
+duration: 15
 title: 'Create a "Hello, World!" application'
 template: 'GuideTemplate'
 description: 'Build a "Hello, World!" app and publish it to New Relic One'

src/markdown-pages/build-apps/create-an-ab-test-application/catalog-info.mdx

@@ -3,7 +3,7 @@ path: '/build-apps/ab-test/catalog'
 title: 'Describe your app for the catalog'
 template: 'GuideTemplate'
 description: 'Describe your app for the catalog'
-duration: '5 min'
+duration: 5
 ---
 
 <HideWhenEmbedded>

src/markdown-pages/build-apps/create-an-ab-test-application/demo-setup.mdx

@@ -3,7 +3,7 @@ path: '/build-apps/ab-test/demo-setup'
 title: 'Spin up your demo services'
 template: 'GuideTemplate'
 description: 'Spin up your demo services'
-duration: '5 min'
+duration: 5
 ---
 
 <HideWhenEmbedded>

src/markdown-pages/build-apps/create-an-ab-test-application/navigation.mdx

@@ -3,7 +3,7 @@ path: '/build-apps/ab-test/navigation'
 title: 'Add navigation to your Nerdlet'
 template: 'GuideTemplate'
 description: 'Add navigation to your Nerdlet'
-duration: '10 min'
+duration: 10
 ---
 
 <HideWhenEmbedded>

src/markdown-pages/build-apps/create-an-ab-test-application/platform-state-context.mdx

@@ -3,7 +3,7 @@ path: '/build-apps/ab-test/platform-state-context'
 title: 'Add PlatformStateContext to your Nerdlet'
 template: 'GuideTemplate'
 description: 'Add PlatformStateContext to your Nerdlet'
-duration: '10 min'
+duration: 10
 ---
 
 <HideWhenEmbedded>

src/markdown-pages/build-apps/customize-visualization-with-New-Relic-components.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/custom-visualizations-and-the-new-relic-one-sdk'
-duration: '25 min'
+duration: 25
 title: 'Customize your visualization with SDK components'
 template: 'GuideTemplate'
 description: 'Customize your visualization'

src/markdown-pages/build-apps/customize-visualizations-with-configuration.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/customize-visualizations-with-configuration'
-duration: '10 min'
+duration: 10
 title: 'Customize your visualization with configuration options'
 template: 'GuideTemplate'
 description: 'Customize your visualization using configuration'

src/markdown-pages/build-apps/howto-use-nrone-table-components.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/howto-use-nrone-table-components'
-duration: '30 min'
+duration: 30
 title: 'Add tables to your New Relic One application'
 template: 'GuideTemplate'
 description: 'Add a table to your New Relic One app.'

src/markdown-pages/build-apps/map-pageviews-by-region.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/map-pageviews-by-region'
-duration: '30 min'
+duration: 30
 title: 'Map page views by region in a custom app'
 template: 'GuideTemplate'
 description: 'Build a New Relic app showing page view data on a world map.'

src/markdown-pages/build-apps/permission-manage-apps.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/permission-manage-apps'
-duration: '10 minutes'
+duration: 10
 title: 'Nerdpack permissions'
 template: 'GuideTemplate'
 description: 'Learn about permissions for using and subscribing accounts to Nerdpacks'

src/markdown-pages/build-apps/serve-publish-subscribe/catalog.mdx

@@ -1,7 +1,7 @@
 ---
 path: '/build-apps/publish-deploy/catalog'
 title: "Update your Nerdpack's catalog information"
-duration: '10 minutes'
+duration: 10
 template: 'GuideTemplate'
 description: 'Learn to describe your Nerdpack in the Instant Observability catalog'
 tileShorthand:

src/markdown-pages/build-apps/serve-publish-subscribe/index.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/publish-deploy'
-duration: '30 min'
+duration: 30
 title: 'Serve, publish, and subscribe to your Nerdpack'
 template: 'OverviewTemplate'
 description: 'Share and use the Nerdpacks you build'

src/markdown-pages/build-apps/set-up-dev-env.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/build-apps/set-up-dev-env'
-duration: '20 min'
+duration: 20
 title: 'Set up your development environment'
 template: 'GuideTemplate'
 description: 'Prepare to build apps and contribute to this site'

src/markdown-pages/collect-data/collect-data-from-any-source.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/collect-data/collect-data-from-any-source'
-duration: '15 min'
+duration: 15
 title: 'Collect data from any source'
 template: 'GuideTemplate'
 description: 'Open source emitters. APIs. New Relic agents. Get data from anywhere. '

src/markdown-pages/collect-data/custom-events.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/collect-data/custom-events'
-duration: '5 min'
+duration: 5
 title: 'Create custom New Relic events'
 template: 'GuideTemplate'
 description: 'Create custom New Relic events'

src/markdown-pages/collect-data/get-started-nerdgraph-api-explorer.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/collect-data/get-started-nerdgraph-api-explorer'
-duration: '25 min'
+duration: 25
 title: 'Explore NerdGraph using the API Explorer'
 template: 'GuideTemplate'
 description: 'Explore NerdGraph, our GraphQL API, and build the queries you need.'

src/markdown-pages/collect-data/network-performance-monitoring.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/collect-data/network-performance-monitoring'
-duration: '45 min'
+duration: 45
 title: 'Monitor your network devices with New Relic'
 template: 'GuideTemplate'
 description: 'Monitor your network devices with New Relic'

src/markdown-pages/collect-data/pixie-lab/explore-cluster.mdx

@@ -1,6 +1,6 @@
 ---
 path: '/collect-data/pixie/explore-cluster'
-duration: '5 min'
+duration: 5
 title: 'Explore your cluster'
 template: 'GuideTemplate'
 description: 'Explore your cluster'