feat: counter group added with counter refactor, docs, and validation #…

…91
AlaskaAirlines · Jan 16, 2025 · 2b34587 · 2b34587
1 parent ef46ddd
commit 2b34587
Show file tree

Hide file tree

Showing 29 changed files with 595 additions and 214 deletions.
diff --git a/components/counter/README.md b/components/counter/README.md
@@ -21,7 +21,7 @@ The following sections are editable by making changes to the following files:
 
 <!-- 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 such as adding passengers to a flight.
+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 -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -76,15 +76,14 @@ import "@auro-formkit/-formkit/-formkit/auro-counter";
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-counter>
-  Short label
-</auro-counter>
-<br>
-<hr>
-<br>
-<auro-counter>
-  This is an example of the wrapping behavior for a long label
-</auro-counter>
+<auro-counter-group>
+  <auro-counter>
+    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 -->
 
@@ -128,15 +127,14 @@ The `auro-counter` element should be used in situations where users may:
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-counter>
-  Short label
-</auro-counter>
-<br>
-<hr>
-<br>
-<auro-counter>
-  This is an example of the wrapping behavior for a long label
-</auro-counter>
+<auro-counter-group>
+  <auro-counter>
+    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 -->
 

diff --git a/components/counter/apiExamples/basic.html b/components/counter/apiExamples/basic.html
@@ -1,9 +1,8 @@
-<auro-counter>
-  Short label
-</auro-counter>
-<br>
-<hr>
-<br>
-<auro-counter>
-  This is an example of the wrapping behavior for a long label
-</auro-counter>
+<auro-counter-group>
+  <auro-counter>
+    Short label
+  </auro-counter>
+  <auro-counter>
+    This is an example of the wrapping behavior for a long label
+  </auro-counter>
+</auro-counter-group>
diff --git a/components/counter/apiExamples/description.html b/components/counter/apiExamples/description.html
@@ -0,0 +1,18 @@
+<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>
diff --git a/components/counter/apiExamples/disabled.html b/components/counter/apiExamples/disabled.html
@@ -1,10 +1,9 @@
-<auro-counter disabled>
-  Short label
-</auro-counter>
-<br>
-<hr>
-<br>
-<auro-counter disabled>
-  This is an example of the wrapping behavior for a long label
-  <span slot="subLabel">with short sub label text</span>
-</auro-counter>
+<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>
diff --git a/components/counter/apiExamples/dropdown.html b/components/counter/apiExamples/dropdown.html
@@ -0,0 +1,19 @@
+<div style="width: 300px;">
+  <auro-dropdown common chevron>
+    <div slot="trigger">Trigger</div>
+    <auro-counter-group style="padding: 1em; width: 400px; max-height: 400px; overflow: scroll;">
+      <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-dropdown>
+</div>
diff --git a/components/counter/apiExamples/group-counter-max.html b/components/counter/apiExamples/group-counter-max.html
@@ -0,0 +1,8 @@
+<auro-counter-group max="12" min="0">
+  <auro-counter max="5">
+    This counter has a max value of 5
+  </auro-counter>
+  <auro-counter max="8">
+    This counter has a max value of 8
+  </auro-counter>
+</auro-counter-group>
diff --git a/components/counter/apiExamples/group-max.html b/components/counter/apiExamples/group-max.html
@@ -0,0 +1,8 @@
+<auro-counter-group max="12" min="0">
+  <auro-counter>
+    Short label
+  </auro-counter>
+  <auro-counter>
+    This is an example of the wrapping behavior for a long label
+  </auro-counter>
+</auro-counter-group>
diff --git a/components/counter/apiExamples/sub-label.html b/components/counter/apiExamples/sub-label.html
diff --git a/components/counter/demo/index.html b/components/counter/demo/index.html
@@ -47,6 +47,7 @@
     </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>
diff --git a/components/counter/demo/index.js b/components/counter/demo/index.js
@@ -1,10 +1,9 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroCounter } from '../src/auro-counter.js';
-import { AuroCounterButton } from '../src/auro-counter-button.js';
-
+import { AuroCounterGroup } from '../src/auro-counter-group.js';
 
 AuroCounter.register();
-AuroCounterButton.register();
+AuroCounterGroup.register();
 AuroCounter.register('custom-counter');
 
 export function initExamples(initialCount = 0) {

diff --git a/components/counter/docs/api.md b/components/counter/docs/api.md
@@ -2,31 +2,23 @@
 
 ## Properties
 
-| Property                          | Attribute                         | Type      | Default     | Description                                      |
-|-----------------------------------|-----------------------------------|-----------|-------------|--------------------------------------------------|
-| `disabled`                        | `disabled`                        | `boolean` | false       | Determines whether the counter is interactive or disabled. |
-| `error`                           | `error`                           | `boolean` | false       | Indicates if the counter is in an error state.   |
-| `max`                             | `max`                             | `number`  | 9           | Maximum value of the counter.                    |
-| `min`                             | `min`                             | `number`  | 0           | Minimum value of the counter.                    |
-| `noValidate`                      | `noValidate`                      | `boolean` |             |                                                  |
-| `setCustomValidity`               | `setCustomValidity`               | `string`  |             |                                                  |
-| `setCustomValidityCustomError`    | `setCustomValidityCustomError`    | `string`  |             |                                                  |
-| `setCustomValidityRangeOverflow`  | `setCustomValidityRangeOverflow`  | `string`  |             |                                                  |
-| `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` | `string`  |             |                                                  |
-| `setCustomValidityValueMissing`   | `setCustomValidityValueMissing`   | `string`  |             |                                                  |
-| `subLabel`                        | `subLabel`                        | `string`  | ""          | Optional sub-label text for the counter.         |
-| `validity`                        | `validity`                        | `string`  | "undefined" | Indicates if the current value is valid.         |
-| `value`                           | `value`                           | `number`  | "undefined" | Value of the counter.                            |
+| Property     | Attribute    | Type      | Default     | Description                                 |
+|--------------|--------------|-----------|-------------|---------------------------------------------|
+| `disableMax` | `disableMax` | `boolean` | false       | Indicates if the maximum value is disabled. |
+| `disableMin` | `disableMin` | `boolean` | false       | Indicates if the minimum value is disabled. |
+| `disabled`   | `disabled`   | `boolean` | false       | Indicates if the counter is disabled.       |
+| `max`        | `max`        | `number`  | 9           | The maximum value for the counter.          |
+| `min`        | `min`        | `number`  | 0           | The minimum value for the counter.          |
+| `noValidate` | `noValidate` | `boolean` | false       | Indicates if validation is disabled.        |
+| `validity`   | `validity`   | `string`  | "undefined" | The validity state of the counter.          |
+| `value`      | `value`      | `number`  | "undefined" | The current value of the counter.           |
 
 ## Methods
 
-| Method                | Type                         | Description                                      |
-|-----------------------|------------------------------|--------------------------------------------------|
-| `decrement`           | `(): void`                   | Decrements the value of the counter by 1 if it is greater than the minimum value. |
-| `increment`           | `(): void`                   | Increments the counter value by 1 if it is less than the maximum value. |
-| `initValue`           | `(): void`                   | Initializes the value of the counter.<br />If the current value is undefined, it sets the value to the minimum value. |
-| `isIncrementDisabled` | `(extrema: number): boolean` | Determines if the increment button should be disabled based on the current value and extrema.<br /><br />**extrema**: The extreme value (either min or max) to compare against the current value. |
-| `jumpFocusToEnabled`  | `(): void`                   | Moves the focus to the first enabled button within the shadow DOM.<br />This method searches for the first `auro-counter-button` element that is not disabled<br />and sets the focus on it. |
+| Method      | Type       | Description                               |
+|-------------|------------|-------------------------------------------|
+| `decrement` | `(): void` | Decrements the value of the counter by 1. |
+| `increment` | `(): void` | Increments the counter value by 1.        |
 
 ## Events
 
@@ -36,14 +28,40 @@
 
 ## Slots
 
-| Name | Description                         |
-|------|-------------------------------------|
-|      | Default slot for main label content |
+| Name          | Description                          |
+|---------------|--------------------------------------|
+| `Default`     | Main label content for the counter.  |
+| `description` | Descriptive content for the counter. |
 
 ## CSS Shadow Parts
 
-| Part             | Description                              |
-|------------------|------------------------------------------|
-| `controlMinus`   | Styling hook for minus button            |
-| `controlPlus`    | Styling hook for plus button             |
-| `counterControl` | Styling hook for counter control section |
+| Part             | Description                               |
+|------------------|-------------------------------------------|
+| `controlMinus`   | Styling hook for minus button.            |
+| `controlPlus`    | Styling hook for plus button.             |
+| `counterControl` | Styling hook for counter control section. |
+
+
+# auro-counter-group
+
+## Properties
+
+| Property     | Attribute    | Type      | Default     | Description                                      |
+|--------------|--------------|-----------|-------------|--------------------------------------------------|
+| `max`        | `max`        | `number`  | "undefined" | The maximum value allowed for the whole group of counters. |
+| `min`        | `min`        | `number`  | "undefined" | The minimum value allowed for the whole group of counters. |
+| `noValidate` | `noValidate` | `boolean` | false       | If true, disables validation.                    |
+| `validity`   | `validity`   | `string`  | "undefined" | Reflects the validity state.                     |
+| `value`      | `value`      | `number`  | "undefined" | The current value.                               |
+
+## Events
+
+| Event   | Type                                           |
+|---------|------------------------------------------------|
+| `input` | `CustomEvent<{ value: number \| undefined; }>` |
+
+## Slots
+
+| Name      | Description                |
+|-----------|----------------------------|
+| `Default` | Slot for counter elements. |
diff --git a/components/counter/docs/partials/api.md b/components/counter/docs/partials/api.md
@@ -1,22 +1,42 @@
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/api.md) -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
 
-### Basic
+### Group Max/Min
 
-The most basic, simple version of `auro-counter`.
+The group counter max or min property sets the value for all counters in the group. If a counter has a max value set, the group max attribute will override it. All increment buttons as a result will be disabled to prevent the group of counters from exceeding the group max.
+
+**Example has group max set to 12**
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/group-max.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/group-max.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
 
+### Counter Max/Min
+
+You can also individually set the max or min value for each counter in a group.
+
+**Example has group max set to 12**
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/group-counter-max.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/group-counter-max.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
diff --git a/components/counter/docs/partials/description.md b/components/counter/docs/partials/description.md
@@ -1 +1 @@
-The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case such as adding passengers to a flight.
+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.
diff --git a/components/counter/docs/partials/index.md b/components/counter/docs/partials/index.md
@@ -27,16 +27,30 @@ This file is generated based on a template fetched from `./docs/partials/index.m
 
 </auro-accordion>
 
-### Sub label
+### Description slot
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/sub-label.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/description.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/sub-label.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/description.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
+### Dropdown
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>

diff --git a/components/counter/scripts/version.mjs b/components/counter/scripts/version.mjs
@@ -1,3 +1,4 @@
 import { writeDepVersionFile } from '@auro-formkit/build-tools/formVersionWriter';
 
-await writeDepVersionFile('@aurodesignsystem/auro-icon');
+await writeDepVersionFile('@aurodesignsystem/auro-icon');
+await writeDepVersionFile('@aurodesignsystem/auro-dropdown');
diff --git a/...nents/counter/scripts/wca/auro-counter.js → ...s/counter/scripts/wca/001-auro-counter.js b/...nents/counter/scripts/wca/auro-counter.js → ...s/counter/scripts/wca/001-auro-counter.js
@@ -1,9 +1,7 @@
 
 import { AuroCounter } from '../../src/auro-counter.js';
 
-/**
- */
-class AuroCounterWCA extends AuroCounter {}
+class AuroCounterWCA extends AuroCounter {};
 
 if (!customElements.get("auro-counter")) {
   customElements.define("auro-counter", AuroCounterWCA);

diff --git a/components/counter/scripts/wca/002-auro-counter-group.js b/components/counter/scripts/wca/002-auro-counter-group.js
@@ -0,0 +1,8 @@
+
+import { AuroCounterGroup } from '../../src/auro-counter-group.js';
+
+class AuroCounterGroupWCA extends AuroCounterGroup {};
+
+if (!customElements.get("auro-counter-group")) {
+  customElements.define("auro-counter-group", AuroCounterGroupWCA);
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case such as adding passengers to a flight.
		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.