<!--
  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';
import CardContent from '.';

# CardContent

Formats a Card with one part Tile and one part Metadata.

## 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
      }
    };
  }
}
```

<Canvas>
  <Story id="tiles-cards-cardcontent--card-content" />
</Canvas>

## API

### Properties

| name               | type                       | required | default      | description                                                                                                                          |
| ------------------ | -------------------------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| collapseToMetadata | boolean                    | false    | false        | when true, the collapsed state will hide the tile and show the metadata (when false, the metadata is hidden and the tile is visible) |
| metadata           | object                     | true     | undefined    | object with all of the properties for [MetadataCardContent](?path=/story/elements-metadatacardcontent--basic)                        |
| orientation        | ['horizontal', 'vertical'] | false    | 'horizontal' | orientation of card's layout                                                                                                         |
| shouldCollapse     | boolean                    | false    | false        | will collapse the Card when the Card is not focused                                                                                  |
| src                | string                     | false    | undefined    | path to artwork image (can also be set via `{ tile: { artwork: { src } } }`)                                                         |
| tile               | object                     | false    | undefined    | Object containing all properties supported in the [Tile component](?path=/docs/elements-tile--basic)                                 |

### Style Properties

| name                     | type             | description                                                                    |
| ------------------------ | ---------------- | ------------------------------------------------------------------------------ |
| backgroundColorDisabled  | string           | color of the card when disabled                                                |
| backgroundColorFocused   | string           | color of the card when not disabled and when focused                           |
| backgroundColorUnfocused | string           | color of the card when unfocused and not disabled                              |
| expandedW                | number           | the desired width of the card when in the fully expanded (not collapsed) mode  |
| expandedH                | 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                             |
| 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   |
| radius                   | number \| array  | corner radius of card                                                          |
| titleTextStyle           | string \| object | style of the title text                                                        |
