{/* 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 MetadataBaseStories from './MetadataBase.stories';

<Meta of={MetadataBaseStories} />

<Title />

A component to quickly and easily lay out several pieces of content.

## Source

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

## Usage

MetadataBase can be used with any combination of title, description, data (inline content), call-to-action (text), and/or a logo.

```js
import { MetadataBase } from '@lightningjs/ui-components';
import lightningbolt from '../../assets/images/ic_lightning_white_32.png';
import circle from '../../assets/images/circle.svg';

class Example extends lng.Component {
  static _template() {
    return {
      MetadataBase: {
        type: MetadataBase,
        w: 400,
        h: 300,
        title: 'Title',
        subtitle: 'Subtitle',
        details: [
          '94%',
          {
            icon: lightningbolt,
            style: { color: getHexColor('00ff00') },
            title: 'Green Lightning Bolt'
          },
          '86%',
          {
            icon: 'https://upload.wikimedia.org/wikipedia/commons/b/b6/Tomato-Torrent-Icon.png',
            title: 'Rotten Tomatoes rating'
          }
        ],
        description: 'Description',
        logo: circle,
        logoWidth: 32,
        logoHeight: 32
      }
    };
  }
}
```

## API

### Properties

| name         | type           | required             | default   | description                                  |
| ------------ | -------------- | -------------------- | --------- | -------------------------------------------- |
| description  | string         | false                | undefined | third line or description of the content     |
| details      | inline content | false                | undefined | relevant content data in the middle          |
| logo         | string         | false                | undefined | logo to display at bottom of component       |
| logoHeight   | number         | true (if using logo) | undefined | height of logo                               |
| logoPosition | string         | false                | 'right'   | which side to place logo (`right` or `left`) |
| logoTitle    | string         | true (if using logo) | undefined | title of logo to use for announcer           |
| logoWidth    | number         | true (if using logo) | undefined | width of logo                                |
| subtitle     | string         | false                | undefined | subtitle text                                |
| title        | string         | false                | undefined | first line or headline of the content        |

### Style Properties

| name                 | type             | description                                                     |
| -------------------- | ---------------- | --------------------------------------------------------------- |
| descriptionTextStyle | string \| object | text style for description                                      |
| detailsTextStyle     | string \| object | text style for details                                          |
| fadeWidth            | number           | width of fade applied to second line if text encroaches on logo |
| logoHeight           | number           | height for logo                                                 |
| logoPadding          | number           | spacing between logo and secondLine                             |
| logoWidth            | number           | width for logo                                                  |
| subtitleTextStyle    | string \| object | text style for subtitle                                         |
| titleTextStyle       | string \| object | text style for title                                            |

### Methods

#### resetMarquee(): void

This will call [TextBox](?path=/docs/components-textbox--docs)'s `toggleMarquee` method in order to restart or stop marquee scrolling if the marquee flag has changed.
