-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: revert jsdoc and linter changes
- Loading branch information
1 parent
bc56c28
commit f15d4dc
Showing
3 changed files
with
110 additions
and
69 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
`; | ||
} | ||
} |