Skip to content

Commit

Permalink
Merge branch 'dev' into fix.table
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxatdetroit
maxatdetroit committed Nov 14, 2023
2 parents a03b6e0 + 862ac60 commit b07297c
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 167 deletions.
159 changes: 40 additions & 119 deletions src/components/atoms/Button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,138 +7,67 @@ export default class Button extends HTMLElement {
// 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');
Expand All @@ -149,12 +78,8 @@ export default class Button extends HTMLElement {
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 @@ export default class Button extends HTMLElement {
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;
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
49 changes: 1 addition & 48 deletions src/components/atoms/Icon/Icon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ export default class Icon extends HTMLElement {
constructor() {
// Always call super first in constructor
super();

// Create a shadow root.
this.attachShadow({ mode: 'open' });
}
Expand All @@ -13,9 +12,7 @@ export default class Icon extends HTMLElement {
}

// Icon attributes
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line prefer-const
let icon = this.getAttribute('data-icon');
const icon = this.getAttribute('data-icon');
let size = this.getAttribute('data-size');
switch (size) {
case 'small':
Expand Down Expand Up @@ -73,106 +70,62 @@ export default class Icon extends HTMLElement {
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'house-fill':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"/>
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'exclamation-circle':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'exclamation-circle-fill':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'exclamation-triangle':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'check-circle':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'check-circle-fill':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'calendar':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'calendar-fill':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-calendar-fill" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'calendar-date':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-calendar-date" viewBox="0 0 16 16">
<path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

case 'calendar-date-fill':
return `
<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="currentColor" class="bi bi-calendar-date-fill" viewBox="0 0 16 16">
<path d="M4 .5a.5.5 0 0 0-1 0V1H2a2 2 0 0 0-2 2v1h16V3a2 2 0 0 0-2-2h-1V.5a.5.5 0 0 0-1 0V1H4V.5zm5.402 9.746c.625 0 1.184-.484 1.184-1.18 0-.832-.527-1.23-1.16-1.23-.586 0-1.168.387-1.168 1.21 0 .817.543 1.2 1.144 1.2z"/>
<path d="M16 14V5H0v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zm-6.664-1.21c-1.11 0-1.656-.767-1.703-1.407h.683c.043.37.387.82 1.051.82.844 0 1.301-.848 1.305-2.164h-.027c-.153.414-.637.79-1.383.79-.852 0-1.676-.61-1.676-1.77 0-1.137.871-1.809 1.797-1.809 1.172 0 1.953.734 1.953 2.668 0 1.805-.742 2.871-2 2.871zm-2.89-5.435v5.332H5.77V8.079h-.012c-.29.156-.883.52-1.258.777V8.16a12.6 12.6 0 0 1 1.313-.805h.632z"/>
</svg>`;
// TODO: See CityOfDetroit/detroitmi#1099
// eslint-disable-next-line no-unreachable
break;

default:
break;
}
Expand Down

0 comments on commit b07297c

Please sign in to comment.