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/PackTile.js b/src/components/PackTile.js index 61c0cd413..8dfaf4ba1 100644 --- a/src/components/PackTile.js +++ b/src/components/PackTile.js @@ -9,7 +9,11 @@ import { Tag, Link, } from '@newrelic/gatsby-theme-newrelic'; -import { SHIELD_LEVELS, RESERVED_QUICKSTART_IDS } from '../data/constants'; +import { + SHIELD_LEVELS, + RESERVED_QUICKSTART_IDS, + QUICKSTARTS_COLLAPSE_BREAKPOINT, +} from '../data/constants'; import PackImg from './PackImg'; const VIEWS = { @@ -78,6 +82,10 @@ const PackTile = ({ margin-bottom: 1em; flex-direction: row; `} + + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + flex-direction: row; + } `} onClick={() => handlePackClick(id)} > @@ -104,6 +112,10 @@ const PackTile = ({ display: none; } `} + + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + display: none; + } `} />
{featured && ( Featured diff --git a/src/components/SegmentedControl.js b/src/components/SegmentedControl.js index 1752e638c..4d8af268d 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 +80,9 @@ SegmentedControl.propTypes = { }) ), ]).isRequired, + + /** A Prop for designating css attributes to parent container */ + className: PropTypes.string, }; export default SegmentedControl; diff --git a/src/data/constants.js b/src/data/constants.js index 49bfb0eca..a73e1ff46 100644 --- a/src/data/constants.js +++ b/src/data/constants.js @@ -50,3 +50,5 @@ export const RESERVED_QUICKSTART_IDS = { GUIDED_INSTALL: 'GUIDED_INSTALL', BUILD_YOUR_OWN_QUICKSTART: 'BUILD_YOUR_OWN_QUICKSTART', }; + +export const QUICKSTARTS_COLLAPSE_BREAKPOINT = '760px'; diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js index e6cae0754..d3e69cd42 100644 --- a/src/pages/instant-observability.js +++ b/src/pages/instant-observability.js @@ -18,7 +18,11 @@ import { navigate } from '@reach/router'; import BUILD_YOUR_OWN from '../images/build-your-own.svg'; import { useDebounce } from 'react-use'; import { sortFeaturedQuickstarts } from '../utils/sortFeaturedQuickstarts'; -import { QUICKSTARTS_REPO, RESERVED_QUICKSTART_IDS } from '../data/constants'; +import { + QUICKSTARTS_REPO, + RESERVED_QUICKSTART_IDS, + QUICKSTARTS_COLLAPSE_BREAKPOINT, +} from '../data/constants'; import CATEGORIES from '../data/instant-observability-categories'; import SuperTiles from '../components/SuperTiles'; @@ -165,6 +169,18 @@ const QuickstartsPage = ({ data, location }) => { .filter(filterByCategory(cat.value)).length, })); + /** + * Finds display name for selected category. + * @returns {String} Display name for results found. + */ + const getDisplayName = () => { + const found = CATEGORIES.find((cat) => cat.value === category); + + if (!found.value) return 'All quickstarts'; + + return found.displayName; + }; + return ( <> { margin: var(--banner-height) auto; max-width: var(--site-max-width); - @media screen and (max-width: 760px) { + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'sidebar' @@ -203,8 +219,8 @@ const QuickstartsPage = ({ data, location }) => { position: sticky; top: var(--global-header-height); - @media screen and (max-width: 760px) { - display: block; + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + display: none; position: relative; overflow: hidden; width: 100%; @@ -217,7 +233,7 @@ const QuickstartsPage = ({ data, location }) => { padding: var(--site-content-padding); height: 100%; overflow: auto; - @media screen and (max-width: 760px) { + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { position: relative; } `} @@ -262,12 +278,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-400); - > * { - margin: 0.5rem 0; + &::placeholder { + color: var(primary-text-color); + } } } + @media (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + background-color: var(--primary-background-color); + } `} > setSearch('')} onChange={(e) => setSearch(e.target.value)} + css={css` + --svg-color: var(--color-neutrals-700); + + svg { + width: 16px; + height: 16px; + color: var(--svg-color); + } + + .dark-mode & { + --svg-color: var(--primary-text-color); + } + + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + max-width: 100%; + } + + @media screen and (min-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + max-width: 630px; + } + `} + /> + { + setView(view); + + tessen.track({ + eventName: 'instantObservability', + category: 'QuickstartViewToggle', + quickstartViewState: view, + }); + }} + css={css` + @media screen and (max-width: ${QUICKSTARTS_COLLAPSE_BREAKPOINT}) { + display: none; + } + `} /> {isMobile && (
{
- Showing {filteredQuickstarts.length} results + align-text: center; -
- { - setView(view); - - tessen.track({ - eventName: 'instantObservability', - category: 'QuickstartViewToggle', - quickstartViewState: view, - }); - }} - /> -
+ strong { + color: var(--text-color); + } + `} + > + + Showing {filteredQuickstarts.length} results for:{' '} + {search || getDisplayName()} +
( font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; + color: var(--primary-text-color); `} > {children} @@ -559,14 +615,9 @@ Label.propTypes = { const FormControl = ({ children }) => (
{children}