feat(unity-bootstrap-theme): update dist files and README docs for usage

scott-williams-az · scott-williams-az · commit 090021037959 · 2025-04-24T13:12:32.000-07:00
diff --git a/packages/unity-bootstrap-theme/.storybook/local-addon/addon.js b/packages/unity-bootstrap-theme/.storybook/local-addon/addon.js
@@ -1,11 +1,29 @@
 import React from 'react';
 import { AddonPanel } from '@storybook/components';
-import { Source } from '@storybook/blocks';
 import { addons, types } from '@storybook/addons';
-import { formatWithBabelParser } from './helpers';
 import { Toggle } from '../../../../.storybook-config/Toggle'
 
 addons.register('local-addon', (api) => {
+  addons.add('local-addon/panel', {
+    title: 'Javascript',
+    //👇 Sets the type of UI element in Storybook
+    type: types.PANEL,
+    paramKey: 'initFunc',
+    render: ({active, key}) => {
+
+      return(
+        <AddonPanel key={key} active={!!active}>
+          <div style={{ padding: '20px', fontSize: '1rem'}}>
+
+          This component requires Javascript. <br/><br/>
+
+          <a href="./?path=/docs/get-started-get-started--docs#-including-unity-in-your-project">View the documentation</a>{" "}on how to use the component in your project.
+
+          </div>
+        </AddonPanel>
+    )},
+  });
+
   addons.add('local-addon/tools', {
     title: 'tools',
     type: types.TOOL,
diff --git a/packages/unity-bootstrap-theme/.storybook/local-addon/entry.js b/packages/unity-bootstrap-theme/.storybook/local-addon/entry.js
@@ -16,6 +16,9 @@ export const parameters = {
   loadEvent: {
     disable: false
   },
+  initFunc: {
+    disable: true
+  },
   docs:{
     source: {
       transform: (src,storyContext)=>{
diff --git a/packages/unity-bootstrap-theme/.storybook/preview.js b/packages/unity-bootstrap-theme/.storybook/preview.js
@@ -2,7 +2,7 @@ import "./eventSpy.js";
 import "../src/scss/unity-bootstrap-theme.bundle.scss";
 import { default as bootstrap } from "bootstrap/js/index.umd.js";
 globalThis.bootstrap = bootstrap;
-import { default as udsBootstrap } from "@asu/unity-bootstrap-theme/src/js/unity-bootstrap-theme.js";
+import { default as udsBootstrap } from "../src/js/unity-bootstrap.js";
 globalThis.udsBootstrap = udsBootstrap;
 
 import { removeFontAwesomeChanges } from "./local-addon/helpers";
diff --git a/packages/unity-bootstrap-theme/package.json b/packages/unity-bootstrap-theme/package.json
@@ -13,9 +13,9 @@
     "url": "git+https://github.com/ASU/asu-unity-stack.git"
   },
   "scripts": {
-    "build": "yarn build:1 && yarn build:2",
-    "build:1": "vite build",
-    "build:2": "vite build --config vite.config.bundle.js",
+    "build": "yarn build:css && yarn build:js",
+    "build:css": "vite build",
+    "build:js": "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",
diff --git a/packages/unity-bootstrap-theme/src/js/card-ranking.js b/packages/unity-bootstrap-theme/src/js/card-ranking.js
@@ -1,7 +1,7 @@
 import { EventHandler } from "./bootstrap-helper";
 
 // method ot handle the custom behavior of the ranking card
-function rankingFunc() {
+function initRankingCard() {
   const $infoLayer = document.querySelector(".info-layer");
   const $toggleIcon = document.getElementById("dispatch");
 
@@ -11,6 +11,6 @@ function rankingFunc() {
 
 };
 
-EventHandler.on(window, 'load.uds.ranking-card', rankingFunc);
+EventHandler.on(window, 'load.uds.ranking-card', initRankingCard);
 
-export { rankingFunc };
+export { initRankingCard };
diff --git a/packages/unity-bootstrap-theme/src/js/tabbed-panels.js b/packages/unity-bootstrap-theme/src/js/tabbed-panels.js
@@ -1,6 +1,6 @@
 import { EventHandler } from "./bootstrap-helper";
 
-function initTabs() {
+function initTabbedPanels() {
   ("use strict");
 
   const DOM_ELEMENT_A = "a";
@@ -138,8 +138,8 @@ function initTabs() {
     });
 }
 
-EventHandler.on(window, 'load.uds.tabs', initTabs);
+EventHandler.on(window, 'load.uds.tabs', initTabbedPanels);
 
 // window.addEventListener("load.uds.tabs", initTabs, true);
 
-export { initTabs };
+export { initTabbedPanels };
diff --git a/packages/unity-bootstrap-theme/src/js/tables.js b/packages/unity-bootstrap-theme/src/js/tables.js
@@ -14,7 +14,7 @@
 import { EventHandler } from "./bootstrap-helper";
 
 
-function initializeFixedTable() {
+function initFixedTable() {
   function setPreButtonPosition() {
     const wrapperSelector = '.uds-table-fixed-wrapper';
     const tableSelector = '.uds-table.uds-table-fixed table';
@@ -74,6 +74,6 @@ function initializeFixedTable() {
   });
 }
 
-EventHandler.on(window, 'load.uds.fixed-table', initializeFixedTable);
+EventHandler.on(window, 'load.uds.fixed-table', initFixedTable);
 
-export { initializeFixedTable };
+export { initFixedTable };
diff --git a/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js b/packages/unity-bootstrap-theme/src/js/unity-bootstrap.js
@@ -1,33 +1,33 @@
-import { initAnchorMenu } from "./anchor-menu.js";
 // import Banner from "./banner.js";
+import { initAnchorMenu } from "./anchor-menu.js";
 import { initBlockquoteAnimation } from "./blockquote-animated.js";
 import { initCalendar } from "./calendar.js";
-import { rankingFunc } from "./card-ranking.js";
+import { initRankingCard } from "./card-ranking.js";
 import { initChart } from "./charts-and-graphs.js";
 import { initDataLayer } from "./data-layer.js";
 import { initGlobalHeader } from "./global-header.js";
 import { initHeroesVideo } from "./heroes-video.js";
 import { initImageParallax } from "./image-parallax.js";
 import { initModals } from "./modals.js";
-import { initTabs } from "./tabbed-panels.js";
-import { initializeFixedTable } from "./tables.js";
+import { initTabbedPanels } from "./tabbed-panels.js";
+import { initFixedTable } from "./tables.js";
 import { initVideo } from "./video.js";
 
 const unityBootstrap = {
+  // Banner, // code updated to use bootstrap alert so we don't need this
   initAnchorMenu,
-  // Banner,
   initBlockquoteAnimation,
   initCalendar,
-  rankingFunc,
   initChart,
   initDataLayer,
+  initFixedTable,
   initGlobalHeader,
   initHeroesVideo,
   initImageParallax,
   initModals,
-  initializeFixedTable,
+  initRankingCard,
+  initTabbedPanels,
   initVideo,
-  initTabs,
 }
 
 export default unityBootstrap;
diff --git a/packages/unity-bootstrap-theme/stories/atoms/anchor-menu/anchor-menu.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/anchor-menu/anchor-menu.examples.stories.js
@@ -3,9 +3,13 @@ import React from "react";
 import { imageName } from "../../../../../shared/assets";
 import { htmlRootDecorator } from "../../../../../shared/components/Layout";
 import {getLoremSentences} from "../../../../../shared/constants/strings";
+
 export default {
   title: "Atoms/Anchor Menu",
   parameters: {
+    initFunc: {
+      disable: false,
+    },
     header: {
       forced: true,
     },
diff --git a/packages/unity-bootstrap-theme/stories/atoms/blockquote/blockquote.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/blockquote/blockquote.examples.stories.js
@@ -219,7 +219,11 @@ export const BlockquoteAnimated = () => (
 
   </>
 );
-
+BlockquoteAnimated.parameters = {
+  initFunc: {
+    disable: false,
+  },
+};
 export const TestimonialsNoImage = () => (
   <>
     <div className="uds-blockquote uds-testimonial accent-gold uds-content-align">
diff --git a/packages/unity-bootstrap-theme/stories/atoms/modals/modals.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/modals/modals.examples.stories.js
@@ -3,6 +3,9 @@ import React from "react";
 export default {
   title: "Atoms/Modals/Examples",
   parameters: {
+    initFunc: {
+      disable: false,
+    },
     header: {
       forced: true,
     },
diff --git a/packages/unity-bootstrap-theme/stories/atoms/modals/modals.templates.stories.js b/packages/unity-bootstrap-theme/stories/atoms/modals/modals.templates.stories.js
@@ -6,12 +6,15 @@ export default {
   title: "Atoms/Modals/Templates",
   decorators: [ defaultDecorator ],
   parameters: {
+    initFunc: {
+      disable: false,
+    },
     header: {
       forced: true,
     },
     footer: {
       forced: true,
-    }
+    },
   },
   args: {open: true},
   argTypes: {
diff --git a/packages/unity-bootstrap-theme/stories/atoms/video/video.templates.stories.js b/packages/unity-bootstrap-theme/stories/atoms/video/video.templates.stories.js
@@ -13,6 +13,11 @@ export default {
       control: { type: "boolean" },
     },
   },
+  parameters: {
+    initFunc: {
+      disable: false,
+    },
+  },
 };
 
 export const Default = ({content}) =>
diff --git a/packages/unity-bootstrap-theme/stories/docs/GetStarted/get-started.stories.mdx b/packages/unity-bootstrap-theme/stories/docs/GetStarted/get-started.stories.mdx
@@ -17,12 +17,37 @@ This is the Storybook reference site for the Unity Bootstrap theme. Browse the d
 
 ## ❯ Including Unity in your project
 
-We bundle the necessary CSS  and Javascript in the `dist/` folder. There are more options so you don't have to include CSS you don't use.
-
-* `dist/unity-bootstrap-theme.bundle.css` - base theme with header and footer CSS
-* `dist/unity-bootstrap-theme.css` - base theme without header and footer CSS
-* `dist/unity-bootstrap-header.css` (optional) - header CSS only - don't use if using the Unity `component-header` React component
-* `dist/unity-bootstrap-footer.css` (optional) - footer CSS only - don't use if using the Unity `component-footer` React component
+We bundle the necessary CSS and Javascript in the `dist/` folder. There are more options so you don't have to include CSS you don't use.
+### CSS
+* `dist/css/unity-bootstrap-theme.bundle.css` - base theme with header and footer CSS
+* `dist/css/unity-bootstrap-theme.css` - base theme without header and footer CSS
+* `dist/css/unity-bootstrap-header-footer.css` (optional) - header and footer CSS only - don't use if using the Unity `component-header-footer` React component
+
+### Javascript
+All you need to do is include the script on your page, the scripts will execute with the window load event.
+We provide 3 formats ("UMD", "CJS", "ES").
+* exports:
+  * `initAnchorMenu`,
+  * `initBlockquoteAnimation`,
+  * `initCalendar`,
+  * `initChart`,
+  * `initDataLayer`,
+  * `initFixedTable`,
+  * `initGlobalHeader`,
+  * `initHeroesVideo`,
+  * `initImageParallax`,
+  * `initModals`,
+  * `initRankingCard`,
+  * `initTabbedPanels`,
+  * `initVideo`,
+* Unity File Formats
+  * dist/js/unity-bootstrap.umd.js (universal)
+    * creates a global variable `unityBootstrap` if you need to manaully call the init function ex: `unityBootstrap.initAnchorMenu()`
+  * dist/js/unity-bootstrap.cjs.js (common js)
+  * dist/js/unity-bootstrap.es.js (module)
+* Vendor Files
+  * dist/js/bootstrap.bundle.min.js (unaltered bootstrap version)
+  * dist/js/chart.min.js (only needed if you are using the donut chart)
 
 ## ❯ How to  use the Unity Storybook reference site
 
diff --git a/packages/unity-bootstrap-theme/stories/molecules/banners/banners.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/banners/banners.templates.stories.js
@@ -25,6 +25,11 @@ export default {
   args: {
     color: "Orange",
   },
+  parameters: {
+    initFunc: {
+      disable: false,
+    },
+  },
 };
 
 export const Banner = ({color}) => {
diff --git a/packages/unity-bootstrap-theme/stories/molecules/calendar/calendar.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/calendar/calendar.templates.stories.js
@@ -6,6 +6,9 @@ export default {
   title: "Molecules/Calendar/Templates",
   decorators: [ defaultDecorator ],
   parameters: {
+    initFunc: {
+      disable: false,
+    },
     controls: { disable: true }
   },
 };
diff --git a/packages/unity-bootstrap-theme/stories/molecules/cards/cards.examples.stories.js b/packages/unity-bootstrap-theme/stories/molecules/cards/cards.examples.stories.js
@@ -1530,6 +1530,11 @@ export const RankingCardLarge = () => (
     </div>
   </div>
 );
+RankingCardLarge.parameters = {
+  initFunc: {
+    disable: false,
+  },
+};
 RankingCardLarge.decorators = [ defaultDecorator ];
 
 export const RankingCardSmall = () => (
@@ -1598,4 +1603,9 @@ export const RankingCardSmall = () => (
     </div>
   </div>
 );
+RankingCardSmall.parameters = {
+  initFunc: {
+    disable: false,
+  },
+};
 RankingCardSmall.decorators = [ defaultDecorator ];
diff --git a/packages/unity-bootstrap-theme/stories/molecules/charts-and-graphs/charts-and-graphs.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/charts-and-graphs/charts-and-graphs.templates.stories.js
@@ -6,6 +6,9 @@ export default {
   title: "Molecules/Charts And Graphs/Templates",
   decorators: [ defaultDecorator ],
   parameters: {
+    initFunc: {
+      disable: false,
+    },
     controls: { disable: true }
   },
 };
diff --git a/packages/unity-bootstrap-theme/stories/molecules/heroes/heroes.examples.stories.js b/packages/unity-bootstrap-theme/stories/molecules/heroes/heroes.examples.stories.js
@@ -241,3 +241,9 @@ export const HeroVideo = () => (
     </div>
   </div>
 );
+
+HeroVideo.parameters = {
+  initFunc: {
+    disable: false,
+  },
+};
diff --git a/packages/unity-bootstrap-theme/stories/molecules/image-parallax/image-parallax.examples.stories.js b/packages/unity-bootstrap-theme/stories/molecules/image-parallax/image-parallax.examples.stories.js
@@ -7,6 +7,9 @@ export default {
   title: "Molecules/Image Parallax/Examples",
   decorators: [ defaultDecorator ],
   parameters: {
+    initFunc: {
+      disable: false,
+    },
     controls: { disable: true }
   }
 };
diff --git a/packages/unity-bootstrap-theme/stories/molecules/tabbed-panels/tabbed-panels.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/tabbed-panels/tabbed-panels.templates.stories.js
@@ -252,5 +252,10 @@ export const TabbedPanels = (args) => {
 export default {
   title: "Molecules/Tabbed Panels",
   component: TabbedPanels,
-  argTypes: {...extraOptions}
+  argTypes: {...extraOptions},
+  parameters: {
+    initFunc: {
+      disable: false,
+    },
+  },
 };
diff --git a/packages/unity-bootstrap-theme/stories/molecules/tables/tables.templates.stories.js b/packages/unity-bootstrap-theme/stories/molecules/tables/tables.templates.stories.js
@@ -125,3 +125,9 @@ FixedComponent.args = {
   fixed: true,
   columns: 7,
 }
+FixedComponent.parameters = {
+  initFunc: {
+    disable: false,
+  },
+};
+
diff --git a/packages/unity-bootstrap-theme/stories/organisms/global-footer/global-footer.examples.stories.js b/packages/unity-bootstrap-theme/stories/organisms/global-footer/global-footer.examples.stories.js
@@ -15,6 +15,9 @@ export default {
   title: "Organisms/Global Footer/Examples",
   argTypes: {},
   parameters: {
+    initFunc: {
+      disable: false,
+    },
     footer: {
       disable: true
     },
diff --git a/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.examples.stories.js b/packages/unity-bootstrap-theme/stories/organisms/global-header/global-header.examples.stories.js
@@ -14,6 +14,9 @@ export default {
   title: "Organisms/Global Header/Examples",
   decorators: [ htmlRootDecorator ],
   parameters: {
+    initFunc: {
+      disable: false,
+    },
     header: {
       disable: true
     },
diff --git a/packages/unity-bootstrap-theme/vite.config.bundle.js b/packages/unity-bootstrap-theme/vite.config.bundle.js
diff --git a/packages/unity-bootstrap-theme/vite.config.js b/packages/unity-bootstrap-theme/vite.config.js
