feat(@clayui.com): icon filtering, make label formatting more generic…

…, fix whitespace and fix CI errors caused by tab being undefined
liferay · Feb 17, 2020 · 47a50fe · 47a50fe
1 parent cfec748
commit 47a50fe
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 112 deletions.
diff --git a/clayui.com/content/docs/components/css-icons.mdx b/clayui.com/content/docs/components/css-icons.mdx
@@ -69,11 +69,15 @@ Or, to paraphrase Winston Churchill, "Using flags is the worst system for indica
 
 To use the flags below, follow the same process as you would for a standard icon, and use the locale and country code indicated in parenthesis for the icon's name (e.g. to use the Japanese icon, you would use `ja-jp`)
 
+export function flagLabelFormatter(icon) {
+	return icon.aliases.join(' - ');
+}
+
 <IconSearch
+	iconLabelFormatter={flagLabelFormatter}
 	label="Search Flags"
 	placeholder="Search Flags..."
 	source={flags}
-	type="flags"
 />
 
 ### SVG Icons as Background Images

diff --git a/clayui.com/src/components/IconSearch/index.js b/clayui.com/src/components/IconSearch/index.js
@@ -21,7 +21,7 @@ const IconSearch = ({
 	label = 'Search Icons',
 	placeholder = 'Search Icons...',
 	source,
-	type = 'icons',
+	iconLabelFormatter = icon => icon.name,
 }) => {
 	const [searchQuery, setSearchQuery] = useState('');
 	let list = [];
@@ -34,7 +34,7 @@ const IconSearch = ({
 				name.toLowerCase().includes(query) ||
 				aliases.some(alias => alias.toLowerCase().includes(query))
 		);
-	}, [searchQuery]);
+	}, [searchQuery, source]);
 
 	if (filteredIcons.length) {
 		list = filteredIcons;
@@ -64,11 +64,7 @@ const IconSearch = ({
 								symbol={icon.name}
 							/>
 
-							<span>
-								{type === 'flags'
-									? icon.aliases.join(' - ')
-									: icon.name}
-							</span>
+							<span>{iconLabelFormatter(icon)}</span>
 						</li>
 					))}
 				</ul>

diff --git a/clayui.com/src/templates/docs.js b/clayui.com/src/templates/docs.js
@@ -254,15 +254,15 @@ export default props => {
 															}
 														</p>
 													)}
-													{tab.html && (
+													{tab && tab.html && (
 														<div
 															dangerouslySetInnerHTML={{
 																__html:
-																	mdTab.html,
+																	tab.html,
 															}}
 														/>
 													)}
-													{tab.code && (
+													{tab && tab.code && (
 														<article>
 															<CodeClipboard>
 																<MDXProvider
@@ -294,7 +294,7 @@ export default props => {
 																>
 																	<MDXRenderer>
 																		{
-																			mdxTab
+																			tab
 																				.code
 																				.body
 																		}