Merge pull request #305 from MetroStar/code-quality-fixes

Fix: Fail Pipeline when Lint or Format issues
MetroStar · Dec 19, 2024 · 9eb0da7 · 9eb0da7
2 parents 4bfa464 + 2941b7c
commit 9eb0da7
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 68 deletions.
diff --git a/.github/workflows/code-quality.yaml b/.github/workflows/code-quality.yaml
@@ -60,7 +60,7 @@ jobs:
         run: npm ci
 
       - name: Lint code
-        run: npm run lint
+        run: npm run lint:ci
 
   run-formatting-checks:
     runs-on: ubuntu-latest
@@ -78,4 +78,4 @@ jobs:
         run: npm ci
 
       - name: Format code
-        run: npm run format
+        run: npm run format:ci
diff --git a/package.json b/package.json
@@ -9,7 +9,9 @@
     "test": "vitest --run",
     "test:coverage": "vitest --run --coverage",
     "lint": "npx eslint packages/**/src/ --fix --config eslint.config.js",
+    "lint:ci": "npx eslint packages/**/src/ --config eslint.config.js",
     "format": "npx prettier packages/**/src --write",
+    "format:ci": "npx prettier packages/**/src --check",
     "build:storybook": "storybook build",
     "build:comet-uswds": "cd packages/comet-uswds && rollup -c",
     "build:comet-data-viz": "cd packages/comet-data-viz && rollup -c",

diff --git a/packages/comet-extras/src/components/spinner/spinner.style.css b/packages/comet-extras/src/components/spinner/spinner.style.css
@@ -34,9 +34,14 @@
   border-radius: 5px;
   background-color: transparent;
   color: transparent;
-  box-shadow: 0 -12px 0 0 #0076d6, 12.727926px -12.727926px 0 0 #0076d6, 18px 0 0 0 #0076d6,
-    12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0),
-    -12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0),
+  box-shadow:
+    0 -12px 0 0 #0076d6,
+    12.727926px -12.727926px 0 0 #0076d6,
+    18px 0 0 0 #0076d6,
+    12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0),
+    0 18px 0 0 rgba(152, 128, 255, 0),
+    -12.727926px 12.727926px 0 0 rgba(152, 128, 255, 0),
+    -18px 0 0 0 rgba(152, 128, 255, 0),
     -12.727926px -12.727926px 0 0 rgba(152, 128, 255, 0);
   animation: dot-spin 1.5s infinite linear;
 }
@@ -48,9 +53,14 @@
   border-radius: 5px;
   background-color: transparent;
   color: transparent;
-  box-shadow: 0 -6px 0 0 #0076d6, 6.727926px -6.727926px 0 0 #0076d6, 9px 0 0 0 #0076d6,
-    6.727926px 6.727926px 0 0 rgba(152, 128, 255, 0), 0 9px 0 0 rgba(152, 128, 255, 0),
-    -6.727926px 6.727926px 0 0 rgba(152, 128, 255, 0), -9px 0 0 0 rgba(152, 128, 255, 0),
+  box-shadow:
+    0 -6px 0 0 #0076d6,
+    6.727926px -6.727926px 0 0 #0076d6,
+    9px 0 0 0 #0076d6,
+    6.727926px 6.727926px 0 0 rgba(152, 128, 255, 0),
+    0 9px 0 0 rgba(152, 128, 255, 0),
+    -6.727926px 6.727926px 0 0 rgba(152, 128, 255, 0),
+    -9px 0 0 0 rgba(152, 128, 255, 0),
     -6.727926px -6.727926px 0 0 rgba(152, 128, 255, 0);
   animation: dot-spin-small 1.5s infinite linear;
 }
@@ -66,108 +76,183 @@
 @keyframes dot-spin-small {
   0%,
   100% {
-    box-shadow: 0 -9px 0 0 #0076d6, 6.727926px -6.727926px 0 0 #0076d6, 9px 0 0 0 #0076d6,
-      6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0), 0 9px 0 -5px rgba(152, 128, 255, 0),
-      -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0), -9px 0 0 -5px rgba(152, 128, 255, 0),
+    box-shadow:
+      0 -9px 0 0 #0076d6,
+      6.727926px -6.727926px 0 0 #0076d6,
+      9px 0 0 0 #0076d6,
+      6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 9px 0 -5px rgba(152, 128, 255, 0),
+      -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      -9px 0 0 -5px rgba(152, 128, 255, 0),
       -6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   6.5% {
-    box-shadow: 0 -9px 0 -5px rgba(152, 128, 255, 0), 6.727926px -6.727926px 0 0 #0076d6,
-      9px 0 0 0 #0076d6, 6.727926px 6.727926px 0 0 #0076d6, 0 9px 0 -5px rgba(152, 128, 255, 0),
-      -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0), -9px 0 0 -5px rgba(152, 128, 255, 0),
+    box-shadow:
+      0 -9px 0 -5px rgba(152, 128, 255, 0),
+      6.727926px -6.727926px 0 0 #0076d6,
+      9px 0 0 0 #0076d6,
+      6.727926px 6.727926px 0 0 #0076d6,
+      0 9px 0 -5px rgba(152, 128, 255, 0),
+      -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      -9px 0 0 -5px rgba(152, 128, 255, 0),
       -6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   25% {
-    box-shadow: 0 -9px 0 -5px rgba(152, 128, 255, 0),
-      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0), 9px 0 0 0 #0076d6,
-      6.727926px 6.727926px 0 0 #0076d6, 0 9px 0 0 #0076d6,
-      -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0), -9px 0 0 -5px rgba(152, 128, 255, 0),
+    box-shadow:
+      0 -9px 0 -5px rgba(152, 128, 255, 0),
+      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0),
+      9px 0 0 0 #0076d6,
+      6.727926px 6.727926px 0 0 #0076d6,
+      0 9px 0 0 #0076d6,
+      -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      -9px 0 0 -5px rgba(152, 128, 255, 0),
       -6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   37.5% {
-    box-shadow: 0 -9px 0 -5px rgba(152, 128, 255, 0),
-      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0), 9px 0 0 -5px rgba(152, 128, 255, 0),
-      6.727926px 6.727926px 0 0 #0076d6, 0 9px 0 0 #0076d6, -6.727926px 6.727926px 0 0 #0076d6,
-      -9px 0 0 -5px rgba(152, 128, 255, 0), -6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0);
+    box-shadow:
+      0 -9px 0 -5px rgba(152, 128, 255, 0),
+      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0),
+      9px 0 0 -5px rgba(152, 128, 255, 0),
+      6.727926px 6.727926px 0 0 #0076d6,
+      0 9px 0 0 #0076d6,
+      -6.727926px 6.727926px 0 0 #0076d6,
+      -9px 0 0 -5px rgba(152, 128, 255, 0),
+      -6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   50% {
-    box-shadow: 0 -9px 0 -5px rgba(152, 128, 255, 0),
-      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0), 9px 0 0 -5px rgba(152, 128, 255, 0),
-      6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0), 0 9px 0 0 #0076d6,
-      -6.727926px 6.727926px 0 0 #0076d6, -9px 0 0 0 #0076d6,
+    box-shadow:
+      0 -9px 0 -5px rgba(152, 128, 255, 0),
+      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0),
+      9px 0 0 -5px rgba(152, 128, 255, 0),
+      6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 9px 0 0 #0076d6,
+      -6.727926px 6.727926px 0 0 #0076d6,
+      -9px 0 0 0 #0076d6,
       -6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   62.5% {
-    box-shadow: 0 -9px 0 -5px rgba(152, 128, 255, 0),
-      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0), 9px 0 0 -5px rgba(152, 128, 255, 0),
-      6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0), 0 9px 0 -5px rgba(152, 128, 255, 0),
-      -6.727926px 6.727926px 0 0 #0076d6, -9px 0 0 0 #0076d6, -6.727926px -6.727926px 0 0 #0076d6;
+    box-shadow:
+      0 -9px 0 -5px rgba(152, 128, 255, 0),
+      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0),
+      9px 0 0 -5px rgba(152, 128, 255, 0),
+      6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 9px 0 -5px rgba(152, 128, 255, 0),
+      -6.727926px 6.727926px 0 0 #0076d6,
+      -9px 0 0 0 #0076d6,
+      -6.727926px -6.727926px 0 0 #0076d6;
   }
   75% {
-    box-shadow: 0 -9px 0 0 #0076d6, 6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0),
-      9px 0 0 -5px rgba(152, 128, 255, 0), 6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
-      0 9px 0 -5px rgba(152, 128, 255, 0), -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
-      -9px 0 0 0 #0076d6, -6.727926px -6.727926px 0 0 #0076d6;
+    box-shadow:
+      0 -9px 0 0 #0076d6,
+      6.727926px -6.727926px 0 -5px rgba(152, 128, 255, 0),
+      9px 0 0 -5px rgba(152, 128, 255, 0),
+      6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 9px 0 -5px rgba(152, 128, 255, 0),
+      -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      -9px 0 0 0 #0076d6,
+      -6.727926px -6.727926px 0 0 #0076d6;
   }
   87.5% {
-    box-shadow: 0 -9px 0 0 #0076d6, 6.727926px -6.727926px 0 0 #0076d6,
-      9px 0 0 -5px rgba(152, 128, 255, 0), 6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
-      0 9px 0 -5px rgba(152, 128, 255, 0), -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
-      -9px 0 0 -5px rgba(152, 128, 255, 0), -6.727926px -6.727926px 0 0 #0076d6;
+    box-shadow:
+      0 -9px 0 0 #0076d6,
+      6.727926px -6.727926px 0 0 #0076d6,
+      9px 0 0 -5px rgba(152, 128, 255, 0),
+      6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 9px 0 -5px rgba(152, 128, 255, 0),
+      -6.727926px 6.727926px 0 -5px rgba(152, 128, 255, 0),
+      -9px 0 0 -5px rgba(152, 128, 255, 0),
+      -6.727926px -6.727926px 0 0 #0076d6;
   }
 }
 
 @keyframes dot-spin {
   0%,
   100% {
-    box-shadow: 0 -18px 0 0 #0076d6, 12.727926px -12.727926px 0 0 #0076d6, 18px 0 0 0 #0076d6,
-      12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0),
-      -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0),
+    box-shadow:
+      0 -18px 0 0 #0076d6,
+      12.727926px -12.727926px 0 0 #0076d6,
+      18px 0 0 0 #0076d6,
+      12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 18px 0 -5px rgba(152, 128, 255, 0),
+      -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      -18px 0 0 -5px rgba(152, 128, 255, 0),
       -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   12.5% {
-    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.727926px -12.727926px 0 0 #0076d6,
-      18px 0 0 0 #0076d6, 12.727926px 12.727926px 0 0 #0076d6, 0 18px 0 -5px rgba(152, 128, 255, 0),
-      -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0),
+    box-shadow:
+      0 -18px 0 -5px rgba(152, 128, 255, 0),
+      12.727926px -12.727926px 0 0 #0076d6,
+      18px 0 0 0 #0076d6,
+      12.727926px 12.727926px 0 0 #0076d6,
+      0 18px 0 -5px rgba(152, 128, 255, 0),
+      -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      -18px 0 0 -5px rgba(152, 128, 255, 0),
       -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   25% {
-    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
-      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #0076d6,
-      12.727926px 12.727926px 0 0 #0076d6, 0 18px 0 0 #0076d6,
-      -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0),
+    box-shadow:
+      0 -18px 0 -5px rgba(152, 128, 255, 0),
+      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0),
+      18px 0 0 0 #0076d6,
+      12.727926px 12.727926px 0 0 #0076d6,
+      0 18px 0 0 #0076d6,
+      -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      -18px 0 0 -5px rgba(152, 128, 255, 0),
       -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   37.5% {
-    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
-      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0),
-      12.727926px 12.727926px 0 0 #0076d6, 0 18px 0 0 #0076d6, -12.727926px 12.727926px 0 0 #0076d6,
-      -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
+    box-shadow:
+      0 -18px 0 -5px rgba(152, 128, 255, 0),
+      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0),
+      18px 0 0 -5px rgba(152, 128, 255, 0),
+      12.727926px 12.727926px 0 0 #0076d6,
+      0 18px 0 0 #0076d6,
+      -12.727926px 12.727926px 0 0 #0076d6,
+      -18px 0 0 -5px rgba(152, 128, 255, 0),
+      -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   50% {
-    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
-      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0),
-      12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #0076d6,
-      -12.727926px 12.727926px 0 0 #0076d6, -18px 0 0 0 #0076d6,
+    box-shadow:
+      0 -18px 0 -5px rgba(152, 128, 255, 0),
+      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0),
+      18px 0 0 -5px rgba(152, 128, 255, 0),
+      12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 18px 0 0 #0076d6,
+      -12.727926px 12.727926px 0 0 #0076d6,
+      -18px 0 0 0 #0076d6,
       -12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0);
   }
   62.5% {
-    box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0),
-      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0),
-      12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0),
-      -12.727926px 12.727926px 0 0 #0076d6, -18px 0 0 0 #0076d6,
+    box-shadow:
+      0 -18px 0 -5px rgba(152, 128, 255, 0),
+      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0),
+      18px 0 0 -5px rgba(152, 128, 255, 0),
+      12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 18px 0 -5px rgba(152, 128, 255, 0),
+      -12.727926px 12.727926px 0 0 #0076d6,
+      -18px 0 0 0 #0076d6,
       -12.727926px -12.727926px 0 0 #0076d6;
   }
   75% {
-    box-shadow: 0 -18px 0 0 #0076d6, 12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0),
-      18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
-      0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
-      -18px 0 0 0 #0076d6, -12.727926px -12.727926px 0 0 #0076d6;
+    box-shadow:
+      0 -18px 0 0 #0076d6,
+      12.727926px -12.727926px 0 -5px rgba(152, 128, 255, 0),
+      18px 0 0 -5px rgba(152, 128, 255, 0),
+      12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 18px 0 -5px rgba(152, 128, 255, 0),
+      -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      -18px 0 0 0 #0076d6,
+      -12.727926px -12.727926px 0 0 #0076d6;
   }
   87.5% {
-    box-shadow: 0 -18px 0 0 #0076d6, 12.727926px -12.727926px 0 0 #0076d6,
-      18px 0 0 -5px rgba(152, 128, 255, 0), 12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
-      0 18px 0 -5px rgba(152, 128, 255, 0), -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
-      -18px 0 0 -5px rgba(152, 128, 255, 0), -12.727926px -12.727926px 0 0 #0076d6;
+    box-shadow:
+      0 -18px 0 0 #0076d6,
+      12.727926px -12.727926px 0 0 #0076d6,
+      18px 0 0 -5px rgba(152, 128, 255, 0),
+      12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      0 18px 0 -5px rgba(152, 128, 255, 0),
+      -12.727926px 12.727926px 0 -5px rgba(152, 128, 255, 0),
+      -18px 0 0 -5px rgba(152, 128, 255, 0),
+      -12.727926px -12.727926px 0 0 #0076d6;
   }
 }