npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.8 → 2.0.0 - Mend

@aurodesignsystem/auro-formkit 2.0.0-beta.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (968) hide show

package/components/radio/demo/index.html ADDED Viewed

@@ -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/index.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/prismjs@1.24.1/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('./index.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <script type="module" src="./index.min.js" data-demo-script="true"></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>

package/components/radio/demo/index.md CHANGED Viewed

@@ -74,49 +74,4 @@ This is a default configuration using the `<auro-radio-group>` and `<auro-radio>
 </auro-radio-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-## Recommended Use and Version Control
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `<auro-radio>` custom element is defined automatically.
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `register(name)` method on the component class and pass in a unique name.
-```js
-import { AuroRadio } from './src/auro-radio.js';
-import { AuroRadioGroup } from './src/auro-radio-group.js';
-AuroRadio.register('custom-radio');
-AuroRadioGroup.register('custom-radio-group');
-```
-This will create a new custom element that you can use in your HTML that will function identically to the `<auro-radio>` element.
-Using the `AuroRadio.register` function to create a custom `<auro-radio>` will NOT create a custom `<auro-radio-group>`. If you are using `AuroRadioGroup`, you will need to register both `AuroRadio` and `AuroRadioGroup` with their respective `.register` function.
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customRadio.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/customRadio.html -->
-  <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>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customRadio.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/customRadio.html -->
-```html
-<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>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>