feat(clayui.com): Add Code Sample Info to HTML/CSS collapsed code sam…

…ples
matuzalemsteles · Aug 13, 2020 · da456af · da456af
1 parent 10778cd
commit da456af
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;