I/O Quickstart Search & Grid Controls

gatsby-browser.js

@@ -55,4 +55,19 @@ const onClientEntry = () => {
   window.ReactDOM = require('react-dom');
 };
 
-export { wrapPageElement, onInitialClientRender, onClientEntry };
+const shouldUpdateScroll = ({ routerProps: { location } }) => {
+  const TRANSITION_DELAY = 600;
+
+  // Scroll window to top position if there is no search (i.e., page load)
+  if (!location.search) {
+    window.setTimeout(() => window.scrollTo(0, 0), TRANSITION_DELAY);
+  }
+  return false;
+};
+
+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/PackTile.js

@@ -134,6 +134,7 @@ const PackTile = ({
         </p>
       </div>
       <div
+        className="tag-div"
         css={css`
           padding: 1em;
           display: flex;
@@ -142,16 +143,16 @@ const PackTile = ({
           css`
             flex-direction: column;
             justify-content: flex-end;
-            @media (max-width: 1080px) {
-              width: 100%;
-            }
           `}
+          span {
+            color: var(--color-brand-500);
+          }
         `}
       >
         {featured && (
           <Tag
             css={css`
-              background-color: var(--color-brand-300);
+              background-color: var(--color-brand-100);
             `}
           >
             Featured

src/components/SegmentedControl.js

@@ -1,79 +1,61 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
+import { Icon } from '@newrelic/gatsby-theme-newrelic';
+
+const getViewType = (fullView) => fullView.split(' ')[0].toLowerCase();
 
 const get = (x, key) =>
   Object.prototype.hasOwnProperty.call(x, key) ? x[key] : x;
 
-const SegmentedControl = ({ items, onChange }) => {
+const SegmentedControl = ({ items, onChange, className }) => {
   const [selected, setSelected] = useState(get(items[0], 'value'));
 
   return (
     <div
+      className={className}
       css={css`
-        border: 2px solid var(--color-white);
-        background-color: var(--color-white);
-        display: inline-flex;
-        border-radius: 3px;
-
         button {
           border: 0;
-          border-radius: 3px;
           background: none;
-          font-size: 0.75em;
-          padding: 0.5em 1em;
           cursor: pointer;
           user-select: none;
-          flex-grow: 1;
-
-          &[aria-pressed='true'] {
-            color: var(--color-white);
-            background-color: var(--color-brand-600);
-          }
-
-          &[disabled='true'] {
-            color: var(--color-neutrals-500);
-            background-color: var(--color-brand-600);
-            cursor: default;
-          }
         }
 
         .dark-mode & {
-          border-color: var(--primary-background-color);
-          background-color: var(--primary-background-color);
-
           button {
-            color: var(--primary-text-color);
-
-            &[aria-pressed='true'] {
-              color: var(--color-white);
-            }
-
-            &[disabled='true'] {
-              color: var(--color-brand-600);
-            }
+            color: var(--color-neutrals-500);
           }
         }
       `}
     >
       {items.map((item, index) => {
         const value = get(item, 'value');
 
+        // Do not display current view button
+        if (getViewType(value) === getViewType(selected)) return;
+
         return (
           <button
             type="button"
             key={index}
             tabIndex={index}
             value={value}
-            aria-pressed={selected === value}
-            disabled={item.disabled}
             onClick={(e) => {
-              if (item.disabled) return;
               setSelected(value);
               onChange && onChange(e, value);
             }}
+            css={css`
+              margin-left: 8px;
+            `}
           >
-            {get(item, 'label')}
+            <Icon
+              css={css`
+                margin-top: 4px;
+                font-size: 2em;
+              `}
+              name={`fe-${getViewType(value)}`}
+            />
           </button>
         );
       })}
@@ -97,6 +79,9 @@ SegmentedControl.propTypes = {
       })
     ),
   ]).isRequired,
+
+  /** A Prop for designating css attributes to parent container */
+  className: PropTypes.string,
 };
 
 export default SegmentedControl;