feat(tag popover): tag popover component implementation

docs/src/components-spec.json

@@ -273,6 +273,33 @@
       "icon-name": "text"
     }
   },
+
+  "gux-tag-popover": {
+    "attributes": {
+      "position": ["left", "right"],
+      "color": "text"
+    },
+    "events": { "deleteTag": "delete tag" }
+  },
+  "gux-tag": {
+    "attributes": {
+      "color": [
+        "navy",
+        "blue",
+        "electric-purple",
+        "aqua-green",
+        "fuscha",
+        "dark-purple",
+        "bubblegum-pink",
+        "olive-green",
+        "lilac",
+        "yellow-green"
+      ]
+    },
+    "events": {
+      "deleteTag": "Click on delete tag button"
+    }
+  },
   "gux-text-field": {
     "attributes": {
       "value": "text",

src/components/beta/gux-tag-popover/example.html

@@ -0,0 +1,30 @@
+
+<gux-tag-popover-beta position="right">
+    <gux-option>American English</gux-option>
+    <gux-option>Latin American Spanish</gux-option>
+    <gux-option>European Spanish</gux-option>
+    <gux-option>UK English</gux-option>
+    <gux-option>Canadian French</gux-option>
+    <gux-option>European French</gux-option>
+    <gux-option>Dutch</gux-option>
+</gux-tag-popover-beta>
+<br />
+<gux-tag-popover-beta color="dark-blue" position="left">
+    <gux-option>American English</gux-option>
+    <gux-option>Latin American Spanish</gux-option>
+    <gux-option>European Spanish</gux-option>
+    <gux-option>UK English</gux-option>
+    <gux-option>Canadian French</gux-option>
+    <gux-option>European French</gux-option>
+    <gux-option>Dutch</gux-option>
+</gux-tag-popover-beta>
+<br />
+<gux-tag-popover-beta color="dark-purple" position="left">
+    <gux-option>American English</gux-option>
+    <gux-option>Latin American Spanish</gux-option>
+    <gux-option>European Spanish</gux-option>
+    <gux-option>UK English</gux-option>
+    <gux-option>Canadian French</gux-option>
+    <gux-option>European French</gux-option>
+    <gux-option>Dutch</gux-option>
+</gux-tag-popover-beta>

src/components/beta/gux-tag-popover/gux-tag-popover.less

@@ -0,0 +1,302 @@
+@import (reference) '../../../style/color.less';
+
+// Variables part
+@grey: #222529;
+
+@menu-background-color: @gux-off-white;
+@menu-border-color: #dae1eb;
+
+@border-radius: 2px;
+
+// Style
+gux-tag-popover-beta {
+  div.gux-tag-popover {
+    position: relative;
+    margin: 4px 0;
+
+    &.right {
+      .gux-tag-popover-container {
+        text-align: right;
+      }
+      .arrow {
+        margin-right: 19px;
+        right: 0;
+      }
+    }
+
+    &.left {
+      .gux-tag-popover-container {
+        text-align: left;
+      }
+      .arrow {
+        margin-left: 19px;
+        left: 0;
+      }
+    }
+
+    .gux-tag-popover-container {
+      position: relative;
+      height: 32px;
+      width: 100%;
+
+      .gux-tag-popover-button {
+        button {
+          font-size: 16px;
+        }
+
+        &.has-tags > button {
+          color: @gux-dark-blue;
+        }
+
+        &:focus {
+          outline: none;
+          box-shadow: 0 0 0 3px fade(@gux-blue, 50%);
+        }
+      }
+    }
+
+    .gux-tag-popover-menu {
+      display: none;
+      box-shadow: 0 0 2px fade(@grey, 24%);
+      margin-top: 8px;
+      position: relative;
+      width: 100%;
+
+      .arrow,
+      .arrow::after {
+        position: absolute;
+        content: ' ';
+        height: 0;
+        width: 0;
+        border-style: solid;
+        border-color: transparent;
+      }
+      .arrow {
+        border-width: 6px;
+        border-bottom-color: @gux-border;
+        margin-top: -12px;
+      }
+      .arrow::after {
+        border-width: 4px;
+        border-bottom-color: @gux-off-white;
+        margin-top: -2px;
+        margin-left: -4px;
+      }
+
+      .gux-tag-popover-menu-container {
+        padding: 8px;
+        background: @gux-off-white;
+
+        .gux-tag-popover-options-container {
+          display: flex;
+
+          .gux-tag-popover-title {
+            padding: 0 5px;
+            white-space: nowrap;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+          }
+
+          .gux-tag-popover-chip-container {
+            margin-left: 7px;
+            padding: 2px 5px;
+            display: flex;
+            border-radius: @border-radius;
+            border: 1px solid @gux-charcoal-grey;
+            flex: 1 1 auto;
+            flex-wrap: wrap;
+            &.active {
+              border-color: @gux-dark-blue;
+            }
+          }
+
+          .gux-tag-popover-chip {
+            display: flex;
+            margin: 4px 0;
+          }
+
+          .gux-tag-popover-chip-text,
+          .gux-tag-popover-chip-close-icon-wrap  {
+            background-color: @gux-charcoal-grey;
+            height: 24px;
+            border-radius: @border-radius;
+            color: white;
+            margin-right: 8px;
+            font-weight: bold;
+            text-align: center;
+          }
+
+          .gux-tag-popover-chip-text {
+            display: flex;
+            white-space: nowrap;
+            padding: 0 8px;
+            line-height: 24px;
+          }
+
+          .gux-tag-popover-chip:hover {
+            .gux-tag-popover-chip-text {
+              margin-right: 1px;
+              border-radius: @border-radius 0 0 @border-radius;
+            }
+            .gux-tag-popover-chip-close-icon-wrap {
+              display: flex;
+              border-radius: 0 @border-radius @border-radius 0;
+            }
+          }
+
+          .gux-tag-popover-chip-close-icon-wrap {
+            width: 24px;
+            box-sizing: border-box;
+            display: none;
+            cursor: pointer;
+            flex-direction: column;
+            justify-content: center;
+          }
+
+          .gux-tag-popover-chip-icon-wrap {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding-right: 8px;
+          }
+
+          .gux-tag-popover-chip-close-icon {
+            margin: 0 auto;
+          }
+
+        // GUX-DROPDOWN component
+          gux-dropdown input {
+            height: 24px;
+            background-color: transparent;
+            padding: 0;
+            outline: 0;
+            border: none;
+            width: 100%;
+          }
+
+          gux-dropdown input:focus {
+            border: none !important;
+            box-shadow: none !important;
+          }
+
+          gux-dropdown div.gux-dropdown .select-field {
+            height: 24px;
+          }
+
+          gux-dropdown div.gux-dropdown .select-field .ghost {
+            background-color: transparent;
+            color: transparent;
+            border: none;
+          }
+
+          gux-text-field > div > div.gux-field {
+            height: 24px;
+          }
+
+          gux-dropdown div.gux-dropdown .select-field button.dropdown-indicator {
+            display: none;
+          }
+
+
+          .gux-tag-popover-tags-container {
+            display: flex;
+            flex-wrap: wrap;
+          }
+
+          .gux-tag-popover-input-container {
+            position: relative;
+            flex: 1 1 auto;
+          }
+        }
+
+      }
+
+      &.opened {
+        display: block;
+      }
+    }
+
+    .gux-tag-popover-options {
+      display: none;
+      position: absolute;
+      margin: 0;
+      margin-top: 12px;
+      padding: 8px 0;
+      background: @menu-background-color;
+      border: 1px solid @menu-border-color;
+      box-shadow: none;
+      z-index: 1;
+      color: @gux-charcoal-grey;
+
+      &.opened {
+        display: block;
+      }
+
+      > gux-tag-popover-option {
+        position: relative;
+        height: 32px;
+        line-height: 32px;
+        padding: 0 16px;
+        display: flex;
+        cursor: pointer;
+
+        & {
+          &[selected] {
+            background: @gux-text-selection;
+            color: @gux-charcoal-grey;
+          }
+
+          &:hover,
+          &:focus {
+            background: @gux-dark-blue;
+            color: @gux-off-white;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Theming
+
+// Dark
+.gux-tag-popover-dark-theme {
+  color: @gux-off-white;
+
+  div.gux-tag-popover {
+    .gux-tag-popover-title {
+      color: @gux-charcoal-grey;
+    }
+  }
+}
+
+.gux-dark-theme {
+  gux-tag-popover-beta {
+    .gux-tag-popover-dark-theme();
+  }
+}
+
+gux-tag-popover-beta.gux-dark-theme {
+  .gux-tag-popover-dark-theme();
+}
+
+// Light
+.gux-tag-popover-light-theme {
+  color: @gux-charcoal-grey;
+}
+
+.gux-light-theme {
+  gux-tag-popover-beta {
+    .gux-tag-popover-light-theme();
+  }
+}
+
+gux-tag-popover-beta.gux-light-theme {
+  .gux-tag-popover-light-theme();
+}
+
+// Default Theme
+gux-tag-popover-beta {
+  .gux-tag-popover-light-theme();
+}