feat: add Subtitle Support to MetadataBase Component (#490)

* feat: update input TS file * fix: revert changes * feat: Add subheading to metadatacardcontent * fix:run lint * test: update snapshot * fix: Update Typescript declaratation file * fix: rename property and remove deprecated subtitle warnings * fix: add subtitle feature test * fix: move subtitle property to metadatabase component * fix:update snapshots * fix: remove commented code
rdkcentral · Apr 3, 2024 · d60f738 · d60f738
1 parent d17a687
commit d60f738
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 26 deletions.
diff --git 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<TemplateSpec, TypeConfig> {
   // 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
@@ -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
@@ -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
@@ -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
@@ -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/...es/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.d.ts b/...es/@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/...ningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx b/...ningjs/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