I/O Quickstart Search & Grid Controls

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

@@ -78,6 +78,10 @@ const PackTile = ({
           margin-bottom: 1em;
           flex-direction: row;
         `}
+
+        @media screen and (max-width: 760px) {
+          flex-direction: row;
+        }
       `}
       onClick={() => handlePackClick(id)}
     >
@@ -104,6 +108,10 @@ const PackTile = ({
               display: none;
             }
           `}
+
+          @media screen and (max-width: 760px) {
+            display: none;
+          }
         `}
       />
       <div
@@ -142,16 +150,20 @@ const PackTile = ({
           css`
             flex-direction: column;
             justify-content: flex-end;
-            @media (max-width: 1080px) {
-              width: 100%;
-            }
           `}
+          span {
+            color: var(--color-brand-500);
+          }
+          @media screen and (max-width: 760px) {
+            flex-direction: column;
+            justify-content: flex-end;
+          }
         `}
       >
         {featured && (
           <Tag
             css={css`
-              background-color: var(--color-brand-300);
+              background-color: var(--color-brand-100);
             `}
           >
             Featured

src/components/SegmentedControl.js

@@ -1,79 +1,62 @@
 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
+              title={value}
+              css={css`
+                margin-top: 4px;
+                font-size: 2em;
+              `}
+              name={`fe-${getViewType(value)}`}
+            />
           </button>
         );
       })}
@@ -97,6 +80,9 @@ SegmentedControl.propTypes = {
       })
     ),
   ]).isRequired,
+
+  /** A Prop for designating css attributes to parent container */
+  className: PropTypes.string,
 };
 
 export default SegmentedControl;