Skip to content

Commit

Permalink
Merge pull request #974 from newrelic/develop
Browse files Browse the repository at this point in the history 
Release 08-01-2024
  • Loading branch information
@clarkmcadoo
clarkmcadoo authored Jan 8, 2024
2 parents da56dc0 + 5ce9d0f commit a2af6a6
Show file tree
Hide file tree
Showing 15 changed files with 432 additions and 435 deletions.
188 changes: 123 additions & 65 deletions demo/src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,128 @@ const IndexPage = () => {
<h1>{t('home.welcome')}</h1>
<p>{t('home.intro')}</p>
<section>
<Tabs>
<Tabs.Bar>
<Tabs.BarItem id="lotsa-text">Lotsa text</Tabs.BarItem>
<Tabs.BarItem id="first-codeblock">A code block</Tabs.BarItem>
<Tabs.BarItem id="first-live-edit">
A live editable code block w/ preview
</Tabs.BarItem>
<Tabs.BarItem id="first-embedded">var/mark/links</Tabs.BarItem>
</Tabs.Bar>
<Tabs.Pages>
<Tabs.Page id="lotsa-text">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>
Consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Id venenatis a
condimentum vitae sapien pellentesque habitant. Mi quis
hendrerit dolor magna eget. Tortor vitae purus faucibus
ornare suspendisse sed. Eget mi proin sed libero enim sed
faucibus. Odio facilisis mauris sit amet massa vitae tortor.
Tempus urna et pharetra pharetra massa massa ultricies mi
quis. Ac orci phasellus egestas tellus rutrum tellus
pellentesque eu tincidunt. Fringilla urna porttitor rhoncus
dolor purus non. Laoreet suspendisse interdum consectetur
libero id. Nunc consequat interdum varius sit amet.
Elementum facilisis leo vel fringilla est ullamcorper. Urna
molestie at elementum eu facilisis sed odio morbi. Turpis
egestas maecenas pharetra convallis. Rhoncus aenean vel elit
scelerisque mauris pellentesque. Euismod nisi porta lorem
mollis aliquam ut porttitor leo. Aliquet eget sit amet
tellus cras adipiscing enim eu. Amet consectetur adipiscing
elit duis tristique. Egestas quis ipsum suspendisse
ultrices. Congue eu consequat ac felis donec et odio. Vitae
auctor eu augue ut lectus.
</p>
<p>
Et netus et malesuada fames. Vitae tortor condimentum
lacinia quis vel eros donec ac odio. Purus viverra accumsan
in nisl nisi scelerisque eu ultrices vitae. A arcu cursus
vitae congue mauris rhoncus. Habitasse platea dictumst
quisque sagittis purus sit amet. Massa id neque aliquam
vestibulum morbi blandit cursus risus. Posuere ac ut
consequat semper viverra nam libero justo laoreet.
</p>
<ul>
<li>
Purus viverra accumsan in nisl nisi scelerisque eu
ultrices vitae.
</li>
<li>
Ac auctor augue mauris augue neque gravida in fermentum.
</li>
<li>
Purus viverra accumsan in nisl nisi scelerisque eu
ultrices vitae.
</li>
<li>
Ac auctor augue mauris augue neque gravida in fermentum.
</li>
</ul>
<p>
Tincidunt eget nullam non nisi. Interdum posuere lorem ipsum
dolor sit amet. Eu lobortis elementum nibh tellus molestie
nunc non. Blandit libero volutpat sed cras ornare arcu dui
vivamus. At volutpat diam ut venenatis tellus in metus.
Platea dictumst vestibulum rhoncus est pellentesque elit
ullamcorper dignissim cras. Aliquet eget sit amet tellus
cras adipiscing. Et pharetra pharetra massa massa ultricies
mi. Enim nulla aliquet porttitor lacus luctus accumsan
tortor posuere ac.
</p>
</Tabs.Page>

<Tabs.Page id="first-codeblock">
<CodeBlock
copyable
lineNumbers
highlightedLines="5-7,12"
fileName="src/components/Button.js"
language="jsx"
css={css`
margin-bottom: 2rem;
`}
>
{codeSample}
</CodeBlock>
</Tabs.Page>
<Tabs.Page id="first-live-edit">
<CodeBlock
copyable
lineNumbers
live
preview
fileName="src/components/Button.js"
language="jsx"
scope={{ Button }}
css={css`
margin-bottom: 2rem;
`}
>
{liveCodeSample}
</CodeBlock>
</Tabs.Page>
<Tabs.Page id="first-embedded">
<CodeBlock
language="graphql"
css={css`
margin-bottom: 1rem;
`}
>
{codeSampleWithAdditionalTags}
</CodeBlock>
<CodeBlock
language="yaml"
css={css`
margin-bottom: 1rem;
`}
>
{anotherSample}
</CodeBlock>
</Tabs.Page>
</Tabs.Pages>
</Tabs>
<h2>Lists</h2>
<ul>
<li>List item one</li>
Expand Down Expand Up @@ -303,7 +425,7 @@ const IndexPage = () => {
/>
<br />
<h2>Content displayed in two columns</h2>
<SideBySide>
<SideBySide backgroundColor>
<Side>
<p>Lorem ipsum Lorem ipsum Lorem ipsum</p>
<CodeBlock language="json" lineNumbers>
Expand Down Expand Up @@ -470,70 +592,6 @@ const IndexPage = () => {
</Tabs.Pages>
</Tabs>
</section>
<section>
<h2>Stacked Tabs</h2>
<Tabs stacked>
<Tabs.Bar>
<Tabs.BarItem id="codeblock">A code block</Tabs.BarItem>
<Tabs.BarItem id="live-edit">
A live editable code block w/ preview
</Tabs.BarItem>
<Tabs.BarItem id="embedded">
Code block w/ embedded var/mark/links
</Tabs.BarItem>
</Tabs.Bar>
<Tabs.Pages>
<Tabs.Page id="codeblock">
<CodeBlock
copyable
lineNumbers
highlightedLines="5-7,12"
fileName="src/components/Button.js"
language="jsx"
css={css`
margin-bottom: 2rem;
`}
>
{codeSample}
</CodeBlock>
</Tabs.Page>
<Tabs.Page id="live-edit">
<CodeBlock
copyable
lineNumbers
live
preview
fileName="src/components/Button.js"
language="jsx"
scope={{ Button }}
css={css`
margin-bottom: 2rem;
`}
>
{liveCodeSample}
</CodeBlock>
</Tabs.Page>
<Tabs.Page id="embedded">
<CodeBlock
language="graphql"
css={css`
margin-bottom: 1rem;
`}
>
{codeSampleWithAdditionalTags}
</CodeBlock>
<CodeBlock
language="yaml"
css={css`
margin-bottom: 1rem;
`}
>
{anotherSample}
</CodeBlock>
</Tabs.Page>
</Tabs.Pages>
</Tabs>
</section>
<section>
<h2>Terminal in Tabs</h2>
<Tabs>
Expand Down
15 changes: 7 additions & 8 deletions packages/gatsby-theme-newrelic/src/components/CodeBlock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,15 +87,14 @@ const CodeBlock = ({
code: formattedCode,
modified: false,
});
const copiedCode = containsEmbeddedHTML ? normalizedCode : code;

const handleCopyClick = useInstrumentedHandler(
() => copy(containsEmbeddedHTML ? normalizedCode : code),
{
eventName: 'copyCodeBlockClick',
category: 'CodeBlock',
modified,
}
);
const handleCopyClick = useInstrumentedHandler(() => copy(copiedCode), {
eventName: 'copyCodeBlockClick',
category: 'CodeBlock',
modified,
contents: copiedCode.replace(/[\r\n]+/gm, '').substring(0, 200),
});

const handleDownloadClick = useInstrumentedHandler(
() => {
Expand Down
7 changes: 3 additions & 4 deletions packages/gatsby-theme-newrelic/src/components/MDX.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import MDXLink from './MDXLink';
import MDXTable from './MDXTable';
import MDXVideo from './MDXVideo';
import SideBySide from './SideBySide';
import TutorialStep from './TutorialSteps/TutorialStep';
import TutorialSection from './TutorialSteps/TutorialSection';
import Walkthrough from './Walkthrough';

const defaultComponents = {
a: MDXLink,
Expand All @@ -30,8 +29,8 @@ const defaultComponents = {
InlineCode,
Link,
SideBySide,
Steps: TutorialSection,
Step: TutorialStep,
Steps: Walkthrough,
Step: Walkthrough.Step,
table: MDXTable,
Video: MDXVideo,
};
Expand Down
9 changes: 8 additions & 1 deletion packages/gatsby-theme-newrelic/src/components/SideBySide.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,26 @@ const BREAKPOINTS = {
RELATED_CONTENT: '1520px',
};

const SideBySide = ({ children, className }) => {
const SideBySide = ({ backgroundColor, children, className }) => {
const childObjects = Children.toArray(children);
const numberOfChildren = childObjects.length;
const spacePercentage = 100 / numberOfChildren;

return (
<div
css={css`
${backgroundColor &&
css`
background: var(--primary-hover-color);
`}
border-radius: 0.25rem;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(
${numberOfChildren},
calc(${spacePercentage}% - 0.5rem)
);
padding: 1rem;
p:last-child {
margin-bottom: 0;
Expand Down Expand Up @@ -51,6 +57,7 @@ const SideBySide = ({ children, className }) => {
};

SideBySide.propTypes = {
backgroundColor: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.node,
};
Expand Down
29 changes: 12 additions & 17 deletions packages/gatsby-theme-newrelic/src/components/Tabs/Bar.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/react';
import { navigate } from '@reach/router';
import useTabs from './useTabs';
import Select from '../Select';

Expand Down Expand Up @@ -35,25 +36,30 @@ const getDeepestChild = (child) => {
};

const MobileTabControl = ({ children, className }) => {
const { currentTab, setCurrentTab } = useTabs();
const { currentTabIndex, setCurrentTabIndex } = useTabs();

// eslint gets angry about using props from React.Children.map
/* eslint-disable react/prop-types */
return (
<Select
onChange={(e) => {
setCurrentTab(e.target.value);
const selectedId = e.currentTarget.value;
const index = children.findIndex(
(child) => child.props.id === selectedId
);
setCurrentTabIndex(index);
navigate(`#${selectedId}`);
}}
css={css`
margin-bottom: 1rem;
`}
className={className}
>
{React.Children.map(children, ({ props }) => (
{React.Children.map(children, ({ props }, index) => (
<option
key={props.id}
value={props.id}
selected={props.id === currentTab}
selected={index === currentTabIndex}
disabled={props.disabled}
>
{getDeepestChild(props.children)}
Expand All @@ -62,16 +68,16 @@ const MobileTabControl = ({ children, className }) => {
))}
</Select>
);
/* eslint-enable react/prop-types */
};

/* eslint-enable react/prop-types */
MobileTabControl.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
};

const Bar = ({ children, className }) => {
const { containerHeight, mobileBreakpoint, stacked } = useTabs();
const { mobileBreakpoint } = useTabs();

return (
<>
Expand All @@ -92,18 +98,7 @@ const Bar = ({ children, className }) => {
border: none;
display: flex;
width: 100%;
margin-bottom: 1em;
overflow: auto;
${stacked &&
css`
flex-direction: column;
height: ${containerHeight}px;
min-height: 350px;
overflow: none;
overflow-wrap: break-word;
margin-right: 2rem;
width: 30%;
`}
@media screen and (max-width: ${mobileBreakpoint}) {
display: none;
}
Expand Down
Loading

0 comments on commit a2af6a6

Please sign in to comment.