refactor(data-value): update to use direct value attr #65

Changes to be committed:
modified:   docs/api.md
modified:   src/auro-menu.js
modified:   src/auro-menuoption.js
modified:   test/auro-menu.test.js

docs/api.md

@@ -16,18 +16,30 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Slots
 
-| Name | Description                              |
-|------|------------------------------------------|
-|      | Open slot for insertion of menu options. |
+| Name | Description                         |
+|------|-------------------------------------|
+|      | Slot for insertion of menu options. |
 
 
 # auro-menuoption
 
 The auro-menu element provides users a way to define a menu option.
 
+## Attributes
+
+| Attribute | Type     | Description                                 |
+|-----------|----------|---------------------------------------------|
+| `value`   | `String` | Specifies the value to be sent to a server. |
+
 ## Properties
 
 | Property   | Attribute  | Type      | Description                                      |
 |------------|------------|-----------|--------------------------------------------------|
 | `disabled` | `disabled` | `Boolean` | When true specifies that the menuoption is disabled. |
-| `selected` | `selected` | `Boolean` | When true designates the selected menuoption. This attribute is only applied via the `optionSelected` event. If manually added without the `optionSelected` event, the attribute will be removed. |
+| `selected` | `selected` | `Boolean` | Specifies that an option is selected. Attribute is applied via the `optionSelected` event for selection at page load. |
+
+## Slots
+
+| Name | Description                                      |
+|------|--------------------------------------------------|
+|      | Specifies text for an option, but is not the value. |

src/auro-menu.js

@@ -17,14 +17,15 @@ import "focus-visible/dist/focus-visible.min.js";
  *
  * @attr {Number} selectOption - Predefine selected option from menu. Index starts at 0.
  * @fires optionSelected - Value for pre-selected menu option. This value may be placed on the `auro-menu` element specifically or on a outer parent element.
- * @slot Open slot for insertion of menu options.
+ * @slot Slot for insertion of menu options.
  */
 
 class AuroMenu extends LitElement {
   constructor() {
     super();
 
     this.options = null;
+    // this.value = null;
   }
 
   static get properties() {
@@ -109,7 +110,11 @@ class AuroMenu extends LitElement {
         if (parentSelectOption >= 0) {
           this.selectOption = parentSelectOption;
 
-          dispatchEventOptionSelected(this.selectOption, this.options[this.selectOption].attributes['data-value'].value, this.options[this.selectOption].innerText);
+          dispatchEventOptionSelected(
+            this.selectOption,
+            this.options[this.selectOption].value,
+            this.options[this.selectOption].innerText
+          );
         }
       }
     }
@@ -120,7 +125,7 @@ class AuroMenu extends LitElement {
           if (evt.key.toLowerCase() === ' ') {
             evt.preventDefault();
           }
-          dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('data-value'), evt.target.innerText);
+          dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('value'), evt.target.innerText);
         }
       }
 
@@ -146,7 +151,7 @@ class AuroMenu extends LitElement {
     };
 
     // Prep each <li>. Give it an index, set its tabindex to -1, add 'keydown' and 'click' event listeners, inject a check mark icon
-    const triggerEvent = (evt) => dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('data-value'), evt.target.innerText);
+    const triggerEvent = (evt) => dispatchEventOptionSelected(Number(evt.target.getAttribute('index')), evt.target.getAttribute('value'), evt.target.innerText);
 
     for (let iter = 0; iter < this.options.length; iter += 1) {
 

src/auro-menuoption.js

@@ -11,8 +11,10 @@ import check from '@alaskaairux/icons/dist/icons/interface/check-sm_es6';
 /**
  * The auro-menu element provides users a way to define a menu option.
  *
+ * @attr {String} value - Specifies the value to be sent to a server.
  * @attr {Boolean} disabled - When true specifies that the menuoption is disabled.
- * @attr {Boolean} selected - When true designates the selected menuoption. This attribute is only applied via the `optionSelected` event. If manually added without the `optionSelected` event, the attribute will be removed.
+ * @attr {Boolean} selected - Specifies that an option is selected. Attribute is applied via the `optionSelected` event for selection at page load.
+ * @slot Specifies text for an option, but is not the value.
  */
 class AuroMenuOption extends LitElement {
   constructor() {

test/auro-menu.test.js

@@ -113,23 +113,23 @@ describe('auro-menu', () => {
 async function defaultFixture() {
   return await fixture(html`
       <div>
-        <auro-menu><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+        <auro-menu><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
       </div>
   `);
 }
 
 async function preSelectFixture() {
   return await fixture(html`
       <div>
-        <auro-menu selectOption="2"><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+        <auro-menu selectOption="2"><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
       </div>
   `);
 }
 
 async function outerParentPreSelectFixture() {
   return await fixture(html`
       <div selectOption="2">
-        <auro-menu><auro-menuoption data-value="option 1">option 1</auro-menuoption><auro-menuoption data-value="option 2">option 2</auro-menuoption><auro-menuoption data-value="option 3">option 3</auro-menuoption><auro-menuoption data-value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption data-value="departures">Departures</auro-menuoption><auro-menuoption data-value="arrivals">Arrivals</auro-menuoption></auro-menu>
+        <auro-menu><auro-menuoption value="option 1">option 1</auro-menuoption><auro-menuoption value="option 2">option 2</auro-menuoption><auro-menuoption value="option 3">option 3</auro-menuoption><auro-menuoption value="lorem ipsum lorem ipsum">lorem ipsum lorem ipsum</auro-menuoption><auro-menuoption value="departures">Departures</auro-menuoption><auro-menuoption value="arrivals">Arrivals</auro-menuoption></auro-menu>
       </div>
   `);
 }