Support action buttons in UXDS

src/components/atoms/Clickable/Clickable.css

@@ -0,0 +1,4 @@
+.btn {
+  --bs-btn-padding-x: 0;
+  --bs-btn-padding-y: 0;
+}

src/components/atoms/Clickable/Clickable.js

@@ -0,0 +1,61 @@
+import styles from '!!raw-loader!./Clickable.css';
+import varStyles from '!!raw-loader!../../../shared/variables.css';
+import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
+
+const template = document.createElement('template');
+
+// A space for some clickable content.
+template.innerHTML = `
+<slot></slot>
+`;
+
+export default class Clickable extends HTMLElement {
+  constructor() {
+    // Always call super constructor.
+    super();
+
+    // Create a shadow root.
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.addEventListener('slotchange', (ev) => {
+      const elements = ev.target.assignedElements();
+      elements.forEach((element) => {
+        if (typeof element.setIsClickable === 'function') {
+          const btnColor = this.getAttribute('data-btn-color');
+          element.setIsClickable(true, btnColor);
+        }
+      });
+      this.clickable.append(...elements);
+    });
+
+    // Create component.
+    this.clickable = document.createElement('a');
+
+    // 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;
+    this.shadowRoot.appendChild(bootStyles);
+    this.shadowRoot.appendChild(variableStyles);
+    this.shadowRoot.appendChild(itemStyles);
+
+    // Set attributes on node.
+    const href = this.getAttribute('href');
+    this.clickable.setAttribute('href', href);
+    const target = this.getAttribute('target');
+    this.clickable.setAttribute('target', target);
+
+    // Set bootstrap classes.
+    const btnColor = this.getAttribute('data-btn-color');
+    this.clickable.classList.add('btn', btnColor);
+
+    // Add slot to clickable area.
+    this.clickable.appendChild(template.content.cloneNode(true));
+    this.shadowRoot.appendChild(this.clickable);
+  }
+}

src/components/atoms/Clickable/cod-clickable.js

@@ -0,0 +1,3 @@
+import Clickable from './Clickable';
+
+customElements.define('cod-clickable', Clickable);

src/components/organisms/Card/Card.css

@@ -0,0 +1,3 @@
+.top-icon {
+  margin-top: 1em;
+}

src/components/organisms/Card/Card.js

@@ -98,12 +98,21 @@ export default class Card extends HTMLElement {
     const id = this.getAttribute('data-id');
     const extraClasses = this.getAttribute('data-extra-classes');
     const cardClasses = ['card'];
-    extraClasses !== null ? cardClasses.push(extraClasses) : 0;
+    extraClasses !== null ? cardClasses.push(extraClasses.split(' ')) : 0;
     width !== null ? (this.card.style.width = width) : 0;
     id !== null ? (this.card.id = id) : 0;
-    this.card.className = cardClasses.join(' ');
+    // Include any existing classes from the element.
+    this.card.classList.add(...cardClasses);
     if (!this.shadowRoot.querySelector('div')) {
       this.shadowRoot.appendChild(this.card);
     }
   }
+
+  setIsClickable(isClickable = true, color = null) {
+    if (isClickable) {
+      this.card.classList.add('btn', color);
+    } else {
+      this.card.classList.remove('btn', color);
+    }
+  }
 }

src/stories/clickable.stories.js

@@ -0,0 +1,43 @@
+import { html } from 'lit-html';
+import '../components/atoms/Clickable/cod-clickable';
+import '../components/organisms/Card/cod-card';
+import '../components/atoms/Icon/cod-icon';
+import '../components/atoms/CardBody/cod-card-body';
+
+export default {
+  title: 'Components/Atoms/Clickable',
+};
+
+export const ActionButton = () => html`
+  <cod-clickable href="https://example.com" target="_blank" data-btn-color="btn-primary">
+    <cod-card
+      data-id="card-as-action-button"
+      data-width="18em"
+    >
+      <div class="w-100 top-icon">
+        <cod-icon data-icon="house" data-size="x-large" />
+      </div>
+      <cod-card-body>
+        <h5 class="card-title">Do Something</h5>
+        <p class="card-text">Like click on this card.</p>
+      </cod-card-body>
+    </cod-card>
+  </clickable>
+`;
+
+export const ActionButtonSuccess = () => html`
+  <cod-clickable href="https://example.com" target="_blank" data-btn-color="btn-success">
+    <cod-card
+      data-id="card-as-action-button"
+      data-width="18em"
+    >
+      <div class="w-100 top-icon">
+        <cod-icon data-icon="house" data-size="x-large" />
+      </div>
+      <cod-card-body>
+        <h5 class="card-title">Do Something</h5>
+        <p class="card-text">Like click on this card.</p>
+      </cod-card-body>
+    </cod-card>
+  </clickable>
+`;