Merge pull request #1210 from boton/issue/1209-add-title-to-sticker

Fixes #1209 - Add title to clay-sticker
liferay · Oct 2, 2018 · 081a017 · 081a017
2 parents 0a14437 + a72ca87
commit 081a017
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 0 deletions.
diff --git a/packages/clay-sticker/demos/index.html b/packages/clay-sticker/demos/index.html
@@ -250,6 +250,7 @@ <h2>Sticker Positions Outside</h2>
 				imageSrc: './avatar.jpg',
 				shape: 'circle',
 				size: 'sm',
+				title: 'My awesome title',
 			},
 			'#images-block'
 		);
@@ -258,6 +259,7 @@ <h2>Sticker Positions Outside</h2>
 			{
 				imageSrc: './avatar.jpg',
 				shape: 'circle',
+				title: 'My awesome title',
 			},
 			'#images-block'
 		);
@@ -267,6 +269,7 @@ <h2>Sticker Positions Outside</h2>
 				imageSrc: './avatar.jpg',
 				shape: 'circle',
 				size: 'lg',
+				title: 'My awesome title',
 			},
 			'#images-block'
 		);
@@ -276,6 +279,7 @@ <h2>Sticker Positions Outside</h2>
 				imageSrc: './avatar.jpg',
 				shape: 'circle',
 				size: 'xl',
+				title: 'My awesome title',
 			},
 			'#images-block'
 		);

diff --git a/packages/clay-sticker/src/ClaySticker.js b/packages/clay-sticker/src/ClaySticker.js
@@ -144,6 +144,15 @@ ClaySticker.STATE = {
 		'unstyled',
 		'warning',
 	]).value('primary'),
+
+	/**
+	 * Title to be applied to the sticker element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?(string|undefined)}
+	 */
+	title: Config.string(),
 };
 
 defineWebComponent('clay-sticker', ClaySticker);

diff --git a/packages/clay-sticker/src/ClaySticker.soy b/packages/clay-sticker/src/ClaySticker.soy
@@ -16,6 +16,7 @@
 	{@param? size: string}
 	{@param? spritemap: string}
 	{@param? style: string}
+	{@param? title: string}
 
 	{let $attributes kind="attributes"}
 		class="sticker
@@ -42,6 +43,10 @@
 		{if $id}
 			id="{$id}"
 		{/if}
+
+		{if $title}
+			title="{$title}"
+		{/if}
 	{/let}
 
 	<span {$attributes}>

diff --git a/packages/clay-sticker/src/__tests__/ClaySticker.js b/packages/clay-sticker/src/__tests__/ClaySticker.js
@@ -236,4 +236,12 @@ describe('ClaySticker', function() {
 
 		expect(sticker).toMatchSnapshot();
 	});
+
+	it('should render a sticker with title', () => {
+		sticker = new ClaySticker({
+			title: 'My awesome title',
+		});
+
+		expect(sticker).toMatchSnapshot();
+	});
 });
diff --git a/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap b/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap
@@ -137,6 +137,12 @@ exports[`ClaySticker should render a sticker with label 1`] = `
 </span>
 `;
 
+exports[`ClaySticker should render a sticker with title 1`] = `
+<span class="sticker sticker-rounded sticker-primary" title="My awesome title">
+  <span class="sticker-overlay"></span>
+</span>
+`;
+
 exports[`ClaySticker should render a top left positioned sticker 1`] = `
 <span class="sticker sticker-rounded sticker-primary sticker-top-left">
   <span class="sticker-overlay"></span>