<!--
  Copyright 2023 Comcast Cable Communications Management, LLC

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

  SPDX-License-Identifier: Apache-2.0
-->

import { Preview, Story } from '@storybook/addon-docs';

# Marquee

Scrolls long text

## Source

https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/@lightningjs/ui-components/src/components/Marquee/Marquee.js

## Usage

This component takes in a string or a texture, applies a fade shader to the right, and scrolls the content in a loop.

```js
import { Marquee } from '@lightningjs/ui-components';

class Example extends lng.Component {
  static _template() {
    return {
      Marquee: {
        type: Marquee,
        w: 350,
        h: 50,
        title: {
          text: 'This is a scrolling Marquee component for long text',
          ...TYPESCALE.headline2,
          textColor: getHexColor(COLORS_TEXT.light),
          maxLines: 1
        },
        autoStart: true
      }
    };
  }
}
```

<Preview>
  <Story id="components-marquee--marquee" />
</Preview>

## API

### Properties

| name           | type    | required | default                  | description                                                                                               |
| -------------- | ------- | -------- | ------------------------ | --------------------------------------------------------------------------------------------------------- |
| autoStart      | boolean | false    | false                    | Start scrolling on initiation                                                                             |
| centerAlign    | boolean | false    | false                    | Will center the entire texture if the width of the content is less than the container                     |
| contentTexture | object  | false    | false                    | An object matching Lightning texture object (this.tag('MyTag').getTexture())                              |
| color          | string  | false    | theme.color.fillNeutral1 | Set color of text                                                                                         |
| delay          | number  | false    | 1.5                      | Delay before scrolling starts                                                                             |
| overrideLoopX  | number  | false    | undefined                | alters the length of the marquee loop. Used by withMarqueeSync to synchronize multiple marquee components |
| repeat         | number  | false    | -1                       | Number of times to repeat scrolling                                                                       |
| title          | string  | false    | undefined                | Text content for the marquee title                                                                        |

### Style Properties

| name         | type             | description                                                                              |
| ------------ | ---------------- | ---------------------------------------------------------------------------------------- |
| fadeW        | number           | Starting point of where fadeShader is applied                                            |
| offset       | number           | Helps decide whether content should be clipped and where it should be positioned         |
| shouldSmooth | boolean          | Determines whether things like centering should happen immediately or animate into place |
| textStyle    | string \| object | text style to apply to the title                                                         |

### Methods

#### startScrolling():void

Start scrolling

#### stopScrolling():void

Stops scrolling
