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 41cedb98a..2869d68e4 100644 --- a/packages/@lightningjs/ui-components/src/components/Tile/Tile.d.ts +++ b/packages/@lightningjs/ui-components/src/components/Tile/Tile.d.ts @@ -66,7 +66,7 @@ declare namespace Tile { /** * icon source */ - iconSrc?: string; + logo?: string; /** * Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset' */ diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.js b/packages/@lightningjs/ui-components/src/components/Tile/Tile.js index 98b597a78..ea426e09b 100644 --- a/packages/@lightningjs/ui-components/src/components/Tile/Tile.js +++ b/packages/@lightningjs/ui-components/src/components/Tile/Tile.js @@ -60,7 +60,7 @@ export default class Tile extends Surface { 'checkbox', 'circle', 'label', - 'iconSrc', + 'logo', 'metadata', 'metadataLocation', 'persistentMetadata', @@ -69,6 +69,17 @@ export default class Tile extends Surface { ]; } + static get aliasStyles() { + return [ + { prev: 'iconHeight', curr: 'logoHeight' }, + { prev: 'iconWidth', curr: 'logoWidth' } + ]; + } + + static get aliasProperties() { + return [{ prev: 'iconSrc', curr: 'logo' }]; + } + static get tags() { return [ ...super.tags, @@ -77,7 +88,7 @@ export default class Tile extends Surface { 'Tile', { name: 'Badge', path: 'Content.Badge' }, { name: 'Checkbox', path: 'Content.Checkbox' }, - { name: 'Icon', path: 'Content.Icon' }, + { name: 'Logo', path: 'Content.Logo' }, { name: 'Metadata', path: 'Content.Metadata' }, { name: 'ProgressBar', path: 'Content.ProgressBar' }, { name: 'Label', path: 'Content.Label' } @@ -113,7 +124,7 @@ export default class Tile extends Surface { this._updateLabel(); this._updateCheckbox(); this._updateProgressBar(); - this._updateIcon(); + this._updateLogo(); this._updateMetadata(); } @@ -179,30 +190,30 @@ export default class Tile extends Surface { ); } - /* ------------------------------ Icon ------------------------------ */ + /* ------------------------------ Logo ------------------------------ */ - _updateIcon() { - const iconObject = { - w: this.style.iconWidth, - h: this.style.iconHeight, - icon: this.iconSrc, + _updateLogo() { + const logoObject = { + w: this.style.logoWidth, + h: this.style.logoHeight, + icon: this.logo, alpha: this.style.alpha, mountY: 1, x: this.style.paddingX, - y: this._calculateIconYPosition() + y: this._calculateLogoYPosition() }; - if (this.iconSrc && (this.persistentMetadata || this._isFocusedMode)) { - if (!this._Icon) { - iconObject.type = Icon; + if (this.logo && (this.persistentMetadata || this._isFocusedMode)) { + if (!this._Logo) { + logoObject.type = Icon; } - this.patch({ Icon: iconObject }); + this.patch({ Icon: logoObject }); } else { this.patch({ Icon: undefined }); } } - _calculateIconYPosition() { + _calculateLogoYPosition() { if (this._isInsetMetadata) { return this._metadataY - (this._Metadata ? this._Metadata.h : 0); } else { @@ -612,7 +623,7 @@ export default class Tile extends Surface { _metadataLoaded() { this._animateMetadata(); - this._updateIcon(); + this._updateLogo(); // Send event to columns/rows that the height has been updated since metadata will be displayed below the Tile if (!this._isInsetMetadata) { this.fireAncestors('$itemChanged'); diff --git a/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx b/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx index cd232e8c8..744d70411 100644 --- a/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx +++ b/packages/@lightningjs/ui-components/src/components/Tile/Tile.mdx @@ -96,7 +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 | +| logo | string | false | undefined | Source of logo | | 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 | 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 d3ed101f0..c6786f3e7 100644 --- a/packages/@lightningjs/ui-components/src/components/Tile/Tile.stories.js +++ b/packages/@lightningjs/ui-components/src/components/Tile/Tile.stories.js @@ -60,7 +60,7 @@ export const Tile = () => Tile.args = { metadataLocation: 'standard', - iconSrc: xfinityLogo, + logo: xfinityLogo, persistentMetadata: false, mode: 'focused' }; @@ -83,7 +83,7 @@ Tile.argTypes = { defaultValue: { summary: 'standard' } } }, - iconSrc: { + logo: { control: 'select', options: [xfinityLogo, 'null'], description: 'Icon source', 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 58599b07b..3732724d0 100644 --- a/packages/@lightningjs/ui-components/src/components/Tile/Tile.styles.js +++ b/packages/@lightningjs/ui-components/src/components/Tile/Tile.styles.js @@ -19,8 +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, + logoWidth: theme.spacer.lg * 5, + logoHeight: 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 f5309f256..8a6087d5a 100644 --- a/packages/@lightningjs/ui-components/src/components/Tile/Tile.test.js +++ b/packages/@lightningjs/ui-components/src/components/Tile/Tile.test.js @@ -406,10 +406,10 @@ 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; + describe('logo', () => { + const logo = pathToDataURI('src/assets/images/ic_lightning_white_32.png'); + it('should patch in a logo if provided', () => { + tile.logo = logo; expect(tile._Icon).toBeUndefined(); }); });