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

Add optional filename prop for CodeSnippet #216

Merged
merged 4 commits into from
Jun 22, 2020
Merged

Add optional filename prop for CodeSnippet #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6b41998
feat(CodeSnippet): Add optional fileName prop
timglaser Jun 22, 2020
95f69b0
feat(CodeSnippet): Truncate filename in middle
timglaser Jun 22, 2020
9b98e2a
chore(CodeSnippet): Add fileName prop to example
timglaser Jun 22, 2020
99a0321
chore: update package lock using node version from .nvmrc
timglaser Jun 22, 2020
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
5 changes: 5 additions & 0 deletions package-lock.json
View file
Open in desktop

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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,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": {
Expand Down
37 changes: 28 additions & 9 deletions src/components/CodeSnippet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ 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';
import useFormattedCode from '../hooks/useFormattedCode';

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();
Expand Down Expand Up @@ -39,12 +40,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>
Copy link
Contributor

Choose a reason for hiding this comment

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

Out of curiosity, do we have any kind of UX figured out where a user could see the full path? If the value ends up truncated, it might be a bit frustrating if they want to get some context on the full file path.

Copy link
Contributor

Choose a reason for hiding this comment

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

I should have looked at the preview before saying anything. It looks like MiddleEllipsis adds a title attribute which addresses my concern.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The rational for adding the title attribute to the span was to, at least on desktop browsers, make it possible to see the full path even if it is truncated. Beyond that, no, not yet. It'd be great to have a more robust solution that also supports copying.

</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>
Expand All @@ -53,15 +71,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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/markdown-pages/example.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
```

Expand Down