From f15d4dc41224e288cc944b36eb6734a420b35fea Mon Sep 17 00:00:00 2001
From: Mahdieh Abdollahian <Mahdieh.abdollahian@Tapsi.cab>
Date: Wed, 29 May 2024 13:53:10 +0330
Subject: [PATCH] fix: revert jsdoc and linter changes

---
 src/spinner/index.ts         |  57 +++++++++++---------
 src/spinner/spinner.style.ts |  22 ++++----
 src/spinner/spinner.ts       | 100 +++++++++++++++++++++++------------
 3 files changed, 110 insertions(+), 69 deletions(-)

diff --git a/src/spinner/index.ts b/src/spinner/index.ts
index 178d1a98..35f6b88c 100644
--- a/src/spinner/index.ts
+++ b/src/spinner/index.ts
@@ -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;
   }
 }
diff --git a/src/spinner/spinner.style.ts b/src/spinner/spinner.style.ts
index ddf036a8..9b54dd24 100644
--- a/src/spinner/spinner.style.ts
+++ b/src/spinner/spinner.style.ts
@@ -1,4 +1,4 @@
-import { css } from "lit";
+import { css } from 'lit';
 
 export default css`
   :host {
@@ -6,27 +6,31 @@ export default css`
   }
 
   .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);
+    }
   }
 `;
diff --git a/src/spinner/spinner.ts b/src/spinner/spinner.ts
index da116f40..71caa247 100644
--- a/src/spinner/spinner.ts
+++ b/src/spinner/spinner.ts
@@ -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>
-		`;
-	}
-}
\ No newline at end of file
+  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>
+    `;
+  }
+}