feat(disabled): add support for disabled menu option #25

This update supports disabling the click event, enter
and spacebar key from selecting the menu option.

It is known at this point that the user can tab to
the disabled menu item. This will be addressed
with a refactor of how tab order is managed in a menu.

Changes to be committed:
modified:   src/auro-menu-option.scss
modified:   src/auro-menu.js
modified:   src/style.scss

demo/demo.md

@@ -86,12 +86,12 @@ To simulate the showing and hiding or `auro-menu` when it is used with `auro-dro
 
 ***
 
-### <auro-menu indexselectedoption="5">
+### index selected option 5;
 
 <div class="exampleWrapper">
   <auro-menu id="auroMenu2" indexSelectedOption="5" ishidden checkmark>
     <auro-menu-option slot="listOfOptions" data-value="the value for option 1">Stops</auro-menu-option>
-    <auro-menu-option slot="listOfOptions" data-value="the value for option 2">Price</auro-menu-option>
+    <auro-menu-option disabled slot="listOfOptions" data-value="the value for option 2">(disabled) Price</auro-menu-option>
     <auro-menu-option slot="listOfOptions" data-value="the value for option 3">Duration</auro-menu-option>
     <auro-menu-option slot="listOfOptions" data-value="the value for option 4">Departure</auro-menu-option>
     <auro-menu-option slot="listOfOptions" data-value="the value for option 5">Arrival</auro-menu-option>

docs/api.md

@@ -1,3 +1,20 @@
+# auro-menu-option
+
+Auro-menu provides users a way to select one option from a pre-defined list of options.
+
+## Properties
+
+| Property           | Attribute          | Type      | Default | Description                                      |
+|--------------------|--------------------|-----------|---------|--------------------------------------------------|
+| `beingMouseOvered` | `beingMouseOvered` | `Boolean` |         | Used to help determine the color and background color of auro-menu-option. |
+| `disabled`         | `disabled`         | `Boolean` |         | When true specifies that the menu-option is disabled. |
+| `hasFocus`         | `hasFocus`         | `Boolean` | false   | Used to help determine if auro-menu-option is being tabbed onto. Used to help determine the color and background color of auro-menu-option. |
+| `index`            | `index`            | `Number`  |         | Index of the individual auro-menu-otion.         |
+| `isHidden`         | `isHidden`         | `Boolean` |         | If the auro-menu-option is currently visible or not, perhaps because auro-dropdown is controlling whether or not auro-menu is visible or hidden. |
+| `selected`         | `selected`         | `boolean` |         |                                                  |
+| `tabIndex`         | `tabIndex`         | `Number`  |         | Will be either -1 or 0 depending on if auro-menu is currently visible or not. |
+
+
 # auro-menu
 
 Auro-menu provides users a way to select one option from a pre-defined list of options.
@@ -10,12 +27,6 @@ Auro-menu provides users a way to select one option from a pre-defined list of o
 | `isHidden`            | `isHidden`            | `Boolean` | true    | If the auro-menu is currently being shown or hidden, perhaps because auro-dropdown is controlling whether or not auro-menu is visible or hidden. |
 | `options`             | `options`             | `Array`   | null    | Array of auro-menu-option nodes.                 |
 
-## Methods
-
-| Method             | Type       |
-|--------------------|------------|
-| `handleSlotChange` | `(): void` |
-
 ## Events
 
 | Event                  | Type                                             |
@@ -28,3 +39,14 @@ Auro-menu provides users a way to select one option from a pre-defined list of o
 | Name            | Description                          |
 |-----------------|--------------------------------------|
 | `listOfOptions` | Slot for the auro-menu-option nodes. |
+
+
+# auro-sub-menu
+
+## Properties
+
+| Property     | Attribute    | Type      | Default |
+|--------------|--------------|-----------|---------|
+| `hasFocus`   |              | `boolean` | false   |
+| `hideBottom` | `hideBottom` | `boolean` |         |
+| `hideTop`    | `hideTop`    | `boolean` |         |

package.json

@@ -139,7 +139,7 @@
   "scripts": {
     "build": "npm-run-all build:sass sass:render dist:js build:api test build:markdownDocs bundler postinstall",
     "build:ci": "npm-run-all sweep build",
-    "build:api": "wca analyze 'src/auro-menu.js' --outFiles docs/api.md",
+    "build:api": "wca analyze 'src/auro-*.js' --outFiles docs/api.md",
     "build:demo": "npm-run-all build demo:rm:build demo:new:build demo:copy:index demo:copy:demo demo:update:index",
     "build:dev:assets": "npm-run-all build:sass:demo build:sass:component postCss:component sass:render",
     "build:markdownDocs": "node scripts/generateDocs.js",

src/auro-menu-option.js

@@ -15,6 +15,7 @@ import styleCss from "./auro-menu-option-css.js";
  * @attr {Number} tabIndex - Will be either -1 or 0 depending on if auro-menu is currently visible or not.
  * @attr {Boolean} hasFocus - Used to help determine if auro-menu-option is being tabbed onto. Used to help determine the color and background color of auro-menu-option.
  * @attr {Boolean} beingMouseOvered - Used to help determine the color and background color of auro-menu-option.
+ * @attr {Boolean} disabled - When true specifies that the menu-option is disabled.
  */
 class AuroMenuOption extends LitElement {
   constructor() {
@@ -29,7 +30,8 @@ class AuroMenuOption extends LitElement {
       index:            { type: Number },
       isHidden:         { type: Boolean },
       selected:         { type: Boolean },
-      tabIndex:         { type: Number }
+      tabIndex:         { type: Number },
+      disabled:         { type: Boolean }
     };
   }
 

src/auro-menu-option.scss

@@ -74,3 +74,9 @@ li {
     height: var(--auro-size-xxl);
   }
 }
+
+:host([disabled]) {
+  color: var(--auro-color-text-disabled-on-light);
+  pointer-events: none;
+  user-select: none;
+}

src/auro-menu.js

@@ -36,7 +36,7 @@ class AuroMenu extends LitElement {
         type: Boolean,
         reflect: true
       },
-      indexSelectedOption: { type: Number },
+      indexSelectedOption:  { type: Number }
     };
   }
 
@@ -46,6 +46,10 @@ class AuroMenu extends LitElement {
     `;
   }
 
+  /**
+   * @private
+   */
+
   handleSlotChange() {
     const dispatchEventOptionSelected = (indexValue, dataValue, displayText) => {
       this.dispatchEvent(new CustomEvent('optionSelected', {

src/style.scss

@@ -22,7 +22,6 @@ ul {
   width: 100%;
   padding: 0;
   margin: 0;
-  background-color: var(--auro-color-background-lightest);
   color: var(--auro-color-text-primary-on-light);
   size: var(--auro-text-body);
   vertical-align: middle;