feat(Tag): add support for background gradient (#645)

rdkcentral · Sep 2, 2021 · 952cbcf · 952cbcf
1 parent 6193b31
commit 952cbcf
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/elements/Tag/Tag.mdx b/elements/Tag/Tag.mdx
@@ -40,6 +40,7 @@ name|type|required|default|description
 backgroundColor|color|true|#232328|color of the tag's background
 title|string|true|-|text to display in tag
 titleColor|color|false|#ffffff|color of text
+gradientColor|color|false|-|color of gradient
 
 ### Styles
 

diff --git a/elements/Tag/Tag.stories.js b/elements/Tag/Tag.stories.js
@@ -19,6 +19,7 @@ export const Basic = args =>
         Tag: {
           type: Tag,
           backgroundColor: args.backgroundColor,
+          gradientColor: args.gradientColor,
           title: args.title,
           titleColor: args.titleColor
         }
@@ -31,10 +32,12 @@ export const Basic = args =>
   };
 Basic.args = {
   backgroundColor: '#f6a50a',
+  gradientColor: undefined,
   title: 'Tag',
   titleColor: '#ffffff'
 };
 Basic.argTypes = {
   backgroundColor: { control: 'color' },
+  gradientColor: { control: 'color' },
   titleColor: { control: 'color' }
 };
diff --git a/elements/Tag/Tag.test.js b/elements/Tag/Tag.test.js
@@ -1,4 +1,5 @@
 import TestUtils from '../../test/lightning-test-utils';
+import { getValidColor } from '../../Styles';
 import Tag from '.';
 
 const createComponent = TestUtils.makeCreateComponent(Tag);
@@ -45,4 +46,11 @@ describe('Tag', () => {
       expect(tag.w).toBe(68);
     });
   });
+
+  it('changes background color gradient', () => {
+    const gradientColor = '#000000';
+    [tag, testRenderer] = createComponent({ gradientColor });
+    testRenderer.update();
+    expect(tag._Background.colorRight).toEqual(getValidColor(gradientColor));
+  });
 });
diff --git a/elements/Tag/index.js b/elements/Tag/index.js
@@ -17,7 +17,13 @@ export default class Tag extends withStyles(Base, styles) {
   }
 
   static get properties() {
-    return ['backgroundColor', 'radius', 'title', 'titleColor'];
+    return [
+      'backgroundColor',
+      'gradientColor',
+      'radius',
+      'title',
+      'titleColor'
+    ];
   }
 
   static get tags() {
@@ -75,6 +81,9 @@ export default class Tag extends withStyles(Base, styles) {
         this.backgroundColor || getValidColor('#232328')
       )
     });
+    if (this.gradientColor) {
+      this._Background.colorRight = getValidColor(this.gradientColor);
+    }
   }
 
   _setBackgroundColor(color) {