Skip to content

Commit

Permalink
feat: search input styling, QS view, filter removal
Browse files Browse the repository at this point in the history
  • Loading branch information
@josephgregoryii
josephgregoryii committed Dec 28, 2021
1 parent 9d3c6d3 commit 9d86806
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 98 deletions.
24 changes: 21 additions & 3 deletions src/@newrelic/gatsby-theme-newrelic/icons/feather.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />,
};
59 changes: 22 additions & 37 deletions src/components/SegmentedControl.js
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,61 @@
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
css={css`
margin-top: 4px;
font-size: 2em;
`}
name={`fe-${getViewType(value)}`}
/>
</button>
);
})}
Expand All @@ -97,6 +79,9 @@ SegmentedControl.propTypes = {
})
),
]).isRequired,

/** A Prop for designating css attributes to parent container */
className: PropTypes.string,
};

export default SegmentedControl;
121 changes: 63 additions & 58 deletions src/pages/instant-observability.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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' },
Expand Down Expand Up @@ -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'
Expand All @@ -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%;
Expand All @@ -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;
`}
Expand Down Expand Up @@ -360,7 +361,7 @@ const QuickstartsPage = ({ data, location }) => {
/>
))}
</FormControl>
</div>
</div> */}
{!isMobile && (
<>
<FormControl>
Expand Down Expand Up @@ -397,39 +398,51 @@ 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;
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
Expand All @@ -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
Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 9d86806

Please sign in to comment.