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();