merging new components into main

components/checkbox/apiExamples/basic.html

@@ -0,0 +1,7 @@
+<auro-checkbox-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="checkbox option" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="checkbox option" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="checkbox option" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="checkbox option" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+</auro-checkbox-group>

components/checkbox/apiExamples/customCheckbox.html

@@ -0,0 +1,7 @@
+<custom-checkbox-group>
+  <span slot="legend">Form label goes here</span>
+  <custom-checkbox value="checkbox option" name="example1" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
+  <custom-checkbox value="checkbox option" name="example2" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
+  <custom-checkbox value="checkbox option" name="example3" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
+  <custom-checkbox value="checkbox option" name="example4" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
+</custom-checkbox-group>

components/checkbox/apiExamples/disabled.html

@@ -0,0 +1,7 @@
+<auro-checkbox-group>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+</auro-checkbox-group>

components/checkbox/apiExamples/disabledGroup.html

@@ -0,0 +1,7 @@
+<auro-checkbox-group disabled>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="disabled checkbox option" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled checkbox option" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled checkbox option" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled checkbox option" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+</auro-checkbox-group>

components/checkbox/apiExamples/errorGroup.html

@@ -0,0 +1,7 @@
+<auro-checkbox-group error="custom error">
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="error checkbox option" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error checkbox option" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error checkbox option" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error checkbox option" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+</auro-checkbox-group>

components/checkbox/apiExamples/horizontal.html

@@ -0,0 +1,6 @@
+<auro-checkbox-group horizontal>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="checkbox option" value="yes" id="checkbox-horizontal1">Yes</auro-checkbox>
+  <auro-checkbox value="checkbox option" value="no" id="checkbox-horizontal2">No</auro-checkbox>
+  <auro-checkbox value="checkbox option" value="maybe" id="checkbox-horizontal3">Maybe</auro-checkbox>
+</auro-checkbox-group>

components/checkbox/apiExamples/horizontalLimit.html

@@ -0,0 +1,7 @@
+<auro-checkbox-group horizontal>
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="checkbox option" value="yes" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
+  <auro-checkbox value="checkbox option" value="no" id="checkbox-horizontalLimit2">No</auro-checkbox>
+  <auro-checkbox value="checkbox option" value="maybe" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
+  <auro-checkbox value="checkbox optiom" value="not sure" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
+</auro-checkbox-group>

components/checkbox/apiExamples/required.html

@@ -0,0 +1,7 @@
+<auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
+  <span slot="legend">Form label goes here</span>
+  <auro-checkbox value="checked option" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="checkbox Option" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
+  <auro-checkbox value="checkbox Option" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="checkbox Option" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
+</auro-checkbox-group>

components/checkbox/demo/api.html

@@ -0,0 +1,48 @@
+<!--
+  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/apiExamples.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-checkbox 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" src="./api.min.js"></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/checkbox/demo/api.js

@@ -0,0 +1 @@
+import './index.js';