{/* prettier-ignore */}
{/*
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 { Meta, Title } from '@storybook/blocks';
import * as TitleRowStories from './TitleRow.stories';

<Meta of={TitleRowStories} />

<Title />

The `TitleRow` component renders a [Row](/docs/components-row--basic) component with a title displayed as a [TextBox](/docs/components-textbox--base) above the Row items.

## Source

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

## Usage

`TitleRow` accepts all [properties supported by Row](/docs/components-row--basic#properties) as well as an optional `title` property.

```js
import { TitleRow } from '@lightningjs/ui-components';
class Example extends lng.Component {
  static _template() {
    return {
      TitleRow: {
        type: TitleRow,
        title: 'Row Title',
        items: [
          // list of item components
        ]
      }
    };
  }
  _getFocused() {
    return this.tag('TitleRow');
  }
}
```

## API

### Properties

**`TitleRow` is a subclass of the [Row component](/docs/components-row--basic)**,

It allows setting all
[properties, style properties, and child properties](/docs/components-row--basic#properties)
supported by `Row`.

| name             | type    | required | default   | description                                                                                           |
| ---------------- | ------- | -------- | --------- | ----------------------------------------------------------------------------------------------------- |
| autoResizeHeight | boolean | false    | true      | If true, the height of the TitleRow will be set to the height of the title, vertical padding, and row |
| title            | string  | false    | undefined | The title text to be displayed above the `Row` items                                                  |

### Style Properties

| name              | type             | description                           |
| ----------------- | ---------------- | ------------------------------------- |
| titleMarginBottom | number           | spacing between title and row         |
| titleMarginLeft   | number           | spacing between title and left margin |
| titleTextStyle    | string \| object | text style for title                  |

## Methods

`TitleRow` can access [all public methods supported by the Row component](/docs/components-row--basic#methods)
