Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I/O Quickstart Search & Grid Controls #1981

Merged
merged 17 commits into from
Jan 4, 2022
Merged

I/O Quickstart Search & Grid Controls #1981

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7695662
style: result description for categories
josephgregoryii Dec 28, 2021
9d3c6d3
chore: merge conflicts
josephgregoryii Dec 28, 2021
9d86806
feat: search input styling, QS view, filter removal
josephgregoryii Dec 28, 2021
cb59548
feat: added sort by dropdown
josephgregoryii Dec 28, 2021
9a9bd6a
feat: Dropdown for sorting
josephgregoryii Dec 29, 2021
e5f2f83
chore: auto-list styling on collapse breakpoint
josephgregoryii Dec 29, 2021
c6af99d
fix: missing comma on css attribute for filters
josephgregoryii Dec 29, 2021
ef22eb2
fix: Prevent scroll to top after query param update
josephgregoryii Jan 3, 2022
26afe3c
fix: result text color for dark mode
josephgregoryii Jan 3, 2022
4af86b8
fix: naming convention for artificially set constant
josephgregoryii Jan 3, 2022
62fea37
chore: merge conflicts
josephgregoryii Jan 3, 2022
72c70ed
chore: auto-scroll prevention removed
josephgregoryii Jan 3, 2022
dcbc41f
fix: Icon title, searchinput background, DM text color & styling
josephgregoryii Jan 3, 2022
2f613fe
fix: consistent text color for dark and light mode
josephgregoryii Jan 3, 2022
52d1376
fix: const file for breakpoints
josephgregoryii Jan 4, 2022
6831ac6
chore: move breakpoint to proper constant file
josephgregoryii Jan 4, 2022
5910667
chore: naming convention
josephgregoryii Jan 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions src/@newrelic/gatsby-theme-newrelic/icons/feather.js
View file
Open in desktop
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" />,
};
26 changes: 21 additions & 5 deletions src/components/PackTile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
COLLAPSE_BREAKPOINT,
} from '../data/constants';
import PackImg from './PackImg';

const VIEWS = {
Expand Down Expand Up @@ -78,6 +82,10 @@ const PackTile = ({
margin-bottom: 1em;
flex-direction: row;
`}

@media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
flex-direction: row;
}
`}
onClick={() => handlePackClick(id)}
>
Expand All @@ -104,6 +112,10 @@ const PackTile = ({
display: none;
}
`}

@media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
display: none;
}
`}
/>
<div
Expand Down Expand Up @@ -142,16 +154,20 @@ const PackTile = ({
css`
flex-direction: column;
justify-content: flex-end;
@media (max-width: 1080px) {
width: 100%;
}
`}
span {
color: var(--color-brand-500);
}
@media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
flex-direction: column;
justify-content: flex-end;
}
`}
>
{featured && (
<Tag
css={css`
background-color: var(--color-brand-300);
background-color: var(--color-brand-100);
`}
>
Featured
Expand Down
60 changes: 23 additions & 37 deletions src/components/SegmentedControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,62 @@
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
title={value}
css={css`
margin-top: 4px;
font-size: 2em;
`}
name={`fe-${getViewType(value)}`}
/>
</button>
);
})}
Expand All @@ -97,6 +80,9 @@ SegmentedControl.propTypes = {
})
),
]).isRequired,

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

export default SegmentedControl;
2 changes: 2 additions & 0 deletions src/data/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,5 @@ export const RESERVED_QUICKSTART_IDS = {
GUIDED_INSTALL: 'GUIDED_INSTALL',
BUILD_YOUR_OWN_QUICKSTART: 'BUILD_YOUR_OWN_QUICKSTART',
};

export const COLLAPSE_BREAKPOINT = '760px';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I'm so sorry, but let's call this something with quickstarts in the name since that's the only place it's used

Loading