Fixes #1429 - Add sticker image support in clay cards

liferay · Jan 9, 2019 · 3d063c3 · 3d063c3
1 parent 4e9d312
commit 3d063c3
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 2 deletions.
diff --git a/packages/clay-card/src/ClayCardBase.js b/packages/clay-card/src/ClayCardBase.js
@@ -220,6 +220,24 @@ ClayCardBase.STATE = {
 	 */
 	spritemap: Config.string(),
 
+	/**
+	 * Alternate text of the image to be renderer inside the sticker.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayCardBase
+	 * @type {?(string|undefined)}
+	 */
+	stickerImageAlt: Config.string(),
+
+	/**
+	 * Source of the image to be rendered inside the sticker.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayCardBase
+	 * @type {?(string|undefined)}
+	 */
+	stickerImageSrc: Config.string(),
+
 	/**
 	 * Label for the sticker represented in the card.
 	 * @instance

diff --git a/packages/clay-card/src/ClayCardBase.soy b/packages/clay-card/src/ClayCardBase.soy
@@ -27,6 +27,8 @@
 	{@param? selectable: bool}
 	{@param? selected: bool}
 	{@param? spritemap: string}
+	{@param? stickerImageAlt: string}
+	{@param? stickerImageSrc: string}
 	{@param? stickerLabel: string}
 	{@param? stickerShape: string}
 	{@param? stickerStyle: string}
@@ -71,6 +73,8 @@
 			{param imageAlt: $imageAlt /}
 			{param imageSrc: $imageSrc /}
 			{param spritemap: $spritemap /}
+			{param stickerImageAlt: $stickerImageAlt /}
+			{param stickerImageSrc: $stickerImageSrc /}
 			{param stickerLabel: $stickerLabel /}
 			{param stickerShape: $stickerShape /}
 			{param stickerStyle: $stickerStyle /}
@@ -187,6 +191,8 @@
 	{@param? imageAlt: string}
 	{@param? imageSrc: string}
 	{@param? spritemap: string}
+	{@param? stickerImageAlt: string}
+	{@param? stickerImageSrc: string}
 	{@param? stickerLabel: string}
 	{@param? stickerShape: string}
 	{@param? stickerStyle: string}

diff --git a/packages/clay-card/src/ClayFileCard.js b/packages/clay-card/src/ClayFileCard.js
@@ -190,6 +190,24 @@ ClayFileCard.STATE = {
 	 */
 	spritemap: Config.string().required(),
 
+	/**
+	 * Alternate text of the image to be renderer inside the sticker.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayFileCard
+	 * @type {?(string|undefined)}
+	 */
+	stickerImageAlt: Config.string(),
+
+	/**
+	 * Source of the image to be rendered inside the sticker.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayFileCard
+	 * @type {?(string|undefined)}
+	 */
+	stickerImageSrc: Config.string(),
+
 	/**
 	 * Label for the sticker represented in the card.
 	 * @default undefined

diff --git a/packages/clay-card/src/ClayFileCard.soy b/packages/clay-card/src/ClayFileCard.soy
@@ -24,6 +24,8 @@
 	{@param? labelStylesMap: ?}
 	{@param? selectable: bool}
 	{@param? selected: bool}
+	{@param? stickerImageAlt: string}
+	{@param? stickerImageSrc: string}
 	{@param? stickerLabel: string}
 	{@param? stickerShape: string}
 	{@param? stickerStyle: string}
@@ -56,6 +58,8 @@
 		{param selectable: $selectable /}
 		{param selected: $selected /}
 		{param spritemap: $spritemap /}
+		{param stickerImageAlt: $stickerImageAlt /}
+		{param stickerImageSrc: $stickerImageSrc /}
 		{param stickerLabel: $stickerLabel /}
 		{param stickerShape: $stickerShape /}
 		{param stickerStyle: $stickerStyle /}
@@ -72,6 +76,8 @@
 	{@param? imageAlt: string}
 	{@param? imageSrc: string}
 	{@param? spritemap: string}
+	{@param? stickerImageAlt: string}
+	{@param? stickerImageSrc: string}
 	{@param? stickerLabel: string}
 	{@param? stickerShape: string}
 	{@param? stickerStyle: string}
@@ -85,8 +91,10 @@
 		</div>
 	{/if}
 
-	{if $stickerLabel}
+	{if $stickerLabel or $stickerImageSrc}
 		{call ClaySticker.render}
+			{param imageAlt: $stickerImageAlt /}
+			{param imageSrc: $stickerImageSrc /}
 			{param label: $stickerLabel /}
 			{param position: 'bottom-left' /}
 			{param shape: $stickerShape ?: 'rounded' /}

diff --git a/packages/clay-card/src/ClayImageCard.js b/packages/clay-card/src/ClayImageCard.js
@@ -209,6 +209,24 @@ ClayImageCard.STATE = {
 	 */
 	spritemap: Config.string(),
 
+	/**
+	 * Alternate text of the image to be renderer inside the sticker.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayImageCard
+	 * @type {?(string|undefined)}
+	 */
+	stickerImageAlt: Config.string(),
+
+	/**
+	 * Source of the image to be rendered inside the sticker.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayImageCard
+	 * @type {?(string|undefined)}
+	 */
+	stickerImageSrc: Config.string(),
+
 	/**
 	 * Label for the sticker represented in the card.
 	 * @default undefined

diff --git a/packages/clay-card/src/ClayImageCard.soy b/packages/clay-card/src/ClayImageCard.soy
@@ -26,6 +26,8 @@
     {@param? selectable: bool}
     {@param? selected: bool}
     {@param? spritemap: string}
+	{@param? stickerImageAlt: string}
+	{@param? stickerImageSrc: string}
     {@param? stickerLabel: string}
     {@param? stickerShape: string}
     {@param? stickerStyle: string}
@@ -60,6 +62,8 @@
         {param selectable: $selectable /}
         {param selected: $selected /}
         {param spritemap: $spritemap /}
+		{param stickerImageAlt: $stickerImageAlt /}
+		{param stickerImageSrc: $stickerImageSrc /}
         {param stickerLabel: $stickerLabel /}
         {param stickerShape: $stickerShape /}
         {param stickerStyle: $stickerStyle /}
@@ -76,6 +80,8 @@
     {@param? imageAlt: string}
     {@param? imageSrc: string}
     {@param? spritemap: string}
+	{@param? stickerImageAlt: string}
+	{@param? stickerImageSrc: string}
     {@param? stickerLabel: string}
     {@param? stickerShape: string}
     {@param? stickerStyle: string}
@@ -109,8 +115,10 @@
     		</div>
     	{/if}
 
-    	{if $stickerLabel}
+    	{if $stickerLabel or $stickerImageSrc}
     		{call ClaySticker.render}
+                {param imageAlt: $stickerImageAlt /}
+                {param imageSrc: $stickerImageSrc /}
     			{param label: $stickerLabel /}
     			{param position: 'bottom-left' /}
     			{param shape: $stickerShape ?: 'rounded' /}

diff --git a/packages/clay-card/src/ClayUserCard.soy b/packages/clay-card/src/ClayUserCard.soy
@@ -119,6 +119,8 @@
 	{@param? imageAlt: string}
 	{@param? imageSrc: string}
 	{@param? spritemap: string}
+	{@param? stickerImageAlt: string}
+	{@param? stickerImageSrc: string}
 	{@param? stickerLabel: string}
 	{@param? stickerShape: string}
 	{@param? stickerStyle: string}