feat(tag flyout menu): flyout menu implementation with the shortcuts

docs/src/components-spec.json

@@ -324,6 +324,12 @@
       "submit": "Standard Event"
     }
   },
+  "gux-flyout-menu-beta": {
+    "attributes": {},
+    "events": {
+      "menuOptionSelected": "Fired when option in flyout menu being selected"
+    }
+  },
   "gux-table-beta": {
     "attributes": {
       "compact": "checkbox",

src/components/beta/gux-flyout-menu-beta/example.html

@@ -0,0 +1,86 @@
+<div style="display: flex;">
+  <div style="margin-left: 20px; min-width: 200px;">
+    <gux-button
+      accent="primary"
+      onClick='(function() {
+          const html = window.toHTML(`
+            <gux-flyout-menu-beta>
+              <gux-flyout-option-beta
+                short-cut="Crl+Alt+A"
+                key-code="17"
+                second-key-code="18"
+                third-key-code="65"
+              >
+                <div slot="title">Option One</div>
+              </gux-flyout-option-beta>
+              <gux-flyout-option-beta short-cut="Crl+Alt+C">
+                <div slot="title">Option Two</div>
+              </gux-flyout-option-beta>
+              <gux-flyout-option-beta short-cut="Shift+A">
+                <div slot="title">Option Three</div>
+              </gux-flyout-option-beta>
+              <gux-flyout-option-beta short-cut="⌘A">
+                <div slot="title">Option Four</div>
+              </gux-flyout-option-beta>
+              <gux-flyout-option-beta short-cut="⌘⇧A">
+                <div slot="title">Option Five</div>
+              </gux-flyout-option-beta>
+            </gux-flyout-menu-beta>
+          `);
+
+          document.getElementById("flyout-menu-first-container").appendChild(html);
+      })()'
+    >
+      Flyout example 1
+    </gux-button>
+    <div id="flyout-menu-first-container"></div>
+  </div>
+
+  <div style="margin-left: 20px; min-width: 200px;">
+    <gux-button
+      accent="primary"
+      onClick='(function() {
+          const html = window.toHTML(`
+            <gux-flyout-menu-beta>
+              <gux-flyout-option-beta with-icon>
+                <div slot="title">Option One</div>
+                <gux-flyout-submenu-beta slot="submenu">
+                  <gux-flyout-option-beta>
+                    <div slot="title">Option One</div>
+                  </gux-flyout-option-beta>
+                  <gux-flyout-option-beta>
+                    <div slot="title">Option Two</div>
+                  </gux-flyout-option-beta>
+                  <gux-flyout-option-beta with-icon>
+                    <div slot="title">Option Three</div>
+                    <gux-flyout-submenu-beta slot="submenu">
+                      <gux-flyout-option-beta short-cut="⌘A">
+                        <div slot="title">Option One</div>
+                      </gux-flyout-option-beta>
+                      <gux-flyout-option-beta short-cut="⌘⇧A">
+                        <div slot="title">Option Two</div>
+                      </gux-flyout-option-beta>
+                    </gux-flyout-submenu-beta>
+                  </gux-flyout-option-beta>
+                  <gux-flyout-option-beta>
+                    <div slot="title">Option Four</div>
+                  </gux-flyout-option-beta>
+                </gux-flyout-submenu-beta>
+              </gux-flyout-option-beta>
+              <gux-flyout-option-beta>
+                <div slot="title">Option Two</div>
+              </gux-flyout-option-beta>
+              <gux-flyout-option-beta>
+                <div slot="title">Option Three</div>
+              </gux-flyout-option-beta>
+            </gux-flyout-menu-beta>
+          `);
+
+          document.getElementById("flyout-menu-second-container").appendChild(html);
+      })()'
+    >
+      Flyout example 2
+    </gux-button>
+    <div id="flyout-menu-second-container"></div>
+  </div>
+</div>

src/components/beta/gux-flyout-menu-beta/gux-flyout-menu.less

@@ -0,0 +1,41 @@
+// Style
+gux-flyout-menu-beta {
+  background-color: #fdfdfd;
+  box-shadow: 0 0 5px 0 rgba(218, 225, 232, 1);
+  display: block;
+  margin-top: 12px;
+  min-width: 185px;
+  padding: 10px 0;
+  position: relative;
+
+  &::after,
+  &::before {
+    content: '';
+    height: 0;
+    position: absolute;
+    width: 0;
+  }
+
+  &::after {
+    border-bottom: 11px solid #fff;
+    border-left: 13px solid transparent;
+    border-right: 13px solid transparent;
+    left: 10px;
+    top: -11px;
+  }
+
+  &::before {
+    border-bottom: 12px solid rgba(218, 225, 232, 0.8);
+    border-left: 14px solid transparent;
+    border-right: 14px solid transparent;
+    left: 9px;
+    top: -12px;
+  }
+
+  .gux-flyout {
+    &-content {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}

src/components/beta/gux-flyout-menu-beta/gux-flyout-menu.tsx

@@ -0,0 +1,35 @@
+import { Component, Element, Event, EventEmitter, h } from '@stencil/core';
+
+@Component({
+  styleUrl: 'gux-flyout-menu.less',
+  tag: 'gux-flyout-menu-beta'
+})
+export class GuxFlyoutMenu {
+  @Element()
+  root: HTMLElement;
+
+  @Event()
+  menuOptionSelected: EventEmitter;
+
+  private optionSelectedHandler(ev: MouseEvent): void {
+    this.menuOptionSelected.emit(ev.detail);
+  }
+
+  componentDidLoad(): void {
+    this.root.addEventListener(
+      'optionSelected',
+      this.optionSelectedHandler.bind(this)
+    );
+  }
+
+  componentDidUnload(): void {
+    this.root.removeEventListener(
+      'optionSelected',
+      this.optionSelectedHandler.bind(this)
+    );
+  }
+
+  render() {
+    return <slot />;
+  }
+}

src/components/beta/gux-flyout-menu-beta/gux-flyout-option-beta/gux-flyout-option.less

@@ -0,0 +1,40 @@
+// Style
+gux-flyout-option-beta {
+  box-sizing: border-box;
+  color: #000;
+  display: flex;
+  font-size: 12px;
+  height: auto;
+  justify-content: space-between;
+  line-height: 32px;
+  padding: 0 16px;
+  position: relative;
+  width: 100%;
+
+  .gux-flyout-option-container {
+    width: 100%;
+
+    > gux-flyout-submenu-beta {
+      display: none;
+    }
+
+    .gux-flyout-option-container-item {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: #2a60c8;
+    color: #fff;
+    cursor: pointer;
+    outline: none;
+
+    > .gux-flyout-option-container > gux-flyout-submenu-beta {
+      display: block;
+    }
+  }
+}

src/components/beta/gux-flyout-menu-beta/gux-flyout-option-beta/gux-flyout-option.tsx

@@ -0,0 +1,104 @@
+import {
+  Component,
+  Element,
+  h,
+  Listen,
+  Event,
+  Prop,
+  EventEmitter
+} from '@stencil/core';
+
+@Component({
+  styleUrl: 'gux-flyout-option.less',
+  tag: 'gux-flyout-option-beta'
+})
+export class GuxFlyoutOption {
+  @Element()
+  root: HTMLElement;
+
+  @Prop() withIcon: boolean;
+  @Prop() shortCut: string;
+  @Prop() keyCode?: string;
+  @Prop() secondKeyCode?: string;
+  @Prop() thirdKeyCode?: string;
+
+  private keycodes: string[] = [];
+
+  @Event()
+  optionSelected: EventEmitter;
+
+  @Listen('keydown', { target: 'window' })
+  keyDownHandler(ev: KeyboardEvent) {
+    if (this.keycodes.length === 3) {
+      this.keycodes.shift();
+    }
+
+    this.keycodes.push(ev.keyCode.toString());
+
+    if (this.shortCut) {
+      this.checkForShortcut();
+    }
+  }
+
+  @Listen('keyup', { target: 'window' })
+  keyUpHandler() {
+    this.keycodes = [];
+  }
+
+  private checkForShortcut(): void {
+    const optionShortcut = [
+      this.keyCode,
+      this.secondKeyCode,
+      this.thirdKeyCode
+    ].filter((keyCode: string) => !!keyCode);
+
+    if (optionShortcut.length === 0) {
+      return;
+    }
+
+    const isShortCutPressed = optionShortcut.every(
+      (keycode: string, index: number) => {
+        return keycode === this.keycodes[index];
+      }
+    );
+
+    if (isShortCutPressed) {
+      this.handleOptionSelected();
+    }
+  }
+
+  private isIcon(): HTMLElement {
+    return this.withIcon ? (
+      <gux-icon screenreaderText="angle-right" icon-name="angle-right" />
+    ) : (
+      <span> {this.shortCut} </span>
+    );
+  }
+
+  private handleOptionSelected(): void {
+    const isSubmenu = !!this.root.querySelector('[slot="submenu"]');
+
+    if (!isSubmenu) {
+      this.optionSelected.emit(
+        this.root.querySelector('[slot="title"]').innerHTML
+      );
+    }
+  }
+
+  render() {
+    return (
+      <div class="gux-flyout-option-container">
+        <div
+          class="gux-flyout-option-container-item"
+          onClick={this.handleOptionSelected.bind(this)}
+        >
+          <div>
+            <slot name="title" />
+          </div>
+          {this.isIcon()}
+        </div>
+        <slot name="submenu" />
+      </div>
+    );
+  }
+}

src/components/beta/gux-flyout-menu-beta/gux-flyout-option-beta/readme.md

@@ -0,0 +1,41 @@
+# gux-flyout-option
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property        | Attribute         | Description | Type      | Default     |
+| --------------- | ----------------- | ----------- | --------- | ----------- |
+| `keyCode`       | `key-code`        |             | `string`  | `undefined` |
+| `secondKeyCode` | `second-key-code` |             | `string`  | `undefined` |
+| `shortCut`      | `short-cut`       |             | `string`  | `undefined` |
+| `thirdKeyCode`  | `third-key-code`  |             | `string`  | `undefined` |
+| `withIcon`      | `with-icon`       |             | `boolean` | `undefined` |
+
+
+## Events
+
+| Event            | Description | Type               |
+| ---------------- | ----------- | ------------------ |
+| `optionSelected` |             | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [gux-icon](../../../stable/gux-icon)
+
+### Graph
+```mermaid
+graph TD;
+  gux-flyout-option-beta --> gux-icon
+  style gux-flyout-option-beta fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/beta/gux-flyout-menu-beta/gux-flyout-option-beta/tests/gux-flyout-option.spec.ts

@@ -0,0 +1,29 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { GuxFlyoutOption } from '../gux-flyout-option';
+
+describe('GuxFlyoutOption', () => {
+  let component: GuxFlyoutOption;
+
+  beforeEach(async () => {
+    const page = await newSpecPage({
+      components: [GuxFlyoutOption],
+      html: `
+        <gux-flyout-option-beta
+          short-cut="Crl+Alt+A"
+          key-code="19"
+          second-key-code="34"
+          third-key-code="11"
+        >
+          <div slot="title">Option One</div>
+        </gux-flyout-option-beta>
+      `,
+      language: 'en'
+    });
+
+    component = page.rootInstance;
+  });
+
+  it('should build', async () => {
+    expect(component).toBeInstanceOf(GuxFlyoutOption);
+  });
+});