Add first variant of arpa button

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 = `
+<slot></slot>
+`;
+
+`
+// Example of ARPA card with icon in body.
+// TODO: Add clickable wrapper.
+<cod-card data-id="something-unique">
+  <img src="https://placehold.co/800x400/000000/FFF" class="card-img-top img-responsive" alt="...">
+  <cod-card-body>
+    <div class="title-row" style="display: flex;/*! font-weight: 900; */justify-content: space-between;">
+      // TODO: Change class to info button title for unique class selector.
+      // TODO: Style primary title as white.
+      <h5 class="card-title primary-title" style="font-weight: 900;">Card title</h5>
+      // TODO: Style secondary title as highlight.
+      <h5 class="card-title secondary-title" style="font-weight: 900;">$90 million</h5>
+    </div>
+    <p class="card-text">
+          Some quick example text to build on the card title and make up the bulk
+          of the card's content.
+    </p>
+    // TODO: Place chevron in body.
+  </cod-card-body>
+</cod-card>
+
+// 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 };

src/components/atoms/InfoButton/cod-info-button.js

@@ -0,0 +1,2 @@
+import InfoButton from './InfoButton';
+customElements.define('cod-info-button', InfoButton);