Skip to content

Commit

Permalink
Add JsDoc for skeleton component
Browse files Browse the repository at this point in the history
  • Loading branch information
HamidG420 authored and majidsajadi committed Jun 2, 2024
1 parent a8c0834 commit 6894e5e
Showing 1 changed file with 44 additions and 0 deletions.
44 changes: 44 additions & 0 deletions src/skeleton/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,50 @@ import { customElement } from 'lit/decorators.js';
import { Skeleton } from './skeleton';
import styles from './skeleton.style';

/**
* ### Example
*
* ##### Simple
*
* ```html
* <tap-skeleton></tap-skeleton>
* ```
*
* ##### Variants
*
* ```html
* <tap-skeleton variant="line"></tap-skeleton>
* <tap-skeleton variant="rect"></tap-skeleton>
* <tap-skeleton variant="circle"></tap-skeleton>
* ```
*
* ##### Animation Modes
*
* ```html
* <tap-skeleton animationMode="progress"></tap-skeleton>
* <tap-skeleton animationMode="pulse"></tap-skeleton>
* <tap-skeleton animationMode="none"></tap-skeleton>
* ```
*
* @summary Display Skeleton component with different styles and types.
*
* @prop {`"line"` \| `"rect"` \| `"circle"`} [`variant`=`"line"`] - The variant of the skeleton.
* @prop {`"progress"` \| `"pulse"` \| `"none"`} [`animationMode`=`"progress"`] - The animation mode of the skeleton.
* @prop {`string`} [`width`=`"100%"`] - The width value of the skeleton.
* @prop {`string`} [`height`=`"20px"`] - The height value of the skeleton.
*
* @csspart `skeleton` - The skeleton element
*
* @cssprop [`--tap-skeleton-background`=`--tap-sys-color-surface-tertiary`] - Background color of the skeleton
* @cssprop [`--tap-skeleton-radius`=`--tap-sys-radius-2`] - Border radius of the skeleton
* @cssprop [`--tap-skeleton-width`=`100%`] - Width of the skeleton
* @cssprop [`--tap-skeleton-height`=`--tap-sys-spacing-8`] - Height of the skeleton
* @cssprop [`--tap-skeleton-rect-radius`=`--tap-sys-spacing-0`] - Border radius of the skeleton variant rect
* @cssprop [`--tap-skeleton-circle-radius`=`--tap-sys-radius-full`] - Border radius of the skeleton variant circle
* @cssprop [`--tap-skeleton-circle-width`=`--tap-sys-spacing-10`] - Width of the skeleton variant circle
* @cssprop [`--tap-skeleton-circle-height`=`--tap-sys-spacing-10`] - Height of the skeleton variant circle
*/

@customElement('tap-skeleton')
export class TapSkeleton extends Skeleton {
static readonly styles = [styles];
Expand Down

0 comments on commit 6894e5e

Please sign in to comment.