Merge pull request #211 from CityOfDetroit/issue.209

Issue.209
CityOfDetroit · May 1, 2024 · 3878a73 · 3878a73
2 parents 8effe22 + 73f39cc
commit 3878a73
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 81 deletions.
diff --git a/src/components/atoms/Progress/Progress.js b/src/components/atoms/Progress/Progress.js
@@ -34,65 +34,29 @@ export default class Progress extends HTMLElement {
 
     const backgroundColor = this.getAttribute('data-background-color');
 
-    const stacked = this.getAttribute('data-multi-bars');
     const progressContainer = document.createElement('div');
 
+    const bar = document.createElement('div');
+    bar.role = 'progressbar';
+    bar.setAttribute('aria-label', ariaLabel);
+    bar.setAttribute('aria-valuenow', value);
+    bar.className = 'progress';
+    const barBody = document.createElement('div');
+    barBody.style = `width: ${value}%`;
+
     // TODO: Fix old ESLint errors - see issue #1099
     // eslint-disable-next-line eqeqeq
-    if (stacked == 'undefined' || stacked == 'null') {
-      const bar = document.createElement('div');
-      bar.role = 'progressbar';
-      bar.setAttribute('aria-label', ariaLabel);
-      bar.setAttribute('aria-valuenow', value);
-      bar.className = 'progress';
-      const barBody = document.createElement('div');
-      barBody.style = `width: ${value}%`;
-
-      // TODO: Fix old ESLint errors - see issue #1099
-      // eslint-disable-next-line eqeqeq
-      if (label != 'undefined' && label != 'null') {
-        barBody.innerText = label;
-      }
-      barBody.className = [
-        'progress-bar',
-        `progress-bar-${animated || ''}`,
-        `progress-bar-${striped || ''}`,
-        `bg-${backgroundColor || ''}`,
-      ].join(' ');
-      bar.appendChild(barBody);
-      progressContainer.appendChild(bar);
-    } else {
-      progressContainer.className = 'progress-stacked';
-      this.buildBar(JSON.parse(stacked), progressContainer);
+    if (label != 'undefined' && label != 'null') {
+      barBody.innerText = label;
     }
+    barBody.className = [
+      'progress-bar',
+      `progress-bar-${animated || ''}`,
+      `progress-bar-${striped || ''}`,
+      `bg-${backgroundColor || ''}`,
+    ].join(' ');
+    bar.appendChild(barBody);
+    progressContainer.appendChild(bar);
     this.shadowRoot.appendChild(progressContainer);
   }
-
-  buildBar(bars, barContainer) {
-    bars.forEach((bar) => {
-      const tempBar = document.createElement('div');
-      tempBar.role = 'progressbar';
-      tempBar.setAttribute('aria-label', bar.ariaLabel);
-      tempBar.setAttribute('aria-valuenow', bar.value);
-      tempBar.setAttribute('aria-valuemin', '0');
-      tempBar.setAttribute('aria-valuemax', '100');
-      tempBar.className = 'progress';
-      const barBody = document.createElement('div');
-      tempBar.style = `width: ${bar.value}%`;
-
-      // TODO: Fix old ESLint errors - see issue #1099
-      // eslint-disable-next-line eqeqeq
-      bar.label == undefined || bar.label == null
-        ? ''
-        : (barBody.innerText = bar.label);
-      barBody.className = [
-        'progress-bar',
-        `progress-bar-${bar.animated || ''}`,
-        `progress-bar-${bar.striped || ''}`,
-        `bg-${bar.backgroundColor || ''}`,
-      ].join(' ');
-      tempBar.appendChild(barBody);
-      barContainer.appendChild(tempBar);
-    });
-  }
 }
diff --git a/src/stories/progress.stories.js b/src/stories/progress.stories.js
@@ -27,7 +27,6 @@ const Template = (args) => {
   progress.setAttribute('data-label', args.label);
   progress.setAttribute('data-aria-label', args.ariaLabel);
   progress.setAttribute('data-animated', args.animated);
-  progress.setAttribute('data-multi-bars', args.multiBars);
   return progress;
 };
 
@@ -64,29 +63,3 @@ StripedBarLabel.args = {
   animated: 'animated',
   label: 'this 25%',
 };
-
-export const StripedBarStacked = Template.bind({});
-StripedBarStacked.args = {
-  multiBars: JSON.stringify([
-    {
-      ariaLabel: 'first stacked bar',
-      value: '30',
-      label: 'Something 30%',
-      animated: 'animated',
-      striped: 'striped',
-      backgroundColor: 'info',
-    },
-    {
-      ariaLabel: 'second stacked bar',
-      value: '15',
-      animated: 'animated',
-      striped: 'striped',
-      backgroundColor: 'warning',
-    },
-    {
-      ariaLabel: 'second stacked bar',
-      value: '20',
-      backgroundColor: 'success',
-    },
-  ]),
-};