fix(clayui.com): Move code-collapse.js code to CodeToggle compone…

…nt? and update so it works in IE11 fix(clayui.com): CSS Pages should have code collapsed by default fix(clayui.com): Adds `focusable="false"` to code collapse svgs so IE11 doesn't focus them on tab
bryceosterhaus · Aug 3, 2020 · 684aa42 · 684aa42
1 parent 78fdd22
commit 684aa42
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 79 deletions.
diff --git a/clayui.com/plugins/gatsby-remark-use-clipboard/index.js b/clayui.com/plugins/gatsby-remark-use-clipboard/index.js
@@ -18,7 +18,7 @@ module.exports = ({markdownAST}) => {
 						<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">
+									<svg class="lexicon-icon lexicon-icon-info-circle" focusable="false" role="presentation">
 										<use xlink:href="/images/icons/icons.svg#info-circle"></use>
 									</svg>
 								</span>
@@ -36,19 +36,16 @@ module.exports = ({markdownAST}) => {
 
 			<div class="code-container">
 				<button class="btn btn-sm btn-copy btn-monospaced btn-unstyled" title="Copy">
-					<svg class="lexicon-icon">
+					<svg class="lexicon-icon" focusable="false" role="presentation">
 						<use xlink:href="/images/icons/icons.svg#paste"></use>
 					</svg>
 				</button>
-				
-				<button class="btn btn-sm btn-collapse btn-collapse--collapse btn-monospaced btn-unstyled" title="Collapse">
-					<svg class="lexicon-icon icon-collapse">
+
+				<button class="btn btn-sm btn-collapse btn-collapse--collapse btn-monospaced btn-unstyled" title="Expand">
+					<svg class="lexicon-icon lexicon-icon-angle-down icon-collapse--expanded" focusable="false" role="presentation">
 						<use xlink:href="/images/icons/icons.svg#angle-down"></use>
 					</svg>
-				</button>
-				
-				<button class="btn btn-sm btn-collapse btn-collapse--expand btn-monospaced btn-unstyled hide" title="Expand">
-					<svg class="lexicon-icon icon-collapse">
+					<svg class="lexicon-icon lexicon-icon-angle-right icon-collapse--collapsed" focusable="false" role="presentation">
 						<use xlink:href="/images/icons/icons.svg#angle-right"></use>
 					</svg>
 				</button>

diff --git a/clayui.com/src/components/CodeToggle/index.js b/clayui.com/src/components/CodeToggle/index.js
@@ -0,0 +1,41 @@
+/**
+ * SPDX-FileCopyrightText: © 2018 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import React, {useEffect} from 'react';
+
+const CodeToggle = (props) => {
+	const handleCodeCollapse = (e) => {
+		const isCodeCollapse =
+			e.target.classList.contains('btn-collapse--collapse') ||
+			e.target.closest('.btn-collapse--collapse');
+
+		if (isCodeCollapse) {
+			const codeContainer = e.target.closest('.code-container');
+
+			const isVisible =
+				codeContainer.classList.contains('expanded');
+
+			const expanded = isVisible ? 'Expand' : 'Collapse';
+
+			codeContainer
+				.querySelector('.btn-collapse--collapse')
+				.setAttribute('title', expanded);
+
+			codeContainer.classList.toggle('expanded');
+		}
+	};
+
+	useEffect(() => {
+		document.addEventListener('click', handleCodeCollapse, false);
+
+		return () => {
+			document.removeEventListener('click', handleCodeCollapse, false);
+		};
+	});
+
+	return props.children;
+};
+
+export default CodeToggle;
diff --git a/clayui.com/src/html.js b/clayui.com/src/html.js
@@ -39,7 +39,6 @@ export default (props) => {
 				/>
 				{props.postBodyComponents}
 				<script src="/js/docs-site.js" />
-				<script src="/js/code-collapse.js" />
 				<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />
 			</body>
 		</html>

diff --git a/clayui.com/src/styles/_code.scss b/clayui.com/src/styles/_code.scss
@@ -1,10 +1,32 @@
 .code-container {
-	margin: calc(1rem * 1.5) 0;
+	margin: 1.5rem 0;
 	position: relative;
+
+	.gatsby-highlight > code {
+		display: none;
+	}
+
+	.btn-collapse {
+		.icon-collapse--expanded {
+			display: none;
+		}
+	}
 }
 
-.code-container.hide {
-	display: none;
+.code-container.expanded {
+	pre > code {
+		display: block;
+	}
+
+	.btn-collapse {
+		.icon-collapse--collapsed {
+			display: none;
+		}
+
+		.icon-collapse--expanded {
+			display: inline-block;
+		}
+	}
 }
 
 .code-container pre code {

diff --git a/clayui.com/src/templates/docs.js b/clayui.com/src/templates/docs.js
@@ -14,6 +14,7 @@ import React, {useEffect} from 'react';
 import Helmet from 'react-helmet';
 
 import CodeClipboard from '../components/CodeClipboard';
+import CodeToggle from '../components/CodeToggle';
 import LayoutNav from '../components/LayoutNav';
 import Sidebar from '../components/Sidebar';
 import Typography from '../components/Typography';
@@ -116,11 +117,15 @@ const PackageInfo = ({fields = {}, frontmatter = {}}) => (
 
 const TabContent = ({html, jsx}) =>
 	html ? (
-		<div
-			dangerouslySetInnerHTML={{
-				__html: html,
-			}}
-		/>
+		<CodeClipboard>
+			<CodeToggle>
+				<div
+					dangerouslySetInnerHTML={{
+						__html: html,
+					}}
+				/>
+			</CodeToggle>
+		</CodeClipboard>
 	) : jsx ? (
 		<CodeClipboard>
 			<MDXProvider

diff --git a/clayui.com/static/js/code-collapse.js b/clayui.com/static/js/code-collapse.js