{/* 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, Description, Title, ArgTypes } from '@storybook/blocks';
import * as CardContentStories from './CardContent.stories.js';
import * as CardStories from '../Card/Card.stories.js';

<Meta of={CardContentStories} />

<Title />

<Description of={CardContentStories} />

## Source

https://github.com/rdkcentral/Lightning-UI-Components/tree/develop/packages/%40lightningjs/ui-components/src/components/CardContent

## Usage

Allows objects to be passed in that reflect the properties available in 'Tile' and 'MetadataCardContent'.

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

class Basic extends lng.Component {
  static _template() {
    return {
      CardContent: {
        type: CardContent
      }
    };
  }
}
```

## API

### Parent Componet Properties

`CardContent` extends `Card` therefore shares same properties

<ArgTypes of={CardStories.Card} exclude={['mode']} />

### Properties

In addition the `Card` properties, `CardContent` has the following properties:

<ArgTypes of={CardContentStories.CardContent} exclude={['mode']} />

### Style Properties

| name              | type             | description                                                                    |
| ----------------- | ---------------- | ------------------------------------------------------------------------------ |
| backgroundColor   | string           | color of the card                                                              |
| expandedWidth     | number           | the desired width of the card when in the fully expanded (not collapsed) mode  |
| expandedHeight    | number           | the desired height of the card when in the fully expanded (not collapsed) mode |
| imageSize         | `{w, h}`         | the desired width and height the image in the card                             |
| metadata          | string \| object | text style for the metadata                                                    |
| paddingHorizontal | number           | padding on the x-axis between the right and left of the card and its content   |
| paddingVertical   | number           | padding on the y-axis between the top and bottom of the card and its content   |
