From b184df620c58a5079a778c7f6bc8e91da1e7c09a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Gonz=C3=A1lez?= <jorge.gonzalez@liferay.com>
Date: Mon, 1 Oct 2018 18:22:32 +0200
Subject: [PATCH 1/4] Fixes #1209 - Add support for title

---
 packages/clay-sticker/src/ClaySticker.js  | 9 +++++++++
 packages/clay-sticker/src/ClaySticker.soy | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/packages/clay-sticker/src/ClaySticker.js b/packages/clay-sticker/src/ClaySticker.js
index 5555357309..ff252da8fc 100644
--- 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
index 024cea375d..a3504b9a7e 100644
--- 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}>

From 2b79da180b53cf8567a7eae86ffbaff1d9dad933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Gonz=C3=A1lez?= <jorge.gonzalez@liferay.com>
Date: Mon, 1 Oct 2018 18:27:12 +0200
Subject: [PATCH 2/4] Fixes #1209 - Update sticker tests

---
 packages/clay-sticker/src/__tests__/ClaySticker.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/clay-sticker/src/__tests__/ClaySticker.js b/packages/clay-sticker/src/__tests__/ClaySticker.js
index 6be0049bfd..e9a133b1b4 100644
--- 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();
+	});
 });

From 5a99d26b5b8da198be59c21e0b36c159d310ca22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Gonz=C3=A1lez?= <jorge.gonzalez@liferay.com>
Date: Mon, 1 Oct 2018 18:27:53 +0200
Subject: [PATCH 3/4] Fixes #1209 - Regen snapshots

---
 .../src/__tests__/__snapshots__/ClaySticker.js.snap         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap b/packages/clay-sticker/src/__tests__/__snapshots__/ClaySticker.js.snap
index 1381ca6994..bbaad5987c 100644
--- 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>

From a72ca8733857a8c7aa06345c3cf7c0c1741cf1a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Gonz=C3=A1lez?= <jorge.gonzalez@liferay.com>
Date: Mon, 1 Oct 2018 18:28:29 +0200
Subject: [PATCH 4/4] Fixes #1209 - Update sticker demos

---
 packages/clay-sticker/demos/index.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/clay-sticker/demos/index.html b/packages/clay-sticker/demos/index.html
index 52eea92c02..78250a8f6f 100644
--- 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'
 		);