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

# Button

Basic component that handles styling and functionality for a button.

## Source

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

## Usage

Used to convey an interactable portion of the interface, a button can present text, an icon, a checkbox, or both text and an icon or checkbox.It has support in all the modes.

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

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

<Canvas>
  <Story id="components-button--button" />
</Canvas>

### Sizing

By default, `Button` widths dynamically adjust to account for `title` and `icon` widths and `padding`, with a minimum width defined by `minWidth`.

If you want a specific `Button` width no matter what the size of content, set the `fixed` property to `true`. The `minWidth` here will still be honored.

If you want a `Button` that is fully dynamic, set `minWidth` to `1`.

If you'd like to have a fixed button with a width smaller than the `minWidth`, you'll need to set the `minWidth` to a value less than or equal to the provided width.

## API

### Properties

| name    | type            | readonly | default   | description                                                 |
| ------- | --------------- | -------- | --------- | ----------------------------------------------------------- |
| fixed   | boolean         | false    | false     | when true, `w` overrides dynamically calclulated width      |
| justify | string          | false    | 'center'  | alignment of the button's content                           |
| prefix  | object \| array | -        | undefined | Lightning components to be placed to the left of the title  |
| suffix  | object \| array | -        | undefined | Lightning components to be placed to the right of the title |
| title   | string          | false    | undefined | button text                                                 |

### Style Properties

| name            | type                          | description                                                                            |
| --------------- | ----------------------------- | -------------------------------------------------------------------------------------- |
| contentColor    | string                        | color to be applied to the prefix and suffix icons                                     |
| justify         | 'center' \| 'left' \| 'right' | alignment of the button's content                                                      |
| minWidth        | number                        | used as a fallback width if no width is passed into the component and `fixed` is false |
| paddingX        | number                        | space between the button horizontal edge and the content                               |
| paddingXNoTitle | number                        | space between the button horizontal edge and the content if no title is provided       |
| textStyle       | string \| object              | text style to apply to the title                                                       |
| titlePadding    | number                        | padding between title and prefix                                                       |
