{/* 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 } from '@storybook/blocks';
import Control from '.';

<Meta title="Components/Control" />

# Control

`Control` is a specific type of `Button` which is used to display video controls (play/pause) that expand with text on focus.

## Source

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

## Usage

Used to convey an interactable portion of the interface, a `Control` can present text (title), an icon, a logo, or both text and an icon or logo.
It has support for focused, unfocused, and disabled states.

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

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

All `Control` components support two types of prefixes (Lightning components placed to the left of the title text): an icon or a logo (image/png/jpg).

### Icon

If the `Control` is provided an `icon`, it will be positioned to the left of the title and centered horizontally and vertically.

### Logo

If the `Control` is provided a logo/image, the radius of the image reflects the radius of the Surface component.
That is, if the corner radius of the Surface is 0 then the corner radius of the image is also 0.

### Collapsed Flag

Optional flag for the `Control` element to collapse (hide the title) when `Control` is not in focused mode.

## API

### Properties

`Control` has the same properties as the ones listed in [Button](?path=/docs/components-button--docs) in addition to a couple listed below:

| name           | type    | required | default   | description                                                                          |
| -------------- | ------- | -------- | --------- | ------------------------------------------------------------------------------------ |
| icon           | string  | false    | undefined | URL for the icon asset                                                               |
| logo           | string  | false    | undefined | URL for the image asset                                                              |
| shouldCollapse | boolean | false    | false     | flag that if `true`, hides the title when `Control` is in unfocused or disabled mode |

### Style Properties

`Control` contains the same style properties as [Button](?path=/docs/components-button--docs) in addition to a couple other style properties listed below:

| name      | type   | description                         |
| --------- | ------ | ----------------------------------- |
| iconStyle | object | custom styling for the icon element |
| logoStyle | object | custom styling for the logo element |
| radius    | number | border radius of the Control        |
