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': ( <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" />, }; 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 ( <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); } } `} @@ -59,21 +32,30 @@ const SegmentedControl = ({ items, onChange }) => { {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; 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; } `} > - <div + {/* <div css={css` margin-bottom: 1rem; `} @@ -360,7 +361,7 @@ const QuickstartsPage = ({ data, location }) => { /> ))} </FormControl> - </div> + </div> */} {!isMobile && ( <> <FormControl> @@ -397,12 +398,20 @@ const QuickstartsPage = ({ data, location }) => { padding: var(--site-content-padding); `} > - <SuperTiles /> + <div + css={css` + @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) { + display: none; + } + `} + > + <SuperTiles /> + </div> <div css={css` background-color: var(--secondary-background-color); border-radius: 4px; - padding: 1rem; + padding: 0.5rem; display: flex; justify-content: space-between; align-items: center; @@ -410,26 +419,30 @@ const QuickstartsPage = ({ data, location }) => { 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); + } `} > <SearchInput @@ -439,23 +452,43 @@ const QuickstartsPage = ({ data, location }) => { 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; } `} /> - <Icon + <SegmentedControl + items={Object.values(VIEWS)} + onChange={(_e, view) => { + 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 && ( <div @@ -671,30 +704,7 @@ const QuickstartsPage = ({ data, location }) => { Showing {filteredQuickstarts.length} results for:{' '} <strong>{search || getDisplayName()}</strong> </span> - <div - css={css` - min-width: 155px; - margin-left: 20px; - display: inline; - - @media screen and (max-width: 1180px) { - margin-left: 0px; - } - `} - > - <SegmentedControl - items={Object.values(VIEWS)} - onChange={(_e, view) => { - setView(view); - - tessen.track({ - eventName: 'instantObservability', - category: 'QuickstartViewToggle', - quickstartViewState: view, - }); - }} - /> - </div> + <div>HELLO</div> </div> <div css={css` @@ -838,14 +848,9 @@ Label.propTypes = { const FormControl = ({ children }) => ( <div css={css` - margin: 0 0.5rem; display: flex; flex-direction: column; align-items: flex-start; - - @media screen and (max-width: 1180px) { - margin: 0.5rem 0; - } `} > {children}