Add grid story & fix layout

CityOfDetroit · Feb 14, 2024 · f6bd3c2 · f6bd3c2
1 parent f962e97
commit f6bd3c2
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/src/components/atoms/InfoButton/InfoButton.css b/src/components/atoms/InfoButton/InfoButton.css
@@ -2,6 +2,11 @@ div {
   font-family: var(--font-family);
 }
 
+.info-button-container, .info-button-container > a, .info-button-container > a > .card {
+  width: 100%;
+  height: 100%;
+}
+
 .info-btn-title {
   font-weight: 900;
 }

diff --git a/src/components/atoms/InfoButton/InfoButton.js b/src/components/atoms/InfoButton/InfoButton.js
@@ -17,6 +17,7 @@ class InfoButton extends HTMLElement {
     const shadow = this.attachShadow({ mode: 'open' });
     shadow.appendChild(template.content.cloneNode(true));
     this.div = document.createElement('div');
+    this.div.classList.add('info-button-container');
     shadow.addEventListener('slotchange', (ev) => {
       const tempElements = ev.target.assignedElements();
       tempElements.forEach((node) => {

diff --git a/src/stories/infobutton.stories.js b/src/stories/infobutton.stories.js
@@ -1,3 +1,4 @@
+import { html } from 'lit-html';
 import '../components/organisms/Card/cod-card';
 import '../components/atoms/CardBody/cod-card-body';
 import '../components/atoms/Icon/cod-icon';
@@ -48,3 +49,78 @@ const Template = (args) => {
 };
 
 export const Primary = Template.bind({});
+
+export const InfoButtonGrid = () => html`
+  <div class="container-fluid">
+    <div class="row my-3">
+      <div class="col-sm-4">
+        <cod-info-button
+          img-src="https://placehold.co/800x400/000000/FFF"
+          img-alt="..."
+          href="https://example.com"
+          target="_blank"
+          title-primary="Some Information"
+          body="Commercial demolition and rehab"
+        >
+        </cod-info-button>
+      </div>
+      <div class="col-sm-4">
+        <cod-info-button
+          img-src="https://placehold.co/800x400/000000/FFF"
+          img-alt="..."
+          href="https://example.com"
+          target="_blank"
+          title-primary="Some Information"
+          body="Commercial demolition and rehab but this content is going to spread onto multiple lines"
+        >
+        </cod-info-button>
+      </div>
+      <div class="col-sm-4">
+        <cod-info-button
+          img-src="https://placehold.co/800x400/000000/FFF"
+          img-alt="..."
+          href="https://example.com"
+          target="_blank"
+          title-primary="Some Information"
+          body="Commercial demolition and rehab"
+        >
+        </cod-info-button>
+      </div>
+    </div>
+    <div class="row my-3">
+      <div class="col-sm-4">
+        <cod-info-button
+          img-src="https://placehold.co/800x400/000000/FFF"
+          img-alt="..."
+          href="https://example.com"
+          target="_blank"
+          title-primary="Some Information"
+          body="Commercial demolition and rehab"
+        >
+        </cod-info-button>
+      </div>
+      <div class="col-sm-4">
+        <cod-info-button
+          img-src="https://placehold.co/800x400/000000/FFF"
+          img-alt="..."
+          href="https://example.com"
+          target="_blank"
+          title-primary="Some Information"
+          body="Commercial demolition and rehab"
+        >
+        </cod-info-button>
+      </div>
+      <div class="col-sm-4">
+        <cod-info-button
+          img-src="https://placehold.co/800x400/000000/FFF"
+          img-alt="..."
+          href="https://example.com"
+          target="_blank"
+          title-primary="Some Information"
+          body="Commercial demolition and rehab"
+        >
+        </cod-info-button>
+      </div>
+    </div>
+  </div>
+`;