@progressiveui/react 1.22.0

package/src/globals/data/colors.json

@@ -0,0 +1,273 @@
+{
+  "brand": {
+    "name": "brand-01",
+    "hex": "#007DBC",
+    "scss": "$color__brand",
+    "css": "color__brand-01"
+  },
+  "navy": {
+    "name": "navy",
+    "hex": "#19486a",
+    "scss": "$color__navy"
+  },
+  "aqua": {
+    "name": "aqua",
+    "hex": "#26bde2",
+    "scss": "$color__aqua"
+  },
+  "dark-green": {
+    "name": "dark-green",
+    "hex": "#3f7e44",
+    "scss": "$color__dark-green"
+  },
+  "lime": {
+    "name": "lime",
+    "hex": "#8AD220",
+    "scss": "$color__lime"
+  },
+  "yellow": {
+    "name": "yellow",
+    "hex": "#F7B825",
+    "scss": "$color__yellow"
+  },
+  "ochre": {
+    "name": "ochre",
+    "hex": "#dda63a",
+    "scss": "$color__ochre"
+  },
+  "orange": {
+    "name": "orange",
+    "hex": "#fd6925",
+    "scss": "$color__orange"
+  },
+  "red": {
+    "name": "red",
+    "hex": "#c5192d",
+    "scss": "$color__red"
+  },
+  "dark-red": {
+    "name": "dark-red",
+    "hex": "#a21942",
+    "scss": "$color__dark-red"
+  },
+  "magenta": {
+    "name": "magenta",
+    "hex": "#dd1367",
+    "scss": "$color__magenta"
+  },
+  "female": {
+    "name": "female",
+    "hex": "#3f7e44",
+    "scss": "$color__female",
+    "type": "symbolic",
+    "description": "Indicate female"
+  },
+  "male": {
+    "name": "male",
+    "hex": "#26bde2",
+    "scss": "$color__male",
+    "type": "symbolic",
+    "description": "Indicate male"
+  },
+  "national": {
+    "name": "national",
+    "hex": "#3C5979",
+    "scss": "$color__national",
+    "type": "symbolic",
+    "description": "Indicate national staff"
+  },
+  "international": {
+    "name": "international",
+    "hex": "#fcc30b",
+    "scss": "$color__international",
+    "type": "symbolic",
+    "description": "Indicate international staff"
+  },
+  "brand-01": {
+    "name": "brand-01",
+    "hex": "#007DBC",
+    "scss": "var(--brand-01)",
+    "css": "color__brand-01",
+    "type": "ui",
+    "description": "WFP's corporate colour"
+  },
+  "interactive-01": {
+    "name": "interactive-01",
+    "hex": "#0b77c2",
+    "scss": "var(--interactive-01)",
+    "css": "color__interactive-01",
+    "type": "ui",
+    "description": "Primary interactive color, Primary buttons"
+  },
+  "interactive-02": {
+    "name": "interactive-02",
+    "hex": "#085387",
+    "scss": "$action-default-fill-primary-default-02",
+    "css": "color__interactive-02",
+    "type": "ui",
+    "description": "BannerNavigation"
+  },
+  "ui-01": {
+    "name": "ui-01",
+    "hex": "#fbfcfc",
+    "scss": "$ui-01",
+    "css": "color__ui-01",
+    "type": "ui",
+    "shortDescription": "Primary container background; Secondary page background",
+    "description": "This colour is used as the page background if there are no Modules on top of it."
+  },
+  "ui-02": {
+    "name": "ui-02",
+    "hex": "#eff2f5",
+    "scss": "$ui-02",
+    "css": "color__ui-02",
+    "type": "ui",
+    "shortDescription": "Primary page background; Secondary container background",
+    "description": "Use this colour as page background if there are modules on top of it to increase the contrast between the modules."
+  },
+  "ui-03": {
+    "name": "ui-03",
+    "hex": "#f0f3f6",
+    "scss": "$ui-03",
+    "css": "color__ui-03",
+    "type": "ui",
+    "shortDescription": "Subtle border, Tertiary background colour"
+  },
+  "ui-04": {
+    "name": "ui-04",
+    "hex": "#dfe3e6",
+    "scss": "$ui-04",
+    "css": "color__ui-04",
+    "type": "ui",
+    "shortDescription": "3:1 AA element contrast; Medium contrast border"
+  },
+  "ui-05": {
+    "name": "ui-05",
+    "hex": "#8c9ba5",
+    "scss": "$ui-03",
+    "css": "color__ui-05",
+    "type": "ui",
+    "shortDescription": "4.5:1 AA element contrast; High contrast border; Emphasis elements"
+  },
+  "text-01": {
+    "name": "text-01",
+    "hex": "#031c2d",
+    "scss": "$text-01",
+    "css": "color__text-01",
+    "type": "ui",
+    "shortDescription": "Primary text; Body copy; Headers; Hover text colour for text - 02"
+  },
+  "text-02": {
+    "name": "text-02",
+    "hex": "#5a6872",
+    "scss": "$text-02",
+    "css": "color__text-02",
+    "type": "ui",
+    "shortDescription": "Secondary text; Input labels; Help text"
+  },
+  "text-03": {
+    "name": "text-03",
+    "hex": "#dfe6eb",
+    "scss": "$text-03",
+    "css": "color__text-03",
+    "type": "ui",
+    "shortDescription": "Secondary text; Input labels; Help text"
+  },
+  "text-04": {
+    "name": "text-04",
+    "hex": "#ffffff",
+    "scss": "$text-04",
+    "css": "color__text-04",
+    "type": "ui",
+    "shortDescription": ""
+  },
+  "inverse-01": {
+    "name": "inverse-01",
+    "hex": "#fbfcfc",
+    "scss": "$inverse-01",
+    "css": "color__inverse-01",
+    "type": "ui"
+  },
+  "inverse-02": {
+    "name": "inverse-02",
+    "hex": "#f0f3f6",
+    "scss": "$inverse-02",
+    "css": "color__inverse-02",
+    "type": "ui"
+  },
+  "field-01": {
+    "name": "field-01",
+    "hex": "#f9fbfc",
+    "scss": "$field-02",
+    "css": "color__field-01",
+    "type": "ui"
+  },
+  "field-02": {
+    "name": "field-02",
+    "hex": "#fbfcfc",
+    "scss": "$field-02",
+    "css": "color__field-02",
+    "type": "ui"
+  },
+  "main": {
+    "name": "main",
+    "hex": "#007DBC",
+    "scss": "$color__main",
+    "type": "communications"
+  },
+  "brand-01-40": {
+    "name": "brand-01-40",
+    "hex": "#4792c7",
+    "scss": "$brand-01-40",
+    "css": "color__brand-01-40",
+    "type": "brand-extended"
+  },
+  "brand-01-60": {
+    "name": "brand-01-60",
+    "hex": "#085387",
+    "scss": "$brand-01-60",
+    "css": "color__brand-01-60",
+    "type": "brand-extended"
+  },
+  "brand-01-70": {
+    "name": "brand-01-70",
+    "hex": "#05375a",
+    "scss": "$brand-01-70",
+    "css": "color__brand-01-70",
+    "type": "brand-extended"
+  },
+  "brand-01-80": {
+    "name": "brand-01-80",
+    "hex": "#031c2d",
+    "scss": "$brand-01-80",
+    "css": "color__brand-01-80",
+    "type": "brand-extended"
+  },
+  "support-01": {
+    "name": "support-01",
+    "hex": "#c5192d",
+    "scss": "$support-01",
+    "css": "color__support-01",
+    "type": "support",
+    "shortDescription": "Error (same as color__red)",
+    "description": "Use the error color to indicate an error or to focus the attention on something which is crucial to see. Paired with a cross icon, red delivers the message that something went wrong."
+  },
+  "support-02": {
+    "name": "support-02",
+    "hex": "#689e18",
+    "scss": "$support-02",
+    "css": "color__support-02",
+    "type": "support",
+    "shortDescription": "Success",
+    "description": "Use green to indicate success state. Paired with a checkmark icon the user knows that the operation was successfully completed."
+  },
+  "support-03": {
+    "name": "support-03",
+    "hex": "#f7b825",
+    "scss": "$support-03",
+    "css": "color__support-03",
+    "type": "support",
+    "shortDescription": "Warning (same as color__yellow)",
+    "description": "Use yellow to indicate a transient warning which is less important than an error message. Yellow typically consists of items which require the user’s immediate attention, or indicate a waiting period. Although this overlaps with the use of red, yellow is more transient in nature."
+  }
+}

package/src/globals/js/boot.js

@@ -0,0 +1,39 @@
+import { settings } from './settings';
+import * as components from './components';
+
+/**
+ * The handles for event handlers to lazily instantiate components.
+ * @type {Handle[]}
+ */
+const lazyInitHandles = [];
+
+/**
+ * Instantiates components automatically
+ * by searching for elements with `data-component-name` (e.g. `data-loading`) attribute
+ * or upon DOM events (e.g. clicking) on such elements.
+ * See each components' static `.init()` methods for details.
+ * @private
+ */
+const init = () => {
+  const componentClasses = Object.keys(components)
+    .map((key) => components[key])
+    .filter((component) => typeof component.init === 'function');
+  if (!settings.disableAutoInit) {
+    componentClasses.forEach((Clz) => {
+      const h = Clz.init();
+      if (h) {
+        lazyInitHandles.push(h);
+      }
+    });
+  }
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  // DOMContentLoaded has been fired already
+  // Let consumer have chance to see if it wants automatic instantiation disabled, and then run automatic instantiation otherwise
+  setTimeout(init, 0);
+}
+
+export default lazyInitHandles;

package/src/globals/js/components.js

@@ -0,0 +1,36 @@
+export { default as Checkbox } from '../../components/checkbox/checkbox';
+/*
+export { default as FileUploader } from '../../components/file-uploader/file-uploader';
+export { default as FabButton } from '../../components/fab/fab';
+export { default as ContentSwitcher } from '../../components/content-switcher/content-switcher';
+export { default as Tab } from '../../components/tabs/tabs';
+export { default as OverflowMenu } from '../../components/overflow-menu/overflow-menu';
+export { default as Modal } from '../../components/modal/modal';
+export { default as Loading } from '../../components/loading/loading';
+export { default as Dropdown } from '../../components/dropdown/dropdown';
+export { default as Card } from '../../components/card/card';
+export { default as NumberInput } from '../../components/number-input/number-input';
+export { default as DataTable } from '../../components/data-table/data-table';
+export { default as DataTableV2 } from '../../components/data-table-v2/data-table-v2';
+export { default as DatePicker } from '../../components/date-picker/date-picker';
+export { default as DetailPageHeader } from '../../components/detail-page-header/detail-page-header';
+export { default as LeftNav } from '../../components/unified-header/left-nav';
+export { default as InteriorLeftNav } from '../../components/interior-left-nav/interior-left-nav';
+export { default as ProfileSwitcher } from '../../components/unified-header/profile-switcher';
+export { default as Pagination } from '../../components/pagination/pagination';
+*/
+export { default as Search } from '../../components/search/search';
+/*
+export { default as Accordion } from '../../components/accordion/accordion';
+export { default as CopyButton } from '../../components/copy-button/copy-button';
+export { default as Notification } from '../../components/notification/notification';
+export { default as Toolbar } from '../../components/toolbar/toolbar';
+export { default as Tooltip } from '../../components/tooltip/tooltip';
+export { default as ProgressIndicator } from '../../components/progress-indicator/progress-indicator';
+export { default as FloatingMenu } from '../../components/floating-menu/floating-menu';
+export { default as StructuredList } from '../../components/structured-list/structured-list';
+export { default as Slider } from '../../components/slider/slider';
+export { default as Tile } from '../../components/tile/tile';
+export { default as Carousel } from '../../components/carousel/carousel';
+export { default as Lightbox } from '../../components/lightbox/lightbox';
+*/

package/src/globals/js/index.js

@@ -0,0 +1 @@
+export { default as settings } from './settings';

package/src/globals/js/misc/event-matches.js

@@ -0,0 +1,29 @@
+/**
+ * @param {Event} event The event.
+ * @param {string} selector The selector.
+ * @returns {Element}
+ *   The closest ancestor of the event target (or the event target itself) which matches the selectors given in parameter.
+ */
+export default function eventMatches(event, selector) {
+  // <svg> in IE does not have `Element#msMatchesSelector()` (that should be copied to `Element#matches()` by a polyfill).
+  // Also a weird behavior is seen in IE where DOM tree seems broken when `event.target` is on <svg>.
+  // Therefore this function simply returns `undefined` when `event.target` is on <svg>.
+  const { target, currentTarget } = event;
+  if (typeof target.matches === 'function') {
+    if (target.matches(selector)) {
+      // If event target itself matches the given selector, return it
+      return target;
+    } else if (target.matches(`${selector} *`)) {
+      const closest = target.closest(selector);
+      if (
+        (currentTarget.nodeType === Node.DOCUMENT_NODE
+          ? currentTarget.documentElement
+          : currentTarget
+        ).contains(closest)
+      ) {
+        return closest;
+      }
+    }
+  }
+  return undefined;
+}

package/src/globals/js/misc/get-launching-details.js

@@ -0,0 +1,24 @@
+export default function getLaunchingDetails(evt) {
+  if (!evt || typeof evt === 'function') {
+    return {
+      launchingElement: null,
+      launchingEvent: null,
+    };
+  }
+
+  const launchingElement = evt.delegateTarget || evt.currentTarget || evt;
+  const launchingEvent = evt.currentTarget && evt;
+
+  if (launchingElement && !launchingElement.nodeType) {
+    throw new TypeError('DOM Node should be given for launching element.');
+  }
+
+  if (launchingEvent && !launchingEvent.type) {
+    throw new TypeError('DOM event should be given for launching event.');
+  }
+
+  return {
+    launchingElement,
+    launchingEvent,
+  };
+}

package/src/globals/js/misc/mixin.js

@@ -0,0 +1,30 @@
+/**
+ * @param {Array} a An array.
+ * @returns {Array} The flattened version of the given array.
+ */
+function flatten(a) {
+  return a.reduce((result, item) => {
+    if (Array.isArray(item)) {
+      result.push(...flatten(item));
+    } else {
+      result.push(item);
+    }
+    return result;
+  }, []);
+}
+
+/**
+ * An interface for defining mix-in classes. Used with {@link mixin}.
+ * @function mixinfn
+ * @param {Class} ToMix The class to mix.
+ * @returns {Class} The class mixed-in with the given ToMix class.
+ */
+
+/**
+ * @function mixin
+ * @param {...mixinfn} mixinfns The functions generating mix-ins.
+ * @returns {Class} The class generated with the given mix-ins.
+ */
+export default function mixin(...mixinfns) {
+  return flatten(mixinfns).reduce((Class, mixinfn) => mixinfn(Class), class {});
+}

package/src/globals/js/misc/on.js

@@ -0,0 +1,9 @@
+export default function on(element, ...args) {
+  element.addEventListener(...args);
+  return {
+    release() {
+      element.removeEventListener(...args);
+      return null;
+    },
+  };
+}

package/src/globals/js/misc/resize.js

@@ -0,0 +1,53 @@
+// mdn resize function
+
+const optimizedResize = (function optimizedResize() {
+  const callbacks = [];
+  let running = false;
+
+  // run the actual callbacks
+  function runCallbacks() {
+    callbacks.forEach(callback => {
+      callback();
+    });
+
+    running = false;
+  }
+
+  // fired on resize event
+  function resize() {
+    if (!running) {
+      running = true;
+      window.requestAnimationFrame(runCallbacks);
+    }
+  }
+
+  // adds callback to loop
+  function addCallback(callback) {
+    if (callback) {
+      const index = callbacks.indexOf(callback);
+      if (index < 0) {
+        callbacks.push(callback);
+      }
+    }
+  }
+
+  return {
+    // public method to add additional callback
+    add: callback => {
+      if (!callbacks.length) {
+        window.addEventListener('resize', resize);
+      }
+      addCallback(callback);
+      return {
+        release() {
+          const index = callbacks.indexOf(callback);
+          if (index >= 0) {
+            callbacks.splice(index, 1);
+          }
+        },
+      };
+    },
+  };
+})();
+
+export default optimizedResize;

package/src/globals/js/misc/svg-toggle-class.js

@@ -0,0 +1,23 @@
+function svgToggleClass(svg, name, forceAdd) {
+  const list = svg
+    .getAttribute('class')
+    .trim()
+    .split(/\s+/);
+  const uniqueList = Object.keys(
+    list.reduce((o, item) => Object.assign(o, { [item]: 1 }), {})
+  );
+  const index = uniqueList.indexOf(name);
+  const found = index >= 0;
+  const add = forceAdd === undefined ? !found : forceAdd;
+
+  if (found === !add) {
+    if (add) {
+      uniqueList.push(name);
+    } else {
+      uniqueList.splice(index, 1);
+    }
+    svg.setAttribute('class', uniqueList.join(' '));
+  }
+}
+
+export default svgToggleClass;