@aurodesignsystem/auro-formkit 2.0.0-beta.3 → 2.0.0-beta.31

package/components/counter/demo/index.js

@@ -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

@@ -0,0 +1,292 @@
+<!--
+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>
+      <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>
+    <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>
+      <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>
+    <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>
+      <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>
+    <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>