Skip to content

Commit f15d4dc

Browse files
Mahdieh Abdollahianmajidsajadi
Mahdieh Abdollahian
authored and
majidsajadi
committed
fix: revert jsdoc and linter changes
1 parent bc56c28 commit f15d4dc

3 files changed

Lines changed: 110 additions & 69 deletions

File tree

‎src/spinner/index.ts‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,42 @@
1-
import { customElement } from "lit/decorators.js";
2-
import { Spinner } from "./spinner";
3-
import styles from "./spinner.style";
1+
import { customElement } from 'lit/decorators.js';
2+
import { Spinner } from './spinner';
3+
import styles from './spinner.style';
44

5-
/**
6-
* ### Example
7-
*
8-
*
9-
* ##### Simple
10-
*
11-
* ```html
12-
* <tap-spinner />
13-
* ```
14-
*
15-
* ##### Variant
16-
*
17-
* ```html
18-
* <tap-spinner variant="inverse" />
19-
* ```
20-
*
21-
* @summary Display spinner.
22-
*
23-
* @prop {string} [variant='primary'] - Specifies the spinner color. Acceptable values are [primary , inverse] .
24-
*/
5+
/**
6+
* ### Example
7+
*
8+
*
9+
* ##### Simple
10+
*
11+
* ```html
12+
* <tap-spinner />
13+
* ```
14+
*
15+
* ##### Variant
16+
*
17+
* ```html
18+
* <tap-spinner variant="inverse" />
19+
* ```
20+
*
21+
* @summary Display spinner.
22+
*
23+
* @prop {`'primary'` \| `'inverse'`} [`variant`=`'primary'`] - Specifies the spinner color. Acceptable values are `primary` and `inverse`.
24+
*
25+
* @csspart `svg` - The svg tag that represents spinner component.
26+
*
27+
* @cssprop [`--tap-spinner-color-primary`=`--tap-sys-color-surface-black`]
28+
* @cssprop [`--tap-spinner-color-inverse`=`--tap-sys-color-surface-white`]
29+
* @cssprop [`--tap-spinner-size`=`--tap-sys-spacing-8`]
30+
* @cssprop [`--tap-spinner-padding`=`--tap-sys-spacing-2`]
31+
*/
2532

26-
@customElement("tap-spinner")
33+
@customElement('tap-spinner')
2734
export class TapSpinner extends Spinner {
2835
static readonly styles = [styles];
2936
}
3037

3138
declare global {
3239
interface HTMLElementTagNameMap {
33-
"tap-spinner": TapSpinner;
40+
'tap-spinner': TapSpinner;
3441
}
3542
}

‎src/spinner/spinner.style.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
1-
import { css } from "lit";
1+
import { css } from 'lit';
22

33
export default css`
44
:host {
55
box-sizing: border-box;
66
}
77
88
.spinner {
9-
width: 20px;
10-
height: 20px;
11-
padding: 2px;
9+
width: var(--tap-spinner-size, var(--tap-sys-spacing-8));
10+
height: var(--tap-spinner-size, var(--tap-sys-spacing-8));
11+
padding: var(--tap-spinner-padding, var(--tap-sys-spacing-2));
1212
stroke-linecap: round;
1313
}
1414
1515
.rotating {
1616
transform-origin: 300px 300px;
17-
animation : rotate 1s linear infinite;
17+
animation: rotate 1s linear infinite;
1818
}
1919
2020
.primary {
21-
color: var(--tap-sys-color-surface-black);
21+
color: var(--tap-spinner-color-primary, var(--tap-sys-color-surface-black));
2222
}
2323
2424
.inverse {
25-
color: var(--tap-sys-color-surface-white);
25+
color: var(--tap-spinner-color-inverse, var(--tap-sys-color-surface-white));
2626
}
2727
2828
@keyframes rotate {
29-
from {transform: rotate(105deg);}
30-
to {transform: rotate(465deg);}
29+
from {
30+
transform: rotate(105deg);
31+
}
32+
to {
33+
transform: rotate(465deg);
34+
}
3135
}
3236
`;

‎src/spinner/spinner.ts‎

Lines changed: 65 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,68 @@
1-
import { LitElement, html } from "lit";
2-
import { property } from "lit/decorators.js";
3-
import { classMap } from "lit/directives/class-map.js";
1+
import { LitElement, html } from 'lit';
2+
import { property } from 'lit/decorators.js';
3+
import { classMap } from 'lit/directives/class-map.js';
44

55
export class Spinner extends LitElement {
6-
@property() variant:
7-
| "primary"
8-
| "inverse" = "primary";
6+
@property() variant: 'primary' | 'inverse' = 'primary';
97

10-
render() {
11-
return html`
12-
<svg class=${classMap({
13-
spinner: true,
14-
[this.variant]: true,
15-
})} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 600" >
16-
17-
<defs>
18-
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
19-
<stop offset="0%" stop-opacity="1" stop-color="currentColor" "/>
20-
<stop offset="100%" stop-opacity="0.5" stop-color="currentColor"/>
21-
</linearGradient>
22-
<linearGradient id="Gradient2" gradientTransform="rotate(90)">
23-
<stop offset="0%" stop-opacity="0" stop-color="currentColor"/>
24-
<stop offset="90%" stop-opacity="0.5" stop-color="currentColor"/>
25-
<stop offset="100%" stop-opacity="0.65" stop-color="currentColor"/>
26-
</linearGradient>
27-
<pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
28-
<g>
29-
<rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
30-
<rect shape-rendering="crispEdges" x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
31-
</g>
32-
</pattern>
33-
</defs>
34-
<path class="rotating" style="stroke: url(#Pattern);" fill='transparent' stroke-width='80' d='M 364 58 A 250 250 0 1 1 235 58'/>
35-
</svg>
36-
`;
37-
}
38-
}
8+
render() {
9+
return html`
10+
<svg
11+
part="svg"
12+
class=${classMap({
13+
spinner: true,
14+
[this.variant]: true,
15+
})}
16+
xmlns="http://www.w3.org/2000/svg"
17+
version="1.1"
18+
viewBox="0 0 600 600"
19+
>
20+
<defs>
21+
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
22+
<stop offset="0%" stop-opacity="1" stop-color="currentColor" />
23+
<stop offset="100%" stop-opacity="0.5" stop-color="currentColor" />
24+
</linearGradient>
25+
<linearGradient id="Gradient2" gradientTransform="rotate(90)">
26+
<stop offset="0%" stop-opacity="0" stop-color="currentColor" />
27+
<stop offset="90%" stop-opacity="0.5" stop-color="currentColor" />
28+
<stop offset="100%" stop-opacity="0.65" stop-color="currentColor" />
29+
</linearGradient>
30+
<pattern
31+
id="Pattern"
32+
x="0"
33+
y="0"
34+
width="600"
35+
height="600"
36+
patternUnits="userSpaceOnUse"
37+
>
38+
<g>
39+
<rect
40+
shape-rendering="crispEdges"
41+
x="0"
42+
y="0"
43+
width="300"
44+
height="600"
45+
fill="url(#Gradient1)"
46+
/>
47+
<rect
48+
shape-rendering="crispEdges"
49+
x="300"
50+
y="0"
51+
width="300"
52+
height="600"
53+
fill="url(#Gradient2)"
54+
/>
55+
</g>
56+
</pattern>
57+
</defs>
58+
<path
59+
class="rotating"
60+
style="stroke: url(#Pattern);"
61+
fill="transparent"
62+
stroke-width="80"
63+
d="M 364 58 A 250 250 0 1 1 235 58"
64+
/>
65+
</svg>
66+
`;
67+
}
68+
}

0 commit comments

Comments
 (0)