feat: add radio into components #26

components/radio/apiExamples/basic.html

@@ -0,0 +1 @@
+<auro-radio id="basicRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>

components/radio/apiExamples/basicGroup.html

@@ -0,0 +1,6 @@
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="basicGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="basicGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="basicGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>

components/radio/apiExamples/checked.html

@@ -0,0 +1,6 @@
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="radio4" label="Yes" name="radioDemo" value="yes">Yes</auro-radio>
+  <auro-radio id="radio5" label="No" name="radioDemo" value="no" checked>No</auro-radio>
+  <auro-radio id="radio6" label="Maybe" name="radioDemo" value="maybe">Maybe</auro-radio>
+</auro-radio-group>

components/radio/apiExamples/customRadio.html

@@ -0,0 +1,6 @@
+<custom-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <custom-radio id="customRadio1" label="Yes" name="radioDemo" value="yes"></custom-radio>
+  <custom-radio id="customRadio2" label="No" name="radioDemo" value="no"></custom-radio>
+  <custom-radio id="customRadio3" label="Maybe" name="radioDemo" value="maybe"></custom-radio>
+</custom-radio-group>

components/radio/apiExamples/disabled.html

@@ -0,0 +1,14 @@
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="disabledRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="disabledRadio2" label="No" name="radioDemo" value="no" disabled></auro-radio>
+  <auro-radio id="disabledRadio3" 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="disabledRadio4" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="disabledRadio5" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="disabledRadio6" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
+

components/radio/apiExamples/dynamic.html

@@ -0,0 +1,3 @@
+<auro-radio-group required id="dynamicExample">
+  <span slot="legend">Form label goes here</span>
+</auro-radio-group>

components/radio/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 = `dynamicRadio${i}`;
+    radio.label = values[i];
+    radio.name = 'radioDemo';
+    radio.value = values[i];
+    radio.textContent = values[i];
+
+    radioGroup.appendChild(radio);
+  }
+}

components/radio/apiExamples/error.html

@@ -0,0 +1,6 @@
+<auro-radio-group error="There is an error with this form entry">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="errorRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="errorRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="errorRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>

components/radio/apiExamples/horizontal.html

@@ -0,0 +1,6 @@
+<auro-radio-group horizontal>
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="horizontalRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="horizontalRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="horizontalRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>

components/radio/apiExamples/optionalLabel.html

@@ -0,0 +1,7 @@
+<auro-radio-group>
+  <span slot="legend">Form label goes here</span>
+  <span slot="optionalLabel">(add custom label here)</span>
+  <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>

components/radio/apiExamples/required.html

@@ -0,0 +1,6 @@
+<auro-radio-group required setCustomValidityValueMissing="value missing">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="requiredRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="requiredRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="requiredRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>

components/radio/demo/api.html

@@ -0,0 +1,50 @@
+<!--
+  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/api.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-radio custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/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>
+    <script type="module" data-demo-script="true">
+      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>
+  </body>
+</html>

components/radio/demo/api.js

@@ -0,0 +1,17 @@
+import { dynamicExample } from "../apiExamples/dynamic";
+import './index.js';
+
+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);
+    }
+  }
+}