From 9d86806d1c14f2ea7a0d9da6663c1727ceae3c66 Mon Sep 17 00:00:00 2001 From: Joe Gregory Date: Tue, 28 Dec 2021 12:56:35 -0800 Subject: [PATCH] feat: search input styling, QS view, filter removal --- .../gatsby-theme-newrelic/icons/feather.js | 24 +++- src/components/SegmentedControl.js | 59 ++++----- src/pages/instant-observability.js | 121 +++++++++--------- 3 files changed, 106 insertions(+), 98 deletions(-) diff --git a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js index 104afaf86..27341e02c 100644 --- a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js +++ b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js @@ -70,14 +70,32 @@ export default { 'message-square': ( ), - twitter: ( - - ), edit: ( <> ), + grid: ( + <> + + + + + + ), + list: ( + <> + + + + + + + + ), + twitter: ( + + ), zap: , }; diff --git a/src/components/SegmentedControl.js b/src/components/SegmentedControl.js index 1752e638c..d8980f6b0 100644 --- a/src/components/SegmentedControl.js +++ b/src/components/SegmentedControl.js @@ -1,57 +1,30 @@ 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 (
{ {items.map((item, index) => { const value = get(item, 'value'); + // Do not display current view button + if (getViewType(value) === getViewType(selected)) return; + return ( ); })} @@ -97,6 +79,9 @@ SegmentedControl.propTypes = { }) ), ]).isRequired, + + /** A Prop for designating css attributes to parent container */ + className: PropTypes.string, }; export default SegmentedControl; diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js index 9b637f100..cc51bfcb9 100644 --- a/src/pages/instant-observability.js +++ b/src/pages/instant-observability.js @@ -7,7 +7,6 @@ import { css } from '@emotion/react'; import SegmentedControl from '../components/SegmentedControl'; import Overlay from '../components/Overlay'; import PackTile from '../components/PackTile'; -import IOLogo from '../components/IOLogo'; import IOBanner from '../components/IOBanner'; import QuickstartFilter from '../components/quickstarts/QuickstartFilter'; import { @@ -31,6 +30,9 @@ import CATEGORIES from '../data/instant-observability-categories'; import { getGuidedInstallStackedNr1Url } from '../utils/get-pack-nr1-url'; import SuperTiles from '../components/SuperTiles'; +import { convertChangesToDMP } from 'diff'; + +const COLLAPSE_BREAKPOINT = '760px'; const FILTERS = [ { name: 'Dashboards', type: 'dashboards', icon: 'nr-dashboard' }, @@ -280,7 +282,7 @@ const QuickstartsPage = ({ data, location }) => { margin: var(--banner-height) auto; max-width: var(--site-max-width); - @media screen and (max-width: 760px) { + @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'sidebar' @@ -295,10 +297,9 @@ const QuickstartsPage = ({ data, location }) => { grid-area: sidebar; height: calc(100vh - var(--global-header-height)); position: sticky; - top: var(--global-header-height); - @media screen and (max-width: 760px) { - display: block; + @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) { + display: none; position: relative; overflow: hidden; width: 100%; @@ -311,12 +312,12 @@ const QuickstartsPage = ({ data, location }) => { padding: var(--site-content-padding); height: 100%; overflow: auto; - @media screen and (max-width: 760px) { + @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) { position: relative; } `} > -
{ /> ))} -
+
*/} {!isMobile && ( <> @@ -397,12 +398,20 @@ const QuickstartsPage = ({ data, location }) => { padding: var(--site-content-padding); `} > - +
+ +
{ input { font-size: 1.15em; padding: 0.5rem; - padding-left: 3.75rem; + padding-left: 2.25rem; + background: var(--color-white); + border: var(--color-neutrals-600); border-radius: 4px; &::placeholder { - color: var(--border-color); + color: var(--color-neutrals-600); + padding-left: 0.5rem; } } .dark-mode & { background-color: var(--tertiary-background-color); - } - - @media screen and (max-width: 1180px) { - flex-direction: column; - align-items: normal; + input { + background: var(--color-dark-500); - > * { - margin: 0.5rem 0; + &::placeholder { + color: var(primary-text-color); + } } } + @media (max-width: ${COLLAPSE_BREAKPOINT}) { + background-color: var(--primary-background-color); + } `} > { onClear={() => setSearch('')} onChange={(e) => setSearch(e.target.value)} css={css` - .light-mode & { - background: #ffffff; - border: var(--color-neutrals-500); + --svg-color: var(--color-neutrals-700); - max-width: 630px; + svg { + width: 16px; + height: 16px; + color: var(--svg-color); + } - input::placeholder { - color: var(--color-neutrals-600); - } + .dark-mode & { + --svg-color: var(--primary-text-color); + } + + @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) { + max-width: 100%; + } + + @media screen and (min-width: ${COLLAPSE_BREAKPOINT}) { + max-width: 630px; } `} /> - { + setView(view); + + tessen.track({ + eventName: 'instantObservability', + category: 'QuickstartViewToggle', + quickstartViewState: view, + }); + }} css={css` - margin-right: 0.25rem; + @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) { + display: none; + } `} - name="fe-clock" /> {isMobile && (
{ Showing {filteredQuickstarts.length} results for:{' '} {search || getDisplayName()} -
- { - setView(view); - - tessen.track({ - eventName: 'instantObservability', - category: 'QuickstartViewToggle', - quickstartViewState: view, - }); - }} - /> -
+
HELLO
(
{children}