Feat: Copy pathline to clipboard button

Most of the code from #485 by @SaraVieira, close #471.

Author: sapegin

package-lock.json

@@ -35,6 +35,7 @@
     "chalk": "^1.1.3",
     "classnames": "^2.2.5",
     "clean-webpack-plugin": "^0.1.16",
+    "clipboard-copy": "^1.2.0",
     "codemirror": "^5.26.0",
     "common-dir": "^1.0.1",
     "css-loader": "^0.28.4",

package.json

@@ -1,9 +1,21 @@
 import React from 'react';
-import { PathlineRenderer } from './PathlineRenderer';
+import copy from 'clipboard-copy';
+import { PathlineRenderer, styles } from './PathlineRenderer';
 
-it('renderer should a path line', () => {
-	const pathline = 'foo/bar';
-	const actual = shallow(<PathlineRenderer classes={{}}>{pathline}</PathlineRenderer>);
+jest.mock('clipboard-copy');
+
+const pathline = 'foo/bar';
+const props = {
+	classes: classes(styles),
+};
 
+it('renderer should a path line', () => {
+	const actual = shallow(<PathlineRenderer {...props}>{pathline}</PathlineRenderer>);
 	expect(actual).toMatchSnapshot();
 });
+
+test('should copy text on click', () => {
+	const actual = mount(<PathlineRenderer {...props}>{pathline}</PathlineRenderer>);
+	actual.find('button').simulate('click');
+	expect(copy).toBeCalledWith(pathline);
+});

src/rsg-components/Pathline/Pathline.spec.js

@@ -1,22 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import copy from 'clipboard-copy';
+import MdContentCopy from 'react-icons/lib/md/content-copy';
+import ToolbarButton from 'rsg-components/ToolbarButton';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ fontFamily, fontSize, color }) => ({
+export const styles = ({ space, fontFamily, fontSize, color }) => ({
 	pathline: {
 		fontFamily: fontFamily.monospace,
 		fontSize: fontSize.small,
 		color: color.light,
 	},
+	copyButton: {
+		marginLeft: space[0],
+	},
 });
 
 export function PathlineRenderer({ classes, children }) {
-	return <div className={classes.pathline}>{children}</div>;
+	return (
+		<div className={classes.pathline}>
+			{children}
+			<ToolbarButton
+				small
+				className={classes.copyButton}
+				onClick={() => copy(children)}
+				title="Copy to clipboard"
+			>
+				<MdContentCopy />
+			</ToolbarButton>
+		</div>
+	);
 }
 
 PathlineRenderer.propTypes = {
 	classes: PropTypes.object.isRequired,
-	children: PropTypes.node,
+	children: PropTypes.string,
 };
 
 export default Styled(styles)(PathlineRenderer);

src/rsg-components/Pathline/PathlineRenderer.js

@@ -1,7 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renderer should a path line 1`] = `
-<div>
+<div
+  className="pathline"
+>
   foo/bar
+  <Styled(ToolbarButton)
+    className="copyButton"
+    onClick={[Function]}
+    small={true}
+    title="Copy to clipboard"
+  >
+    <MdContentCopy />
+  </Styled(ToolbarButton)>
 </div>
 `;

src/rsg-components/Pathline/__snapshots__/Pathline.spec.js.snap

@@ -29,7 +29,7 @@ it('should pass a class name to a button', () => {
 		</ToolbarButtonRenderer>
 	);
 
-	expect(actual).toMatchSnapshot();
+	expect(actual.prop('className')).toBe('button foo-class');
 });
 
 it('should pass a class name to a link', () => {
@@ -39,5 +39,13 @@ it('should pass a class name to a link', () => {
 		</ToolbarButtonRenderer>
 	);
 
-	expect(actual).toMatchSnapshot();
+	expect(actual.prop('className')).toBe('button foo-class');
+});
+
+it('should render a button with small styles', () => {
+	const actual = shallow(
+		<ToolbarButtonRenderer {...props} onClick={() => {}} small>butterbrot</ToolbarButtonRenderer>
+	);
+
+	expect(actual.prop('className')).toBe('button isSmall');
 });

src/rsg-components/ToolbarButton/ToolbarButton.spec.js

@@ -28,12 +28,29 @@ export const styles = ({ space, color }) => ({
 			width: space[3],
 			height: space[3],
 			color: 'currentColor',
+			cursor: 'inherit',
+		},
+	},
+	isSmall: {
+		'& svg': {
+			width: 14,
+			height: 14,
 		},
 	},
 });
 
-export function ToolbarButtonRenderer({ classes, className, onClick, href, title, children }) {
-	const classNames = cx(classes.button, className);
+export function ToolbarButtonRenderer({
+	classes,
+	className,
+	onClick,
+	href,
+	title,
+	small,
+	children,
+}) {
+	const classNames = cx(classes.button, className, {
+		[classes.isSmall]: small,
+	});
 
 	if (href !== undefined) {
 		return (
@@ -56,6 +73,7 @@ ToolbarButtonRenderer.propTypes = {
 	href: PropTypes.string,
 	onClick: PropTypes.func,
 	title: PropTypes.string,
+	small: PropTypes.bool,
 	children: PropTypes.node,
 };
 

src/rsg-components/ToolbarButton/ToolbarButtonRenderer.js

@@ -1,26 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should pass a class name to a button 1`] = `
-<button
-  className="button foo-class"
-  onClick={[Function]}
-  title="Pizza button"
-  type="button"
->
-  pizza
-</button>
-`;
-
-exports[`should pass a class name to a link 1`] = `
-<a
-  className="button foo-class"
-  href="/foo"
-  title="Pizza button"
->
-  pizza
-</a>
-`;
-
 exports[`should render a button 1`] = `
 <button
   className="button"