@progressiveui/react 2.0.3 → 2.0.5

package/src/globals/data/colors.json

@@ -1,273 +0,0 @@
-{
-  "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

@@ -1,39 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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/misc/event-matches.js

@@ -1,29 +0,0 @@
-/**
- * @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

@@ -1,24 +0,0 @@
-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

@@ -1,30 +0,0 @@
-/**
- * @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

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

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

@@ -1,53 +0,0 @@
-// 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

@@ -1,23 +0,0 @@
-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;