@aurodesignsystem/auro-formkit 1.6.0-beta.4

package/components/datepicker/demo/index.js

@@ -0,0 +1,19 @@
+import { AuroDatePicker } from '../src/auro-datepicker.js';
+
+AuroDatePicker.register(); // registering to auro-datepicker
+AuroDatePicker.register('custom-datepicker');
+
+export function initExamples(initCount) {
+  initCount = initCount || 0;
+
+  try {
+    // example();
+  } catch {
+    if (initCount <= 20) {
+      // setTimeout handles issue where content is sometimes loaded after the functions get called
+      setTimeout(() => {
+        initExamples(initCount + 1);
+      }, 100);
+    }
+  }
+}

package/components/datepicker/demo/index.md

@@ -0,0 +1,107 @@
+# datepicker
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
+<!-- The below content is automatically added from ./../docs/partials/description.md -->
+The `<auro-datepicker>` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `<auro-datepicker>` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker).
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## auro-datepicker use cases
+
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
+The `<auro-datepicker>` element should be used in situations where users may:
+
+* select a single date
+* select a pair of dates which identify a calendar range
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Examples
+
+### Basic
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-datepicker>
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
+```html
+<auro-datepicker>
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Range
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
+  <auro-datepicker range>
+    <span slot="fromLabel">Departure</span>
+    <span slot="toLabel">Return</span>
+    <span slot="mobileDateLabel">Roundtrip</span>
+  </auro-datepicker>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basicRange.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
+
+```html
+<auro-datepicker range>
+  <span slot="fromLabel">Departure</span>
+  <span slot="toLabel">Return</span>
+  <span slot="mobileDateLabel">Roundtrip</span>
+</auro-datepicker>
+```
+<!-- 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-button` custom element is defined automatically.
+
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroDatePicker.register(name)` method and pass in a unique name.
+
+```js
+import { AuroDatePicker } from './src/auro-datepicker.js';
+
+AuroDatePicker.register('custom-datepicker');
+```
+
+This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` 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-datepicker selectedDate="06/16/2022">
+      <span slot="fromLabel">Choose a date</span>
+      <span slot="mobileDateLabel">Choose a date</span>
+  </custom-datepicker>
+  <!-- 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-datepicker selectedDate="06/16/2022">
+    <span slot="fromLabel">Choose a date</span>
+    <span slot="mobileDateLabel">Choose a date</span>
+</custom-datepicker>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>