docs(dynamic): refactor structure and add dynamic example #125

AlaskaAirlines · May 2, 2024 · 1e7551e · 1e7551e
1 parent 02f809c
commit 1e7551e
Show file tree

Hide file tree

Showing 17 changed files with 202 additions and 448 deletions.
diff --git a/README.md b/README.md
@@ -117,6 +117,8 @@ In cases where the project is not able to process JS assets, there are pre-proce
 The `<auro-radio>` element is designed to be a single component for the use of creating an input `type="radio"` with an associated `<label>` that meets all use case and accessibility standards.
 
 The following examples illustrate fully functional `<auro-radio>` elements wrapped with the `<auro-radio-group>` element. The `<auro-radio-group>` element is REQUIRED in order to mantain the relationship between individual `<auro-radio>` elements for functional radio button actions.
+
+**Note**: The `<auro-radio>` element is only for to for use as a set of two or more `<auro-radio>` elements within an `<auro-radio-group>` element.
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Code Examples

diff --git a/apiExamples/disabled.html b/apiExamples/disabled.html
@@ -4,3 +4,11 @@
   <auro-radio id="radio11" label="No" name="radioDemo" value="no" disabled></auro-radio>
   <auro-radio id="radio12" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
 </auro-radio-group>
+
+<auro-radio-group disabled>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="radio14" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="radio15" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+
diff --git a/apiExamples/disabledGroup.html b/apiExamples/disabledGroup.html
diff --git a/apiExamples/dynamic.html b/apiExamples/dynamic.html
@@ -0,0 +1,3 @@
+<auro-radio-group required id="dynamicExample">
+  <span slot="legend">Form label goes here</span>
+</auro-radio-group>
diff --git a/apiExamples/dynamic.js b/apiExamples/dynamic.js
@@ -0,0 +1,16 @@
+export function dynamicExample() {
+  const values = ['Yes', 'No', 'Maybe'];
+  const radioGroup = document.getElementById('dynamicExample');
+
+  for (let i = 0; i < values.length; i++) {
+    const radio = document.createElement('auro-radio');
+
+    radio.id = `radio${i}`;
+    radio.label = values[i];
+    radio.name = 'radioDemo';
+    radio.value = values[i];
+    radio.textContent = values[i];
+
+    radioGroup.appendChild(radio);
+  }
+}
diff --git a/apiExamples/error.html b/apiExamples/error.html
@@ -1,6 +1,6 @@
-<auro-radio-group>
+<auro-radio-group error="There is an error with this form entry">
   <span slot="legend">Form label goes here</span>
-  <auro-radio id="radio16" label="Yes" name="radioDemo" value="yes"></auro-radio>
-  <auro-radio id="radio17" label="No" name="radioDemo" value="no" error></auro-radio>
-  <auro-radio id="radio18" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  <auro-radio id="radio19" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="radio20" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="radio21" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
 </auro-radio-group>
diff --git a/apiExamples/errorGroup.html b/apiExamples/errorGroup.html
diff --git a/demo/api.html b/demo/api.html
@@ -41,6 +41,10 @@
         });
     </script>
     <script type="module" src="../index.js"></script>
+    <script type="module">
+      import { initExamples } from './api.min.js';
+      initExamples();
+    </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>

diff --git a/demo/api.js b/demo/api.js
@@ -0,0 +1,16 @@
+import { dynamicExample } from "../apiExamples/dynamic";
+
+export function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    dynamicExample();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
diff --git a/demo/api.md b/demo/api.md
@@ -121,15 +121,17 @@ The following illustrates a default use of the `<auro-radio-group><auro-radio>..
 
 ### Disabled
 
-Use the `disabled` attribute to disable singular `<auro-radio>` elements or the entire `<auro-radio-group>`.
-
-#### Group
-
-The `disabled` attribute used to disable the entire `<auro-radio-group>`.
+Use the `disabled` attribute to disable singular `<auro-radio>` elements or the entire `<auro-radio-group>`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabledGroup.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/disabledGroup.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/disabled.html -->
+  <auro-radio-group>
+    <span slot="legend">Form label goes here</span>
+    <auro-radio id="radio10" label="Yes" name="radioDemo" value="yes"></auro-radio>
+    <auro-radio id="radio11" label="No" name="radioDemo" value="no" disabled></auro-radio>
+    <auro-radio id="radio12" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+  </auro-radio-group>
   <auro-radio-group disabled>
     <span slot="legend">Form label goes here</span>
     <auro-radio id="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -140,10 +142,16 @@ The `disabled` attribute used to disable the entire `<auro-radio-group>`.
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabledGroup.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/disabledGroup.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/disabled.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/disabled.html -->
 
 ```html
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="radio10" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="radio11" label="No" name="radioDemo" value="no" disabled></auro-radio>
+  <auro-radio id="radio12" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
 <auro-radio-group disabled>
   <span slot="legend">Form label goes here</span>
   <auro-radio id="radio13" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -156,15 +164,11 @@ The `disabled` attribute used to disable the entire `<auro-radio-group>`.
 
 ### Error
 
-Use the `error` attribute to set an error state on the entire `<auro-radio-group>`.
-
-#### Group
-
-The `error` attribute used to set an error state on the entire `<auro-radio-group>`.
+Use the `error` attribute to set an error state on the entire `<auro-radio-group>`.
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/errorGroup.html) -->
-  <!-- The below content is automatically added from ./../../apiExamples/errorGroup.html -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/error.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/error.html -->
   <auro-radio-group error="There is an error with this form entry">
     <span slot="legend">Form label goes here</span>
     <auro-radio id="radio19" label="Yes" name="radioDemo" value="yes"></auro-radio>
@@ -175,8 +179,8 @@ The `error` attribute used to set an error state on the entire `<auro-radio-grou
 </div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/errorGroup.html) -->
-<!-- The below code snippet is automatically added from ./../../apiExamples/errorGroup.html -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/error.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/error.html -->
 
 ```html
 <auro-radio-group error="There is an error with this form entry">
@@ -189,7 +193,7 @@ The `error` attribute used to set an error state on the entire `<auro-radio-grou
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-### horizontal
+### Horizontal Group
 
 Using the `horizontal` attribute will render the `auro-radio` elements in a horizontal line.
 
@@ -284,4 +288,53 @@ The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can o
 </auro-radio-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dynamic Example
+
+This example demonstrates a data drive approach to rendering `<auro-radio>` buttons.
+
+**Note**: When dynamically creating `<auro-radio>` elements, make sure to add an `id` attribute, as it is a required part of the HTML5 spec for all form elements.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/dynamic.html) -->
+  <!-- The below content is automatically added from ./../../apiExamples/dynamic.html -->
+  <auro-radio-group required id="dynamicExample">
+    <span slot="legend">Form label goes here</span>
+  </auro-radio-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/dynamic.html) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/dynamic.html -->
+
+```html
+<auro-radio-group required id="dynamicExample">
+  <span slot="legend">Form label goes here</span>
+</auro-radio-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/dynamic.js) -->
+<!-- The below code snippet is automatically added from ./../../apiExamples/dynamic.js -->
+
+```js
+export function dynamicExample() {
+  const values = ['Yes', 'No', 'Maybe'];
+  const radioGroup = document.getElementById('dynamicExample');
+
+  for (let i = 0; i < values.length; i++) {
+    const radio = document.createElement('auro-radio');
+
+    radio.id = `radio${i}`;
+    radio.label = values[i];
+    radio.name = 'radioDemo';
+    radio.value = values[i];
+    radio.textContent = values[i];
+
+    radioGroup.appendChild(radio);
+  }
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/demo/api.min.js b/demo/api.min.js
@@ -0,0 +1,33 @@
+function dynamicExample() {
+  const values = ['Yes', 'No', 'Maybe'];
+  const radioGroup = document.getElementById('dynamicExample');
+
+  for (let i = 0; i < values.length; i++) {
+    const radio = document.createElement('auro-radio');
+
+    radio.id = `radio${i}`;
+    radio.label = values[i];
+    radio.name = 'radioDemo';
+    radio.value = values[i];
+    radio.textContent = values[i];
+
+    radioGroup.appendChild(radio);
+  }
+}
+
+function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    dynamicExample();
+  } catch (error) {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}
+
+export { initExamples };
diff --git a/demo/index.html b/demo/index.html
@@ -41,7 +41,6 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../index.js"></script>
     <script type="module">
       import { registerComponent } from '../index.js';