Merge branch 'dev' into fix.issue.115

CityOfDetroit · Feb 21, 2024 · 1be1f0c · 1be1f0c
2 parents 0b8b7a6 + 79f3610
commit 1be1f0c
Show file tree

Hide file tree

Showing 31 changed files with 883 additions and 226 deletions.
diff --git a/.yarn/cache/bootstrap-icons-npm-1.10.4-da897c241e-d76333e46d.zip b/.yarn/cache/bootstrap-icons-npm-1.10.4-da897c241e-d76333e46d.zip
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,56 @@
+# v1.0.15 (Mon Feb 19 2024)
+
+#### 🚀 Enhancement
+
+- Adding new components: [`cod-info-button`](https://github.com/CityOfDetroit/COD-Design-System/pull/160) and [`cod-action-button`](https://github.com/CityOfDetroit/COD-Design-System/pull/158).
+
+
+#### Authors: 1
+
+- Max Morgan ([@maxatdetroit](https://github.com/maxatdetroit))
+
+---
+
+# v1.0.14 (Mon Feb 12 2024)
+
+#### 🏎 Performance
+
+- Adding additional icons for intranet. [#157](https://github.com/CityOfDetroit/COD-Design-System/pull/157) ([@maxatdetroit](https://github.com/maxatdetroit))
+
+
+#### Authors: 1
+
+- Max Morgan ([@maxatdetroit](https://github.com/maxatdetroit))
+
+---
+
+# v1.0.13 (Tue Feb 06 2024)
+
+#### 🐛 Bug Fix
+
+- Fix bold when using light fonts [#137](https://github.com/CityOfDetroit/COD-Design-System/pull/137) ([@maxatdetroit](https://github.com/maxatdetroit))
+
+#### 🏎 Performance
+
+- Adding icons for intranet and chevron circles. [#151](https://github.com/CityOfDetroit/COD-Design-System/pull/151) ([@jedgar1mx](https://github.com/jedgar1mx))
+
+#### 🧪 Tests
+
+- Setting up map component modes, fixing dev conflicts. [#150](https://github.com/CityOfDetroit/COD-Design-System/pull/150) ([@jedgar1mx](https://github.com/jedgar1mx))
+- Chromatic [#141](https://github.com/CityOfDetroit/COD-Design-System/pull/141) ([@jedgar1mx](https://github.com/jedgar1mx))
+- Add CI workflow for storybook tests [#138](https://github.com/CityOfDetroit/COD-Design-System/pull/138) ([@maxatdetroit](https://github.com/maxatdetroit))
+
+#### 🔩 Dependency Updates
+
+- Feature.147 [#148](https://github.com/CityOfDetroit/COD-Design-System/pull/148) ([@jedgar1mx](https://github.com/jedgar1mx))
+
+#### Authors: 2
+
+- J Edgar Montes ([@jedgar1mx](https://github.com/jedgar1mx))
+- Max Morgan ([@maxatdetroit](https://github.com/maxatdetroit))
+
+---
+
 # v1.0.12 (Fri Jan 12 2024)
 
 #### 🐛 Bug Fix

diff --git a/build/assets/js/main.js b/build/assets/js/main.js
diff --git a/build/assets/js/runtime.js b/build/assets/js/runtime.js
diff --git a/build/assets/js/vendors.babel.js b/build/assets/js/vendors.babel.js
diff --git a/build/assets/js/vendors.bootstrap-icons.js b/build/assets/js/vendors.bootstrap-icons.js
diff --git a/build/assets/js/vendors.maplibre-gl.js b/build/assets/js/vendors.maplibre-gl.js
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/vendors.babel.js"></script><script defer="defer" src="assets/js/vendors.bootstrap-icons.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>
+<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/vendors.babel.js"></script><script defer="defer" src="assets/js/vendors.maplibre-gl.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cod-design-system",
-  "version": "1.0.12",
+  "version": "1.0.15",
   "description": "City of Detroit design system",
   "main": "dist/index.js",
   "repository": {
@@ -30,7 +30,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "storybook-to-ghpages",
-    "test-storybook": "test-storybook",
+    "test-storybook": "test-storybook --maxWorkers=2 --coverage",
     "release": "auto shipit --base-branch=dev",
     "chromatic": "chromatic --exit-zero-on-changes"
   },
@@ -40,7 +40,6 @@
   "license": "MIT",
   "dependencies": {
     "bootstrap": "5.3.0-alpha3",
-    "bootstrap-icons": "^1.10.3",
     "maplibre-gl": "^2.4.0"
   },
   "devDependencies": {

diff --git a/src/components/atoms/ActionButton/ActionButton.css b/src/components/atoms/ActionButton/ActionButton.css
@@ -0,0 +1,42 @@
+div {
+  font-family: var(--font-family);
+}
+
+.action-button-container,
+.action-button-container > a,
+.action-button-container > a > .abutton {
+  width: 100%;
+  height: 100%;
+}
+
+.top-icon {
+  padding-top: 1em;
+}
+
+.abutton-title {
+  margin-bottom: var(--abutton-title-spacer-y);
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.abutton-text:last-child {
+  margin-bottom: 0;
+}
+
+.abutton-body {
+  padding: var(--abutton-spacer-y) var(--abutton-spacer-x);
+}
+
+.abutton {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  --abutton-spacer-y: 1em;
+  --abutton-spacer-x: 1em;
+  --abutton-title-spacer-y: 0.5em;
+}
+
+.btn {
+  --bs-btn-padding-x: 0rem;
+  --bs-btn-padding-y: 0rem;
+}
diff --git a/src/components/atoms/ActionButton/ActionButton.js b/src/components/atoms/ActionButton/ActionButton.js
@@ -0,0 +1,70 @@
+import styles from '!!raw-loader!./ActionButton.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 = `
+<div class="action-button-container">
+  <a class="btn" role="button" href="">
+    <div class="abutton">
+      <div class="w-100 top-icon">
+        <cod-icon data-icon="" data-size="x-large">
+        </cod-icon>
+      </div>
+      <div class="abutton-body">
+        <h4 class="abutton-title"></h4>
+        <slot></slot>
+      </div>
+    </div>
+  </a>
+</div>
+`;
+
+class ActionButton 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));
+
+    // 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() {
+    // Update the title.
+    const title = this.getAttribute('title');
+    const titleElt = this.shadowRoot.querySelector('h4.abutton-title');
+    titleElt.innerText = title;
+
+    // Update the icon.
+    const icon = this.getAttribute('icon');
+    const iconElt = this.shadowRoot.querySelector('cod-icon');
+    iconElt.setAttribute('data-icon', icon);
+
+    // Update the button link and style.
+    const btnColor = this.getAttribute('btn-color') ?? 'btn-outline-primary';
+    const href = this.getAttribute('href');
+    const target = this.getAttribute('target');
+    const aElt = this.shadowRoot.querySelector('a.btn');
+    aElt.classList.add('btn', btnColor);
+    aElt.setAttribute('href', href);
+    if (target) {
+      aElt.setAttribute('target', target);
+    }
+  }
+}
+
+export { ActionButton as default };
diff --git a/src/components/atoms/ActionButton/cod-action-button.js b/src/components/atoms/ActionButton/cod-action-button.js
@@ -0,0 +1,2 @@
+import ActionButton from './ActionButton';
+customElements.define('cod-action-button', ActionButton);
diff --git a/src/components/atoms/Alert/Alert.js b/src/components/atoms/Alert/Alert.js
@@ -1,7 +1,6 @@
 import styles from '!!raw-loader!./Alert.css';
 import varStyles from '!!raw-loader!../../../shared/variables.css';
 import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css';
-import bootstrapIcons from '!!raw-loader!bootstrap-icons/font/bootstrap-icons.css';
 
 const template = document.createElement('template');
 
@@ -38,16 +37,13 @@ export default class Alert extends HTMLElement {
   }
 
   connectedCallback() {
-    const bootIcons = document.createElement('style');
-    bootIcons.textContent = bootstrapIcons;
     const bootStyles = document.createElement('style');
     bootStyles.textContent = bootstrapStyles;
     const variableStyles = document.createElement('style');
     variableStyles.textContent = varStyles;
     const alertStyles = document.createElement('style');
     alertStyles.textContent = styles;
     this.shadowRoot.appendChild(bootStyles);
-    this.shadowRoot.appendChild(bootIcons);
     this.shadowRoot.appendChild(variableStyles);
     this.shadowRoot.appendChild(alertStyles);
     // alert attributes

diff --git a/src/components/atoms/Clickable/Clickable.css b/src/components/atoms/Clickable/Clickable.css
diff --git a/src/components/atoms/Clickable/Clickable.js b/src/components/atoms/Clickable/Clickable.js
diff --git a/src/components/atoms/Clickable/cod-clickable.js b/src/components/atoms/Clickable/cod-clickable.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/vendors.babel.js"></script><script defer="defer" src="assets/js/vendors.bootstrap-icons.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>
		<head><script defer="defer" src="assets/js/runtime.js"></script><script defer="defer" src="assets/js/vendors.babel.js"></script><script defer="defer" src="assets/js/vendors.maplibre-gl.js"></script><script defer="defer" src="assets/js/main.js"></script></head><script src="index.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import ActionButton from './ActionButton';
		customElements.define('cod-action-button', ActionButton);