Add title node inside ClayIcon svg node

liferay · Dec 12, 2017 · aeac244 · aeac244
1 parent 8755501
commit aeac244
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 0 deletions.
diff --git a/packages/clay-icon/src/ClayIcon.js b/packages/clay-icon/src/ClayIcon.js
@@ -51,6 +51,15 @@ ClayIcon.STATE = {
 	 * @default undefined
 	 */
 	symbol: Config.string().required(),
+
+	/**
+	 * The title of the Clay SVG Icon.
+	 * @instance
+	 * @memberof ClayIcon
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	title: Config.string(),
 };
 
 defineWebComponent('clay-icon', ClayIcon);

diff --git a/packages/clay-icon/src/ClayIcon.soy b/packages/clay-icon/src/ClayIcon.soy
@@ -8,6 +8,7 @@
 	{@param symbol: string}
 	{@param? elementClasses: string}
 	{@param? id: string}
+	{@param? title: string}
 
 	{let $attributes kind="attributes"}
 		aria-hidden="true"
@@ -25,6 +26,7 @@
 	{/let}
 
 	<svg {$attributes}>
+		<title>{$title ?: $id ?: $symbol}</title>
 		<use xlink:href="{$spritemap}#{$symbol}" />
 	</svg>
 {/template}
diff --git a/packages/clay-icon/src/__tests__/ClayIcon.js b/packages/clay-icon/src/__tests__/ClayIcon.js
@@ -39,4 +39,25 @@ describe('ClayIcon', function() {
 
 		expect(clayIcon).toMatchSnapshot();
 	});
+
+	it('should render an icon with specified title', () => {
+		clayIcon = new ClayIcon({
+			title: 'myTitle',
+			spritemap: spritemap,
+			symbol: 'add-cell',
+		});
+
+		expect(clayIcon).toMatchSnapshot();
+	});
+
+	it('should render an icon with specified title when id is passed too', () => {
+		clayIcon = new ClayIcon({
+			id: 'myId',
+			title: 'myTitle',
+			spritemap: spritemap,
+			symbol: 'add-cell',
+		});
+
+		expect(clayIcon).toMatchSnapshot();
+	});
 });
diff --git a/packages/clay-icon/src/__tests__/__snapshots__/ClayIcon.js.snap b/packages/clay-icon/src/__tests__/__snapshots__/ClayIcon.js.snap
@@ -2,18 +2,35 @@
 
 exports[`ClayIcon should render an icon with classes 1`] = `
 <svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell my-custom-class">
+  <title>add-cell</title>
   <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#add-cell"></use>
 </svg>
 `;
 
 exports[`ClayIcon should render an icon with id 1`] = `
 <svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" id="myId">
+  <title>myId</title>
+  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#add-cell"></use>
+</svg>
+`;
+
+exports[`ClayIcon should render an icon with specified title 1`] = `
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell">
+  <title>myTitle</title>
+  <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#add-cell"></use>
+</svg>
+`;
+
+exports[`ClayIcon should render an icon with specified title when id is passed too 1`] = `
+<svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell" id="myId">
+  <title>myTitle</title>
   <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#add-cell"></use>
 </svg>
 `;
 
 exports[`ClayIcon should render markup for icon \`add-cell\` 1`] = `
 <svg aria-hidden="true" class="lexicon-icon lexicon-icon-add-cell">
+  <title>add-cell</title>
   <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#add-cell"></use>
 </svg>
 `;