Skip to content

Commit

Permalink
fix: revert jsdoc and linter changes
Browse files Browse the repository at this point in the history
  • Loading branch information
Mahdieh Abdollahian authored and majidsajadi committed May 29, 2024
1 parent bc56c28 commit f15d4dc
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 69 deletions.
57 changes: 32 additions & 25 deletions src/spinner/index.ts
Original file line number Diff line number Diff line change
@@ -1,35 +1,42 @@
import { customElement } from "lit/decorators.js";
import { Spinner } from "./spinner";
import styles from "./spinner.style";
import { customElement } from 'lit/decorators.js';
import { Spinner } from './spinner';
import styles from './spinner.style';

/**
* ### Example
*
*
* ##### Simple
*
* ```html
* <tap-spinner />
* ```
*
* ##### Variant
*
* ```html
* <tap-spinner variant="inverse" />
* ```
*
* @summary Display spinner.
*
* @prop {string} [variant='primary'] - Specifies the spinner color. Acceptable values are [primary , inverse] .
*/
/**
* ### Example
*
*
* ##### Simple
*
* ```html
* <tap-spinner />
* ```
*
* ##### Variant
*
* ```html
* <tap-spinner variant="inverse" />
* ```
*
* @summary Display spinner.
*
* @prop {`'primary'` \| `'inverse'`} [`variant`=`'primary'`] - Specifies the spinner color. Acceptable values are `primary` and `inverse`.
*
* @csspart `svg` - The svg tag that represents spinner component.
*
* @cssprop [`--tap-spinner-color-primary`=`--tap-sys-color-surface-black`]
* @cssprop [`--tap-spinner-color-inverse`=`--tap-sys-color-surface-white`]
* @cssprop [`--tap-spinner-size`=`--tap-sys-spacing-8`]
* @cssprop [`--tap-spinner-padding`=`--tap-sys-spacing-2`]
*/

@customElement("tap-spinner")
@customElement('tap-spinner')
export class TapSpinner extends Spinner {
static readonly styles = [styles];
}

declare global {
interface HTMLElementTagNameMap {
"tap-spinner": TapSpinner;
'tap-spinner': TapSpinner;
}
}
22 changes: 13 additions & 9 deletions src/spinner/spinner.style.ts
Original file line number Diff line number Diff line change
@@ -1,32 +1,36 @@
import { css } from "lit";
import { css } from 'lit';

export default css`
:host {
box-sizing: border-box;
}
.spinner {
width: 20px;
height: 20px;
padding: 2px;
width: var(--tap-spinner-size, var(--tap-sys-spacing-8));
height: var(--tap-spinner-size, var(--tap-sys-spacing-8));
padding: var(--tap-spinner-padding, var(--tap-sys-spacing-2));
stroke-linecap: round;
}
.rotating {
transform-origin: 300px 300px;
animation : rotate 1s linear infinite;
animation: rotate 1s linear infinite;
}
.primary {
color: var(--tap-sys-color-surface-black);
color: var(--tap-spinner-color-primary, var(--tap-sys-color-surface-black));
}
.inverse {
color: var(--tap-sys-color-surface-white);
color: var(--tap-spinner-color-inverse, var(--tap-sys-color-surface-white));
}
@keyframes rotate {
from {transform: rotate(105deg);}
to {transform: rotate(465deg);}
from {
transform: rotate(105deg);
}
to {
transform: rotate(465deg);
}
}
`;
100 changes: 65 additions & 35 deletions src/spinner/spinner.ts
Original file line number Diff line number Diff line change
@@ -1,38 +1,68 @@
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';

export class Spinner extends LitElement {
@property() variant:
| "primary"
| "inverse" = "primary";
@property() variant: 'primary' | 'inverse' = 'primary';

render() {
return html`
<svg class=${classMap({
spinner: true,
[this.variant]: true,
})} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 600" >
<defs>
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
<stop offset="0%" stop-opacity="1" stop-color="currentColor" "/>
<stop offset="100%" stop-opacity="0.5" stop-color="currentColor"/>
</linearGradient>
<linearGradient id="Gradient2" gradientTransform="rotate(90)">
<stop offset="0%" stop-opacity="0" stop-color="currentColor"/>
<stop offset="90%" stop-opacity="0.5" stop-color="currentColor"/>
<stop offset="100%" stop-opacity="0.65" stop-color="currentColor"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
<g>
<rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
<rect shape-rendering="crispEdges" x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
</g>
</pattern>
</defs>
<path class="rotating" style="stroke: url(#Pattern);" fill='transparent' stroke-width='80' d='M 364 58 A 250 250 0 1 1 235 58'/>
</svg>
`;
}
}
render() {
return html`
<svg
part="svg"
class=${classMap({
spinner: true,
[this.variant]: true,
})}
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 600 600"
>
<defs>
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
<stop offset="0%" stop-opacity="1" stop-color="currentColor" />
<stop offset="100%" stop-opacity="0.5" stop-color="currentColor" />
</linearGradient>
<linearGradient id="Gradient2" gradientTransform="rotate(90)">
<stop offset="0%" stop-opacity="0" stop-color="currentColor" />
<stop offset="90%" stop-opacity="0.5" stop-color="currentColor" />
<stop offset="100%" stop-opacity="0.65" stop-color="currentColor" />
</linearGradient>
<pattern
id="Pattern"
x="0"
y="0"
width="600"
height="600"
patternUnits="userSpaceOnUse"
>
<g>
<rect
shape-rendering="crispEdges"
x="0"
y="0"
width="300"
height="600"
fill="url(#Gradient1)"
/>
<rect
shape-rendering="crispEdges"
x="300"
y="0"
width="300"
height="600"
fill="url(#Gradient2)"
/>
</g>
</pattern>
</defs>
<path
class="rotating"
style="stroke: url(#Pattern);"
fill="transparent"
stroke-width="80"
d="M 364 58 A 250 250 0 1 1 235 58"
/>
</svg>
`;
}
}

0 comments on commit f15d4dc

Please sign in to comment.