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

# Tile

A flexible solution for displaying artwork and meta information. Used to render entity posters for browsing.

## Source

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

## Usage

Allows objects to be passed in that reflect all properties available in Artwork, Badge, Checkbox, Label, ProgressBar, and Metadata. Additionally, metadataLocation and persistentMetadata are available to configure Metadata placement and visibility.

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

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

<Canvas>
  <Story id="tiles-cards-tile--tile" />
</Canvas>

### Metadata

Tile uses MetadataTile for text formatting by default. The 'metadata' property takes an object with the same properties of MetadataTile and passes them to the MetadataTile.

```js
class Basic extends lng.Component {
  static _template() {
    return {
      Tile: {
        type: Tile,
        metadata: {
          title: 'Title',
          description: 'Description'
        }
      }
    };
  }
}
```

However, you can override which Metadata component is used by adding a 'type' to the 'metadata' object and then using that component's properties instead.

```js
class Basic extends lng.Component {
  static _template() {
    return {
      Tile: {
        type: Tile,
        metadata: {
          type: MetadataCard
          title: 'Title',
          subtitle: 'Subtitle'
        }
      }
    };
  }
}
```

### Properties

| name               | type    | required | default    | description                                                                                                                                                                                                                           |
| ------------------ | ------- | -------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| artwork            | object  | false    | undefined  | Object containing all properties supported in the [Artwork component](?path=/docs/foundations-artwork--artwork)                                                                                                                       |
| badge              | object  | false    | undefined  | Object containing all properties supported in the [Badge component](?path=/docs/metadata-badge--text)                                                                                                                                 |
| checkbox           | object  | false    | undefined  | Object containing all properties supported in the [Checkbox component](?path=/docs/utilities-checkbox--checkbox)                                                                                                                      |
| label              | object  | false    | undefined  | Object containing all properties supported in the [Label component](?path=/docs/metadata-label--label)                                                                                                                                |
| metadata           | object  | false    | undefined  | Object containing all properties supported in the [MetadataTile component](?path=/docs/metadata-metadatatile--metadata-tile)<br /> Can use a different Metadata component by passing in a 'type' and then that component's properties |
| metadataLocation   | string  | false    | 'standard' | Controls where there metadata is displayed in relation to the Tile. Available values are 'standard' and 'inset'                                                                                                                       |
| persistentMetadata | boolean | false    | false      | Metadata will be shown at all times if set to true, otherwise it will only show when the Tile has focus                                                                                                                               |
| progressBar        | object  | false    | undefined  | Object containing all properties supported in the [ProgressBar component](??path=/docs/utilities-progressbar--progress-bar)                                                                                                           |

### Style Properties

| name                   | type                  | description                                                                                                                                                                                                           |
| ---------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animationEntrance      | object                | Animation values applied on entrance                                                                                                                                                                                  |
| animationExit          | object                | Animation values applied on exit                                                                                                                                                                                      |
| metadataLocation       | 'standard' \| 'inset' | Determines the location of the metadata within the tile                                                                                                                                                               |
| paddingX               | number                | Padding applied to the inside of the left and right of component                                                                                                                                                      |
| paddingY               | number                | Padding applied to the inside of the top and bottom of component (when metadataLocation is inset, if there is no ProgressBar, this is applied to the space between the bottom of the Metadata and bottom of the Tile) |
| paddingYProgress       | number                | Padding applied between the bottom of the component and bottom of the progress bar                                                                                                                                    |
| paddingYBetweenContent | number                | When metadataLocation is inset and there is a ProgressBar, this padding applies between the bottom of the Metadata and top of the ProgressBar                                                                         |
| radius                 | number\|array         | Outer radius of component                                                                                                                                                                                             |
