Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix lints in button component #113

Merged
merged 1 commit into from
Nov 9, 2023
Merged

Fix lints in button component #113

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 40 additions & 119 deletions src/components/atoms/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,154 +7,79 @@
// Always call super first in constructor
super();
// Create a shadow root
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unused-vars
const shadow = this.attachShadow({ mode: 'open' });
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
// Button attributes
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let close = this.getAttribute('data-close');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let link = this.getAttribute('data-link');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let btnID = this.getAttribute('data-id');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let ariaLabel = this.getAttribute('data-aria-label');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let primary = this.getAttribute('data-primary');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let backgroundColor = this.getAttribute('data-background-color');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let shape = this.getAttribute('data-shape');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let icon = this.getAttribute('data-icon');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let iconSize = this.getAttribute('data-icon-size');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let iconOrder = this.getAttribute('data-icon-order');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let hiddenLabel = this.getAttribute('data-hidden-label');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let imgSrc = this.getAttribute('data-img');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let imgAlt = this.getAttribute('data-img-alt');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const, no-unused-vars, eqeqeq
let img = imgAlt != '' ? 'img' : 'not-img';
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let size = this.getAttribute('data-size');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let extraClasses = this.getAttribute('data-extra-classes');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let label = this.getAttribute('data-label');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let disableStatus = this.getAttribute('data-disable');
const close = this.getAttribute('data-close');
const link = this.getAttribute('data-link');
const btnID = this.getAttribute('data-id');
const ariaLabel = this.getAttribute('data-aria-label');
const primary = this.getAttribute('data-primary');
const backgroundColor = this.getAttribute('data-background-color');
const shape = this.getAttribute('data-shape');
const icon = this.getAttribute('data-icon');
const iconSize = this.getAttribute('data-icon-size');
const iconOrder = this.getAttribute('data-icon-order');
const hiddenLabel = this.getAttribute('data-hidden-label');
const imgSrc = this.getAttribute('data-img');
const imgAlt = this.getAttribute('data-img-alt');
const size = this.getAttribute('data-size');
const extraClasses = this.getAttribute('data-extra-classes');
const label = this.getAttribute('data-label');
const disableStatus = this.getAttribute('data-disable');
// Building Button component
const btn = document.createElement('button');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let btnClasses = ['btn'];
const btnClasses = ['btn'];
btn.type = 'button';
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
if (btnID != null && btnID != undefined) {
if (btnID) {
btn.id = btnID;
}
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
disableStatus == 'true' ? (btn.disabled = true) : (btn.disabled = false);
disableStatus === 'true' ? (btn.disabled = true) : (btn.disabled = false);
btn.setAttribute('aria-label', `${ariaLabel || ''}`);
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
if (primary == 'true') {
if (primary === 'true') {
btnClasses.push(`btn-${backgroundColor}`);
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
} else if (primary == 'false') {
} else if (primary === 'false') {
btnClasses.push(`btn-outline-${backgroundColor}`);
}
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
shape == 'square'
shape === 'square'
? btnClasses.push('cod-button--square')
: btnClasses.push('cod-button-fluid');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
size != undefined && size != null ? btnClasses.push(`btn-${size}`) : 0;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
extraClasses != undefined && extraClasses != null
? btnClasses.push(extraClasses)
: 0;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
imgAlt != ''
size !== null ? btnClasses.push(`btn-${size}`) : 0;
extraClasses !== null ? btnClasses.push(extraClasses) : 0;
imgAlt
? btnClasses.push('cod-button--img')
: btnClasses.push('cod-button--not-img');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
close == 'true' ? btnClasses.push('btn-close') : 0;
close === 'true' ? btnClasses.push('btn-close') : 0;
btn.className = btnClasses.join(' ');

// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
if (icon != '') {
if (icon) {
// Loading icon
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let iconContainer = document.createElement('span');
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let activeIcon = document.createElement('cod-icon');
const iconContainer = document.createElement('span');
const activeIcon = document.createElement('cod-icon');
activeIcon.setAttribute('data-icon', icon);
activeIcon.setAttribute('data-size', iconSize);
iconContainer.appendChild(activeIcon);
btn.innerText = label;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
if (iconOrder == 'left') {
if (iconOrder === 'left') {
btn.insertBefore(iconContainer, btn.firstChild);
} else {
btn.appendChild(iconContainer);
}
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
} else if (imgAlt != '') {
} else if (imgAlt) {
// Loading image
btn.innerText = label;
const btnIcon = document.createElement('img');
btnIcon.src = imgSrc;

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.
btnIcon.setAttribute('alt', imgAlt);
btn.appendChild(btnIcon);
} else {
btn.innerText = label;
}
// Create hidden label
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
if (hiddenLabel != undefined && hiddenLabel != null) {
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let hLabel = document.createElement('span');
if (hiddenLabel !== null) {
const hLabel = document.createElement('span');
hLabel.className = 'visually-hidden';
hLabel.innerText = hiddenLabel;
btn.appendChild(hLabel);
Expand All @@ -170,19 +95,15 @@
const btnStyles = document.createElement('style');
btnStyles.textContent = styles;
this.shadowRoot.appendChild(btnStyles);
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line eqeqeq
if (link == undefined || link == null) {
this.shadowRoot.appendChild(btn);
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let ghostBtn = this.appendChild(document.createElement('button'));
this.onclick = () => ghostBtn.click();
} else {
if (link) {
const btnLink = document.createElement('a');
btnLink.href = link;

Check warning

Code scanning / CodeQL

DOM text reinterpreted as HTML Medium

DOM text
Loading
is reinterpreted as HTML without escaping meta-characters.
btnLink.appendChild(btn);
this.shadowRoot.appendChild(btnLink);
} else {
this.shadowRoot.appendChild(btn);
const ghostBtn = this.appendChild(document.createElement('button'));
this.onclick = () => ghostBtn.click();
}
}
}
Expand Down
Loading