@watermarkinsights/ripple 3.0.1-0 → 3.0.2-0

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.css

@@ -0,0 +1,94 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* USAGE */
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+:host *,
+priv-navigator-button * {
+  box-sizing: border-box;
+}
+:host .navigator,
+priv-navigator-button .navigator {
+  color: #575195;
+  padding: 0 1.25rem;
+  position: static !important;
+  height: 100%;
+  background: transparent;
+  border: none;
+  min-height: 3.75rem;
+  cursor: pointer;
+  border-radius: 0;
+  top: 50%;
+}
+:host .navigator img,
+priv-navigator-button .navigator img {
+  height: 2.25rem;
+  width: 2.25rem;
+  vertical-align: middle;
+}
+:host .navigator:hover,
+priv-navigator-button .navigator:hover {
+  background: #dcdbde;
+}
+:host .navigator:active, :host .navigator:focus,
+priv-navigator-button .navigator:active,
+priv-navigator-button .navigator:focus {
+  outline: none;
+}
+:host .navigator.user-is-tabbing:focus,
+priv-navigator-button .navigator.user-is-tabbing:focus {
+  -webkit-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
+  -moz-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
+  box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
+}
+:host .navigator.user-is-tabbing:focus::-moz-focus-inner,
+priv-navigator-button .navigator.user-is-tabbing:focus::-moz-focus-inner {
+  border: 0;
+}
+:host button:after,
+priv-navigator-button button:after {
+  vertical-align: middle;
+  height: 2.25rem;
+  width: 2.25rem;
+  background-size: 36px;
+  display: inline-block;
+  background-image: url(https://cdn.watermarkinsights.com/images/icons/appswitchericon_purple.svg);
+  content: "";
+}

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js

@@ -0,0 +1,97 @@
+import { Component, Element, h, Prop, Event } from "@stencil/core";
+export class PrivNavigatorButton {
+  constructor() {
+    this.expanded = false;
+    this.altText = "";
+    this.isTabbing = false;
+  }
+  handleClick() {
+    this.buttonActivated.emit();
+  }
+  render() {
+    const { handleClick, altText } = this;
+    const tabbingClass = this.isTabbing ? "user-is-tabbing" : "";
+    return (h("button", { "aria-expanded": this.expanded.toString(), class: `navigator ${tabbingClass}`, onClick: handleClick.bind(this), "aria-label": altText }));
+  }
+  static get is() { return "priv-navigator-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["priv-navigator-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["priv-navigator-button.css"]
+  }; }
+  static get properties() { return {
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "expanded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "altText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "alt-text",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "isTabbing": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-tabbing",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "buttonActivated",
+      "name": "buttonActivated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.css

@@ -0,0 +1,67 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* USAGE */
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+:host,
+priv-navigator-item {
+  list-style: none;
+  border-bottom: 1px solid #e0dde4;
+  width: 100%;
+  display: block;
+  cursor: pointer;
+}
+:host .navoption,
+priv-navigator-item .navoption {
+  color: #404248;
+  padding: 0.9375rem 1.25rem;
+  background: #fff;
+  font-size: 0.875rem;
+}
+:host .navoption.selected, :host .navoption:hover,
+priv-navigator-item .navoption.selected,
+priv-navigator-item .navoption:hover {
+  background: #e5e5e5;
+}
+:host .navoption.focused:not(.selected),
+priv-navigator-item .navoption.focused:not(.selected) {
+  background: #f4f4f4;
+  opacity: 1;
+}

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js

@@ -0,0 +1,114 @@
+import { Component, Element, h, Prop, Event, Listen } from "@stencil/core";
+export class PrivNavigatorItem {
+  constructor() {
+    this.selected = false;
+    this.focused = false;
+    this.link = "";
+  }
+  handleKeyDown(ev) {
+    const key = ev.key;
+    const el = this.el;
+    if (key !== "Tab") {
+      ev.preventDefault();
+    }
+    this.keydownOnNavItem.emit({ navItem: el, key: key });
+  }
+  render() {
+    const selectedClass = this.selected ? "selected" : "";
+    const focusedClass = this.focused ? "focused" : "";
+    return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` },
+      h("slot", null)));
+  }
+  static get is() { return "priv-navigator-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["priv-navigator-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["priv-navigator-item.css"]
+  }; }
+  static get properties() { return {
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "focused": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "focused",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "link": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "keydownOnNavItem",
+      "name": "keydownOnNavItem",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    navItem: HTMLPrivNavigatorItemElement;\n    key: string;\n  }",
+        "resolved": "{ navItem: HTMLPrivNavigatorItemElement; key: string; }",
+        "references": {
+          "HTMLPrivNavigatorItemElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "handleKeyDown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/wm-navigator/wm-navigator.css

@@ -0,0 +1,137 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* USAGE */
+/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
+/* TODO: replace with vars above whenever possible */
+/* Buttons */
+/* VIA */
+:host,
+wm-navigator {
+  height: 100%;
+  min-width: 0;
+  position: relative;
+  display: inline-block;
+}
+:host .wrapper,
+wm-navigator .wrapper {
+  overflow: auto;
+  font-size: 1.125rem;
+  min-width: 13.125rem;
+  width: auto;
+  max-height: 80vh;
+  text-align: left;
+  position: absolute;
+  z-index: 50;
+  top: 100%;
+  right: 20px;
+  left: auto;
+  background: #fff;
+  letter-spacing: normal;
+  -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
+  -ms-transition: transform 0.25s ease;
+  -webkit-transition: transform 0.25s ease;
+  -moz-transition: transform 0.25s ease;
+  transition: transform 0.25s ease;
+  -ms-transform-origin: center top;
+  -webkit-transform-origin: center top;
+  -moz-transform-origin: center top;
+  transform-origin: center top;
+  -ms-transform: scale(1, 1);
+  -webkit-transform: scale(1, 1);
+  -moz-transform: scale(1, 1);
+  transform: scale(1, 1);
+}
+:host .wrapper .user,
+wm-navigator .wrapper .user {
+  background: #f4f4f4;
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+}
+:host .wrapper .user p,
+wm-navigator .wrapper .user p {
+  margin: 0;
+}
+:host .wrapper .user p:first-child,
+wm-navigator .wrapper .user p:first-child {
+  font-weight: 700;
+  text-transform: capitalize;
+}
+:host .wrapper h2,
+wm-navigator .wrapper h2 {
+  background: #2e1b46;
+  color: #fff;
+  font-weight: 700;
+  margin: 0;
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+}
+:host .wrapper [role=listbox],
+wm-navigator .wrapper [role=listbox] {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+:host .wrapper.hide,
+wm-navigator .wrapper.hide {
+  -ms-transform: scale(1, 0);
+  -webkit-transform: scale(1, 0);
+  -moz-transform: scale(1, 0);
+  transform: scale(1, 0);
+}
+:host .wrapper.right,
+wm-navigator .wrapper.right {
+  right: auto;
+  left: 20px;
+}
+:host img,
+wm-navigator img {
+  transform: scale(0.8);
+  transform-origin: left center;
+  display: block;
+}
+:host .logout,
+wm-navigator .logout {
+  text-align: center;
+  text-transform: capitalize;
+}
+
+priv-navigator-item:focus {
+  outline: none;
+}