fix(example): add additional functionality to value example #89

AlaskaAirlines · Sep 2, 2022 · af82cee · af82cee
1 parent 9ec5e17
commit af82cee
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 56 deletions.
diff --git a/apiExamples/presetValue.html b/apiExamples/presetValue.html
diff --git a/apiExamples/value.html b/apiExamples/value.html
@@ -0,0 +1,15 @@
+<auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
+<auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
+<auro-button id="undefinedValueExampleBtn">Set Value to Undefined</auro-button>
+<br/><br/>
+<auro-select id="valueExample" value="price">
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
+    <auro-menuoption id="option-1" value="price">Price</auro-menuoption>
+    <auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
+    <auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
+    <auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
+  </auro-menu>
+</auro-select>
diff --git a/apiExamples/value.js b/apiExamples/value.js
@@ -0,0 +1,24 @@
+setTimeout(() => {
+    const valueValidExampleBtnElem = document.querySelector('#validValueExampleBtn');
+    const valueInvalidExampleBtnElem = document.querySelector('#invalidValueExampleBtn');
+    const valueUndefinedExampleBtnElem = document.querySelector('#undefinedValueExampleBtn');
+    const valueExampleElem = document.querySelector('#valueExample');
+
+    if (valueExampleElem && valueValidExampleBtnElem) {
+      valueValidExampleBtnElem.addEventListener('click', () => {
+        valueExampleElem.value = 'arrival';
+      })
+    }
+
+    if (valueExampleElem && valueInvalidExampleBtnElem) {
+      valueInvalidExampleBtnElem.addEventListener('click', () => {
+        valueExampleElem.value = 'flight course';
+      })
+    }
+
+    if (valueExampleElem && valueUndefinedExampleBtnElem) {
+      valueUndefinedExampleBtnElem.addEventListener('click', () => {
+        valueExampleElem.value = undefined;
+      })
+    }
+}, 200)
diff --git a/demo/apiExamples.md b/demo/apiExamples.md
@@ -87,34 +87,44 @@ Use the `value` property to define a preset value on the `auro-select` element.
 To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/presetValue.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/presetValue.html -->
-  <auro-select value="price">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/value.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/value.html -->
+  <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
+  <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
+  <auro-button id="undefinedValueExampleBtn">Set Value to Undefined</auro-button>
+  <br/><br/>
+  <auro-select id="valueExample" value="price">
+    <span slot="label">Name</span>
     <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-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+      <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
+      <auro-menuoption id="option-1" value="price">Price</auro-menuoption>
+      <auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
+      <auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
+      <auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
+      <auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
     </auro-menu>
   </auro-select>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion lowProfile justifyRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/presetValue.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/presetValue.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/value.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/value.html -->
 
 ```html
-<auro-select value="price">
+<auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
+<auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
+<auro-button id="undefinedValueExampleBtn">Set Value to Undefined</auro-button>
+<br/><br/>
+<auro-select id="valueExample" value="price">
+  <span slot="label">Name</span>
   <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-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
+    <auro-menuoption id="option-0" value="stops">Stops</auro-menuoption>
+    <auro-menuoption id="option-1" value="price">Price</auro-menuoption>
+    <auro-menuoption id="option-2" value="duration">Duration</auro-menuoption>
+    <auro-menuoption id="option-3" value="departure">Departure</auro-menuoption>
+    <auro-menuoption id="option-4" value="arrival">Arrival</auro-menuoption>
+    <auro-menuoption id="option-5" value="prefer alaska">Prefer Alaska</auro-menuoption>
   </auro-menu>
 </auro-select>
 ```

diff --git a/demo/index.html b/demo/index.html
@@ -42,9 +42,11 @@
     </script>
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://unpkg.com/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@aurodesignsystem/auro-dropdown@latest/dist/auro-dropdown__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@aurodesignsystem/auro-menu@latest/dist/auro-menu__bundled.js" type="module"></script>
     <script type="module" src="../src/auro-select.js"></script>
+    <script type="module" src="./../apiExamples/value.js"></script>
   </body>
 </html>
diff --git a/docs/partials/apiExamples.md b/docs/partials/apiExamples.md
@@ -36,13 +36,13 @@ Use the `value` property to define a preset value on the `auro-select` element.
 To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/presetValue.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/value.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion lowProfile justifyRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/presetValue.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/value.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>