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

<Meta of={MetadataCardStories} />

<Title />

A component to lay out content on Cards.

## Source

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

## Usage

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

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

class Basic extends lng.Component {
  static _template() {
    return {
      MetadataCard: {
        type: MetadataCard,
        w: args.w,
        title: args.title,
        details: args.details,
        description: args.description,
        logo: args.logo !== 'none' ? circle : null,
        logoTitle: args.logo !== 'none' ? args.logoTitle : null,
        logoPosition: args.logoPosition
      }
    };
  }
}
```

## 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                                |
| title        | string         | false                | undefined | first line or headline of the content        |

### Style Properties

| name                 | type             | description                                                     |
| -------------------- | ---------------- | --------------------------------------------------------------- |
| descriptionTextStyle | string \| object | text style for description                                      |
| 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                                                  |
| detailsTextStyle     | string \| object | text style for details                                          |
| titleTextStyle       | string \| object | text style for title                                            |
