<!--
  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 Provider from '.';
import xfinityProviderLogo from '../../assets/images/Xfinity-Provider-Logo-Square.png';

# Provider

The `Provider` serves to condense a list of providers to show only the number you specify, and add a counter to represent any that remain.

## Source

https://github.com/rdkcentral/Lightning-UI-Components/blob/develop/packages/%40lightningjs/ui-components/src/components/Provider/Provider.js

## Usage

The `Provider` component only needs an array of image paths to populate the list of providers. However, you can supply an `Icon` component, and the `Provider` will resize it to fit. This is useful, for example, if you want to include a 2:1 provider logo amongst a series of 1:1s.

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

class Basic extends lng.Component {
  static _template() {
    return {
      Provider: {
        type: Provider,
        visibleCount: args.visibleCount,
        providers: [
          xfinityProviderLogoSquare,
          {
            type: Icon,
            w: 96,
            h: 48,
            icon: xfinityLogo
          },
          ...Array.apply(null, { length: 10 }).map(
            () => xfinityProviderLogoSquare
          )
        ],
        counterText: '...',
        disableRadius: true
      }
    };
  }
}
```

<Canvas>
  <Story id="utilities-provider--provider" />
</Canvas>

## API

### Properties

| name            | type    | required | default   | description                                                   |
| --------------- | ------- | -------- | --------- | ------------------------------------------------------------- |
| disableRadius   | boolean | false    | false     | if true, disables the radius style property to Icon providers |
| counterText     | string  | false    | undefined | text to override counter's default '+Number' functionality    |
| providers       | array   | true     | undefined | list of provider images                                       |
| providersHidden | number  | readonly | undefined | the number of providers that will be hidden by the counter    |
| visibleCount    | number  | true     | undefined | the number of providers to show before adding a counter       |

### Style Properties

| name                   | type             | description                                                     |
| ---------------------- | ---------------- | --------------------------------------------------------------- |
| counterBackgroundColor | string           | background color of counter                                     |
| counterTextStyle       | string \| object | text style for counter                                          |
| itemSize               | number           | height and width to apply to icons and counter                  |
| itemSpacing            | number           | space between providers                                         |
| radius                 | number \| array  | radius of counter (and Icons if `applyRadius` property is true) |
