{/* 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 * as ShadowStories from './Shadow.stories';

<Meta of={ShadowStories} />

<Title />

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 manually 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
      }
    };
  }
}
```

## 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         |
