From 7a669403d55979d8774beef5a487cfbf5bac68f0 Mon Sep 17 00:00:00 2001 From: soumyaloka <123527724+soumyaloka@users.noreply.github.com> Date: Wed, 27 Sep 2023 16:43:51 -0400 Subject: [PATCH] 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 --- .../src/components/Tile/Tile.d.ts | 9 ++++- .../ui-components/src/components/Tile/Tile.js | 36 +++++++++++++++++++ .../src/components/Tile/Tile.mdx | 3 ++ .../src/components/Tile/Tile.stories.js | 10 ++++++ .../src/components/Tile/Tile.styles.js | 2 ++ .../src/components/Tile/Tile.test.js | 9 +++++ 6 files changed, 68 insertions(+), 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 index 635d15d55..41cedb98a 100644 --- 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; + /** + * 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; - /** * 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 index ac1be47fa..cb032416f 100644 --- 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 index b3c6f9e90..8c6271bbe 100644 --- 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)
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 index e09407e33..d3ed101f0 100644 --- 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 index 76843ee97..58599b07b 100644 --- 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 index c022bb5cb..f5309f256 100644 --- 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();