initial commit

src/components/CopyToClipBoard/index.js

@@ -0,0 +1,33 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import React from 'react';
+import FileCopy from '@material-ui/icons/FileCopy';
+import Tooltip from '@material-ui/core/Tooltip/index';
+
+import type {Node} from 'react';
+import {IProps} from './types';
+
+import {ClipBoardCopy, ClipBoardCopyText, CopyIcon} from './styles';
+import {copyToClipBoardUtility} from '../../utils/cli-utils';
+import {TEXT} from '../../utils/constants';
+
+const CopyToClipBoard = ({text}: IProps): Node => {
+  const renderToolTipFileCopy = () => (
+    <Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
+      <CopyIcon onClick={copyToClipBoardUtility(text)}>
+        <FileCopy />
+      </CopyIcon>
+    </Tooltip>
+  );
+  return (
+    <ClipBoardCopy>
+      <ClipBoardCopyText>{text}</ClipBoardCopyText>
+      {renderToolTipFileCopy()}
+    </ClipBoardCopy>
+  );
+};
+
+export default CopyToClipBoard;

src/components/CopyToClipBoard/styles.js

@@ -0,0 +1,26 @@
+import styled from 'react-emotion';
+import IconButton from '@material-ui/core/IconButton/index';
+
+export const ClipBoardCopy = styled.div`
+  && {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+export const ClipBoardCopyText = styled.span`
+  && {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    height: 21px;
+  }
+`;
+
+export const CopyIcon = styled(IconButton)`
+  && {
+    margin: 0 0 0 10px;
+  }
+`;

src/components/CopyToClipBoard/types.js

@@ -0,0 +1,8 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  text: string;
+}