From 8b4dbac8b32996a36fb1f1730169b9a3e00217b3 Mon Sep 17 00:00:00 2001
From: Max Morgan <maxwell.morgan@detroitmi.gov>
Date: Thu, 5 Oct 2023 10:07:53 -0400
Subject: [PATCH] Add clickable component

---
 src/components/atoms/Clickable/Clickable.css  |  4 ++
 src/components/atoms/Clickable/Clickable.js   | 61 +++++++++++++++++++
 .../atoms/Clickable/cod-clickable.js          |  3 +
 src/stories/clickable.stories.js              | 44 +++++++++++++
 4 files changed, 112 insertions(+)
 create mode 100644 src/components/atoms/Clickable/Clickable.css
 create mode 100644 src/components/atoms/Clickable/Clickable.js
 create mode 100644 src/components/atoms/Clickable/cod-clickable.js
 create mode 100644 src/stories/clickable.stories.js

diff --git a/src/components/atoms/Clickable/Clickable.css b/src/components/atoms/Clickable/Clickable.css
new file mode 100644
index 00000000..9e97985d
--- /dev/null
+++ b/src/components/atoms/Clickable/Clickable.css
@@ -0,0 +1,4 @@
+.btn {
+  --bs-btn-padding-x: 0;
+  --bs-btn-padding-y: 0;
+}
diff --git a/src/components/atoms/Clickable/Clickable.js b/src/components/atoms/Clickable/Clickable.js
new file mode 100644
index 00000000..b44611ce
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/components/atoms/Clickable/cod-clickable.js b/src/components/atoms/Clickable/cod-clickable.js
new file mode 100644
index 00000000..5581b310
--- /dev/null
+++ b/src/components/atoms/Clickable/cod-clickable.js
@@ -0,0 +1,3 @@
+import Clickable from './Clickable';
+
+customElements.define('cod-clickable', Clickable);
diff --git a/src/stories/clickable.stories.js b/src/stories/clickable.stories.js
new file mode 100644
index 00000000..95c1d0d2
--- /dev/null
+++ b/src/stories/clickable.stories.js
@@ -0,0 +1,44 @@
+import { html } from 'lit-html';
+import '../components/atoms/Clickable/cod-clickable';
+import '../components/organisms/Card/cod-card';
+import '../components/atoms/CardIconContainer/cod-card-icon-container';
+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"
+    >
+      <cod-card-icon-container>
+        <cod-icon data-icon="house" data-size="x-large" />
+      </cod-card-icon-container>
+      <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"
+    >
+      <cod-card-icon-container>
+        <cod-icon data-icon="house" data-size="x-large" />
+      </cod-card-icon-container>
+      <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>
+`;