@lightningjs/ui-components - npm Package Compare versions

Comparing version 2.7.0 to 2.8.0

package.json

 {
   "name": "@lightningjs/ui-components",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "A shared library of helpful LightningJS components utilizing theme files to easily customize for any LightningJS application.",
@@ -30,3 +30,3 @@ "repository": {
   "peerDependencies": {
-    "@lightningjs/core": "^2.9.0"
+    "@lightningjs/core": "^2.11.0"
   },
@@ -33,0 +33,0 @@ "devDependencies": {

src/components/Badge/Badge.d.ts

@@ -19,7 +19,7 @@ /**
 
-import type lng from '@lightningjs/core';
-import type Base from '../Base';
-import type { Color, StylePartial } from '../../types/lui';
+import lng from '@lightningjs/core';
+import Base from '../Base';
+import { Color, StylePartial } from '../../types/lui';
 
-export type BadgeStyle = {
+type BadgeStyle = {
   backgroundColor: Color;
@@ -37,8 +37,70 @@ contentSpacing: number;
 
-export default class Badge extends Base {
-  title?: string;
+declare namespace Badge {
+  export interface TemplateSpec extends Base.TemplateSpec {
+    /**
+     * path to image or inline SVG XML
+     */
+    icon?: string;
+
+    /**
+     * width of icon
+     */
+    iconWidth?: number;
+
+    /**
+     * height of icon
+     */
+    iconHeight?: number;
+
+    /**
+     * side of the text where icon will appear on (`left` or `right`)
+     */
+    iconAlign?: 'left' | 'right';
+
+    /**
+     * Badge text
+     */
+    title?: string;
+  }
+
+  export interface TypeConfig extends lng.Component.TypeConfig {
+    SignalMapType: SignalMap;
+  }
+  /**
+   * emitted when the Badge component finishes loading its content and adjusts the background to fit the text input size.
+   */
+  export type SignalMap = {
+    loadedBadge(): void;
+  };
+}
+
+declare class Badge<
+  TemplateSpec extends Badge.TemplateSpec = Badge.TemplateSpec,
+  TypeConfig extends Badge.TypeConfig = Badge.TypeConfig
+> extends Base<TemplateSpec, TypeConfig> {
+  /**
+   * path to image or inline SVG XML
+   */
   icon?: string;
-  iconAlign?: string;
+
+  /**
+   * width of icon
+   */
+  iconWidth?: number;
+
+  /**
+   * height of icon
+   */
   iconHeight?: number;
-  iconWidth?: number;
+
+  /**
+   * side of the text where icon will appear on (`left` or `right`)
+   */
+  iconAlign?: 'left' | 'right';
+
+  /**
+   * Badge text
+   */
+  title?: string;
+
   get style(): BadgeStyle;
@@ -48,4 +110,7 @@ set style(v: StylePartial<BadgeStyle>);
   // tags
+  get _Background(): lng.Component;
   get _Text(): lng.Component;
   get _Icon(): lng.Component;
 }
+
+export { Badge as default, BadgeStyle };

src/components/Badge/Badge.test.js

@@ -152,3 +152,3 @@ /**
     expect(badge.icon).toBe(icon2);
-    expect(badge._Icon.color).toBe(badge._Text.color);
+    expect(badge._Icon.color).toBe(badge.style.iconColor);
   });
@@ -155,0 +155,0 @@

src/components/Card/Card.d.ts

@@ -21,7 +21,6 @@ /**
 import Surface, { SurfaceStyle } from '../Surface';
-import { TextBoxStyle } from '../TextBox';
-import type { Color, StylePartial } from '../../types/lui';
-import type { TextContent } from '../InlineContent/InlineContent';
+import TextBox, { TextBoxStyle } from '../TextBox';
+import { Color, StylePartial } from '../../types/lui';
 
-export type CardStyle = SurfaceStyle & {
+type CardStyle = SurfaceStyle & {
   backgroundColor: Color;
@@ -33,5 +32,20 @@ paddingHorizontal: number;
 };
+declare namespace Card {
+  export interface TemplateSpec extends Surface.TemplateSpec {
+    /**
+     * headline of the content
+     */
+    title?: string | TextBox[];
+  }
+}
 
-export default class Card extends Surface {
-  title?: string | TextContent[];
+declare class Card<
+  TemplateSpec extends Card.TemplateSpec = Card.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends Surface<TemplateSpec, TypeConfig> {
+  /**
+   * headline of the content
+   */
+  title?: string | TextBox[];
+
   get style(): CardStyle;
@@ -41,3 +55,5 @@ set style(v: StylePartial<CardStyle>);
   // tags
-  get _Title(): lng.Component;
+  get _Title(): TextBox;
 }
+
+export { Card as default, CardStyle };

src/components/Card/CardRadio.d.ts

@@ -20,14 +20,37 @@ /**
 import lng from '@lightningjs/core';
-import type { StylePartial } from '../../types/lui';
-import { TextBoxStyle } from '../TextBox';
+import { StylePartial } from '../../types/lui';
+import TextBox, { TextBoxStyle } from '../TextBox';
 import CardTitle, { CardTitleStyle } from './CardTitle';
-import type { TextContent } from '../InlineContent/InlineContent';
 
-export type CardRadioStyle = CardTitleStyle & {
+type CardRadioStyle = CardTitleStyle & {
   descriptionTextStyle: TextBoxStyle;
   subtitleTextStyle: TextBoxStyle;
 };
-export default class CardRadio extends CardTitle {
+
+declare namespace CardRadio {
+  export interface TemplateSpec extends CardTitle.TemplateSpec {
+    /**
+     * Object containing all properties supported in the Radio Component
+     * TODO: See if the types can be updated when Radio has been updated
+     */
+    radio?: Record<string, unknown>;
+    /**
+     * text to be displayed in the subtitle section of the card
+     */
+    subtitle?: string | TextBox[];
+  }
+}
+declare class CardRadio<
+  TemplateSpec extends CardRadio.TemplateSpec = CardRadio.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends CardTitle<TemplateSpec, TypeConfig> {
+  /**
+   * Object containing all properties supported in the Radio Component
+   */
   radio?: Record<string, unknown>;
-  subtitle?: string | TextContent[];
+  /**
+   * text to be displayed in the subtitle section of the card
+   */
+  subtitle?: string | TextBox[];
+
   get style(): CardRadioStyle;
@@ -37,3 +60,5 @@ set style(v: StylePartial<CardRadioStyle>);
   //tags
-  get _Subtitle(): lng.Component;
+  get _Subtitle(): TextBox;
 }
+
+export { CardRadio as default, CardRadioStyle };

src/components/Card/CardSection.d.ts

@@ -21,6 +21,7 @@ /**
 import Card, { CardStyle } from './Card';
-import type { StylePartial } from '../../types/lui';
+import { StylePartial } from '../../types/lui';
+import Icon from '../Icon';
 import { TextBoxStyle } from '../TextBox';
 
-export type CardSectionStyle = CardStyle & {
+type CardSectionStyle = CardStyle & {
   iconHeight: number;
@@ -31,6 +32,37 @@ iconWidth: number;
 
-export default class CardSection extends Card {
+declare namespace CardSection {
+  export interface TemplateSpec extends Card.TemplateSpec {
+    /**
+     * height of the icon on the right
+     */
+    iconHeight?: number;
+    /**
+     * icon source
+     */
+    iconSrc?: string;
+    /**
+     * width of the icon on the right
+     */
+    iconWidth?: number;
+  }
+}
+
+declare class CardSection<
+  TemplateSpec extends CardSection.TemplateSpec = CardSection.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends Card<TemplateSpec, TypeConfig> {
+  // Properties
+  /**
+   * height of the icon on the right
+   */
   iconHeight?: number;
-  iconSrc?: number;
+  /**
+   * icon source
+   */
+  iconSrc?: string;
+  /**
+   * width of the icon on the right
+   */
   iconWidth?: number;
+
   get style(): CardSectionStyle;
@@ -40,3 +72,5 @@ set style(v: StylePartial<CardSectionStyle>);
   // tags
-  get _Icon(): lng.Component;
+  get _Icon(): Icon;
 }
+
+export { CardSection as default, CardSectionStyle };

src/components/Card/CardTitle.d.ts

@@ -21,14 +21,36 @@ /**
 import Card, { CardStyle } from './Card';
-import { TextBoxStyle } from '../TextBox';
-import type { TextContent } from '../InlineContent/InlineContent';
-import type { StylePartial } from '../../types/lui';
+import TextBox, { TextBoxStyle } from '../TextBox';
+import { StylePartial } from '../../types/lui';
 
-export type CardTitleStyle = CardStyle & {
-  descriptionTextProperties: TextBoxStyle;
+type CardTitleStyle = CardStyle & {
+  descriptionTextStyle: TextBoxStyle;
   detailsTextProperties: TextBoxStyle;
 };
 
-export default class CardTitle extends Card {
-  description?: string | TextContent[];
-  details?: string | TextContent[];
+declare namespace CardTitle {
+  export interface TemplateSpec extends Card.TemplateSpec {
+    /**
+     * text to be displayed in the description section
+     */
+    description?: string | TextBox[];
+    /**
+     * text to be displayed in the details section
+     */
+    details?: string | TextBox[];
+  }
+}
+
+declare class CardTitle<
+  TemplateSpec extends CardTitle.TemplateSpec = CardTitle.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends Card<TemplateSpec, TypeConfig> {
+  /**
+   * text to be displayed in the description section
+   */
+  description?: string | TextBox[];
+  /**
+   * text to be displayed in the details section
+   */
+  details?: string | TextBox[];
+
   get style(): CardTitleStyle;
@@ -38,4 +60,6 @@ set style(v: StylePartial<CardTitleStyle>);
   // tags
-  get _Description(): lng.Component;
-  get _Details(): lng.Component;
+  get _Description(): TextBox;
+  get _Details(): TextBox;
 }
+
+export { CardTitle as default, CardTitleStyle };

src/components/Checkbox/Checkbox.d.ts

@@ -21,5 +21,6 @@ /**
 import Base from '../Base';
-import type { Color, StylePartial } from '../../types/lui';
+import Icon from '../Icon';
+import { Color, StylePartial } from '../../types/lui';
 
-export type CheckboxStyle = {
+type CheckboxStyle = {
   alpha: number;
@@ -37,5 +38,28 @@ backgroundColor: Color;
 
-export default class Checkbox extends Base {
+declare namespace Checkbox {
+  export interface TemplateSpec extends Base.TemplateSpec {
+    /**
+     * Indicates whether the checkbox is checked or unchecked.
+     * Setting this to `true` will check the checkbox, and setting it to `false` will uncheck it.
+     */
+    checked?: boolean;
+  }
+}
+
+declare class Checkbox<
+  TemplateSpec extends Checkbox.TemplateSpec = Checkbox.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends Base<TemplateSpec, TypeConfig> {
+  /**
+   * Indicates whether the checkbox is checked or unchecked.
+   * Setting this to `true` will check the checkbox, and setting it to `false` will uncheck it.
+   */
   checked?: boolean;
-  toggle(): Checkbox;
+
+  // Method
+  /**
+   * Toggles the checkbox state and updates the UI.
+   */
+  toggle(): void;
+
   get style(): CheckboxStyle;
@@ -45,5 +69,7 @@ set style(v: StylePartial<CheckboxStyle>);
   // tags
-  get _Check(): lng.Component;
+  get _Check(): Icon;
   get _Body(): lng.Component;
   get _Stroke(): lng.Component;
 }
+
+export { Checkbox as default, CheckboxStyle };

src/components/Checkbox/Checkbox.styles.js

@@ -23,3 +23,3 @@ /**
   return {
-    alpha: 1,
+    alpha: theme.alpha.primary,
     w: size,
@@ -26,0 +26,0 @@ h: size,

src/components/Column/Column.d.ts

@@ -20,2 +20,3 @@ /**
 import lng from '@lightningjs/core';
+import FocusManager from '../FocusManager/FocusManager';
 import NavigationManager from '../NavigationManager';
@@ -34,4 +35,5 @@
 declare class Column<
-  TemplateSpec extends Column.TemplateSpec = Column.TemplateSpec
-> extends NavigationManager<TemplateSpec> {
+  TemplateSpec extends Column.TemplateSpec = Column.TemplateSpec,
+  TypeConfig extends FocusManager.TypeConfig = FocusManager.TypeConfig
+> extends NavigationManager<TemplateSpec, TypeConfig> {
   // Properties
@@ -38,0 +40,0 @@ /**

src/components/FocusManager/FocusManager.d.ts

@@ -23,5 +23,7 @@ /**
 export type NavigationDirectionType = 'none' | 'column' | 'row';
+
 export type FocusItemsType = Array<
   lng.Component.NewPatchTemplate<lng.Component.Constructor> | lng.Component
 >;
+
 declare namespace FocusManager {
@@ -44,2 +46,3 @@ export interface TemplateSpec extends Base.TemplateSpec {
      * index of currently selected item
+     * updating value emits the `selectedChange` signal
      */
@@ -63,2 +66,14 @@ selectedIndex?: number;
   }
+  export interface TypeConfig extends lng.Component.TypeConfig {
+    SignalMapType: SignalMap;
+  }
+
+  export type SignalMap = {
+    /**
+     * emitted whenever the currently selected item changes
+     * @param selected the currently selected component
+     * @param prevSelected the previous selected component
+     */
+    selectedChange(selected: lng.Component, prevSelected: lng.Component): void;
+  };
 }
@@ -68,3 +83,3 @@
   TemplateSpec extends FocusManager.TemplateSpec = FocusManager.TemplateSpec,
-  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+  TypeConfig extends FocusManager.TypeConfig = FocusManager.TypeConfig
 > extends Base<TemplateSpec, TypeConfig> {
@@ -85,2 +100,3 @@ // Properties
    * index of currently selected item
+   * updating value emits the `selectedChange` signal
    */
@@ -166,10 +182,12 @@ selectedIndex: number;
   /**
-   * Selects previous item. If this.wrapSelected=true, will select the last element in the list if focus is currently on the first item.
+   * Selects next item. If this.wrapSelected=true, will select the first element in the list if focus is currently on the last item.
+   * emits the `selectedChange` signal
    */
-  selectPrevious(): void;
+  selectNext(): void;
 
   /**
-   * Selects next item. If this.wrapSelected=true, will select the first element in the list if focus is currently on the last item.
+   * Selects previous item. If this.wrapSelected=true, will select the last element in the list if focus is currently on the first item.
+   * emits the `selectedChange` signal
    */
-  selectNext(): void;
+  selectPrevious(): void;
 
@@ -176,0 +194,0 @@ // tags

src/components/Gradient/Gradient.d.ts

@@ -21,13 +21,18 @@ /**
 import Base from '../Base';
-import type { Color, StylePartial } from '../../types/lui';
+import { Color, StylePartial } from '../../types/lui';
 
-export type GradientStyle = {
+type GradientStyle = {
+  gradientColor: Color;
   gradientTop: string;
-  gradientColor: Color;
   radius: lng.Tools.CornerRadius;
 };
 
-export default class Gradient extends Base {
+declare class Gradient<
+  TemplateSpec extends Base.TemplateSpec = Base.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends Base<TemplateSpec, TypeConfig> {
   get style(): GradientStyle;
   set style(v: StylePartial<GradientStyle>);
 }
+
+export { Gradient as default, GradientStyle };

src/components/Icon/Icon.js

@@ -23,6 +23,14 @@ /**
 import { context } from '../../globals';
-import { stringifyCompare, getValidColor } from '../../utils';
+import { getValidColor } from '../../utils';
 import CustomImageTexture from '../../textures/CustomImageTexture';
 
+/**
+ * Icon component that displays different types of icons, supporting SVGs and images.
+ * @extends Base
+ */
 export default class Icon extends Base {
+  /**
+   * Returns the name of the component for theming support.
+   * @returns {string} The name of the component.
+   */
   static get __componentName() {
@@ -32,2 +40,6 @@ return 'Icon';
 
+  /**
+   * Returns the theme styles for the Icon component.
+   * @returns {Object} The theme styles object.
+   */
   static get __themeStyle() {
@@ -37,24 +49,60 @@ return styles;
 
+  /**
+   * Returns the list of properties that can be set on the Icon component. Used by withUpdates
+   * @returns {Array} An array of property names.
+   */
   static get properties() {
-    return ['icon', 'fixed'];
+    return ['icon', 'fixed', 'color'];
   }
 
   _init() {
+    /**
+     * Event listener for the 'txLoaded' event to handle icon texture loading.
+     *
+     * @listens 'txLoaded'
+     */
     this.on('txLoaded', () => {
       if (!this.fixed) {
-        this._notify.bind(this)();
+        this._notify.bind(this)(); // Notify parent component of the item change if not fixed.
       }
     });
+
+    /**
+     * Event listener for the 'txError' event to handle icon texture loading errors.
+     *
+     * @listens 'txError'
+     * @param {Error} error - The error object containing information about the loading error.
+     */
     this.on('txError', this._handleTxtError.bind(this));
   }
 
+  /**
+   * Returns the color to be used for the icon.
+   *
+   * @private
+   * @returns {string} The color value.
+   */
+  _getColor() {
+    return this._color || this.style.color;
+  }
+
+  /**
+   * Notifies the parent and ancestors of item changes in the Icon component.
+   *
+   * @private
+   */
   _notify() {
     this.w = this.finalW;
     this.h = this.finalH;
-    this.signal('itemChanged', this);
-    this.fireAncestors('$itemChanged');
+    this.signal('itemChanged', this); // Emit 'itemChanged' signal to notify parent.
+    this.fireAncestors('$itemChanged'); // Emit '$itemChanged' signal to notify ancestors.
   }
 
-  // eslint-disable-next-line no-unused-vars
-  _handleTxtError(error) {
+  /**
+   * Handles the error when loading the icon texture.
+   *
+   * @private
+   * @param {Error} error - The error object containing information about the loading error.
+   */
+  _handleTxtError() {
     context.error(`Unable to load icon ${this._icon}`);
@@ -65,46 +113,67 @@ this._icon = null;
 
+  /**
+   * Updates the Icon component based on the provided icon.
+   *
+   * @private
+   */
   _update() {
     if (!this._icon) {
-      this.texture = null;
+      this.texture = null; // If there's no icon, clear the texture.
       return;
     }
-    const { icon, w, h } = this;
-    if (
-      !this.prevTemplateParams ||
-      !stringifyCompare({ icon, w, h }, this.prevTemplateParams)
-    ) {
-      this.prevTemplateParams = { icon, w, h };
-      const template = getIconTemplate(icon, w, h);
-      this.patch(template);
-      // only update color if color style is defined in theme
-      if (!template.texture && this.style.color) {
-        this.smooth = {
-          color: getValidColor(this.style.color)
-        };
-      }
-    } else if (this.style.color) {
-      this.color = getValidColor(this.style.color);
-    }
+    this.patch(this._iconPatch); // Apply the icon patch.
+  }
 
-    // setting the radius on the Icon component
-    if (this.radius || this.style.radius) {
-      this.shader = {
-        radius: this.radius || this.style.radius,
-        type: lng.shaders.RoundedRectangle
+  /**
+   * Generates the patch based on the icon type (SVG, image, etc.) and other properties.
+   *
+   * @private
+   * @returns {Object} The patch object to update the Icon component.
+   */
+  get _iconPatch() {
+    const [isSvgTag, isSvgURI] = [/^<svg.*<\/svg>$/, /\.svg$/].map(regex =>
+      RegExp.prototype.test.bind(regex)
+    );
+    let texture;
+    const svgTag = isSvgTag(this.icon);
+    const svgURI = isSvgURI(this.icon);
+    if (svgTag) {
+      texture = lng.Tools.getSvgTexture(
+        `data:image/svg+xml,${encodeURIComponent(this.icon)}`,
+        this.w,
+        this.h
+      );
+    } else if (svgURI) {
+      texture = lng.Tools.getSvgTexture(this.icon, this.w, this.h);
+    } else {
+      texture = {
+        type: CustomImageTexture,
+        w: this.w,
+        h: this.h,
+        src: this.icon
       };
-    } else {
-      this.shader = undefined;
     }
+    const supportsColor = !Boolean(svgTag || svgURI);
+    const color = getValidColor(this._color || this.style.color);
+
+    if (!supportsColor && color) {
+      context.warn('icon does not allow colors to be applied to an SVG');
+    }
+    const shader =
+      this.radius || this.style.radius
+        ? {
+            radius: this.radius || this.style.radius,
+            type: lng.shaders.RoundedRectangle
+          }
+        : undefined;
+    return {
+      texture,
+      shader,
+      w: this.w,
+      h: this.h,
+      ...(supportsColor && color
+        ? { colorUl: color, colorUr: color, colorBl: color, colorBr: color }
+        : {})
+    };
   }
 }
-
-function getIconTemplate(icon, w, h) {
-  const template = { w, h };
-  template.texture = {
-    type: CustomImageTexture,
-    w,
-    h,
-    src: icon
-  };
-  return template;
-}

src/components/InlineContent/InlineContent.js

@@ -141,3 +141,2 @@ /**
     if (this.children.length) {
-      this.stage.update();
       setTimeout(() => {
@@ -144,0 +143,0 @@ this.multiLineHeight = this.finalH;

src/components/Label/Label.d.ts

@@ -21,5 +21,5 @@ /**
 import Base from '../Base';
-import type { Color, StylePartial } from '../../types/lui';
+import { Color, StylePartial } from '../../types/lui';
 
-export type LabelStyle = {
+type LabelStyle = {
   backgroundColor: Color;
@@ -32,3 +32,26 @@ paddingX: number;
 
-export default class Label extends Base {
+declare namespace Label {
+  export interface TemplateSpec extends Base.TemplateSpec {
+    /**
+     * text to display in label
+     */
+    title: string;
+  }
+  export interface TypeConfig extends lng.Component.TypeConfig {
+    SignalMapType: SignalMap;
+  }
+  /**
+   * emitted when an update to the Background has been patched
+   */
+  export type SignalMap = {
+    updateBackground(): void;
+  };
+}
+declare class Label<
+  TemplateSpec extends Label.TemplateSpec = Label.TemplateSpec,
+  TypeConfig extends Label.TypeConfig = Label.TypeConfig
+> extends Base<TemplateSpec, TypeConfig> {
+  /**
+   * text to display in label
+   */
   title: string;
@@ -42,1 +65,3 @@ get style(): LabelStyle;
 }
+
+export { Label as default, LabelStyle };

src/components/ListItem/ListItem.styles.js

@@ -22,3 +22,3 @@ /**
 export const base = theme => ({
-  alpha: 1,
+  alpha: theme.alpha.primary,
   descriptionTextStyle: {
@@ -25,0 +25,0 @@ ...theme.typography.body3,

src/components/MetadataBase/MetadataBase.d.ts

@@ -19,7 +19,9 @@ /**
 
+import lng from '@lightningjs/core';
 import Base from '../Base';
-import type { StylePartial } from '../../types/lui';
-import type { TextBoxStyle } from '../TextBox';
+import { StylePartial } from '../../types/lui';
+import TextBox, { TextBoxStyle } from '../TextBox';
+import Icon from '../Icon';
 
-export type MetadataBaseStyle = {
+type MetadataBaseStyle = {
   descriptionTextStyle: TextBoxStyle;
@@ -34,13 +36,105 @@ fadeWidth: number;
 
-export default class MetadataBase extends Base {
-  title?: string;
-  subtitle?: string;
+declare namespace MetadataBase {
+  export interface TemplateSpec extends Base.TemplateSpec {
+    /**
+     * third line or description of the content
+     */
+    description?: string;
+    /**
+     * logo to display at bottom of component
+     */
+    logo?: string;
+    /**
+     * height of logo
+     */
+    logoHeight?: number;
+    /**
+     * width of logo
+     */
+    logoWidth?: number;
+    /**
+     * which side to place logo (`right` or `left`)
+     */
+    logoPosition?: string;
+    /**
+     * title of logo to use for announcer
+     */
+    logoTitle?: string;
+    /**
+     * sets the marquee for Title and Description to the same value so they sync
+     */
+    marquee?: boolean;
+    /**
+     * relevant content data in the middle
+     */
+    subtitle?: string;
+    /**
+     * first line or headline of the content
+     */
+    title?: string;
+  }
+  export interface TypeConfig extends lng.Component.TypeConfig {
+    SignalMapType: SignalMap;
+  }
+  /**
+   * emits when an update to the height of logo and/or text happens
+   */
+  export type SignalMap = {
+    updateMetadataHeight(): void;
+  };
+}
+
+declare class MetadataBase<
+  TemplateSpec extends MetadataBase.TemplateSpec = MetadataBase.TemplateSpec,
+  TypeConfig extends MetadataBase.TypeConfig = MetadataBase.TypeConfig
+> extends Base<TemplateSpec, TypeConfig> {
+  // Properties
+  /**
+   * third line or description of the content
+   */
   description?: string;
+  /**
+   * logo to display at bottom of component
+   */
   logo?: string;
+  /**
+   * height of logo
+   */
+  logoHeight?: number;
+  /**
+   * width of logo
+   */
   logoWidth?: number;
-  logoHeight?: number;
+  /**
+   * which side to place logo (`right` or `left`)
+   */
+  logoPosition?: string;
+  /**
+   * title of logo to use for announcer
+   */
   logoTitle?: string;
-  logoPosition?: string;
+  /**
+   * TODO: confirm type and get a description
+   */
+  marquee?: boolean;
+  /**
+   * relevant content data in the middle
+   */
+  subtitle?: string;
+  /**
+   * first line or headline of the content
+   */
+  title?: string;
+
   get style(): MetadataBaseStyle;
   set style(v: StylePartial<MetadataBaseStyle>);
+
+  // Tags
+  get _Title(): TextBox;
+  get _SubtitleWrapper(): TextBox;
+  get _Subtitle(): TextBox;
+  get _Description(): TextBox;
+  get _Logo(): Icon;
 }
+
+export { MetadataBase as default, MetadataBaseStyle };

src/components/NavigationManager/NavigationManager.d.ts

@@ -88,4 +88,5 @@ /**
 declare class NavigationManager<
-  TemplateSpec extends NavigationManager.TemplateSpec = NavigationManager.TemplateSpec
-> extends FocusManager<TemplateSpec> {
+  TemplateSpec extends NavigationManager.TemplateSpec = NavigationManager.TemplateSpec,
+  TypeConfig extends FocusManager.TypeConfig = FocusManager.TypeConfig
+> extends FocusManager<TemplateSpec, TypeConfig> {
   // Properties
@@ -92,0 +93,0 @@ /**

src/components/NavigationManager/NavigationManager.js

@@ -303,3 +303,2 @@ /**
     this._appendItem(item);
-    this.stage.update();
     this.queueRequestUpdate();
@@ -306,0 +305,0 @@ this._refocus();

src/components/ProgressBar/ProgressBar.d.ts

@@ -21,8 +21,6 @@ /**
 import Base from '../Base';
-import type { Color, StylePartial } from '../../types/lui';
+import { Color, StylePartial } from '../../types/lui';
 
-export type ProgressBarStyle = {
-  animationCurve: string;
-  animationDelay: number;
-  animationDuration: number;
+type ProgressBarStyle = {
+  animation: object;
   barColor: Color;
@@ -33,4 +31,19 @@ progressColor: Color;
 
-export default class ProgressBar extends Base {
-  progress: string;
+declare namespace ProgressBar {
+  export interface TemplateSpec extends Base.TemplateSpec {
+    /**
+     * Percentage of current progress in a decimal format from 0 to 1
+     */
+    progress?: number;
+  }
+}
+
+declare class ProgressBar<
+  TemplateSpec extends ProgressBar.TemplateSpec = ProgressBar.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends Base<TemplateSpec, TypeConfig> {
+  /**
+   * Percentage of current progress in a decimal format from 0 to 1
+   */
+  progress?: number;
   get style(): ProgressBarStyle;
@@ -43,1 +56,3 @@ set style(v: StylePartial<ProgressBarStyle>);
 }
+
+export { ProgressBar as default, ProgressBarStyle };

src/components/Provider/Provider.styles.js

@@ -25,3 +25,3 @@ /**
     radius: theme.radius.sm,
-    alpha: 1
+    alpha: theme.alpha.primary
   };
@@ -28,0 +28,0 @@ }

src/components/Radio/Radio.styles.js

@@ -22,3 +22,3 @@ /**
   return {
-    alpha: 1,
+    alpha: theme.alpha.primary,
     w: size,
@@ -25,0 +25,0 @@ h: size,

src/components/Row/Row.d.ts

@@ -19,2 +19,3 @@ /**
 
+import FocusManager from '../FocusManager';
 import NavigationManager from '../NavigationManager';
@@ -46,4 +47,5 @@
 declare class Row<
-  TemplateSpec extends Row.TemplateSpec = Row.TemplateSpec
-> extends NavigationManager<TemplateSpec> {
+  TemplateSpec extends Row.TemplateSpec = Row.TemplateSpec,
+  TypeConfig extends FocusManager.TypeConfig = FocusManager.TypeConfig
+> extends NavigationManager<TemplateSpec, TypeConfig> {
   // Properties
@@ -50,0 +52,0 @@ /**

src/components/Shadow/Shadow.styles.js

@@ -20,3 +20,3 @@ /**
 export const base = theme => ({
-  alpha: 0,
+  alpha: theme.alpha.none,
   animation: theme.animation.standardEntrance,
@@ -23,0 +23,0 @@ blur: theme.spacer.xxl,

src/components/Slider/Slider.d.ts

@@ -20,5 +20,5 @@ /**
 import lng from '@lightningjs/core';
-import Base from '../Base/Base';
-import type { Color, StylePartial } from '../../types/lui';
-import type { ProgressBarStyle } from '../ProgressBar';
+import Base from '../Base';
+import { Color, StylePartial } from '../../types/lui';
+import { ProgressBarStyle } from '../ProgressBar';
 
@@ -25,0 +25,0 @@ type SliderStyle = {

src/components/Slider/Slider.styles.js

@@ -24,4 +24,4 @@ /**
   return {
-    arrowAlphaValue: 1,
-    arrowAlphaValueLimit: 0.5,
+    arrowAlphaValue: theme.alpha.primary,
+    arrowAlphaValueLimit: theme.alpha.secondary,
     arrowHeight: theme.spacer.xxl,
@@ -28,0 +28,0 @@ arrowSpacing: theme.spacer.md,

src/components/Slider/Slider.test.js

@@ -138,3 +138,3 @@ /**
     testRenderer.forceAllUpdates();
-    expect(slider._LeftArrow.alpha).toEqual(0.5);
+    expect(slider._LeftArrow.alpha).toEqual(slider.style.arrowAlphaValueLimit);
   });
@@ -141,0 +141,0 @@

src/components/Slider/SliderLarge.test.js

@@ -121,3 +121,5 @@ /**
     testRenderer.forceAllUpdates();
-    expect(sliderLarge._LeftArrow.alpha).toEqual(0.5);
+    expect(sliderLarge._LeftArrow.alpha).toEqual(
+      sliderLarge.style.arrowAlphaValueLimit
+    );
   });
@@ -124,0 +126,0 @@

src/components/TextBox/TextBox.styles.js

@@ -24,1 +24,13 @@ /**
 });
+
+export const tone = theme => ({
+  neutral: {
+    textStyle: { textColor: theme.color.fillNeutral }
+  },
+  inverse: {
+    textStyle: { textColor: theme.color.fillInverse }
+  },
+  brand: {
+    textStyle: { textColor: theme.color.fillBrand }
+  }
+});

src/components/TextBox/TextBox.test.js

@@ -158,8 +158,2 @@ /**
 
-    it('should set textColor to the default white if no textColor is provided', () => {
-      textBox.content = 'Hello World!';
-      testRenderer.forceAllUpdates();
-      expect(textBox._Text.text.textColor).toBe(getValidColor('#FFFFFF'));
-    });
-
     it('should set textColor to the provided textColor value if defined', () => {
@@ -166,0 +160,0 @@ textBox.content = 'Hello World!';

src/components/Tile/Tile.styles.js

@@ -28,3 +28,3 @@ /**
   radius: theme.radius.md,
-  alpha: 1
+  alpha: theme.alpha.primary
 });
@@ -31,0 +31,0 @@

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

11908295

increased by0.22%

Lines of code

53102

increased by1.32%

No dependency changes