<!--
  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 { Canvas, Story } from '@storybook/addon-docs';

# TextBox

General purpose TextBox component

## Source

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

## Usage

Set a content property with your text and specify a property style as a string.

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

TextBox: {
  type: TextBox,
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
  style: 'headline1',
  w: 600,
}
```

<Canvas>
  <Story id="text-textbox--basic" />
</Canvas>

### Properties

| name    | type    | required | default   | description                     |
| ------- | ------- | -------- | --------- | ------------------------------- |
| content | string  | true     | undefined | Text to be displayed in element |
| marquee | boolean | false    | false     | Allows text to be scrollable    |

TextBox also supports rendering as an InlineContent component. See [InlineContent documentation](/docs/text-inlinecontent--basic) for table of supported properties.

### Style Properties

| name       | type             | description                                                                                                                                                                                                                                             |
| ---------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| offsetX    | number           | Used to ensure text is positioned correctly                                                                                                                                                                                                             |
| offsetY    | number           | Used to ensure text is positioned correctly                                                                                                                                                                                                             |
| textStyle  | string \| object | Default style of text to be displayed. Object should come from the current theme or contain any properties that the [Lightning text texture supports](https://lightningjs.io/docs/#/lightning-core-reference/RenderEngine/Textures/Text?id=properties). |
| typography | object           | The typography object set on the current theme. Pass the key as string to `textStyle` to use the associated text style on the typography object.                                                                                                        |
