Skip to content

Commit 2849ff4

Browse files
sghowerisghoweri
committed
feat: add <title> support to SVG icons
1 parent 097ab4b commit 2849ff4

File tree

117 files changed

+576
-111
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

117 files changed

+576
-111
lines changed

‎docs-site/src/pages/pattern-lab/_patterns/02-components/typeahead/typeahead-with-js-hook.twig

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<div style="min-height: 300px">
2+
3+
<script>
4+
window.patternPaths = {
5+
pages: {
6+
'blog-homepage': "04-pages-45-d8-blog-00-blog-homepage",
7+
'blog-post': "04-pages-45-d8-blog-05-blog-post",
8+
'careers-homepage': "04-pages-50-d8-careers-00-careers-homepage"
9+
}
10+
}
11+
</script>
12+
13+
{% include "@bolt-components-typeahead/typeahead.twig" with {
14+
attributes: {
15+
class: [
16+
"js-typeahead-hook"
17+
]
18+
}
19+
} %}
20+
21+
<script>
22+
const typeahead = document.querySelector('.js-typeahead-hook');
23+
24+
function customOnChangeHandler() {
25+
typeahead.on('onSelected', function (element, event, suggestion) {
26+
27+
const itemSelected = element.items.filter(item => item.label === suggestion.suggestionValue)[0];
28+
29+
if (itemSelected) {
30+
if (itemSelected.label) {
31+
const win = window.open(`http://localhost:3000/pattern-lab/?p=${
32+
itemSelected.label
33+
}`, '_blank');
34+
win.focus();
35+
}
36+
}
37+
});
38+
}
39+
40+
if (typeahead._wasInitiallyRendered) {
41+
customOnChangeHandler();
42+
} else {
43+
typeahead.addEventListener('ready', function () {
44+
customOnChangeHandler();
45+
});
46+
}
47+
</script>
48+
49+
</div>
50+

‎packages/components/bolt-icons/src/icons/academy.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const Academy = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const Academy = ({ bgColor, fgColor, size, title, ...otherProps }) => {
44
return (
55
<svg data-name="Layer 1" {...otherProps} viewBox="0 0 28 32">
6+
<title>{title}</title>
67
<path
78
fill={bgColor}
89
fill-rule="evenodd"

‎packages/components/bolt-icons/src/icons/add-open.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const AddOpen = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const AddOpen = ({ bgColor, fgColor, size, title, ...otherProps }) => {
44
return (
55
<svg {...otherProps} viewBox="0 0 24 24">
6+
<title>{title}</title>
67
<g fill="none" fill-rule="evenodd">
78
<path />
89
<g fill={bgColor}>

‎packages/components/bolt-icons/src/icons/add-solid.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const AddSolid = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const AddSolid = ({ bgColor, fgColor, size, title, ...otherProps }) => {
44
return (
55
<svg {...otherProps} viewBox="0 0 24 24">
6+
<title>{title}</title>
67
<g fill="none" fill-rule="evenodd">
78
<path />
89
<circle

‎packages/components/bolt-icons/src/icons/agile.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const Agile = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const Agile = ({ bgColor, fgColor, size, title, ...otherProps }) => {
44
return (
55
<svg data-name="Layer 1" {...otherProps} viewBox="0 0 31.97 31.7">
6+
<title>{title}</title>
67
<path
78
fill={bgColor}
89
fill-rule="evenodd"

‎packages/components/bolt-icons/src/icons/app-development.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const AppDevelopment = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const AppDevelopment = ({
4+
bgColor,
5+
fgColor,
6+
size,
7+
title,
8+
...otherProps
9+
}) => {
410
return (
511
<svg data-name="Layer 1" {...otherProps} viewBox="0 0 30 30">
12+
<title>{title}</title>
613
<path
714
fill={bgColor}
815
fill-rule="evenodd"

‎packages/components/bolt-icons/src/icons/app-exchange.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const AppExchange = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const AppExchange = ({
4+
bgColor,
5+
fgColor,
6+
size,
7+
title,
8+
...otherProps
9+
}) => {
410
return (
511
<svg data-name="Layer 1" {...otherProps} viewBox="0 0 31.8 32">
12+
<title>{title}</title>
613
<path
714
fill={bgColor}
815
fill-rule="evenodd"

‎packages/components/bolt-icons/src/icons/arrow-left.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const ArrowLeft = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const ArrowLeft = ({ bgColor, fgColor, size, title, ...otherProps }) => {
44
return (
55
<svg {...otherProps} viewBox="0 0 18 14">
6+
<title>{title}</title>
67
<path
78
fill={bgColor}
89
fill-rule="nonzero"

‎packages/components/bolt-icons/src/icons/asset-data.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const AssetData = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const AssetData = ({ bgColor, fgColor, size, title, ...otherProps }) => {
44
return (
55
<svg {...otherProps} viewBox="0 0 24 24">
6+
<title>{title}</title>
67
<g fill={bgColor} fill-rule="evenodd">
78
<path d="M11 20h2V4h-2v16zm2-18h-2c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM19 20h2V9h-2v11zm2-13h-2c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM3 20h2v-6H3v6zm2-8H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-6c0-1.1-.9-2-2-2z" />
89
</g>

‎packages/components/bolt-icons/src/icons/asset-infographic.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
import { h } from '@bolt/core/renderers';
22

3-
export const AssetInfographic = ({ bgColor, fgColor, size, ...otherProps }) => {
3+
export const AssetInfographic = ({
4+
bgColor,
5+
fgColor,
6+
size,
7+
title,
8+
...otherProps
9+
}) => {
410
return (
511
<svg {...otherProps} viewBox="0 0 24 24">
12+
<title>{title}</title>
613
<g fill={bgColor} fill-rule="evenodd">
714
<path d="M8.5 8c.275 0 .5.225.5.5s-.225.5-.5.5a.501.501 0 01-.5-.5c0-.275.225-.5.5-.5m0 3a2.5 2.5 0 100-5 2.5 2.5 0 000 5" />
815
<path d="M19 20H7.412L16 11.413l4 4v3.588c0 .55-.45 1-1 1V20zM4 5c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v7.587l-3.294-3.294a1.005 1.005 0 00-1.413 0L4.649 19.937a1 1 0 01-.65-.938v-14L4 5zm18 10V5c0-1.656-1.344-3-3-3H5C3.344 2 2 3.344 2 5v14a3.002 3.002 0 002.988 3H19c1.656 0 3-1.344 3-3v-4z" />

0 commit comments

Comments
 (0)