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

@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.50

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 (856) hide show

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

@@ -0,0 +1,57 @@
+<!--
+  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 ./docs/partials/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-datepicker custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <!-- legacy reference is still needed to support auro-accordion's use of legacy toke vales at this time -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.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@4.3.0/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@1.24.1/prism.js';
+      fetch('./index.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </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>
+    <script type="module" data-demo-script="true">
+      import { initExamples } from "./index.min.js";
+      initExamples();
+    </script>
+  </body>
+</html>

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

@@ -1,4 +1,4 @@
-# datepicker
+# Datepicker
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
@@ -23,6 +23,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic.html -->
   <auro-datepicker>
+    <span slot="mobileHeadline">Datepicker Headline</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -35,6 +36,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
 ```html
 <auro-datepicker>
+  <span slot="mobileHeadline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -48,6 +50,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
   <auro-datepicker range>
+    <span slot="mobileHeadline">Datepicker Range Headline</span>
     <span slot="fromLabel">Departure</span>
     <span slot="toLabel">Return</span>
     <span slot="mobileDateLabel">Roundtrip</span>
@@ -61,6 +64,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
 ```html
 <auro-datepicker range>
+  <span slot="mobileHeadline">Datepicker Range Headline</span>
   <span slot="fromLabel">Departure</span>
   <span slot="toLabel">Return</span>
   <span slot="mobileDateLabel">Roundtrip</span>
@@ -87,6 +91,7 @@ This will create a new custom element that you can use in your HTML that will fu
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
   <!-- The below content is automatically added from ./../apiExamples/custom.html -->
   <custom-datepicker selectedDate="06/16/2022">
+      <span slot="mobileHeadline">custom-datepicker Example</span>
       <span slot="fromLabel">Choose a date</span>
       <span slot="mobileDateLabel">Choose a date</span>
   </custom-datepicker>
@@ -99,6 +104,7 @@ This will create a new custom element that you can use in your HTML that will fu
 ```html
 <custom-datepicker selectedDate="06/16/2022">
+    <span slot="mobileHeadline">custom-datepicker Example</span>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
 </custom-datepicker>