From 872a7c7fddf4651eef2fe0f2b14f3518c48b131e Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Tue, 30 Apr 2024 13:28:26 -0400 Subject: [PATCH 1/2] Fix undefined attr --- src/components/atoms/Progress/Progress.js | 8 +++----- src/stories/progress.stories.js | 4 +++- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/atoms/Progress/Progress.js b/src/components/atoms/Progress/Progress.js index 28c661e8..87677a01 100644 --- a/src/components/atoms/Progress/Progress.js +++ b/src/components/atoms/Progress/Progress.js @@ -34,12 +34,10 @@ export default class Progress extends HTMLElement { const backgroundColor = this.getAttribute('data-background-color'); - const stacked = this.getAttribute('data-multi-bars'); + const multiBarConfig = this.getAttribute('multi-bar-config'); const progressContainer = document.createElement('div'); - // TODO: Fix old ESLint errors - see issue #1099 - // eslint-disable-next-line eqeqeq - if (stacked == 'undefined' || stacked == 'null') { + if (multiBarConfig === null) { const bar = document.createElement('div'); bar.role = 'progressbar'; bar.setAttribute('aria-label', ariaLabel); @@ -63,7 +61,7 @@ export default class Progress extends HTMLElement { progressContainer.appendChild(bar); } else { progressContainer.className = 'progress-stacked'; - this.buildBar(JSON.parse(stacked), progressContainer); + this.buildBar(JSON.parse(multiBarConfig), progressContainer); } this.shadowRoot.appendChild(progressContainer); } diff --git a/src/stories/progress.stories.js b/src/stories/progress.stories.js index 6b1ee37a..c42e4973 100644 --- a/src/stories/progress.stories.js +++ b/src/stories/progress.stories.js @@ -27,7 +27,9 @@ 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); + if (args.multiBars) { + progress.setAttribute('multi-bar-config', args.multiBars); + } return progress; }; From 73f39cc1d57b8d406e0cfc665cb4fe56b08dc268 Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Tue, 30 Apr 2024 15:19:17 -0400 Subject: [PATCH 2/2] Remove multi bar support --- src/components/atoms/Progress/Progress.js | 74 ++++++----------------- src/stories/progress.stories.js | 29 --------- 2 files changed, 20 insertions(+), 83 deletions(-) diff --git a/src/components/atoms/Progress/Progress.js b/src/components/atoms/Progress/Progress.js index 87677a01..a5b9f3a2 100644 --- a/src/components/atoms/Progress/Progress.js +++ b/src/components/atoms/Progress/Progress.js @@ -34,63 +34,29 @@ export default class Progress extends HTMLElement { const backgroundColor = this.getAttribute('data-background-color'); - const multiBarConfig = this.getAttribute('multi-bar-config'); const progressContainer = document.createElement('div'); - if (multiBarConfig === 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(multiBarConfig), progressContainer); + 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); 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 index c42e4973..681e2c1d 100644 --- a/src/stories/progress.stories.js +++ b/src/stories/progress.stories.js @@ -27,9 +27,6 @@ const Template = (args) => { progress.setAttribute('data-label', args.label); progress.setAttribute('data-aria-label', args.ariaLabel); progress.setAttribute('data-animated', args.animated); - if (args.multiBars) { - progress.setAttribute('multi-bar-config', args.multiBars); - } return progress; }; @@ -66,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', - }, - ]), -};