feat(clayui.com): add feedback for when code content is copied

liferay · Feb 21, 2020 · a443210 · a443210
1 parent 1680408
commit a443210
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 1 deletion.
diff --git a/clayui.com/plugins/gatsby-remark-use-clipboard/index.js b/clayui.com/plugins/gatsby-remark-use-clipboard/index.js
@@ -13,6 +13,28 @@ module.exports = ({markdownAST}) => {
 		}
 
 		node.value = `
+			<div class="copied-alert alert alert-fluid alert-info d-none" role="alert">
+				<div class="container">
+					<div class="alert-autofit-row autofit-row">
+						<div class="autofit-col inline-item-before">
+							<div class="autofit-section">
+								<span class="alert-indicator">
+									<svg class="lexicon-icon lexicon-icon-info-circle" role="presentation">
+										<use xlink:href="/images/icons/icons.svg#info-circle"></use>
+									</svg>
+								</span>
+							</div>
+						</div>
+
+						<div class="autofit-col autofit-col-expand">
+							<div class="autofit-section">
+								<strong class="lead">Copied!</strong>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
 			<div class="code-container">
 				<button class="btn btn-sm btn-copy btn-monospaced btn-unstyled" title="Copy">
 					<svg class="lexicon-icon">

diff --git a/clayui.com/src/components/CodeClipboard/CodeClipboard.js b/clayui.com/src/components/CodeClipboard/CodeClipboard.js
@@ -15,12 +15,30 @@ export default props => {
 		clayClipboard = new Clipboard(selector, {
 			text: delegateTarget => {
 				const codeContentParentNode = delegateTarget.parentNode;
+				const gatsbyHighlightContainer =
+					codeContentParentNode.parentNode;
 				let codeContent;
+				const buttonContent = delegateTarget.innerHTML;
+
+				delegateTarget.innerHTML = delegateTarget.innerHTML.replace(
+					/paste/g,
+					'check'
+				);
 
 				delegateTarget.setAttribute('title', 'Copied');
 
+				gatsbyHighlightContainer
+					.querySelector('.copied-alert')
+					.classList.toggle('d-none');
+
 				setTimeout(() => {
 					delegateTarget.setAttribute('title', 'Copy');
+
+					delegateTarget.innerHTML = buttonContent;
+
+					gatsbyHighlightContainer
+						.querySelector('.copied-alert')
+						.classList.toggle('d-none');
 				}, 2000);
 
 				if (codeContentParentNode.querySelector('pre code')) {

diff --git a/clayui.com/src/components/clay/Editor.js b/clayui.com/src/components/clay/Editor.js
@@ -4,7 +4,8 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {ClayButtonWithIcon} from '@clayui/button/src';
+import ClayAlert from '@clayui/alert';
+import {ClayButtonWithIcon} from '@clayui/button';
 import parserBabylon from 'prettier/parser-babylon';
 import prettier from 'prettier/standalone';
 import React, {useState} from 'react';
@@ -117,6 +118,14 @@ const Editor = ({code, disabled = false, imports, preview = true, scope}) => {
 			)}
 
 			<div className="gatsby-highlight">
+				<ClayAlert
+					className="copied-alert d-none"
+					displayType="info"
+					spritemap={spritemap}
+					title="Copied!"
+					variant="stripe"
+				/>
+
 				<div style={{padding: '10px'}}>
 					<ClayButtonWithIcon
 						className="btn-copy"

diff --git a/clayui.com/src/styles/_code.scss b/clayui.com/src/styles/_code.scss
@@ -33,6 +33,7 @@
 	}
 
 	.lexicon-icon {
+		pointer-events: none;
 		vertical-align: baseline;
 	}
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ @@
     	}
     	.lexicon-icon {
+    		pointer-events: none;
     		vertical-align: baseline;
     	}
     }
@@ Expand Down @@