From da456afffa5934490f93f5587bcec0c0503ecef8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimir.coko@liferay.com>
Date: Thu, 13 Aug 2020 14:23:30 +0200
Subject: [PATCH] feat(clayui.com): Add Code Sample Info to HTML/CSS collapsed
 code samples

---
 .../plugins/gatsby-remark-use-clipboard/index.js    |  4 ++++
 clayui.com/src/components/CodeToggle/index.js       | 10 ++++++++--
 clayui.com/src/styles/_code.scss                    | 13 +++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/clayui.com/plugins/gatsby-remark-use-clipboard/index.js b/clayui.com/plugins/gatsby-remark-use-clipboard/index.js
index 8c27e74e4b..6c6a04a4bb 100644
--- a/clayui.com/plugins/gatsby-remark-use-clipboard/index.js
+++ b/clayui.com/plugins/gatsby-remark-use-clipboard/index.js
@@ -35,6 +35,10 @@ module.exports = ({markdownAST}) => {
 					</div>
 				</div>
 
+				<span class="clay-p code-sample-info">
+					Code Sample (expand to see it)
+				</span>
+
 				<button class="btn btn-sm btn-copy btn-monospaced btn-unstyled" title="Copy">
 					<svg class="lexicon-icon" focusable="false" role="presentation">
 						<use xlink:href="/images/icons/icons.svg#paste"></use>
diff --git a/clayui.com/src/components/CodeToggle/index.js b/clayui.com/src/components/CodeToggle/index.js
index 9ce3876208..0889e92d4c 100644
--- a/clayui.com/src/components/CodeToggle/index.js
+++ b/clayui.com/src/components/CodeToggle/index.js
@@ -7,13 +7,19 @@ import {useEffect} from 'react';
 
 const CodeToggle = (props) => {
 	const handleCodeCollapse = (e) => {
-		const isCodeCollapse =
+		const isCodeCollapseBtn =
 			e.target.classList.contains('btn-collapse--collapse') ||
 			e.target.closest('.btn-collapse--collapse');
 
-		if (isCodeCollapse) {
+		if (isCodeCollapseBtn) {
 			const codeContainer = e.target.closest('.code-container');
 
+			const codeSampleInfo = codeContainer.querySelector(
+				'.code-sample-info'
+			);
+
+			codeSampleInfo.classList.toggle('hide');
+
 			const isVisible = codeContainer.classList.contains('expanded');
 
 			const expanded = isVisible ? 'Expand' : 'Collapse';
diff --git a/clayui.com/src/styles/_code.scss b/clayui.com/src/styles/_code.scss
index 08841219a2..5f925b518b 100644
--- a/clayui.com/src/styles/_code.scss
+++ b/clayui.com/src/styles/_code.scss
@@ -29,6 +29,19 @@
 	}
 }
 
+.docs .code-sample-info.clay-p {
+	align-items: center;
+	display: flex;
+	margin-top: 0;
+	padding: 8px;
+	position: absolute;
+	z-index: 999;
+
+	&.hide {
+		display: none;
+	}
+}
+
 .btn-copy,
 .btn-collapse {
 	animation: fadeIn 0.5s cubic-bezier(0.3, 0, 0.3, 1) 0s 1 forwards;