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

# Shadow

A shadow component generally used to apply dropshadows to other components.

## Source

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

## Usage

Can be applied manaully or at the theme via the DropShadow.extension.
The `maskShadow` property is available to cut out the shape of the component
from the shadow, but requires an additional draw call.

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

class Basic extends lng.Component {
  static _template() {
    return {
      Shadow: {
        type: Shadow,
        w: this.w,
        h: this.h
      }
    };
  }
}
```

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

## API

### Properties

| name       | type    | required | default | description                                                     |
| ---------- | ------- | -------- | ------- | --------------------------------------------------------------- |
| maskShadow | boolean | false    | false   | if true, uses holepunch shader to mask out base component shape |

### Style Properties

The shadow style properties are designed to match the output values from Figma.

| name    | type                | description                               |
| ------- | ------------------- | ----------------------------------------- |
| alpha   | number              | shadow opacity                            |
| blur    | number              | blur amount applied to shadow             |
| color   | hexadecimal\|string | color of the shadow                       |
| offsetX | number              | horizontal offset from component position |
| offsetY | number              | vertical offset from component position   |
| radius  | number\|array       | radius to be applied to shadow            |
| spread  | number              | spread value added to shadow size         |
