Skip to content

Commit cfec748

Browse files
kresimir-cokokresimir-coko
committed
feat(@clayui.com): icon filtering
1 parent d8db899 commit cfec748

File tree

6 files changed

+2435
-33
lines changed

6 files changed

+2435
-33
lines changed

‎clayui.com/content/docs/components/css-icons.md renamed to ‎clayui.com/content/docs/components/css-icons.mdx

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,15 @@ title: 'Icons'
33
description: 'Icons are a visual representation of an idea and/or action.'
44
---
55

6+
import IconSearch from '../../../src/components/IconSearch';
7+
import icons from '../../../static/js/icons.json';
8+
import flags from '../../../static/js/flags.json';
9+
610
<div class="nav-toc-absolute">
711
<div class="nav-toc">
812

913
- [Usage](#usage)
14+
- [Icon List](#icon-list)
1015
- [Language Flags](#language-flags)
1116
- [SVG Icons as Background Images](#svg-icons-as-background-images)
1217
- [Clay-SVG-url()](<#clay-svg-url()>)
@@ -16,11 +21,22 @@ description: 'Icons are a visual representation of an idea and/or action.'
1621
</div>
1722

1823
<div class="clay-site-alert alert alert-info">
19-
Check the <a href="https://liferay.design/lexicon">Lexicon</a> <a href="https://liferay.design/lexicon/core-components/icons/">Icons Pattern</a> for a more in-depth look at the motivations and proper usage of this component.
24+
Check the <a href="https://liferay.design/lexicon">Lexicon</a>{' '}
25+
<a href="https://liferay.design/lexicon/core-components/icons/">
26+
Icons Pattern
27+
</a>{' '}
28+
for a more in-depth look at the motivations and proper usage of this
29+
component.
2030
</div>
2131

2232
<div class="clay-site-alert alert alert-warning">
23-
See the implementation of the <a href="/docs/components/icons.html">Icons component in React</a> following the Lexicon <a href="https://liferay.design/lexicon/core-components/icons/">Icons Pattern</a>.
33+
See the implementation of the{' '}
34+
<a href="/docs/components/icons.html">Icons component in React</a> following
35+
the Lexicon{' '}
36+
<a href="https://liferay.design/lexicon/core-components/icons/">
37+
Icons Pattern
38+
</a>
39+
.
2440
</div>
2541

2642
## Usage
@@ -39,9 +55,9 @@ We use SVG elements that link to an SVG sprite, like so:
3955

4056
Note that the ID after the # symbol is the ID of the icon to use, so if you wanted to use plus icon, you would do change the href to `path/to/icons.svg#plus`.
4157

42-
<ul class="lexicon-icon-list list-unstyled">
43-
[foreach Icons]
44-
</ul>
58+
## Icon List
59+
60+
<IconSearch source={icons} />
4561

4662
## Language Flags
4763

@@ -53,9 +69,12 @@ Or, to paraphrase Winston Churchill, "Using flags is the worst system for indica
5369

5470
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`)
5571

56-
<ul class="lexicon-icon-list list-unstyled">
57-
[foreach Flags]
58-
</ul>
72+
<IconSearch
73+
label="Search Flags"
74+
placeholder="Search Flags..."
75+
source={flags}
76+
type="flags"
77+
/>
5978

6079
### SVG Icons as Background Images
6180

@@ -75,17 +94,20 @@ We have created a Sass function to turn Lexicon SVG icon's into data uri schemes
7594
You can turn your custom SVG into a data uri using the Sass function `clay-svg-url($svg)`, where `$svg` is the code for your inline SVG. The function returns `url(your_svg_as_data_uri)`.
7695

7796
<div class="alert alert-info">
78-
When using `clay-svg-url()`, wrap your inline SVG code with single quotes if your SVG's attributes are delimited with double quotes.
97+
When using `clay-svg-url()`, wrap your inline SVG code with single quotes if
98+
your SVG's attributes are delimited with double quotes.
7999
</div>
80100

81101
<span class="clay-site-linux-tux clay-site-svg-bg">Linux Tux</span>
82102

83103
## Why do we use SVG
84104

85105
<p id="lexicon-icon-explanation">
86-
Font icons, while fairly simple, suffer drawbacks, such as sub-pixel aliasing. This results in a lower quality than we would like.
87-
SVG gives us and you a greater amount of freedom in styling the icons, as well as a higher level of fidelity and clarity in the icons.
88-
Also, SVG supports multi-color icons, as shown below:
106+
Font icons, while fairly simple, suffer drawbacks, such as sub-pixel
107+
aliasing. This results in a lower quality than we would like. SVG gives us
108+
and you a greater amount of freedom in styling the icons, as well as a
109+
higher level of fidelity and clarity in the icons. Also, SVG supports
110+
multi-color icons, as shown below:
89111
</p>
90112

91113
<div class="lexicon-icon-examples">

‎clayui.com/content/docs/components/icon.mdx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ sibling: 'docs/components/css-icons.html'
66
---
77

88
import {Icon, IconWithContext} from '../../../src/components/clay/Icon';
9+
import IconSearch from '../../../src/components/IconSearch';
10+
import icons from '../../../static/js/icons.json';
911

1012
<div class="nav-toc-absolute">
1113
<div class="nav-toc">
@@ -17,6 +19,8 @@ import {Icon, IconWithContext} from '../../../src/components/clay/Icon';
1719
</div>
1820
</div>
1921

22+
<IconSearch source={icons} />
23+
2024
<div class="clay-site-alert alert alert-warning">
2125
Take a look at our{' '}
2226
<a href="https://storybook-clayui.netlify.com/?path=/story/clayicon--default">

‎clayui.com/src/components/IconSearch/index.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* © 2020 Liferay, Inc. <https://liferay.com>
3+
*
4+
* SPDX-License-Identifier: BSD-3-Clause
5+
*/
6+
7+
import ClayForm, {ClayInput} from '@clayui/form';
8+
import ClayIcon from '@clayui/icon';
9+
import React, {useMemo, useState} from 'react';
10+
11+
const spritemap = '/images/icons/icons.svg';
12+
13+
/**
14+
* Component that allows searching through icons
15+
* @param {string} label - Label of the search input field.
16+
* @param {string} placeholder - Placeholder of the search input field.
17+
* @param {Array[Object]} source - Path to the source JSON. Needs to follow pattern of [{name: String, aliases: Array<String>}]
18+
* @param {string} type - Type of icons being provided, supports "icons" and "flags"
19+
*/
20+
const IconSearch = ({
21+
label = 'Search Icons',
22+
placeholder = 'Search Icons...',
23+
source,
24+
type = 'icons',
25+
}) => {
26+
const [searchQuery, setSearchQuery] = useState('');
27+
let list = [];
28+
29+
const filteredIcons = useMemo(() => {
30+
const query = searchQuery.toLowerCase();
31+
32+
return source.filter(
33+
({aliases, name}) =>
34+
name.toLowerCase().includes(query) ||
35+
aliases.some(alias => alias.toLowerCase().includes(query))
36+
);
37+
}, [searchQuery]);
38+
39+
if (filteredIcons.length) {
40+
list = filteredIcons;
41+
} else {
42+
list = searchQuery ? [] : source;
43+
}
44+
45+
return (
46+
<>
47+
<ClayForm.Group>
48+
<label style={{width: '100%'}}>
49+
{label}
50+
51+
<ClayInput
52+
onChange={event => setSearchQuery(event.target.value)}
53+
placeholder={placeholder}
54+
type="text"
55+
value={searchQuery}
56+
/>
57+
</label>
58+
59+
<ul className="lexicon-icon-list list-unstyled">
60+
{list.map(icon => (
61+
<li key={icon.name}>
62+
<ClayIcon
63+
spritemap={spritemap}
64+
symbol={icon.name}
65+
/>
66+
67+
<span>
68+
{type === 'flags'
69+
? icon.aliases.join(' - ')
70+
: icon.name}
71+
</span>
72+
</li>
73+
))}
74+
</ul>
75+
76+
{!list.length && (
77+
<span>{`No results found for ${searchQuery}`}</span>
78+
)}
79+
</ClayForm.Group>
80+
</>
81+
);
82+
};
83+
84+
export default IconSearch;

‎clayui.com/src/templates/docs.js

Lines changed: 64 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,18 @@ export default props => {
2323
location,
2424
pageContext: {blacklist = [], markdownJsx},
2525
} = props;
26-
const {allMarkdownRemark, allMdx, markdownRemark, mdx, tabs} = data;
26+
const {
27+
allMarkdownRemark,
28+
allMdx,
29+
markdownRemark,
30+
mdTab,
31+
mdx,
32+
mdxTab,
33+
} = data;
2734
const {code, excerpt, fields, frontmatter, html, timeToRead} =
2835
mdx || markdownRemark;
2936

30-
const hasTabs = tabs.edges.length > 0;
37+
const tab = mdTab || mdxTab;
3138

3239
const title = `${frontmatter.title} - Clay`;
3340

@@ -99,13 +106,8 @@ export default props => {
99106
</p>
100107
)}
101108
</div>
102-
{!hasTabs && (
103-
<div className="col-12">
104-
<hr className="clay-site-separator" />
105-
</div>
106-
)}
107-
{hasTabs && (
108-
<div className="col-12">
109+
<div className="col-12">
110+
{tab ? (
109111
<ul
110112
className="border-bottom nav nav-clay nav-underline"
111113
role="tablist"
@@ -138,8 +140,10 @@ export default props => {
138140
</a>
139141
</li>
140142
</ul>
141-
</div>
142-
)}
143+
) : (
144+
<hr className="clay-site-separator" />
145+
)}
146+
</div>
143147
</div>
144148
</div>
145149
</header>
@@ -250,17 +254,55 @@ export default props => {
250254
}
251255
</p>
252256
)}
253-
{hasTabs && (
257+
{tab.html && (
254258
<div
255259
dangerouslySetInnerHTML={{
256260
__html:
257-
tabs
258-
.edges[0]
259-
.node
260-
.html,
261+
mdTab.html,
261262
}}
262263
/>
263264
)}
265+
{tab.code && (
266+
<article>
267+
<CodeClipboard>
268+
<MDXProvider
269+
components={{
270+
h1:
271+
Typography.H1,
272+
h2:
273+
Typography.H2,
274+
h3:
275+
Typography.H3,
276+
h4:
277+
Typography.H4,
278+
p:
279+
Typography.P,
280+
ul: props => (
281+
<ul
282+
className={
283+
props.className
284+
? props.className
285+
: 'clay-ul'
286+
}
287+
>
288+
{
289+
props.children
290+
}
291+
</ul>
292+
),
293+
}}
294+
>
295+
<MDXRenderer>
296+
{
297+
mdxTab
298+
.code
299+
.body
300+
}
301+
</MDXRenderer>
302+
</MDXProvider>
303+
</CodeClipboard>
304+
</article>
305+
)}
264306
</div>
265307
</div>
266308
</div>
@@ -369,11 +411,12 @@ export const pageQuery = graphql`
369411
}
370412
}
371413
}
372-
tabs: allMarkdownRemark(filter: {fields: {slug: {eq: $sibling}}}) {
373-
edges {
374-
node {
375-
html
376-
}
414+
mdTab: markdownRemark(fields: {slug: {eq: $sibling}}) {
415+
html
416+
}
417+
mdxTab: mdx(fields: {slug: {eq: $sibling}}) {
418+
code {
419+
body
377420
}
378421
}
379422
}

0 commit comments

Comments
 (0)