feat: add menu #28

components/input/test/auro-input.test.js

@@ -68,7 +68,7 @@ describe('auro-input', () => {
 
     const clearButton = el.shadowRoot.querySelector('.clearBtn');
     clearButton.click();
-    expect(el.value).to.equal('');
+    expect(el.value).to.be.undefined;
   });
 
   it('flips hide-password bit', async () => {

components/menu/apiExamples/basic.html

@@ -0,0 +1,8 @@
+<auro-menu>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>
+

components/menu/apiExamples/custom.html

@@ -0,0 +1,7 @@
+<custom-menu>
+  <custom-menuoption value="stops">Stops</custom-menuoption>
+  <custom-menuoption value="price">Price</custom-menuoption>
+  <custom-menuoption value="duration">Duration</custom-menuoption>
+  <custom-menuoption value="departure">Departure</custom-menuoption>
+  <custom-menuoption value="arrival">Arrival</custom-menuoption>
+</custom-menu>

components/menu/apiExamples/customEvent.html

@@ -0,0 +1,5 @@
+<auro-menu id="customEvent">
+  <auro-menuoption value="stops">555 Address Way Seattle, WA 99999</auro-menuoption>
+  <auro-menuoption value="price">333 Some Street Seattle, WA 99999</auro-menuoption>
+  <auro-menuoption event="mycustomevent">Add new address</auro-menuoption>
+</auro-menu>

components/menu/apiExamples/customEvent.js

@@ -0,0 +1,10 @@
+export function auroMenuCustomEventExample() {
+  let menuCustomEventEl = document.querySelector('auro-menu#customEvent');
+
+  if (menuCustomEventEl) {
+    menuCustomEventEl.addEventListener('mycustomevent', () => {
+      console.warn('My Custom Event Fired');
+      alert(`My Custom Event Fired`);
+    });
+  }
+}

components/menu/apiExamples/disabled.html

@@ -0,0 +1,14 @@
+<auro-menu>
+  <auro-menuoption value="new tab">New tab</auro-menuoption>
+  <auro-menuoption value="new window">New window</auro-menuoption>
+  <auro-menuoption value="open file">Open file</auro-menuoption>
+  <auro-menuoption value="open location">Open location</auro-menuoption>
+  <hr>
+  <auro-menuoption value="close window">Close window</auro-menuoption>
+  <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
+  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
+  <hr>
+  <auro-menuoption value="share" disabled>Share</auro-menuoption>
+  <hr>
+  <auro-menuoption value="print">Print</auro-menuoption>
+</auro-menu>

components/menu/apiExamples/disabledMenu.html

@@ -0,0 +1,14 @@
+<auro-menu disabled>
+  <auro-menuoption value="new tab">New tab</auro-menuoption>
+  <auro-menuoption value="new window">New window</auro-menuoption>
+  <auro-menuoption value="open file">Open file</auro-menuoption>
+  <auro-menuoption value="open location">Open location</auro-menuoption>
+  <hr>
+  <auro-menuoption value="close window">Close window</auro-menuoption>
+  <auro-menuoption value="close tab">Close tab</auro-menuoption>
+  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
+  <hr>
+  <auro-menuoption value="share">Share</auro-menuoption>
+  <hr>
+  <auro-menuoption value="print">Print</auro-menuoption>
+</auro-menu>

components/menu/apiExamples/hidden.html

@@ -0,0 +1,14 @@
+<auro-menu>
+  <auro-menuoption value="new tab">New tab</auro-menuoption>
+  <auro-menuoption value="new window">New window</auro-menuoption>
+  <auro-menuoption value="open file">Open file</auro-menuoption>
+  <auro-menuoption value="open location">Open location</auro-menuoption>
+  <hr>
+  <auro-menuoption value="close window">Close window</auro-menuoption>
+  <auro-menuoption value="close tab" hidden>Close tab</auro-menuoption>
+  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
+  <hr>
+  <auro-menuoption value="share" disabled>Share</auro-menuoption>
+  <hr>
+  <auro-menuoption value="print">Print</auro-menuoption>
+</auro-menu>

components/menu/apiExamples/hr.html

@@ -0,0 +1,14 @@
+<auro-menu>
+  <auro-menuoption value="new tab">New tab</auro-menuoption>
+  <auro-menuoption value="new window">New window</auro-menuoption>
+  <auro-menuoption value="open file">Open file</auro-menuoption>
+  <auro-menuoption value="open location">Open location</auro-menuoption>
+  <hr>
+  <auro-menuoption value="close window">Close window</auro-menuoption>
+  <auro-menuoption value="close tab">Close tab</auro-menuoption>
+  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
+  <hr>
+  <auro-menuoption value="share">Share</auro-menuoption>
+  <hr>
+  <auro-menuoption value="print">Print</auro-menuoption>
+</auro-menu>

components/menu/apiExamples/matchWord.html

@@ -0,0 +1,16 @@
+<auro-input id="matchWordInput" required>
+  <span slot="label">Enter a value to match in the menu</span>
+</auro-input>
+<br />
+<auro-menu id="matchWordMenu">
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menu>
+    <auro-menuoption value="apples">Apples</auro-menuoption>
+    <auro-menuoption value="oranges">Oranges</auro-menuoption>
+    <auro-menuoption value="peaches">Peaches</auro-menuoption>
+  </auro-menu>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>

components/menu/apiExamples/matchWord.js

@@ -0,0 +1,11 @@
+function updateMatch() {
+  let matchWordMenu = document.querySelector('#matchWordMenu');
+
+  matchWordMenu.matchWord = matchWordInput.value;
+}
+
+export function auroMenuMatchWordExample() {
+  let matchWordInput = document.querySelector('#matchWordInput');
+
+  matchWordInput.addEventListener('keyup', updateMatch);
+}

components/menu/apiExamples/nestedMenu.html

@@ -0,0 +1,32 @@
+<auro-menu id="alpha">
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <hr>
+  <auro-menu id="beta">
+    <auro-menuoption value="apples">Apples</auro-menuoption>
+    <auro-menuoption value="oranges">Oranges</auro-menuoption>
+    <auro-menuoption value="pears">Pears</auro-menuoption>
+    <auro-menuoption value="grapes">Grapes</auro-menuoption>
+    <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
+    <hr>
+    <auro-menu id="charlie">
+      <auro-menuoption value="person">Person</auro-menuoption>
+      <auro-menuoption value="woman">Woman</auro-menuoption>
+      <auro-menuoption value="man">Man</auro-menuoption>
+      <auro-menuoption value="camera">Camera</auro-menuoption>
+      <auro-menuoption value="tv">TV</auro-menuoption>
+    </auro-menu>
+  </auro-menu>
+  <hr>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  <hr>
+  <auro-menu id="delta">
+    <auro-menuoption value="cars">Cars</auro-menuoption>
+    <auro-menuoption value="trucks">Trucks</auro-menuoption>
+    <auro-menuoption value="boats">Boats</auro-menuoption>
+    <auro-menuoption value="planes">Planes</auro-menuoption>
+    <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
+  </auro-menu>
+</auro-menu>

components/menu/apiExamples/nocheckmark.html

@@ -0,0 +1,32 @@
+<auro-menu nocheckmark>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <hr>
+  <auro-menu>
+    <auro-menuoption value="apples">Apples</auro-menuoption>
+    <auro-menuoption value="oranges">Oranges</auro-menuoption>
+    <auro-menuoption value="pears">Pears</auro-menuoption>
+    <auro-menuoption value="grapes">Grapes</auro-menuoption>
+    <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
+    <hr>
+    <auro-menu>
+      <auro-menuoption value="person">Person</auro-menuoption>
+      <auro-menuoption value="woman">Woman</auro-menuoption>
+      <auro-menuoption value="man">Man</auro-menuoption>
+      <auro-menuoption value="camera">Camera</auro-menuoption>
+      <auro-menuoption value="tv">TV</auro-menuoption>
+    </auro-menu>
+  </auro-menu>
+  <hr>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  <hr>
+  <auro-menu>
+    <auro-menuoption value="cars">Cars</auro-menuoption>
+    <auro-menuoption value="trucks">Trucks</auro-menuoption>
+    <auro-menuoption value="boats">Boats</auro-menuoption>
+    <auro-menuoption value="planes">Planes</auro-menuoption>
+    <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
+  </auro-menu>
+</auro-menu>

components/menu/apiExamples/preselect.html

@@ -0,0 +1,15 @@
+<auro-menu>
+  <auro-menuoption value="new tab">New tab</auro-menuoption>
+  <auro-menuoption value="new window" selected>New window</auro-menuoption>
+  <auro-menuoption value="open file">Open file</auro-menuoption>
+  <auro-menuoption value="open location">Open location</auro-menuoption>
+  <hr>
+  <auro-menuoption value="close window">Close window</auro-menuoption>
+  <auro-menuoption value="close tab" disabled>Close tab</auro-menuoption>
+  <auro-menuoption value="save page as...">Save page as...</auro-menuoption>
+  <hr>
+  <auro-menuoption value="share" disabled>Share</auro-menuoption>
+  <hr>
+  <auro-menuoption value="print">Print</auro-menuoption>
+</auro-menu>
+

components/menu/apiExamples/reset.html

@@ -0,0 +1,9 @@
+<auro-menu id="resetExample">
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration" selected>Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>
+<br/><br/>
+<auro-button id="resetExampleBtn">RESET</auro-button>

components/menu/apiExamples/reset.js

@@ -0,0 +1,10 @@
+export function auroMenuResetExample() {
+  const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
+  const resetExampleElem = document.querySelector('#resetExample');
+
+  if (resetExampleElem && resetExampleBtnElem) {
+    resetExampleBtnElem.addEventListener('click', () => {
+      resetExampleElem.value = undefined;
+    })
+  }
+}

components/menu/apiExamples/restrictedWidth.html

@@ -0,0 +1,14 @@
+<auro-menu style="width: 300px">
+  <auro-menuoption value="new tab">New tab</auro-menuoption>
+  <auro-menuoption value="new window">New window</auro-menuoption>
+  <auro-menuoption value="open file">Open file</auro-menuoption>
+  <auro-menuoption value="open location">Open location</auro-menuoption>
+  <hr>
+  <auro-menuoption value="close window">Close window</auro-menuoption>
+  <auro-menuoption value="close tab">Close tab</auro-menuoption>
+  <auro-menuoption value="save page as...">Save page as 'option_10_redevelopment_hover_scenario.png'</auro-menuoption>
+  <hr>
+  <auro-menuoption value="share">Share</auro-menuoption>
+  <hr>
+  <auro-menuoption value="print">Print</auro-menuoption>
+</auro-menu>

components/menu/apiExamples/scroll.html

@@ -0,0 +1,32 @@
+<auro-menu id="alpha" style="max-height: 200px">
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <hr>
+  <auro-menu id="beta">
+    <auro-menuoption value="apples">Apples</auro-menuoption>
+    <auro-menuoption value="oranges">Oranges</auro-menuoption>
+    <auro-menuoption value="pears">Pears</auro-menuoption>
+    <auro-menuoption value="grapes">Grapes</auro-menuoption>
+    <auro-menuoption value="kiwi">Kiwi</auro-menuoption>
+    <hr>
+    <auro-menu id="charlie">
+      <auro-menuoption value="person">Person</auro-menuoption>
+      <auro-menuoption value="woman">Woman</auro-menuoption>
+      <auro-menuoption value="man">Man</auro-menuoption>
+      <auro-menuoption value="camera">Camera</auro-menuoption>
+      <auro-menuoption value="tv">TV</auro-menuoption>
+    </auro-menu>
+  </auro-menu>
+  <hr>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  <hr>
+  <auro-menu id="delta">
+    <auro-menuoption value="cars">Cars</auro-menuoption>
+    <auro-menuoption value="trucks">Trucks</auro-menuoption>
+    <auro-menuoption value="boats">Boats</auro-menuoption>
+    <auro-menuoption value="planes">Planes</auro-menuoption>
+    <auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
+  </auro-menu>
+</auro-menu>

components/menu/demo/api.html

@@ -0,0 +1,51 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/apiExamples.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-menu custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./api.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
+    <script type="module" data-demo-script="true">
+      import { initExamples } from "./api.min.js"
+      initExamples();
+    </script>
+  </body>
+</html>

components/menu/demo/api.js

@@ -0,0 +1,25 @@
+/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
+
+import { auroMenuResetExample } from '../apiExamples/reset';
+import { auroMenuMatchWordExample } from '../apiExamples/matchWord';
+import { auroMenuCustomEventExample } from '../apiExamples/customEvent';
+import '../src/index.js';
+
+export function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    // javascript example function calls to be added here upon creation to test examples
+    auroMenuResetExample();
+    auroMenuMatchWordExample();
+    auroMenuCustomEventExample();
+  } catch (err) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+