fix(unity-bootstrap-theme): update build to include js

Author: scott-williams-az

packages/unity-bootstrap-theme/jsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM"],
+    "resolveJsonModule": true,
+    "jsx": "react",
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node16",
+    "module": "node16",
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "@shared/*": [ "../../shared/*" ],
+    },
+  },
+  "include": [
+    "src/**/*",
+    "stories/**/*",
+    "../../shared/**/*",
+  ],
+}

packages/unity-bootstrap-theme/package.json

@@ -13,7 +13,9 @@
     "url": "git+https://github.com/ASU/asu-unity-stack.git"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "yarn build:1 && yarn build:2",
+    "build:1": "vite build",
+    "build:2": "vite build --config vite.config.bundle.js",
     "watch": "rimraf ./dist && webpack --watch && rimraf ./.tmp",
     "storybook": "storybook dev -p 9000",
     "build-storybook": "storybook build -o ../../build/$npm_package_name",
@@ -77,14 +79,6 @@
     "webpack-node-externals": "^3.0.0"
   },
   "exports": {
-    "./js/global-header.js": {
-      "module": "./src/js/storybook-global-header.js",
-      "default": "./src/js/global-header.js"
-    },
-    "./js/data-layer.js": {
-      "module": "./src/js/storybook-data-layer.js",
-      "default": "./src/js/data-layer.js"
-    },
     "./*": "./*",
     ".": "./dist/css/unity-bootstrap-theme.css"
   },

packages/unity-bootstrap-theme/src/js/banner.js

@@ -1,11 +1,84 @@
-const initBanner = () => {
-  const closeButtons = document.querySelectorAll('.banner-close button');
-  closeButtons.forEach((button) =>
-    button.addEventListener('click', () => {
-      const bannerToClose = button.parentElement.parentElement.parentElement;
-      bannerToClose.classList.add('hidden-banner');
+// should we just use bootstrap's Alert
+
+import {
+  BaseComponent,
+  EventHandler,
+  enableDismissTrigger,
+  defineJQueryPlugin,
+} from "./bootstrap-helper.js";
+
+/**
+ * Constants
+ */
+
+const NAME = 'banner-container'
+const DATA_KEY = 'uds.banner'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_CLOSE = `close${EVENT_KEY}`
+const EVENT_CLOSED = `closed${EVENT_KEY}`
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+
+/**
+ * Class definition
+ */
+
+class Banner extends BaseComponent {
+  // Getters
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  close() {
+    const closeEvent = EventHandler.trigger(this._element, EVENT_CLOSE)
+
+    if (closeEvent.defaultPrevented) {
+      return
+    }
+
+    this._element.classList.remove(CLASS_NAME_SHOW)
+
+    const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
+    this._queueCallback(() => this._destroyElement(), this._element, isAnimated)
+  }
+
+  // Private
+  _destroyElement() {
+    this._element.remove()
+    EventHandler.trigger(this._element, EVENT_CLOSED)
+    this.dispose()
+  }
+
+  // Static
+  static jQueryInterface(config) {
+    return this.each(function () {
+      const data = Banner.getOrCreateInstance(this)
+
+      if (typeof config !== 'string') {
+        return
+      }
+
+      if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
+        throw new TypeError(`No method named "${config}"`)
+      }
+
+      data[config](this)
     })
-  );
-};
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+enableDismissTrigger(Banner, 'close')
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(Banner)
 
-export { initBanner };
+export default Banner

packages/unity-bootstrap-theme/src/js/bootstrap-helper.js

@@ -1,11 +1,4 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js'
-import EventHandler from "bootstrap/js/src/dom/event-handler.js";
-import { enableDismissTrigger } from 'bootstrap/js/src/util/component-functions.js'
-import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js'
-
-export {
-  BaseComponent,
-  EventHandler,
-  enableDismissTrigger,
-  defineJQueryPlugin,
-};
+export { default as BaseComponent } from 'bootstrap/js/src/base-component.js';
+export { default as EventHandler } from "bootstrap/js/src/dom/event-handler.js";
+export { enableDismissTrigger } from 'bootstrap/js/src/util/component-functions.js';
+export { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';

packages/unity-bootstrap-theme/src/js/charts-and-graphs.js

@@ -1,11 +1,10 @@
-import { Chart, registerables } from 'chart.js';
-import { EventHandler } from './bootstrap-helper';
-
-// Chart.js library should be peer dependency
+import * as Chart from 'chart.js';
 
-Chart.register(...registerables);
+import { EventHandler } from './bootstrap-helper';
 
 function initChart() {
+  Chart.Chart.register(...Chart.registerables);
+
   const GRAPH_PERCENTAGE_COMPLETE = 50;
 
   var ctx = document.getElementById('uds-donut');
@@ -37,7 +36,7 @@ function initChart() {
     },
   };
 
-  var myChart = new Chart(ctx, config);
+  var myChart = new Chart.Chart(ctx, config);
 };
 
 EventHandler.on(window, 'load.uds.chart', initChart);

packages/unity-bootstrap-theme/src/js/data-layer.js

@@ -1,4 +1,5 @@
-(function(){
+import { EventHandler } from "./bootstrap-helper";
+
   function initDataLayer() {
     /**
      * Push events to data layer (Google Analytics)
@@ -144,11 +145,31 @@
         });
       })
     );
+
+    document.querySelectorAll('[data-ga-footer]').forEach((element) =>
+      element.addEventListener('focus', () => {
+        const args = {
+          type: element.getAttribute('data-ga-footer-type').toLowerCase(),
+          section: element.getAttribute('data-ga-footer-section').toLowerCase(),
+          text: element.getAttribute('data-ga-footer').toLowerCase(),
+        };
+        pushGAEvent({
+          event: 'link',
+          action: 'click',
+          name: 'onclick',
+          region: 'footer',
+          ...args,
+        });
+      })
+    );
   }
 
   /* Function must be initialized after document load
    * Example:
    *   window.initDataLayer();
    */
   window.initDataLayer = window.initDataLayer || initDataLayer;
-})();
+
+  EventHandler.on(window, 'load.uds.data-layer', initDataLayer);
+
+export { initDataLayer };

packages/unity-bootstrap-theme/src/js/global-header.js

@@ -1,4 +1,5 @@
-(function(){
+import { EventHandler } from "./bootstrap-helper";
+
   const initGlobalHeader = () => {
     // Scroll state
     const handleWindowScroll = () => {
@@ -9,7 +10,7 @@
       : headerEl?.classList.remove('scrolled');
     };
 
-    window.addEventListener('scroll', handleWindowScroll);
+    EventHandler.on(window, 'scroll.uds.header', handleWindowScroll);
   };
 
   window.initGlobalHeader = window.initGlobalHeader || initGlobalHeader;
@@ -18,4 +19,7 @@
    * Example:
    *   window.initGlobalHeader();
    */
-})();
+
+  EventHandler.on(window, 'load.uds.global-header', initGlobalHeader);
+
+export { initGlobalHeader };