From 8fa0a4637b8fa10e2087f72191637d008ff7ed04 Mon Sep 17 00:00:00 2001
From: Clinton <clinton.langosch@gmail.com>
Date: Mon, 7 Jun 2021 16:14:50 -0500
Subject: [PATCH] feat: make form controls more responsive. refactor form
 controls for more control over style

---
 src/components/Select.js         |  94 +++++++++++++++
 src/pages/observability-packs.js | 197 ++++++++++++++-----------------
 2 files changed, 182 insertions(+), 109 deletions(-)
 create mode 100644 src/components/Select.js

diff --git a/src/components/Select.js b/src/components/Select.js
new file mode 100644
index 000000000..c14983a01
--- /dev/null
+++ b/src/components/Select.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+
+const Select = ({ disabled, ...props }) => (
+  <div
+    css={css`
+      height: 28px;
+      display: grid;
+      grid-template-areas: 'select';
+      align-items: center;
+      width: 100%;
+      min-width: 15ch;
+      border: 1px solid var(--color-neutrals-500);
+      border-radius: 0.25rem;
+      padding: 0.25rem 0.5rem;
+      cursor: pointer;
+      position: relative;
+
+      ${disabled &&
+      css`
+        cursor: not-allowed;
+        opacity: 0.5;
+
+        .light-mode & {
+          background-color: var(--color-neutrals-100);
+        }
+      `}
+
+      .dark-mode & {
+        border: 1px solid var(--color-dark-300);
+        background-color: var(--color-dark-300);
+      }
+
+      &::after {
+        content: '';
+        grid-area: select;
+        justify-self: end;
+        width: 0.5rem;
+        height: 0.25rem;
+        clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+        background-color: var(--color-neutrals-700);
+
+        .dark-mode & {
+          background-color: var(--color-dark-700);
+        }
+      }
+    `}
+  >
+    <select
+      disabled={disabled}
+      css={css`
+        grid-area: select;
+        appearance: none;
+        background-color: transparent;
+        border: none;
+        padding: 0 1em 0 0;
+        margin: 0;
+        width: 100%;
+        font-family: inherit;
+        font-size: 14px;
+        cursor: inherit;
+        line-height: inherit;
+        outline: none;
+
+        &:focus + .focus-ring {
+          position: absolute;
+          top: -1px;
+          left: -1px;
+          right: -1px;
+          bottom: -1px;
+          border: 2px solid var(--color-brand-500);
+          border-radius: inherit;
+        }
+
+        .dark-mode & {
+          color: var(--color-dark-900);
+
+          option {
+            color: var(--color-dark-050);
+          }
+        }
+      `}
+      {...props}
+    />
+    <span className="focus-ring" />
+  </div>
+);
+
+Select.propTypes = {
+  disabled: PropTypes.bool,
+};
+
+export default Select;
diff --git a/src/pages/observability-packs.js b/src/pages/observability-packs.js
index 790e1cd00..f873fdb54 100644
--- a/src/pages/observability-packs.js
+++ b/src/pages/observability-packs.js
@@ -5,9 +5,20 @@ import DevSiteSeo from '../components/DevSiteSeo';
 import { css } from '@emotion/react';
 import PackTile from '../components/PackTile';
 import PackList from '../components/PackList';
+import Select from '../components/Select';
 import { SearchInput, Button, Dropdown } from '@newrelic/gatsby-theme-newrelic';
 import { useQueryParam, StringParam } from 'use-query-params';
 
+const sortOptionValues = ['Alphabetical', 'Reverse', 'Popularity'];
+const packContentsFilterValues = [
+  'Anything',
+  'Dashboards',
+  'Alerts',
+  'Visualizations',
+  'Synthetics Checks',
+  'Applications',
+];
+
 const ObservabilityPacksPage = ({ data, location }) => {
   const {
     allObservabilityPacks: { nodes: o11yPacks },
@@ -106,12 +117,26 @@ const ObservabilityPacksPage = ({ data, location }) => {
           .dark-mode & {
             background-color: var(--color-dark-100);
           }
+          @media screen and (max-width: 1180px) {
+            flex-direction: column;
+            align-items: normal;
+            > * {
+              margin: 0.5rem 0;
+            }
+          }
         `}
       >
         <span>Showing {filteredPacks.length} results</span>
         <div
           css={css`
             display: flex;
+            @media screen and (max-width: 1180px) {
+              flex-direction: column;
+              align-items: normal;
+              > * {
+                margin: 0.5rem 0;
+              }
+            }
           `}
         >
           <div
@@ -119,123 +144,46 @@ const ObservabilityPacksPage = ({ data, location }) => {
               margin: 0 0.5rem;
             `}
           >
-            <span
-              css={css`
-                font-size: 12px;
-                font-weight: bold;
-              `}
-            >
-              Sort by
-            </span>
-            <Dropdown align="left">
-              <Dropdown.Toggle
-                css={css`
-                  background-color: var(--color-white);
-                  .dark-mode & {
-                    background-color: transparent;
-                  }
-                `}
-                size={Button.SIZE.SMALL}
-                variant={Button.VARIANT.OUTLINE}
+            <FormControl>
+              <Label htmlFor="sortFilter">Sort by</Label>
+              <Select
+                id="sortFilter"
+                value={sortState}
+                onChange={(e) => {
+                  setSortState(e.target.value);
+                }}
               >
-                {sortState}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setSortState('Alphabetical');
-                  }}
-                >
-                  Alphabetical
-                </Dropdown.MenuItem>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setSortState('Reverse');
-                  }}
-                >
-                  Reverse
-                </Dropdown.MenuItem>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setSortState('Popularity');
-                  }}
-                >
-                  Popularity
-                </Dropdown.MenuItem>
-              </Dropdown.Menu>
-            </Dropdown>
+                {sortOptionValues.map((sortOption) => (
+                  <option key={sortOption} value={sortOption}>
+                    {sortOption}
+                  </option>
+                ))}
+              </Select>
+            </FormControl>
           </div>
           <div
             css={css`
               margin: 0 0.5rem;
             `}
           >
-            <span
-              css={css`
-                font-size: 12px;
-                font-weight: bold;
-              `}
-            >
-              Filter packs containing
-            </span>
-            <Dropdown align="left">
-              <Dropdown.Toggle
-                css={css`
-                  background-color: var(--color-white);
-                  .dark-mode & {
-                    background-color: transparent;
-                  }
-                `}
-                size={Button.SIZE.SMALL}
-                variant={Button.VARIANT.OUTLINE}
+            <FormControl>
+              <Label htmlFor="packContentsFilter">
+                Filter packs containing
+              </Label>
+              <Select
+                id="packContentsFilter"
+                value={containingFilterState}
+                onChange={(e) => {
+                  setContainingFilterState(e.target.value);
+                }}
               >
-                {containingFilterState}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setContainingFilterState('Anything');
-                  }}
-                >
-                  Anything
-                </Dropdown.MenuItem>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setContainingFilterState('Dashboards');
-                  }}
-                >
-                  Dashboards
-                </Dropdown.MenuItem>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setContainingFilterState('Alerts');
-                  }}
-                >
-                  Alerts
-                </Dropdown.MenuItem>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setContainingFilterState('Visualizations');
-                  }}
-                >
-                  Visualizations
-                </Dropdown.MenuItem>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setContainingFilterState('Synthetics');
-                  }}
-                >
-                  Synthetic Checks
-                </Dropdown.MenuItem>
-                <Dropdown.MenuItem
-                  onClick={() => {
-                    setContainingFilterState('Applications');
-                  }}
-                >
-                  Applications
-                </Dropdown.MenuItem>
-              </Dropdown.Menu>
-            </Dropdown>
+                {packContentsFilterValues.map((packContentsItem) => (
+                  <option key={packContentsItem} value={packContentsItem}>
+                    {packContentsItem}
+                  </option>
+                ))}
+              </Select>
+            </FormControl>
           </div>
         </div>
         <div>
@@ -304,4 +252,35 @@ export const pageQuery = graphql`
   }
 `;
 
+const Label = ({ children, htmlFor }) => (
+  <label
+    htmlFor={htmlFor}
+    css={css`
+      display: block;
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 0.25rem;
+    `}
+  >
+    {children}
+  </label>
+);
+
+Label.propTypes = {
+  children: PropTypes.node,
+  htmlFor: PropTypes.string,
+};
+
+const FormControl = ({ children }) => (
+  <div
+    css={css`
+      &:not(:last-child) {
+        margin-bottom: 1.5rem;
+      }
+    `}
+  >
+    {children}
+  </div>
+);
+
 export default ObservabilityPacksPage;