feat(CodeSnippet): Add optional fileName prop

newrelic · Jun 22, 2020 · 6b41998 · 6b41998
1 parent a7afc7c
commit 6b41998
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 18 deletions.
diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
@@ -7,7 +7,7 @@ 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();
@@ -39,12 +39,23 @@ 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}</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>
@@ -53,15 +64,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;
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
@@ -28,20 +28,30 @@
   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;
+  text-overflow: ellipsis;
+  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 {