Merge branch 'develop' into feat/preload-keyboards

rdkcentral · Sep 17, 2024 · abc5a74 · abc5a74
2 parents 2bca0f3 + d1ac54a
commit abc5a74
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 8 deletions.
diff --git a/packages/@lightningjs/ui-components/src/components/CardContent/CardContent.test.js b/packages/@lightningjs/ui-components/src/components/CardContent/CardContent.test.js
@@ -46,6 +46,7 @@ describe('CardContent', () => {
 
   it('sets the announce string to the metadata text from both the metadata component on the right and the tile on the left', () => {
     const title = 'Title';
+    const subtitle = 'Subtitle';
     const description = 'Description';
     const descriptionDetails = 'Description Details';
     const details = 'Details';
@@ -60,6 +61,7 @@ describe('CardContent', () => {
     cardContent.patch({
       metadata: {
         title,
+        subtitle,
         description,
         descriptionDetails,
         details,
@@ -75,6 +77,7 @@ describe('CardContent', () => {
     expect(cardContent.announce).toEqual([
       [
         title,
+        subtitle,
         description,
         descriptionDetails,
         details,

diff --git a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.js
@@ -212,7 +212,7 @@ class MetadataBase extends Base {
       marquee: this.marquee,
       style: {
         textStyle: {
-          ...this.style.descriptionTextStyle,
+          ...this.style.subtitleTextStyle,
           maxLines: 1,
           wordWrap: true,
           wordWrapWidth: this._Text.w

diff --git a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.mdx b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.mdx
@@ -77,14 +77,14 @@ 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       |
 | logoHeight   | number         | true (if using logo) | undefined | height of logo                               |
 | logoPosition | string         | false                | 'right'   | which side to place logo (`right` or `left`) |
 | logoTitle    | string         | true (if using logo) | undefined | title of logo to use for announcer           |
 | logoWidth    | number         | true (if using logo) | undefined | width of logo                                |
+| subtitle     | string         | false                | undefined | subtitle text                                |
 | title        | string         | false                | undefined | first line or headline of the content        |
 
 ### Style Properties
@@ -97,6 +97,7 @@ class Example extends lng.Component {
 | logoHeight           | number           | height for logo                                                 |
 | logoPadding          | number           | spacing between logo and secondLine                             |
 | logoWidth            | number           | width for logo                                                  |
+| subtitleTextStyle    | string \| object | text style for subtitle                                         |
 | titleTextStyle       | string \| object | text style for title                                            |
 
 ### Methods

diff --git a/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.styles.js b/packages/@lightningjs/ui-components/src/components/MetadataBase/MetadataBase.styles.js
@@ -23,6 +23,7 @@ export const base = theme => ({
   logoHeight: theme.typography.body3.lineHeight,
   logoPadding: theme.spacer.lg,
   detailsTextStyle: theme.typography.body3,
+  subtitleTextStyle: theme.typography.body3,
   titleTextStyle: { ...theme.typography.headline1, maxLines: 1 },
   marqueeSync: true,
   alpha: theme.alpha.primary
@@ -38,6 +39,7 @@ export const mode = theme => ({
 export const tone = theme => ({
   neutral: {
     titleTextStyle: { textColor: theme.color.textNeutral },
+    subtitleTextStyle: { textColor: theme.color.textNeutralSecondary },
     detailsTextStyle: { textColor: theme.color.textNeutral },
     descriptionTextStyle: { textColor: theme.color.textNeutralSecondary },
     mode: {
@@ -52,11 +54,13 @@ export const tone = theme => ({
   },
   inverse: {
     titleTextStyle: { textColor: theme.color.textInverse },
+    subtitleTextStyle: { textColor: theme.color.textInverseSecondary },
     detailsTextStyle: { textColor: theme.color.textInverse },
     descriptionTextStyle: { textColor: theme.color.textInverseSecondary },
     mode: {
       disabled: {
         titleTextStyle: { textColor: theme.color.textNeutralDisabled },
+        subtitleTextStyle: { textColor: theme.color.textNeutralDisabled },
         detailsTextStyle: { textColor: theme.color.textNeutralDisabled },
         descriptionTextStyle: {
           textColor: theme.color.textNeutralDisabled
@@ -66,6 +70,7 @@ export const tone = theme => ({
   },
   brand: {
     titleTextStyle: { textColor: theme.color.textNeutral },
+    subtitleTextStyle: { textColor: theme.color.textNeutralSecondary },
     detailsTextStyle: { textColor: theme.color.textNeutral },
     descriptionTextStyle: { textColor: theme.color.textNeutralSecondary },
     mode: {

diff --git a/...ages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.js b/...ages/@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.js
@@ -38,6 +38,9 @@ export default class MetadataCardContent extends MetadataBase {
         Title: {
           type: TextBox
         },
+        Subtitle: {
+          type: TextBox
+        },
         Description: {
           type: TextBox
         },
@@ -72,6 +75,7 @@ export default class MetadataCardContent extends MetadataBase {
       'descriptionDetails',
       'details',
       'provider',
+      'subtitle',
       'title'
     ];
   }
@@ -83,6 +87,10 @@ export default class MetadataCardContent extends MetadataBase {
         name: 'Title',
         path: 'Text.Title'
       },
+      {
+        name: 'Subtitle',
+        path: 'Text.Subtitle'
+      },
       {
         name: 'Description',
         path: 'Text.Description'
@@ -141,11 +149,37 @@ export default class MetadataCardContent extends MetadataBase {
   _updateLines() {
     this._Text.w = this.w;
     this._updateTitle();
+    this._updateSubtitle();
     this._updateDescription();
     this._updateDescriptionDetails();
     this._updateDetails();
   }
 
+  _updateSubtitle() {
+    if (!this.subtitle && !this._Subtitle) {
+      return;
+    }
+
+    if (!this._Subtitle) {
+      this._Text.childList.addAt({
+        ref: 'Subtitle',
+        type: TextBox
+      });
+    }
+
+    this._Subtitle.patch({
+      content: this.subtitle,
+      style: {
+        textStyle: {
+          ...this.style.subtitleTextStyle,
+          maxLines: 1,
+          wordWrap: true,
+          wordWrapWidth: this._Text.w
+        }
+      }
+    });
+  }
+
   _updateDescription() {
     this._Description.patch({
       content: this.description,
@@ -264,6 +298,7 @@ export default class MetadataCardContent extends MetadataBase {
     return (
       this._announce || [
         this._Title && this._Title.announce,
+        this._Subtitle && this._Subtitle.announce,
         this._Description && this._Description.announce,
         this._DescriptionDetails && this._DescriptionDetails.announce,
         this._Details && this._Details.announce,

diff --git a/...ningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx b/...ningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.mdx
@@ -43,6 +43,7 @@ class Basic extends lng.Component {
         w: 600,
         h: 250,
         title: 'Title',
+        subtitle: 'Subtitle',
         description: 'Description',
         details: 'Details',
         provider: {
@@ -66,6 +67,7 @@ class Basic extends lng.Component {
 | 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--docs) | false    | undefined | an object of [Provider](?path=/docs/components-provider--docs) properties to patch in |
+| subtitle           | string                                            | false    | undefined | subtitle text                                                                         |
 
 ### Style Properties
 
@@ -74,5 +76,6 @@ class Basic extends lng.Component {
 | detailsTextStyle        | string \| object | text style for details                                                                  |
 | descriptionDetailsStyle | object           | style for description details                                                           |
 | providerStyle           | object           | style properties to pass along to the [Provider](?path=/docs/components-provider--docs) |
+| subtitleTextStyle       | string \| object | text style for subtitle                                                                 |
 
 ### Methods
diff --git a/...ghtningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.stories.js b/...ghtningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.stories.js
@@ -46,8 +46,9 @@ const descriptionSample =
 
 MetadataCardContent.args = {
   w: 600,
-  h: 250,
+  h: 300,
   title: 'Title',
+  subtitle: 'Subtitle',
   description: descriptionSample,
   descriptionDetails: [
     '94%',
@@ -93,9 +94,17 @@ MetadataCardContent.argTypes = {
       type: { summary: 'string' }
     }
   },
+  subtitle: {
+    control: 'text',
+    description: 'Subtitle text below title',
+    table: {
+      defaultValue: { summary: 'undefined' },
+      type: { summary: 'string' }
+    }
+  },
   description: {
     control: 'text',
-    description: 'Description text directly below title',
+    description: 'Description text below subtitle',
     table: {
       defaultValue: { summary: 'undefined' },
       type: { summary: 'string' }

diff --git a/...@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.test.js b/...@lightningjs/ui-components/src/components/MetadataCardContent/MetadataCardContent.test.js
@@ -50,12 +50,14 @@ describe('MetadataCardContent', () => {
 
   it('sets the announce string to the appropriate text content status', () => {
     const title = 'Title';
+    const subtitle = 'Subtitle';
     const description = 'Description';
     const descriptionDetails = 'Description Details';
     const details = 'Details';
     const provider = { providers: [{ icon: 'test.png', announce: 'test' }] };
     metadataCardContent.patch({
       title,
+      subtitle,
       description,
       descriptionDetails,
       details,
@@ -64,6 +66,7 @@ describe('MetadataCardContent', () => {
     testRenderer.forceAllUpdates();
     expect(metadataCardContent.announce).toEqual([
       title,
+      subtitle,
       description,
       descriptionDetails,
       details,
@@ -86,6 +89,14 @@ describe('MetadataCardContent', () => {
     expect(metadataCardContent._Title.content).toBe(title);
   });
 
+  it('updates the subtitle', async () => {
+    const subtitle = 'subtitle text';
+    expect(metadataCardContent.subtitle).toBe(undefined);
+    metadataCardContent.subtitle = subtitle;
+    await metadataCardContent.__updateSpyPromise;
+    expect(metadataCardContent._Subtitle.content).toBe(subtitle);
+  });
+
   it('updates the description', async () => {
     const description = 'description text';
     expect(metadataCardContent.description).toBe(undefined);

diff --git a/...ponents/src/components/MetadataCardContent/__snapshots__/MetadataCardContent.test.js.snap b/...ponents/src/components/MetadataCardContent/__snapshots__/MetadataCardContent.test.js.snap
@@ -102,7 +102,7 @@ exports[`MetadataCardContent renders 1`] = `
                   "attached": true,
                   "boundsMargin": null,
                   "children": {
-                    "Element-13": {
+                    "Element-14": {
                       "active": false,
                       "alpha": 1,
                       "attached": true,
@@ -137,7 +137,7 @@ exports[`MetadataCardContent renders 1`] = `
                       "y": 0,
                       "zIndex": 0,
                     },
-                    "Element-14": {
+                    "Element-15": {
                       "active": false,
                       "alpha": 1,
                       "attached": true,
@@ -172,7 +172,7 @@ exports[`MetadataCardContent renders 1`] = `
                       "y": 0,
                       "zIndex": 0,
                     },
-                    "Element-15": {
+                    "Element-16": {
                       "active": false,
                       "alpha": 1,
                       "attached": true,
@@ -207,7 +207,7 @@ exports[`MetadataCardContent renders 1`] = `
                       "y": 0,
                       "zIndex": 0,
                     },
-                    "Element-16": {
+                    "Element-17": {
                       "active": false,
                       "alpha": 1,
                       "attached": true,
@@ -578,6 +578,44 @@ exports[`MetadataCardContent renders 1`] = `
           "y": 5,
           "zIndex": 0,
         },
+        "Subtitle": {
+          "active": false,
+          "alpha": 0.001,
+          "attached": true,
+          "boundsMargin": null,
+          "clipping": false,
+          "color": 4294967295,
+          "enabled": true,
+          "flex": false,
+          "flexItem": true,
+          "h": 0,
+          "hasFinalFocus": false,
+          "hasFocus": false,
+          "isComponent": true,
+          "mount": 0,
+          "mountX": 0,
+          "mountY": 0,
+          "pivot": 0.5,
+          "pivotX": 0.5,
+          "pivotY": 0.5,
+          "ref": "Subtitle",
+          "renderOfScreen": undefined,
+          "renderToTexture": false,
+          "scale": 1,
+          "scaleX": 1,
+          "scaleY": 1,
+          "state": "",
+          "tag": [Function],
+          "tags": [
+            "Subtitle",
+          ],
+          "type": "TextBox",
+          "visible": true,
+          "w": 0,
+          "x": 0,
+          "y": 0,
+          "zIndex": 0,
+        },
         "Title": {
           "active": false,
           "alpha": 0.001,