@watermarkinsights/ripple 0.0.0-1 → 0.0.1

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

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

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

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

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

@@ -1,137 +0,0 @@
-/* --------------------------------------
-   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;
-}