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/select/demo/index.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!--
+  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/demo.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-select 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"></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>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+  </body>
+</html>

package/components/select/demo/index.js CHANGED Viewed

@@ -3,7 +3,7 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
-import '../../menu/src/index.js';
+import '../../menu/src/registered.js';
 AuroSelect.register(); // registering to `auro-select`
 AuroSelect.register('custom-select');

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

@@ -21,6 +21,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
       <auro-menuoption value="price">Price</auro-menuoption>
@@ -39,6 +40,7 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
     <auro-menuoption value="price">Price</auro-menuoption>
@@ -60,6 +62,7 @@ Use the `placeholder` slot to inject a custom placeholder option with the select
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customPlaceholder.html) -->
   <!-- The below content is automatically added from ./../apiExamples/customPlaceholder.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Please select your preferred option</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -79,6 +82,7 @@ Use the `placeholder` slot to inject a custom placeholder option with the select
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Please select your preferred option</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -101,6 +105,7 @@ The following example illustrates the use of the `label`, `placeholder` and `hel
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/slots.html) -->
   <!-- The below content is automatically added from ./../apiExamples/slots.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <span slot="label">Please choose a preference</span>
     <span slot="helpText">Preferences are maintained for future use</span>
@@ -122,6 +127,7 @@ The following example illustrates the use of the `label`, `placeholder` and `hel
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <span slot="label">Please choose a preference</span>
   <span slot="helpText">Preferences are maintained for future use</span>
@@ -146,6 +152,7 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withIcons.html) -->
   <!-- The below content is automatically added from ./../apiExamples/withIcons.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="air">
@@ -174,6 +181,7 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="air">
@@ -205,6 +213,7 @@ This example shows nesting `<auro-menu>` elements to create submenus.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/withSubmenus.html) -->
   <!-- The below content is automatically added from ./../apiExamples/withSubmenus.html -->
   <auro-select>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -247,6 +256,7 @@ This example shows nesting `<auro-menu>` elements to create submenus.
 ```html
 <auro-select>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -292,6 +302,7 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noCheckmark.html) -->
   <!-- The below content is automatically added from ./../apiExamples/noCheckmark.html -->
   <auro-select nocheckmark>
+      <span slot="bib.fullscreen.headline">Bib Headline</span>
       <label slot="placeholder">Placeholder Text</label>
       <auro-menu>
           <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -311,6 +322,7 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
 ```html
 <auro-select nocheckmark>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
         <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -335,6 +347,7 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customBibHeight.html) -->
   <!-- The below content is automatically added from ../apiExamples/customBibHeight.html -->
   <auro-select id="customBibHeightExample">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -359,6 +372,7 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
 ```html
 <auro-select id="customBibHeightExample">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -386,6 +400,7 @@ Use the `error` boolean attribute to toggle the error UI.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
   <!-- The below content is automatically added from ./../apiExamples/error.html -->
   <auro-select error="Custom error message">
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -405,6 +420,7 @@ Use the `error` boolean attribute to toggle the error UI.
 ```html
 <auro-select error="Custom error message">
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -427,6 +443,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
   <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
   <auro-select disabled>
+    <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <auro-menu>
       <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -446,6 +463,7 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 ```html
 <auro-select disabled>
+  <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <auro-menu>
     <auro-menuoption value="stops">Stops</auro-menuoption>
@@ -458,55 +476,4 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
 </auro-select>
 ```
 <!-- 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-select` custom element is defined automatically.
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroSelect.register(name)` method and pass in a unique name.
-```js
-import { AuroSelect } from './src/auro-select.js';
-AuroSelect.register('custom-select');
-```
-This will create a new custom element that you can use in your HTML that will function identically to the `<auro-select>` element.
-<div class="exampleWrapper exampleWrapper--flex">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/custom.html -->
-  <custom-select>
-    <label slot="placeholder">Placeholder Text</label>
-    <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-menu>
-  </custom-select>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
-```html
-<custom-select>
-  <label slot="placeholder">Placeholder Text</label>
-  <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-menu>
-</custom-select>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>