Merge pull request #219 from CityOfDetroit/clean-up.spinner

Clean-up.Spinner
CityOfDetroit · Aug 5, 2024 · e1cfb68 · e1cfb68
2 parents ddf1b29 + 3d9f418
commit e1cfb68
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git 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
@@ -14,16 +14,33 @@ export default {
       control: { type: 'select' },
       options: ['sm', 'md'],
     },
+    backgroundColor: {
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'secondary',
+        'success',
+        'info',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+      ],
+    },
     backgroundColor: COMMON_STORY_ARGS.bootstrapColor,
   },
 };
 // 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);
+  }
+  if (args.displayType){
+    spinner.setAttribute('display-type', args.displayType);
+  }
   return spinner;
 };