I/O Redesign

New and refreshed I/O Redesign

COMPONENT_GUIDE.md

@@ -443,7 +443,7 @@ You can see the difference in what is displayed below:
 
 ### Usage
 
-The `SuperTiles` component renders the `GuidedInstallTile` and `CodeStreamTile` (treatment) components.
+The `SuperTiles` component renders the `GuidedInstallTile` component.
 
 To include it:
 
@@ -484,12 +484,3 @@ The `GuidedInstallTile` component includes custom content relevant to the guided
 <GuidedInstallTile />
 ```
 
-### CodeStreamTile
-
-### Usage
-
-The `CodeStreamTile` component includes custom content relevant to New Relic CodeStream.
-
-```html
-<CodeStreamTile />
-```

gatsby-browser.js

@@ -55,4 +55,28 @@ const onClientEntry = () => {
   window.ReactDOM = require('react-dom');
 };
 
-export { wrapPageElement, onInitialClientRender, onClientEntry };
+const shouldUpdateScroll = ({ routerProps: { location } }) => {
+  // Offset updates scroll to position beneath the I/O Banner on category/search change
+  const PAGE_OFFSET_HEIGHT = 310;
+  const IS_IO = location.pathname.includes('instant-observability');
+
+  // scrolls only after search query parameter on I/O site changes
+  if (IS_IO && location.search) {
+    window.setTimeout(() =>
+      window.scrollTo({ top: PAGE_OFFSET_HEIGHT, left: 0, behavior: 'smooth' })
+    );
+
+    // Does not update to default behavior to persist this change
+    return false;
+  }
+
+  // if we're not on I/O, update to default behavior
+  return true;
+};
+
+export {
+  wrapPageElement,
+  onInitialClientRender,
+  onClientEntry,
+  shouldUpdateScroll,
+};

src/@newrelic/gatsby-theme-newrelic/icons/feather.js

@@ -70,14 +70,32 @@ export default {
   'message-square': (
     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
   ),
-  twitter: (
-    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
-  ),
   edit: (
     <>
       <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
       <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
     </>
   ),
+  grid: (
+    <>
+      <rect x="3" y="3" width="7" height="7" />
+      <rect x="14" y="3" width="7" height="7" />
+      <rect x="14" y="14" width="7" height="7" />
+      <rect x="3" y="14" width="7" height="7" />
+    </>
+  ),
+  list: (
+    <>
+      <line x1="8" y1="6" x2="21" y2="6" />
+      <line x1="8" y1="12" x2="21" y2="12" />
+      <line x1="8" y1="18" x2="21" y2="18" />
+      <line x1="3" y1="6" x2="3.01" y2="6" />
+      <line x1="3" y1="12" x2="3.01" y2="12" />
+      <line x1="3" y1="18" x2="3.01" y2="18" />
+    </>
+  ),
+  twitter: (
+    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
+  ),
   zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
 };

src/components/GuidedInstallTile.js

@@ -49,7 +49,7 @@ const GuidedInstallTile = () => {
               line-height: 20px;
             `}
           >
-            First Steps
+            First step
           </span>
           <h2
             css={css`
@@ -63,7 +63,7 @@ const GuidedInstallTile = () => {
               }
             `}
           >
-            Guided Install
+            Guided install
           </h2>
           <span
             css={css`
@@ -74,8 +74,9 @@ const GuidedInstallTile = () => {
               }
             `}
           >
-            Install the New Relic agent with a single command line and start
-            monitoring your log and infrastructure data in real time.
+            Many engineers start here. You'll install an agent with a single
+            command and start monitoring your log and infrastructure data in
+            real time.
           </span>
         </div>
         <div>