diff --git a/src/components/atoms/InfoButton/InfoButton.css b/src/components/atoms/InfoButton/InfoButton.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/atoms/InfoButton/InfoButton.js b/src/components/atoms/InfoButton/InfoButton.js new file mode 100644 index 00000000..7676d34f --- /dev/null +++ b/src/components/atoms/InfoButton/InfoButton.js @@ -0,0 +1,73 @@ +import styles from '!!raw-loader!./InfoButton.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; + +const template = document.createElement('template'); +template.innerHTML = ` + +`; + +` +// Example of ARPA card with icon in body. +// TODO: Add clickable wrapper. + + ... + +
+ // TODO: Change class to info button title for unique class selector. + // TODO: Style primary title as white. +
Card title
+ // TODO: Style secondary title as highlight. +
$90 million
+
+

+ Some quick example text to build on the card title and make up the bulk + of the card's content. +

+ // TODO: Place chevron in body. +
+
+ +// TODO: Build similar example with button in place of secondary title. +` + +class InfoButton extends HTMLElement { + static observedAttributes = []; + + constructor() { + // Always call super first in constructor + super(); + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + this.div = document.createElement('div'); + shadow.addEventListener('slotchange', (ev) => { + const tempElements = ev.target.assignedElements(); + tempElements.forEach((node, _index) => { + this.div.append(node); + }); + }); + + // Add styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } + + connectedCallback() { + // TODO: Handle attribute values, add classes, etc. + this.shadowRoot.appendChild(this.div); + } + + attributeChangedCallback(name, oldValue, newValue) { + // TODO: Handle attr changes. + } +} + +export { InfoButton as default }; \ No newline at end of file diff --git a/src/components/atoms/InfoButton/cod-info-button.js b/src/components/atoms/InfoButton/cod-info-button.js new file mode 100644 index 00000000..834da669 --- /dev/null +++ b/src/components/atoms/InfoButton/cod-info-button.js @@ -0,0 +1,2 @@ +import InfoButton from './InfoButton'; +customElements.define('cod-info-button', InfoButton);