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

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

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

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

@@ -0,0 +1,53 @@
+<!--
+  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-counter 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">
+      import { initExamples } from "./index.min.js";
+      initExamples();
+    </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-dropdown@latest/dist/auro-dropdown__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/counter/demo/index.js CHANGED Viewed

@@ -1,8 +1,9 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroCounter } from '../src/auro-counter.js';
+import { AuroCounterGroup } from '../src/auro-counter-group.js';
 AuroCounter.register();
+AuroCounterGroup.register();
 AuroCounter.register('custom-counter');
 export function initExamples(initialCount = 0) {

package/components/counter/demo/index.md ADDED Viewed

@@ -0,0 +1,298 @@
+<!--
+The index.md file is a compiled document. No edits should be made directly to this file.
+index.md is created by running `npm run build:markdownDocs`.
+This file is generated based on a template fetched from `./docs/partials/index.md`
+-->
+# Counter
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
+<!-- The below content is automatically added from ./../docs/partials/description.md -->
+The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
+<!-- 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-counter-group>
+    <auro-counter>
+      Short label
+    </auro-counter>
+    <auro-counter>
+      Another short label
+    </auro-counter>
+    <auro-counter>
+      This is an example of the wrapping behavior for a long label
+    </auro-counter>
+  </auro-counter-group>
+  <!-- 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-counter-group>
+  <auro-counter>
+    Short label
+  </auro-counter>
+  <auro-counter>
+    Another short label
+  </auro-counter>
+  <auro-counter>
+    This is an example of the wrapping behavior for a long label
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+### Description slot
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/description.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/description.html -->
+  <auro-counter-group>
+    <auro-counter>
+      Short label
+      <span slot="description"
+        >This is an example of a long sub label wrapping behavior</span
+      >
+    </auro-counter>
+    <auro-counter>
+      This is an example of the wrapping behavior for a long label
+      <span slot="description">with short sub label text</span>
+    </auro-counter>
+    <auro-counter>
+      This is an example of the wrapping behavior for a long label
+      <span slot="description"
+        >Combined with an example of a long sub label wrapping behavior</span
+      >
+    </auro-counter>
+  </auro-counter-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/description.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/description.html -->
+```html
+<auro-counter-group>
+  <auro-counter>
+    Short label
+    <span slot="description"
+      >This is an example of a long sub label wrapping behavior</span
+    >
+  </auro-counter>
+  <auro-counter>
+    This is an example of the wrapping behavior for a long label
+    <span slot="description">with short sub label text</span>
+  </auro-counter>
+  <auro-counter>
+    This is an example of the wrapping behavior for a long label
+    <span slot="description"
+      >Combined with an example of a long sub label wrapping behavior</span
+    >
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+### Dropdown
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
+  <div style="max-width: 350px;">
+    <auro-counter-group isDropdown>
+      <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+      <div slot="label">Passengers</div>
+      <auro-counter>
+        Adults
+        <span slot="description">18 years or older</span>
+      </auro-counter>
+      <auro-counter>
+        Children
+        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+      </auro-counter>
+      <auro-counter>
+        Lap Infants
+        <span slot="description">Under 2 years</span>
+      </auro-counter>
+    </auro-counter-group>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown.html -->
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+    <div slot="label">Passengers</div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+### Dropdown with custom value text
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-value-text.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-value-text.html -->
+  <div style="max-width: 350px;">
+    <auro-counter-group isDropdown>
+      <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+      <div slot="valueText">Custom value text</div>
+      <div slot="label"></div>
+      <auro-counter>
+        Adults
+        <span slot="description">18 years or older</span>
+      </auro-counter>
+      <auro-counter>
+        Children
+        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+      </auro-counter>
+      <auro-counter>
+        Lap Infants
+        <span slot="description">Under 2 years</span>
+      </auro-counter>
+    </auro-counter-group>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-value-text.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-value-text.html -->
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+    <div slot="valueText">Custom value text</div>
+    <div slot="label"></div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+### Dropdown with help text
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-help-text.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-help-text.html -->
+  <div style="max-width: 350px;">
+    <auro-counter-group isDropdown>
+      <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+      <div slot="helpText">This is help text</div>
+      <auro-counter>
+        Adults
+        <span slot="description">18 years or older</span>
+      </auro-counter>
+      <auro-counter>
+        Children
+        <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+      </auro-counter>
+      <auro-counter>
+        Lap Infants
+        <span slot="description">Under 2 years</span>
+      </auro-counter>
+    </auro-counter-group>
+  </div>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-help-text.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-help-text.html -->
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group isDropdown>
+    <span slot="bib.fullscreen.headline">Counter Bib Header</span>
+    <div slot="helpText">This is help text</div>
+    <auro-counter>
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter>
+      Children
+      <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
+    </auro-counter>
+    <auro-counter>
+      Lap Infants
+      <span slot="description">Under 2 years</span>
+    </auro-counter>
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+### Disabled
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/disabled.html -->
+  <auro-counter-group>
+    <auro-counter disabled>
+      Short label
+    </auro-counter>
+    <auro-counter disabled>
+      This is an example of the wrapping behavior for a long label
+      <span slot="description">with short sub label text</span>
+    </auro-counter>
+  </auro-counter-group>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
+```html
+<auro-counter-group>
+  <auro-counter disabled>
+    Short label
+  </auro-counter>
+  <auro-counter disabled>
+    This is an example of the wrapping behavior for a long label
+    <span slot="description">with short sub label text</span>
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>