diff --git a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.d.ts b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.d.ts index ad1fff03e..e57f66322 100644 --- a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.d.ts +++ b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.d.ts @@ -35,6 +35,10 @@ type MetadataBaseStyle = { declare namespace MetadataBase { export interface TemplateSpec extends Base.TemplateSpec { + /** + * text of subtitle content + */ + subtitle?: string; /** * third line or description of the content */ @@ -67,11 +71,6 @@ declare namespace MetadataBase { * sets the marquee for Title and Description to the same value so they sync */ marquee?: boolean; - /** - * @deprecated - * relevant content data in the middle - */ - subtitle?: string; /** * first line or headline of the content */ @@ -93,6 +92,10 @@ declare class MetadataBase< TypeConfig extends MetadataBase.TypeConfig = MetadataBase.TypeConfig > extends Base { // Properties + /** + * text of subtitle content + */ + subtitle?: string; /** * third line or description of the content */ @@ -125,11 +128,6 @@ declare class MetadataBase< * TODO: confirm type and get a description */ marquee?: boolean; - /** - * @deprecated - * relevant content data in the middle - */ - subtitle?: string; /** * first line or headline of the content */ @@ -140,6 +138,7 @@ declare class MetadataBase< // Tags get _Title(): TextBox; + get _Subtitle(): TextBox; get _DetailsWrapper(): TextBox; get _Details(): TextBox; get _Description(): TextBox; diff --git a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js index 7c6abbdd6..6ed447d09 100644 --- a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js +++ b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js @@ -38,6 +38,7 @@ class MetadataBase extends Base { Text: { flex: { direction: 'column', justifyContent: 'flex-start' }, // Title: {}, + // Subtitle: {}, DetailsWrapper: { // Details: {} } @@ -59,6 +60,7 @@ class MetadataBase extends Base { 'logoTitle', 'logoWidth', 'details', + 'subtitle', 'title', 'marquee' ]; @@ -71,6 +73,10 @@ class MetadataBase extends Base { name: 'Title', path: 'Text.Title' }, + { + name: 'Subtitle', + path: 'Text.Subtitle' + }, { name: 'DetailsWrapper', path: 'Text.DetailsWrapper' @@ -87,15 +93,11 @@ class MetadataBase extends Base { ]; } - static get aliasStyles() { - return [{ prev: 'subtitleTextStyle', curr: 'detailsTextStyle' }]; - } - - static get aliasProperties() { - return [{ prev: 'subtitle', curr: 'details' }]; + _titleLoaded() { + this._updateLayout(); } - _titleLoaded() { + _subtitleLoaded() { this._updateLayout(); } @@ -128,6 +130,7 @@ class MetadataBase extends Base { _updateLines() { this._Text.w = this._textW(); this._updateTitle(); + this._updateSubtitle(); this._updateDetails(); this._updateDescription(); } @@ -186,6 +189,38 @@ class MetadataBase extends Base { }); } + _updateSubtitle() { + if (!this.subtitle && !this._Subtitle) { + return; + } + + if (!this._Subtitle) { + this._Text.childList.addAt( + { + ref: 'Subtitle', + type: TextBox, + signals: { + textBoxChanged: '_subtitleLoaded' + } + }, + 1 + ); + } + + this._Subtitle.patch({ + content: this.subtitle, + marquee: this.marquee, + style: { + textStyle: { + ...this.style.descriptionTextStyle, + maxLines: 1, + wordWrap: true, + wordWrapWidth: this._Text.w + } + } + }); + } + resetMarquee() { if (this.marquee) { if (this.title) { @@ -285,6 +320,8 @@ class MetadataBase extends Base { } this.logoPosition = this.logoPosition || 'right'; + const subtitleH = + (this.subtitle && this._Subtitle && this._Subtitle.h) || 0; this._Logo.patch({ w: this.logoWidth, h: this.logoHeight, @@ -293,7 +330,7 @@ class MetadataBase extends Base { }); this._Logo.x = this.logoPosition === 'left' ? 0 : this.w - this._Logo.w; - this._Logo.y = (this.h - this.logoHeight) / 2; + this._Logo.y = (this.h - this.logoHeight + subtitleH) / 2; } _textW() { @@ -302,11 +339,13 @@ class MetadataBase extends Base { _textH() { const titleH = (this.title && this._Title && this._Title.h) || 0; + const subtitleH = + (this.subtitle && this._Subtitle && this._Subtitle.h) || 0; const detailsH = (this.details && this._DetailsWrapper && this._DetailsWrapper.h) || 0; const descriptionH = (this.description && this._Description && this._Description.h) || 0; - return titleH + detailsH + descriptionH; + return titleH + subtitleH + detailsH + descriptionH; } _getLogoWidth() { @@ -332,6 +371,7 @@ class MetadataBase extends Base { get syncArray() { return [ ...(this._Title ? [this._Title] : []), + ...(this._Subtitle ? [this._Subtitle] : []), ...(this._Description ? [this._Description] : []), ...(this._Details ? [this._Details] : []) ]; @@ -345,6 +385,7 @@ class MetadataBase extends Base { return ( this._announce || [ this._Title && this._Title.announce, + this._Subtitle && this._Subtitle.announce, this._Details && this._Details.announce, this._Description && this._Description.announce, this.logoTitle diff --git a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.mdx b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.mdx index 44ed66d1e..1fbab4347 100644 --- a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.mdx +++ b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.mdx @@ -47,6 +47,7 @@ class Example extends lng.Component { w: 400, h: 300, title: 'Title', + subtitle: 'Subtitle', details: [ '94%', { @@ -76,6 +77,7 @@ class Example extends lng.Component { | name | type | required | default | description | | ------------ | -------------- | -------------------- | --------- | -------------------------------------------- | +| subtitle | string | false | undefined | subtitle text | | description | string | false | undefined | third line or description of the content | | details | inline content | false | undefined | relevant content data in the middle | | logo | string | false | undefined | logo to display at bottom of component | diff --git a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.stories.js b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.stories.js index eed6f2d5c..6cbf0d402 100644 --- a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.stories.js +++ b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.stories.js @@ -43,6 +43,7 @@ MetadataBase.storyName = 'MetadataBase'; MetadataBase.args = { w: 400, title: 'Title', + subtitle: 'Subtitle', details: [ '94%', { @@ -79,6 +80,14 @@ MetadataBase.argTypes = { defaultValue: { summary: 'undefined' } } }, + subtitle: { + control: 'text', + description: 'text directly below title', + table: { + defaultValue: { summary: 'undefined' }, + type: { summary: 'string' } + } + }, details: { control: 'object', description: 'details content', diff --git a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.test.js b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.test.js index fe058c55f..e32e863e0 100644 --- a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.test.js +++ b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.test.js @@ -67,13 +67,15 @@ describe('MetadataBase', () => { it('sets the announce string to the appropriate text content status', () => { const title = 'Title'; + const subtitle = 'Subtitle'; const details = 'Details'; const description = 'Description'; const logoTitle = 'Logo Title'; - metadataBase.patch({ title, details, description, logoTitle }); + metadataBase.patch({ title, subtitle, details, description, logoTitle }); testRenderer.forceAllUpdates(); expect(metadataBase.announce).toEqual([ title, + subtitle, details, description, logoTitle @@ -112,6 +114,14 @@ describe('MetadataBase', () => { }); }); + it('updates the subtitle', async () => { + const subtitle = 'subtitle text'; + expect(metadataBase.subtitle).toBe(undefined); + metadataBase.subtitle = subtitle; + await metadataBase.__updateSpyPromise; + expect(metadataBase._Subtitle.content).toBe(subtitle); + }); + it('updates the description', async () => { const description = 'description text'; expect(metadataBase.description).toBe(undefined); diff --git a/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.d.ts b/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.d.ts index ebdc25e5a..dca3f94d5 100644 --- a/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.d.ts +++ b/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.d.ts @@ -40,6 +40,10 @@ declare namespace MetadataCardContent { * description text below title */ description?: string; + /** + * details text directly below description + */ + descriptionDetails?: string; /** * details text at bottom left of component */ @@ -59,10 +63,15 @@ declare class MetadataCardContent< * text of title content */ title?: string; + /** * description text below title */ description?: string; + /** + * details text directly below description + */ + descriptionDetails?: string; /** * details text at bottom left of component */ @@ -80,6 +89,7 @@ declare class MetadataCardContent< get _Text(): TextBox; get _Title(): TextBox; get _Description(): TextBox; + get _DescriptionDetails(): TextBox; get _DetailsWrapper(): TextBox; get _DetailsFader(): TextBox; get _Details(): TextBox; diff --git a/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx b/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx index 9c48216af..d48e3fb34 100644 --- a/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx +++ b/packages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx @@ -59,12 +59,12 @@ class Basic extends lng.Component { ### Properties -| name | type | required | default | description | -| ----------- | ---------------------------------------------- | -------- | --------- | ----------------------------------------------------------------------------------------- | -| title | string | false | undefined | title text | -| description | string | false | undefined | description text directly below title | -| descriptionDetails | string | false | undefined | details text directly below description | -| details | string | false | undefined | details text at bottom left of component | +| name | type | required | default | description | +| ------------------ | ----------------------------------------------------- | -------- | --------- | ----------------------------------------------------------------------------------------- | +| title | string | false | undefined | title text | +| description | string | false | undefined | description text directly below title | +| descriptionDetails | string | false | undefined | details text directly below description | +| details | string | false | undefined | details text at bottom left of component | | provider | [Provider](?path=/docs/components-provider--provider) | false | undefined | an object of [Provider](?path=/docs/components-provider--provider) properties to patch in | ### Style Properties