@lightningjs/ui-components - npm Package Compare versions

Comparing version 2.20.7 to 2.21.0

package.json

 {
   "name": "@lightningjs/ui-components",
-  "version": "2.20.7",
+  "version": "2.21.0",
   "description": "A shared library of helpful LightningJS components utilizing theme files to easily customize for any LightningJS application.",
@@ -5,0 +5,0 @@ "repository": {

src/components/MetadataBase/MetadataBase.d.ts

@@ -39,2 +39,6 @@ /**
     /**
+     * text of subtitle content
+     */
+    subtitle?: string;
+    /**
      * third line or description of the content
@@ -72,7 +76,2 @@ */
     /**
-     * @deprecated
-     * relevant content data in the middle
-     */
-    subtitle?: string;
-    /**
      * first line or headline of the content
@@ -99,2 +98,6 @@ */
   /**
+   * text of subtitle content
+   */
+  subtitle?: string;
+  /**
    * third line or description of the content
@@ -132,7 +135,2 @@ */
   /**
-   * @deprecated
-   * relevant content data in the middle
-   */
-  subtitle?: string;
-  /**
    * first line or headline of the content
@@ -147,2 +145,3 @@ */
   get _Title(): TextBox;
+  get _Subtitle(): TextBox;
   get _DetailsWrapper(): TextBox;
@@ -149,0 +148,0 @@ get _Details(): TextBox;

src/components/MetadataBase/MetadataBase.js

@@ -41,2 +41,3 @@ /**
         // Title: {},
+        // Subtitle: {},
         DetailsWrapper: {
@@ -63,2 +64,3 @@ // Details: {}
       'details',
+      'subtitle',
       'title',
@@ -77,2 +79,6 @@ 'marquee'
       {
+        name: 'Subtitle',
+        path: 'Text.Subtitle'
+      },
+      {
         name: 'DetailsWrapper',
@@ -93,11 +99,7 @@ path: 'Text.DetailsWrapper'
 
-  static get aliasStyles() {
-    return [{ prev: 'subtitleTextStyle', curr: 'detailsTextStyle' }];
+  _titleLoaded() {
+    this._updateLayout();
   }
 
-  static get aliasProperties() {
-    return [{ prev: 'subtitle', curr: 'details' }];
-  }
-
-  _titleLoaded() {
+  _subtitleLoaded() {
     this._updateLayout();
@@ -135,2 +137,3 @@ }
     this._updateTitle();
+    this._updateSubtitle();
     this._updateDetails();
@@ -194,2 +197,34 @@ this._updateDescription();
 
+  _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() {
@@ -294,2 +329,4 @@ if (this.marquee) {
     this.logoPosition = this.logoPosition || 'right';
+    const subtitleH =
+      (this.subtitle && this._Subtitle && this._Subtitle.h) || 0;
     this._Logo.patch({
@@ -303,3 +340,3 @@ w: this.logoWidth,
     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;
   }
@@ -313,2 +350,4 @@
     const titleH = (this.title && this._Title && this._Title.h) || 0;
+    const subtitleH =
+      (this.subtitle && this._Subtitle && this._Subtitle.h) || 0;
     const detailsH =
@@ -318,3 +357,3 @@ (this.details && this._DetailsWrapper && this._DetailsWrapper.h) || 0;
       (this.description && this._Description && this._Description.h) || 0;
-    return titleH + detailsH + descriptionH;
+    return titleH + subtitleH + detailsH + descriptionH;
   }
@@ -345,2 +384,3 @@
       ...(this._Title ? [this._Title] : []),
+      ...(this._Subtitle ? [this._Subtitle] : []),
       ...(this._Description ? [this._Description] : []),
@@ -359,2 +399,3 @@ ...(this._Details ? [this._Details] : [])
         this._Title && this._Title.announce,
+        this._Subtitle && this._Subtitle.announce,
         this._Details && this._Details.announce,
@@ -361,0 +402,0 @@ this._Description && this._Description.announce,

src/components/MetadataBase/MetadataBase.stories.js

@@ -46,2 +46,3 @@ /**
   title: 'Title',
+  subtitle: 'Subtitle',
   details: [
@@ -83,2 +84,10 @@ '94%',
   },
+  subtitle: {
+    control: 'text',
+    description: 'text directly below title',
+    table: {
+      defaultValue: { summary: 'undefined' },
+      type: { summary: 'string' }
+    }
+  },
   details: {
@@ -85,0 +94,0 @@ control: 'object',

src/components/MetadataBase/MetadataBase.test.js

@@ -70,9 +70,11 @@ /**
     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,
@@ -116,2 +118,10 @@ description,
 
+  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 () => {
@@ -118,0 +128,0 @@ const description = 'description text';

src/components/MetadataCardContent/MetadataCardContent.d.ts

@@ -44,2 +44,6 @@ /**
     /**
+     * details text directly below description
+     */
+    descriptionDetails?: string;
+    /**
      * details text at bottom left of component
@@ -63,2 +67,3 @@ */
   title?: string;
+
   /**
@@ -69,2 +74,6 @@ * description text below title
   /**
+   * details text directly below description
+   */
+  descriptionDetails?: string;
+  /**
    * details text at bottom left of component
@@ -86,2 +95,3 @@ */
   get _Description(): TextBox;
+  get _DescriptionDetails(): TextBox;
   get _DetailsWrapper(): TextBox;
@@ -88,0 +98,0 @@ get _DetailsFader(): TextBox;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12551923

increased by0.06%

Lines of code

86017

increased by0.13%

No dependency changes