Skip to content

Commit

Permalink
Merge pull request #216 from newrelic/tglaser/codesnippet-filename
Browse files Browse the repository at this point in the history
Add optional filename prop for CodeSnippet
timglaser authored Jun 22, 2020

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
2 parents 3e8cf56 + 99a0321 commit 2097c52
Showing 5 changed files with 53 additions and 19 deletions.
5 changes: 5 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -34,6 +34,7 @@
"react-helmet": "^6.0.0",
"react-live": "^2.2.2",
"react-markdown": "^4.3.1",
"react-middle-ellipsis": "^1.1.0",
"react-shadow": "^18.1.2"
},
"devDependencies": {
37 changes: 28 additions & 9 deletions src/components/CodeSnippet.js
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import Highlight, { defaultProps } from 'prism-react-renderer';
import github from 'prism-react-renderer/themes/github';
import MiddleEllipsis from 'react-middle-ellipsis';
import FeatherIcon from './FeatherIcon';
import styles from './CodeSnippet.module.scss';
import useClipboard from '../hooks/useClipboard';
@@ -12,7 +13,7 @@ import Prism from 'prism-react-renderer/prism';

require('prismjs/components/prism-ruby');

const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
const CodeSnippet = ({ children, copy, className, lineNumbers, fileName }) => {
const language = className.replace('language-', '');
const formattedCode = useFormattedCode(children ?? '');
const [copied, copyCode] = useClipboard();
@@ -44,12 +45,29 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
)}
</Highlight>
</div>
{copy !== 'false' && (
<div className={styles.copyBar}>
<button type="button" onClick={() => copyCode(formattedCode.trim())}>
<FeatherIcon name="copy" size="1rem" className={styles.copyIcon} />
{copied ? 'Copied!' : 'Copy output'}
</button>
{(copy !== 'false' || fileName) && (
<div className={styles.bottomBar}>
<div className={styles.fileName}>
{fileName && (
<MiddleEllipsis>
<span title={fileName}>{fileName}</span>
</MiddleEllipsis>
)}
</div>
{copy !== 'false' && (
<button
className={styles.copyButton}
type="button"
onClick={() => copyCode(formattedCode.trim())}
>
<FeatherIcon
name="copy"
size="1rem"
className={styles.copyIcon}
/>
{copied ? 'Copied!' : 'Copy output'}
</button>
)}
</div>
)}
</div>
@@ -58,15 +76,16 @@ const CodeSnippet = ({ children, copy, className, lineNumbers }) => {

CodeSnippet.propTypes = {
children: PropTypes.node.isRequired,
copy: PropTypes.string,
className: PropTypes.string,
copy: PropTypes.string,
fileName: PropTypes.string,
lineNumbers: PropTypes.string,
};

CodeSnippet.defaultProps = {
className: 'language-javascript',
copy: 'true',
lineNumbers: 'true',
className: 'language-javascript',
};

export default CodeSnippet;
27 changes: 18 additions & 9 deletions src/components/CodeSnippet.module.scss
Original file line number Diff line number Diff line change
@@ -28,20 +28,29 @@
opacity: 0.5;
}

.copyBar {
.bottomBar {
box-sizing: border-box;
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
background: var(--color-neutrals-200);
padding: 0 1rem;
}

button {
font-size: 0.75rem;
color: var(--color-brand-800);
background: none;
border: none;
outline: none;
}
.fileName {
font-family: var(--code-font);
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
padding-right: 0.5rem;
}

.copyButton {
font-size: 0.75rem;
color: var(--color-brand-800);
background: none;
border: none;
outline: none;
}

.copyIcon {
2 changes: 1 addition & 1 deletion src/markdown-pages/example.mdx
Original file line number Diff line number Diff line change
@@ -66,7 +66,7 @@ npm start
## Make sure you're getting data from the right New Relic account
In your preferred text editor, open the `/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js` and then edit the following line to use your account ID (find your account ID in the Profile section of the Developer Center, where you downloaded the New Relic One CLI):

```jsx
```jsx fileName=/add-time-picker/nerdlets/nr1-howto-add-time-picker-nerdlet/index.js
this.accountId = <REPLACE ME WITH YOUR ACCOUNT ID>;
```

0 comments on commit 2097c52

Please sign in to comment.