@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

package/dist/collection/global/global.js

@@ -1,39 +1,99 @@
 import { setMode } from "@stencil/core";
+import { version } from "../../package.json";
+// PRINT RIPPLE VERSION IN CONSOLE
+// test envs return 0 for plugin.length
+// do not print version number there as it causes issues
 if (window.navigator.plugins.length > 0) {
-  // excluding test envs (which will return 0 for plugin.length)
-  console.log("Ripple component library version 3.0.0");
+    console.log("%cRipple component library %c%s", "color: #575195; font-weight: bold", "font-weight: bold", version);
 }
 // Dispatching events to track whether user is navigating with keyboard or mouse
-// (for focus states)
-window.addEventListener("keydown", wmComponentKeys);
-window.addEventListener("mousedown", wmComponentMouseDownOnce);
+// no longer necessary for keyboard focus indicators (thanks to :focus-visible)
+// but still used in several components for other things (search for isTabbing)
 function wmComponentKeys(ev) {
-  var key = ev.key || ev.keyCode;
-  if (key == "Tab" || key === 9) {
-    var event = new Event("wmUserIsTabbing");
-    window.dispatchEvent(event);
-    document.querySelector("body").classList.add("wmcl-user-is-tabbing");
-  }
-  if (key == "ArrowLeft" ||
-    key === 37 ||
-    key == "ArrowUp" ||
-    key === 38 ||
-    key == "ArrowRight" ||
-    key === 39 ||
-    key == "ArrowDown" ||
-    key === 40) {
-    var event = new Event("wmUserIsKeying");
-    window.dispatchEvent(event);
-    document.querySelector("body").classList.add("wmcl-user-is-keying");
-  }
+    if (ev.key == "Tab") {
+        var event = new Event("wmUserIsTabbing");
+        window.dispatchEvent(event);
+        document.querySelector("body").classList.add("wmcl-user-is-tabbing");
+    }
+    if (ev.key == "ArrowLeft" || ev.key == "ArrowUp" || ev.key == "ArrowRight" || ev.key == "ArrowDown") {
+        var event = new Event("wmUserIsKeying");
+        window.dispatchEvent(event);
+        document.querySelector("body").classList.add("wmcl-user-is-keying");
+    }
 }
 function wmComponentMouseDownOnce() {
-  var event = new Event("wmUserIsNotTabbing");
-  window.dispatchEvent(event);
-  document.querySelector("body").classList.remove("wmcl-user-is-tabbing");
-  document.querySelector("body").classList.remove("wmcl-user-is-keying");
+    var event = new Event("wmUserIsNotTabbing");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.remove("wmcl-user-is-tabbing");
+    document.querySelector("body").classList.remove("wmcl-user-is-keying");
 }
+window.addEventListener("keydown", wmComponentKeys);
+window.addEventListener("mousedown", wmComponentMouseDownOnce);
+// MODES (FOR PRODUCT-SPECIFIC STYLING)
 //Checks for mode attribute explicitly set on the document. If "mode" is set on component, it will override the global mode. Falls back to default (Planning styles)
 setMode((elm) => {
-  return elm.getAttribute("mode") || document.documentElement.getAttribute("mode") || "planning";
+    return elm.getAttribute("mode") || document.documentElement.getAttribute("mode") || "planning";
 });
+// TOOLTIP
+// Add a tooltip element
+// This allows tooltips to be always at the highest stacking context (always on top)
+// Element is added withing a container to avoid performance impact
+const tooltipContainer = document.createElement("div");
+tooltipContainer.id = "wm-tooltip-container";
+const tooltipEl = document.createElement("div");
+tooltipEl.id = "wm-tooltip";
+tooltipEl.classList.add("wm-tooltip");
+tooltipEl.setAttribute("popover", "manual");
+tooltipEl.setAttribute("aria-hidden", "true");
+const tooltipStyles = document.createElement("style");
+tooltipStyles.textContent = `
+.wm-tooltip {
+  position: fixed;
+  overflow: hidden;
+  pointer-events: none;
+  line-height: normal;
+  font-family: inherit;
+  font-size: 0.875rem;
+  text-transform: none;
+  font-weight: normal;
+  background: var(--wmcolor-tooltip-background);
+  color: var(--wmcolor-tooltip-text);
+  z-index: 999999;
+  max-width: var(--wmTooltipMaxWidth, 13.75rem);
+  margin-right: 1.5rem;
+  padding: 0.375rem;
+  transition-property: opacity;
+  transition-delay: 0s;
+  opacity: 0;
+  inset: unset;
+  top: 0;
+  left: 0;
+  transform: translateZ(0);
+  will-change: transform;
+  transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));
+  border: none;
+}
+
+.wm-tooltip:popover-open {
+  opacity: 0;
+}
+
+.wm-tooltip.show {
+  transition-delay: 500ms;
+  opacity: 1;
+}
+`;
+const body = document.querySelector("body");
+if (body) {
+    document.head.appendChild(tooltipStyles);
+    tooltipContainer.appendChild(tooltipEl);
+    body.appendChild(tooltipContainer);
+}
+else {
+    document.addEventListener("DOMContentLoaded", () => {
+        const body = document.querySelector("body");
+        document.head.appendChild(tooltipStyles);
+        tooltipContainer.appendChild(tooltipEl);
+        body.appendChild(tooltipContainer);
+    });
+}

package/dist/collection/global/interfaces.js

@@ -1,49 +1,72 @@
 //List of icon codes with more indicative descriptors to create labels for icon-only buttons
 export const iconLabels = {
-  f156: "Close",
-  f3eb: "Edit",
-  f739: "Cancel",
-  f12c: "Save",
-  f1c0: "Delete",
-  f349: "Search",
-  f207: "Export info",
-  f1d9: "Open dropdown",
-  f04d: "Go back",
-  f054: "Go forward",
-  f141: "Left",
-  f142: "Right",
-  f35e: "Menu left",
-  f35d: "Toggle menu down",
-  f30d: "Backspace",
-  f645: "Sort hierarchically",
-  f4bb: "Sort alphabetically",
+    f156: "Close",
+    f3eb: "Edit",
+    f739: "Cancel",
+    f12c: "Save",
+    f1c0: "Delete",
+    f349: "Search",
+    f207: "Export info",
+    f1d9: "Open dropdown",
+    f04d: "Go back",
+    f054: "Go forward",
+    f141: "Left",
+    f142: "Right",
+    f35e: "Menu left",
+    f35d: "Toggle menu down",
+    f30d: "Backspace",
+    f645: "Sort hierarchically",
+    f4bb: "Sort alphabetically",
 };
 export function getIconCodeFromName(icon) {
-  return iconCodes[icon] || icon;
+    return iconCodes[icon] || icon;
 }
 const iconCodes = {
-  close: "f156",
-  pencil: "f3eb",
-  cancel: "f739",
-  check: "f12c",
-  delete: "f1c0",
-  magnify: "f349",
-  export: "f207",
-  "dots-vertical": "f1d9",
-  "arrow-left": "f04d",
-  "arrow-right": "f054",
-  "chevron-left": "f141",
-  "chevron-right": "f142",
-  "menu-left": "f35e",
-  "menu-down": "f35d",
-  "keyboard-backspace": "f30d",
-  "file-tree": "f645",
-  "sort-alphabetical": "f4bb",
-  "checkbox-marked-circle": "f133",
-  "account-settings": "f630",
-  "backup-restore": "f06f",
+    close: "f156",
+    pencil: "f3eb",
+    cancel: "f739",
+    check: "f12c",
+    delete: "f1c0",
+    magnify: "f349",
+    export: "f207",
+    "dots-vertical": "f1d9",
+    "arrow-left": "f04d",
+    "arrow-right": "f054",
+    "chevron-left": "f141",
+    "chevron-right": "f142",
+    "menu-left": "f35e",
+    "menu-down": "f35d",
+    "keyboard-backspace": "f30d",
+    "file-tree": "f645",
+    "sort-alphabetical": "f4bb",
+    "checkbox-marked-circle": "f133",
+    "account-settings": "f630",
+    "backup-restore": "f06f",
 };
 export const defaultMode = "planning";
 export const getWmMode = (ref) => {
-  return ref.getAttribute("mode") || document.documentElement.getAttribute("mode") || defaultMode;
+    return (ref.getAttribute("mode") ||
+        document.documentElement.getAttribute("mode") ||
+        defaultMode);
+};
+export const chartPalettes = {
+    discrete: [
+        "wmcolor-dataviz-discrete-01",
+        "wmcolor-dataviz-discrete-02",
+        "wmcolor-dataviz-discrete-03",
+        "wmcolor-dataviz-discrete-04",
+        "wmcolor-dataviz-discrete-05",
+        "wmcolor-dataviz-discrete-06",
+        "wmcolor-dataviz-discrete-07",
+    ],
+    semantic: [
+        "wmcolor-dataviz-semantic-positive-01",
+        "wmcolor-dataviz-semantic-positive-02",
+        "wmcolor-dataviz-semantic-negative-01",
+        "wmcolor-dataviz-semantic-negative-02",
+        "wmcolor-dataviz-semantic-neutral-01",
+        "wmcolor-dataviz-semantic-neutral-02",
+        "wmcolor-dataviz-semantic-neutral-03",
+        "wmcolor-dataviz-semantic-unspecified",
+    ],
 };

package/dist/collection/global/intl.js

@@ -0,0 +1,274 @@
+import { intl } from "./functions";
+export const globalMessages = {
+    characterLimitReached: intl.formatMessage({
+        id: "global.characterLimitReached",
+        defaultMessage: "No additional characters will be entered.",
+        description: "for screen readers",
+    }),
+    close: intl.formatMessage({
+        id: "global.closeVerb",
+        defaultMessage: "Close",
+        description: "For a button, to close a user interface element",
+    }),
+    genericError: intl.formatMessage({
+        id: "global.genericError",
+        defaultMessage: "An error occurred. Please try again.",
+    }),
+    hide: intl.formatMessage({
+        id: "global.hideVerb",
+        defaultMessage: "Hide",
+        description: "For a button, to hide something",
+    }),
+    locked: intl.formatMessage({
+        id: "global.locked",
+        defaultMessage: "locked",
+        description: "For an interactive element, indicating its state cannot be changed",
+    }),
+    newWindow: intl.formatMessage({
+        id: "global.newWindowLink",
+        defaultMessage: "Opens in a new window.",
+        description: "Indicates that a focused link will open in a new window",
+    }),
+    next: intl.formatMessage({
+        id: "global.next",
+        defaultMessage: "Next",
+        description: "Button text, indicating an action leading to a 'next' state",
+    }),
+    open: intl.formatMessage({
+        id: "global.openVerb",
+        defaultMessage: "Open",
+        description: "For a button, to open a user interface element",
+    }),
+    previous: intl.formatMessage({
+        id: "global.previous",
+        defaultMessage: "Previous",
+        description: "Button text, indicating an action leading to a 'previous' state",
+    }),
+    requiredError: intl.formatMessage({
+        id: "global.requiredError",
+        defaultMessage: "This field is required.",
+        description: "Error displayed under a required field when it has not been filled",
+    }),
+    requiredField: intl.formatMessage({
+        id: "global.requiredField",
+        defaultMessage: "required field",
+        description: "Screen reader text, indicating the currently focused field is required",
+    }),
+    show: intl.formatMessage({
+        id: "global.showVerb",
+        defaultMessage: "Show",
+        description: "For a button, to show something",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getCharactersEntered: (charCount, charLimit) => intl.formatMessage({
+        id: "global.charactersEntered",
+        defaultMessage: "{x, number} of {y, number} characters entered.",
+        description: "for screen readers",
+    }, { x: charCount, y: charLimit }),
+    getCharacterLimit: (characterLimit) => intl.formatMessage({
+        id: "global.characterLimit",
+        defaultMessage: "{limit, number} characters allowed.",
+        description: "for screen readers",
+    }, { limit: characterLimit }),
+};
+export const uploaderMessages = {
+    duplicateName: intl.formatMessage({
+        id: "uploader.duplicateName",
+        defaultMessage: "A file with this name already exists.",
+    }),
+    fileLimitExceeded: intl.formatMessage({
+        id: "uploader.fileUploadLimitExceeded",
+        defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
+        description: "Message displayed when trying to upload too many files",
+    }),
+    fileLimitReached: intl.formatMessage({
+        id: "uploader.fileUploadLimitReached",
+        defaultMessage: "The maximum number of files has been reached",
+        description: "Message displayed when trying to upload additional files, but the limit has been reached",
+    }),
+    finishedUploading: intl.formatMessage({
+        id: "uploader.finishedUploading",
+        defaultMessage: "Finished uploading",
+    }),
+    waitToUpload: intl.formatMessage({
+        id: "uploader.waitToUpload",
+        defaultMessage: "Please wait for current upload to complete before uploading new files.",
+        description: "Message for screen reader users",
+    }),
+    zeroFileSize: intl.formatMessage({
+        id: "uploader.zeroFileSize",
+        defaultMessage: "The file must be more than 0 bytes",
+        description: "Error message when user attempts to upload a file of no size",
+    }),
+    dropInstructions: intl.formatMessage({
+        id: "uploader.dropInstructions",
+        defaultMessage: "Browse or Drag Files Here",
+        description: "Instructions for how to choose files to upload",
+    }),
+    dropFile: intl.formatMessage({
+        id: "uploader.dropFile",
+        defaultMessage: "Drop to Upload",
+        description: "Prompt for use to drop the file they're currently dragging",
+    }),
+    fileRequirements: intl.formatMessage({
+        id: "uploader.fileRequirements",
+        defaultMessage: "File Requirements",
+        description: "Expandable button revealing the uploader's file requirements",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getFilesAdded: (numFiles) => intl.formatMessage({
+        id: "uploader.filesAdded",
+        defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
+    }, { numFiles: numFiles }),
+    getFileCount: (fileListLength, maxFiles) => intl.formatMessage({
+        id: "uploader.fileCount",
+        defaultMessage: "{x} of {y} Files",
+        description: "A count of the number of files currently uploaded",
+    }, { x: fileListLength, y: maxFiles }),
+    getFileTooLarge: (maxSize) => intl.formatMessage({
+        id: "uploader.fileTooLarge",
+        defaultMessage: "The selected file is too large. Maximum file size is {size}",
+    }, { size: maxSize }),
+    getFilesUploading: (numFilesUploading) => intl.formatMessage({
+        id: "uploader.filesUploading",
+        defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
+    }, { num: numFilesUploading }),
+    getInvalidFileType: (validTypes) => intl.formatMessage({
+        id: "uploader.invalidFileType",
+        defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
+    }, { validTypes }),
+    getUploadProgress: (percentage) => intl.formatMessage({
+        id: "uploader.uploadProgress",
+        defaultMessage: "Upload progress: {percentage}%",
+    }, { percentage: percentage }),
+};
+export const chartMessages = {
+    interactiveChart: intl.formatMessage({
+        id: "chart.interactiveChart",
+        defaultMessage: "Interactive chart",
+        description: "For screen readers only, a description clarifying the role of the chart widget",
+    }),
+};
+export const lineChartMessages = {
+    instructions: intl.formatMessage({
+        id: "linechart.instructions",
+        defaultMessage: "Use Tab and arrow keys to browse elements.",
+        description: "For screen readers only, instructions on how to interact with the line chart component",
+    }),
+    noData: intl.formatMessage({
+        id: "linechart.noData",
+        defaultMessage: "No Data",
+        description: "Message displayed when a data point has missing data",
+    }),
+    highlightQualifier: intl.formatMessage({
+        id: "linechart.highlightQualifier",
+        defaultMessage: "highlighted",
+        description: "Descriptor for highlighted areas of a chart",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getChangeSince: (prevXValue) => intl.formatMessage({
+        id: "linechart.changeSince",
+        defaultMessage: "Change since {time}",
+        description: "Indicates a comparison between current and previous data",
+    }, {
+        time: prevXValue,
+    }),
+    getToggleButtonLabel: (itemCount) => intl.formatMessage({
+        id: "linechart.toggleButtonLabel",
+        defaultMessage: "Toggle line visibility, list with {itemCount} items",
+    }, {
+        itemCount: itemCount,
+    }),
+    getToggleButtonState: (isPressed) => intl.formatMessage({
+        id: "linechart.toggleButtonState",
+        defaultMessage: "toggle {isPressed, select, true {pressed} other {}}",
+        description: "Descriptor and state for a toggle button UI element",
+    }, {
+        isPressed: isPressed,
+    }),
+    getLineFocusAnnouncement: (label, lineNumber, lineTotal, lineLength) => intl.formatMessage({
+        id: "linechart.getLineFocusAnnouncement",
+        defaultMessage: `{label}, line {lineNumber} of {lineTotal} with {lineLength} data points`,
+    }, {
+        label: label,
+        lineNumber: lineNumber,
+        lineTotal: lineTotal,
+        lineLength: lineLength,
+    }),
+};
+export const selectMessages = {
+    multiPlaceholder: intl.formatMessage({
+        id: "select.multiPlaceholder",
+        defaultMessage: "Make a selection",
+    }),
+    singlePlaceholder: intl.formatMessage({
+        id: "select.singlePlaceholder",
+        defaultMessage: "Select an Option",
+    }),
+    multiClearSelection: intl.formatMessage({
+        id: "select.multiClearSelection",
+        defaultMessage: "Clear all Selections",
+        description: "Clear as in remove. Use imperative",
+    }),
+    singleClearSelection: intl.formatMessage({
+        id: "select.singleClearSelection",
+        defaultMessage: "Clear Selection",
+        description: "Clear as in remove. Use imperative",
+    }),
+    selectionCleared: intl.formatMessage({
+        id: "select.selectionCleared",
+        defaultMessage: "Selection cleared",
+    }),
+    searchPlaceholder: intl.formatMessage({
+        id: "select.searchPlaceholder",
+        defaultMessage: "Search",
+        description: "Appears in a search field UI element",
+    }),
+    allSelected: intl.formatMessage({
+        id: "select.allSelected",
+        defaultMessage: "All selected",
+        description: "Indicates all possible options have been selected",
+    }),
+    selectAllMessage: intl.formatMessage({
+        id: "select.selectAll",
+        defaultMessage: "Select All",
+    }),
+    deselectAllMessage: intl.formatMessage({
+        id: "select.deselectAll",
+        defaultMessage: "Deselect All",
+    }),
+    allOptionsSelectedMessage: intl.formatMessage({
+        id: "select.allOptionsSelected",
+        defaultMessage: "All options selected",
+    }),
+    allOptionsDeselectedMessage: intl.formatMessage({
+        id: "select.allOptionsDeselected",
+        defaultMessage: "All options deselected",
+    }),
+    noSearchResults: intl.formatMessage({
+        id: "select.noSearchResults",
+        defaultMessage: "No results found. Please try your search again.",
+    }),
+    optgroupSingleSelectionCount: () => intl.formatMessage({
+        id: "select.optgroupSingleSelectionCount",
+        defaultMessage: "Item Selected",
+        description: "Item refers to an option in a list",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getOptgroupMultipleSelectionCount: (selectionCount) => intl.formatMessage({
+        id: "select.optgroupMultipleSelectionCount",
+        defaultMessage: "{numberSelected} selected",
+    }, { numberSelected: selectionCount }),
+    getSearchResultsFound: (numResults) => intl.formatMessage({
+        id: "select.searchResultsFound",
+        defaultMessage: "{numberResults, plural, one {1 option found} other {# options found}}",
+    }, { numberResults: numResults }),
+};