From 61015767a3d727466aaa634a3d648cc463e8a8ac Mon Sep 17 00:00:00 2001
From: Shannon <shannon.brownlee@detroitmi.gov>
Date: Fri, 24 May 2024 10:11:30 -0400
Subject: [PATCH] removes data prefix and omits unused attributes

---
 src/components/atoms/Spinner/Spinner.js | 10 +++++-----
 src/stories/spinner.stories.js          | 18 +++++++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/atoms/Spinner/Spinner.js b/src/components/atoms/Spinner/Spinner.js
index 6d5ce379..8cc856e8 100644
--- a/src/components/atoms/Spinner/Spinner.js
+++ b/src/components/atoms/Spinner/Spinner.js
@@ -22,13 +22,13 @@ export default class Image extends HTMLElement {
     this.shadowRoot.appendChild(spinnerStyles);
     // image attributes
 
-    const spinnerType = this.getAttribute('data-type');
+    const spinnerType = this.getAttribute('type');
+    
+    const spinnerSize = this.getAttribute('size');
 
-    const spinnerSize = this.getAttribute('data-size');
+    const backgroundColor = this.getAttribute('background-color');
 
-    const backgroundColor = this.getAttribute('data-background-color');
-
-    const displayType = this.getAttribute('data-display-type');
+    const displayType = this.getAttribute('display-type');
     let spinnerSizeClass;
 
     // TODO: Fix old ESLint errors - see issue #1099
diff --git a/src/stories/spinner.stories.js b/src/stories/spinner.stories.js
index bf31bc0d..4e2e4b9c 100644
--- a/src/stories/spinner.stories.js
+++ b/src/stories/spinner.stories.js
@@ -9,7 +9,7 @@ export default {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', ''],
+      options: ['sm', 'md'],
     },
     backgroundColor: {
       control: { type: 'select' },
@@ -29,10 +29,18 @@ export default {
 // Template
 const Template = (args) => {
   const spinner = document.createElement('cod-spinner');
-  spinner.setAttribute('data-type', args.type);
-  spinner.setAttribute('data-background-color', args.backgroundColor);
-  spinner.setAttribute('data-size', args.size);
-  spinner.setAttribute('data-display-type', args.displayType);
+  spinner.setAttribute('type', args.type);
+  spinner.setAttribute('background-color', args.backgroundColor);
+  if (args.size){
+    spinner.setAttribute('size', args.size);
+  } else {
+    delete spinner.size;
+  }
+  if (args.displayType){
+    spinner.setAttribute('display-type', args.displayType);
+  } else {
+    delete spinner.displayType;
+  }
   return spinner;
 };