feat(Tile): Add Icon Support to Tile Component (#376)

* feat: update input TS file * fix: revert changes * feat: Add icon to Tile component * feat: update icon visibility logic * fix: update docs, TS and snapshots * chore: remove commented code * test: update snapshot * fix(Tile): update icon logic * fix: update snapshot * fix: simlify x and y positions of icon
rdkcentral · Sep 27, 2023 · 7a66940 · 7a66940
1 parent 9f392a9
commit 7a66940
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 1 deletion.
diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.d.ts b/packages/@lightningjs/ui-components/src/components/Tile/Tile.d.ts
@@ -19,6 +19,7 @@
 import lng from '@lightningjs/core';
 import { StylePartial } from '../../types/lui';
 import Artwork from '../Artwork';
+import Icon from '../Icon';
 import TextBox from '../TextBox';
 import ProgressBar from '../ProgressBar';
 import MetadataBase from '../MetadataBase';
@@ -30,6 +31,8 @@ import Surface, { SurfaceStyle } from '../Surface';
 type TileStyle = SurfaceStyle & {
   animationEntrance: lng.types.TransitionSettings.Literal;
   animationExit: lng.types.TransitionSettings.Literal;
+  iconWidth: number;
+  iconHeight: number;
   metadataLocation: 'standard' | 'inset';
   paddingX: number;
   paddingY: number;
@@ -60,6 +63,10 @@ declare namespace Tile {
      * Object containing all properties supported in the [Label component](?path=/docs/components-label--label)
      */
     label?: lng.Element.PatchTemplate<Label.TemplateSpec>;
+    /**
+     * icon source
+     */
+    iconSrc?: string;
     /**
      * Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset'
      */
@@ -91,7 +98,6 @@ declare class Tile<
    * Object containing all properties supported in the [Badge component](?path=/docs/components-badge--text)
    */
   badge?: lng.Element.PatchTemplate<Badge.TemplateSpec>;
-
   /**
    * Object containing all properties supported in the [Checkbox component](?path=/docs/components-checkbox--checkbox)
    */
@@ -131,6 +137,7 @@ declare class Tile<
   get _Tile(): TextBox;
   get _Badge(): Badge;
   get _Checkbox(): Checkbox;
+  get _Icon(): Icon;
   get _Metadata(): MetadataBase;
   get _ProgressBar(): ProgressBar;
   get _Label(): Label;

diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.js b/packages/@lightningjs/ui-components/src/components/Tile/Tile.js
@@ -24,6 +24,7 @@ import MetadataTile from '../MetadataTile';
 import ProgressBar from '../ProgressBar';
 import * as styles from './Tile.styles';
 import Surface from '../Surface';
+import Icon from '../Icon';
 
 export default class Tile extends Surface {
   static get __componentName() {
@@ -59,6 +60,7 @@ export default class Tile extends Surface {
       'checkbox',
       'circle',
       'label',
+      'iconSrc',
       'metadata',
       'metadataLocation',
       'persistentMetadata',
@@ -75,6 +77,7 @@ export default class Tile extends Surface {
       'Tile',
       { name: 'Badge', path: 'Content.Badge' },
       { name: 'Checkbox', path: 'Content.Checkbox' },
+      { name: 'Icon', path: 'Content.Icon' },
       { name: 'Metadata', path: 'Content.Metadata' },
       { name: 'ProgressBar', path: 'Content.ProgressBar' },
       { name: 'Label', path: 'Content.Label' }
@@ -110,6 +113,7 @@ export default class Tile extends Surface {
     this._updateLabel();
     this._updateCheckbox();
     this._updateProgressBar();
+    this._updateIcon();
     this._updateMetadata();
   }
 
@@ -175,6 +179,38 @@ export default class Tile extends Surface {
     );
   }
 
+  /* ------------------------------ Icon ------------------------------ */
+
+  _updateIcon() {
+    const iconObject = {
+      w: this.style.iconWidth,
+      h: this.style.iconHeight,
+      icon: this.iconSrc,
+      alpha: this.style.alpha,
+      mountY: 1,
+      x: this.style.paddingX,
+      y: this._calculateIconYPosition()
+    };
+
+    if (this.iconSrc && (this.persistentMetadata || this._isFocusedMode)) {
+      if (!this._Icon) {
+        iconObject.type = Icon;
+      }
+      this.patch({ Icon: iconObject });
+    } else {
+      this.patch({ Icon: undefined });
+    }
+  }
+
+  _calculateIconYPosition() {
+    if (this._isInsetMetadata) {
+      return this._metadataY - (this._Metadata ? this._Metadata.h : 0);
+    } else {
+      return this._progressBarY
+        ? this._progressBarY - this.style.paddingYBetweenContent
+        : this._h + this.style.paddingY;
+    }
+  }
   /* ------------------------------ Artwork ------------------------------ */
 
   _updateArtwork() {

diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx b/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx
@@ -96,6 +96,7 @@ class Basic extends lng.Component {
 | badge              | object  | false    | undefined  | Object containing all properties supported in the [Badge component](?path=/docs/components-badge--text)                                                                                                                                 |
 | checkbox           | object  | false    | undefined  | Object containing all properties supported in the [Checkbox component](?path=/docs/components-checkbox--checkbox)                                                                                                                       |
 | label              | object  | false    | undefined  | Object containing all properties supported in the [Label component](?path=/docs/components-label--label)                                                                                                                                |
+| iconSrc            | string  | false    | undefined  | Source of icon                                                                                                                                                                                                                          |
 | metadata           | object  | false    | undefined  | Object containing all properties supported in the [MetadataTile component](?path=/docs/components-metadatatile--metadata-tile)<br /> Can use a different Metadata component by passing in a 'type' and then that component's properties |
 | metadataLocation   | string  | false    | 'standard' | Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset'                                                                                                                         |
 | persistentMetadata | boolean | false    | false      | Metadata will be shown at all times if set to true, otherwise it will only show when the Tile has focus                                                                                                                                 |
@@ -107,6 +108,8 @@ class Basic extends lng.Component {
 | ---------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | animationEntrance      | object                | Animation values applied on entrance                                                                                                                                                                                  |
 | animationExit          | object                | Animation values applied on exit                                                                                                                                                                                      |
+| iconHeight             | number                | customized height of icon                                                                                                                                                                                             |
+| iconWidth              | number                | customized width of icon                                                                                                                                                                                              |
 | metadataLocation       | 'standard' \| 'inset' | Determines the location of the metadata within the tile                                                                                                                                                               |
 | paddingX               | number                | Padding applied to the inside of the left and right of component                                                                                                                                                      |
 | paddingY               | number                | Padding applied to the inside of the top and bottom of component (when metadataLocation is inset, if there is no ProgressBar, this is applied to the space between the bottom of the Metadata and bottom of the Tile) |

diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.stories.js b/packages/@lightningjs/ui-components/src/components/Tile/Tile.stories.js
@@ -28,6 +28,7 @@ import { withLayout as ItemLayoutStory } from '../../mixins/withLayout/withLayou
 import { Label as LabelStory } from '../Label/Label.stories.js';
 import { ProgressBar as ProgressBarStory } from '../ProgressBar/ProgressBar.stories';
 import { Text as BadgeStory } from '../Badge/Badge.stories.js';
+import xfinityLogo from '../../assets/images/Xfinity-Provider-Logo-2x1.png';
 
 export default {
   title: `${CATEGORIES[8]}/Tile`,
@@ -59,6 +60,7 @@ export const Tile = () =>
 
 Tile.args = {
   metadataLocation: 'standard',
+  iconSrc: xfinityLogo,
   persistentMetadata: false,
   mode: 'focused'
 };
@@ -80,6 +82,14 @@ Tile.argTypes = {
     table: {
       defaultValue: { summary: 'standard' }
     }
+  },
+  iconSrc: {
+    control: 'select',
+    options: [xfinityLogo, 'null'],
+    description: 'Icon source',
+    table: {
+      defaultValue: { summary: 'undefined' }
+    }
   }
 };
 

diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.styles.js b/packages/@lightningjs/ui-components/src/components/Tile/Tile.styles.js
@@ -19,6 +19,8 @@
 export const base = theme => ({
   animationEntrance: theme.animation.standardEntrance,
   animationExit: theme.animation.standardExit,
+  iconWidth: theme.spacer.lg * 5,
+  iconHeight: theme.spacer.xxl + theme.spacer.md,
   metadataLocation: 'standard',
   paddingX: theme.spacer.xl,
   paddingY: theme.spacer.lg,

diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.test.js b/packages/@lightningjs/ui-components/src/components/Tile/Tile.test.js
@@ -17,6 +17,7 @@
  */
 
 import {
+  pathToDataURI,
   makeCreateComponent,
   fastForward
 } from '@lightningjs/ui-components-test-utils';
@@ -405,6 +406,14 @@ describe('Tile', () => {
     });
   });
 
+  describe('icon', () => {
+    const icon = pathToDataURI('src/assets/images/ic_lightning_white_32.png');
+    it('should patch in an icon if provided', () => {
+      tile.iconSrc = icon;
+      expect(tile._Icon).toBeUndefined();
+    });
+  });
+
   describe('metadata', () => {
     it('should update metadata and remove if no longer needed', async () => {
       expect(tile.metadata).toBeUndefined();