{/* 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 Badge from '.';
import * as BadgeStories from './Badge.stories';

<Meta of={BadgeStories} />

<Title />

This component is used to display small keywords of metadata, like video or audio quality (ie HD or CC).

## Source

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

## Usage

The basic component just requires a title:

```js
import { Badge } from '@lightningjs/ui-components';
import circle from '../../assets/images/circle.svg';

class Example extends lng.Component {
  static _template() {
    return {
      Badge: {
        type: Badge,
        title: 'HD'
      }
    };
  }
}
```

Or an icon:

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

class Example extends lng.Component {
  static _template() {
    return {
      Badge: {
        type: Badge,
        icon: circle,
        iconWidth: 50,
        iconHeight: 50
      }
    };
  }
}
```

A title and an icon can also be used together:

```js
import { Badge } from '@lightningjs/ui-components';
import lightning from '../../assets/images/ic_lightning_white_32.png';

class Example extends lng.Component {
  static _template() {
    return {
      Badge: {
        type: Badge,
        title: 'HD',
        icon: lightning
      }
    };
  }
}
```

## API

### Properties

| name       | type   | required | default   | description                                                    |
| ---------- | ------ | -------- | --------- | -------------------------------------------------------------- |
| icon       | string | false    | undefined | path to image or inline SVG XML                                |
| iconWidth  | number | false    | undefined | width of icon (required for SVG icons)                         |
| iconHeight | number | false    | undefined | height of icon (required for SVG icons)                        |
| iconAlign  | string | false    | undefined | side of the text where icon will appear on (`left` or `right`) |
| title      | string | false    | undefined | badge text                                                     |

### Style Properties

| name            | type             | description                                                              |
| --------------- | ---------------- | ------------------------------------------------------------------------ |
| backgroundColor | string           | color of the background                                                  |
| contentSpacing  | number           | padding to add between the icon and the text                             |
| iconColor       | string           | color to be applied to the icon (only works with pure white base images) |
| offsetY         | number           | offset used to vertically center the text within the container           |
| paddingX        | number           | padding to add on the left and right between the text and background     |
| paddingY        | number           | padding to add on the top and bottom between the text and background     |
| radius          | number \| array  | radius of badge corner                                                   |
| strokeColor     | string           | color of the Badge border                                                |
| strokeWidth     | number           | width of the Badge border                                                |
| textStyle       | string \| object | text style to apply to the title                                         |

### Events

#### $loadedBadge():void

This event is fired when the contents of the badge have finished loading and the background has been appropriately sized based on the text input.
