Merge pull request #16 from pepsico-ecommerce/vite_inline_css

Remove Inline CSS

Makefile

@@ -5,10 +5,9 @@ server: node_modules/
 
 build: node_modules/
 	cp src/styles.css dist/styles.css
-	npx ascjs src esm
-	# npx rollup --config rollup/es.config.js
-	npx rollup --config rollup/babel.config.js
-	npx webpack --mode=development
+	npx babel src -d dist
+	npx rollup -c rollup.config.js
+	npx rollup -c rollup.config.esm.js
 
 lint: node_modules/
 	npm run lint
@@ -17,6 +16,7 @@ clean:
 	-rm -f package-lock.json
 	-rm -r ./node_modules
 	-npm cache verify
+	-rm dist/*
 
 node_modules/: package.json
 	npm install

README.md

@@ -1,84 +1,88 @@
-# pep-tooltips
-Turn the attribute "tooltip" into tooltips with this drop in script using custom elements. Drop into a page and all new and existing elements with the `tooltip` attribute will be upgraded.
+# PEP-Tooltips: Simplify Tooltip Integration
 
-### Examples:
-```
-<div tooltip="Dollars per hour">$9,001</div>
+Enhance your web application's user experience by effortlessly incorporating tooltips using the PEP-Tooltips script. With minimal setup, this drop-in solution enables you to convert the "tooltip" attribute into interactive tooltips across your page.
+
+## Examples
 
+```html
+<div tooltip="Dollars per hour">$9,001</div>
 <button tooltip="We won't spam you!">Submit</button>
 ```
 
+## Installation via NPM
 
-## Install with NPM
-Install directly from the PepsiCo github repo.
-```
+Install directly from the PepsiCo GitHub repository:
+
+```bash
 npm install --save git+https://github.com/pepsico-ecommerce/pep-tooltips.git
 ```
 
+## Usage
 
-## How to Use
-Import/Include  the pep-tooltips once into your project.
-```
+1. Import the PEP-Tooltips script into your project:
+
+```javascript
 import 'pep-tooltips';
 ```
 
-Create a wrapper div with the id `pep-tooltips` to hold the tooltip content. You only need one of these elements on the page. All tooltips will re-use the same wrapper.
+2. Include the PEP-Tooltips CSS in your project:
+
+```javascript
+import './css/pep-tooltips.css';
 ```
+
+3. Create a single wrapper div with the id `pep-tooltips` to hold all tooltip content:
+
+```html
 <div id="pep-tooltips"></div>
 ```
 
+4. Apply the `tooltip` attribute to elements you want to attach tooltips to:
 
-Add the attribute `tooltip="tooltip text content"` to all the elements you want to show a tooltip.
-
-```
+```html
 <div tooltip="Dollars per hour">$9,001</div>
-
-<button tooltip="Complete The Pepsi Challenge">Submit<button>
+<button tooltip="Complete The Pepsi Challenge">Submit</button>
 ```
 
-## Applying custom styles
-In order to apply custom styling, add `data-tooltip-class` to the element you want to show a tooltip.
-Then in corresponding CSS file add rules for `#pep-tooltips.custom-tooltip`
+## Custom Styling
 
-```
+To customize the appearance of tooltips, utilize the `data-tooltip-class` attribute on the element. Then, in your CSS file, define rules for `#pep-tooltips.custom-tooltip`:
+
+```html
 <div tooltip="Dollars per hour" data-tooltip-class="custom-styles-for-tooltip">$9,001</div>
 ```
 
-```
+```css
 #pep-tooltips.custom-styles-for-tooltip {
   width: 500px;
 }
 ```
 
-## Properties
-You can configure the tooltip with custom data attributes.
+## Configuration
 
-* data-tooltip-class="custom-class"
-  * Adds `custom-class` to the tooltip container.
-* data-tooltip-arrow
-  * When set, enables the Arrow the points to the element.
-* data-tooltip-placement="auto"
-  * Sets the tooltip's placement. [offical docs](https://popper.js.org/docs/v2/constructors/#placement)
-* data-tooltip-offset-skidding
-  * [offical docs](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1)
-* data-tooltip-offset-distance
-  * [offical docs](https://popper.js.org/docs/v2/modifiers/offset/#distance-1)
+Tailor tooltips to your preferences using these custom data attributes:
 
+- `data-tooltip-class="custom-class"`: Adds the specified class to the tooltip container.
+- `data-tooltip-arrow`: Enables an arrow that points to the element.
+- `data-tooltip-placement="auto"`: Sets the tooltip's placement ([official docs](https://popper.js.org/docs/v2/constructors/#placement)).
+- `data-tooltip-offset-skidding`: Adjusts the tooltip's offset skidding ([official docs](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1)).
+- `data-tooltip-offset-distance`: Modifies the tooltip's offset distance ([official docs](https://popper.js.org/docs/v2/modifiers/offset/#distance-1)).
 
-## Install Other methods.
+## Alternative Installation Methods
 
-```
+For different installation approaches, consider the following methods:
+
+```html
 <link rel="stylesheet" href="dist/styles.css">
 <script src="dist/webpack.bundle.js"></script>
 ```
 
+## Running PEP-Tooltips Locally
 
-## Running pep-tootips locally
-If you want to work with `pep-tooltips` locally and test out your changes, follow these steps
-1. Go to pep-tooltips folder and run `npm link` command
-2. Go to the app folder that uses `pep-tooltips`, e.g. `pepsico-admin`,
-and run `npm link pep-tooltips` command there
-3. Back in pep-tooltips folder run `make build` command.
+If you wish to work with PEP-Tooltips locally and test changes, follow these steps:
 
-You now should be able to see your changes to `pep-tooltips`. Please note, you need to run step #3 and refresh the page of your host app after each change.
+1. Navigate to the PEP-Tooltips folder and run `npm link`.
+2. Move to the app folder using PEP-Tooltips (e.g., `pepsico-admin`) and execute `npm link pep-tooltips`.
+3. Back in the PEP-Tooltips folder, run `make build`.
 
+After completing these steps, you should observe your changes to PEP-Tooltips. Note that you need to perform step #3 and refresh your host app's page after each modification.

dist/index.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _wickedElements = require("wicked-elements");
+var _core = require("@popperjs/core");
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var ID_TOOLTIP = '#pep-tooltips';
+
+/**
+ * Upgrades elements with the `tooltip` attribute to enable tooltips.
+ * Positions the tooltip wrapper element
+ * and replaces the content with the value from the attribute.
+ */
+(0, _wickedElements.define)('[tooltip]', {
+  get elmTooltip() {
+    var elm = document.querySelector(ID_TOOLTIP);
+    if (!elm) {
+      throw new Error("Could not find the element ".concat(ID_TOOLTIP, ".\nThis element is required for tooltips."));
+    }
+    return elm;
+  },
+  onMouseenter: function onMouseenter() {
+    var _el$dataset, _el$dataset2, _el$dataset3, _el$dataset4, _el$dataset5;
+    var el = this.element;
+    var placement = ((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.tooltipPlacement) || 'auto'; // https://popper.js.org/docs/v2/constructors/#placement
+    var offsetSkidding = ((_el$dataset2 = el.dataset) === null || _el$dataset2 === void 0 ? void 0 : _el$dataset2.tooltipOffsetSkidding) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#skidding-1
+    var offsetDistance = ((_el$dataset3 = el.dataset) === null || _el$dataset3 === void 0 ? void 0 : _el$dataset3.tooltipOffsetDistance) || 1; // https://popper.js.org/docs/v2/modifiers/offset/#distance-1
+    var customClasses = ((_el$dataset4 = el.dataset) === null || _el$dataset4 === void 0 ? void 0 : _el$dataset4.tooltipClass) || null;
+    var useArrow = ((_el$dataset5 = el.dataset) === null || _el$dataset5 === void 0 ? void 0 : _el$dataset5.tooltipArrow) || false;
+    var body = this.element.getAttribute('tooltip');
+
+    // Skip if there is no tooltip text
+    if (body === '' || !body) {
+      return;
+    }
+    // Replace the content in the element with the text value from the attribute.
+    this.elmTooltip.innerHTML = body;
+    // if they want an arrow, append the div
+    if (useArrow) {
+      var elmArrow = document.createElement('div');
+      elmArrow.dataset.popperArrow = true;
+      this.elmTooltip.appendChild(elmArrow);
+    }
+    // Apply custom class
+    if (customClasses) {
+      var _this$elmTooltip$clas;
+      (_this$elmTooltip$clas = this.elmTooltip.classList).add.apply(_this$elmTooltip$clas, _toConsumableArray(customClasses.split(' ')));
+    }
+
+    // Create a popper to manage the element's position.
+    this.popper = (0, _core.createPopper)(this.element, this.elmTooltip, {
+      placement: placement,
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [offsetSkidding, offsetDistance]
+        }
+      }]
+    });
+
+    // Show the tooltip element.
+    this.elmTooltip.style.display = 'inherit';
+  },
+  onMouseleave: function onMouseleave() {
+    var _el$dataset6;
+    var el = this.element;
+    var customClasses = ((_el$dataset6 = el.dataset) === null || _el$dataset6 === void 0 ? void 0 : _el$dataset6.tooltipClass) || null;
+    // Reset the tooltip element so it can be re-used.
+    this.elmTooltip.innerHTML = '';
+    this.elmTooltip.style.display = 'none';
+    if (customClasses) {
+      var _this$elmTooltip$clas2;
+      (_this$elmTooltip$clas2 = this.elmTooltip.classList).remove.apply(_this$elmTooltip$clas2, _toConsumableArray(customClasses.split(' ')));
+    }
+    // remove the popper.
+    this.popper && this.popper.destroy();
+  },
+  onFocusOut: function onFocusOut() {
+    // Close the tooltip when the element loses focus.
+    // This happens when React updates the element.
+    this.onMouseleave();
+  }
+});