@aurodesignsystem-dev/auro-formkit 0.0.0-pr755.0 → 0.0.0-pr755.1

package/components/counter/demo/api.md

@@ -8,6 +8,7 @@
 | Property   | Attribute  | Type      | Default     | Description                                      |
 |------------|------------|-----------|-------------|--------------------------------------------------|
 | [disabled](#disabled) | `disabled` | `boolean` | false       | Indicates if the counter is disabled.            |
+| [error](#error)    | `error`    | `string`  |             | Error state and message.<br />True if set, value is the error message. |
 | [max](#max)      | `max`      | `number`  | 9           | The maximum value for the counter.               |
 | [min](#min)      | `min`      | `number`  | 0           | The minimum value for the counter.               |
 | [onDark](#onDark)   | `onDark`   | `boolean` | false       | If declared, the counter will be rendered with onDark styles. |
@@ -42,6 +43,7 @@
 | Property                  | Attribute                 | Type                     | Default        | Description                                      |
 |---------------------------|---------------------------|--------------------------|----------------|--------------------------------------------------|
 | [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean`                | "false"        | If declared, bib's position will be automatically calculated where to appear. |
+| [error](#error)                   | `error`                   | `string`                 |                | The current error message to display when the component is invalid. |
 | [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `string`                 | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
 | [isDropdown](#isDropdown)              | `isDropdown`              | `boolean`                | false          | Indicates if the counter group is displayed as a dropdown. |
 | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean`                | false          | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
@@ -52,7 +54,7 @@
 | [noFlip](#noFlip)                  | `noFlip`                  | `boolean`                | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
 | [offset](#offset)                  | `offset`                  | `number`                 | "0"            | Gap between the trigger element and bib.         |
 | [onDark](#onDark)                  | `onDark`                  | `boolean`                | false          | If declared, counters and dropdown will be rendered with onDark styles. |
-| [placement](#placement)               | `placement`               | `string`                 | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
+| [placement](#placement)               | `placement`               | `string`                 | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end". |
 | [total](#total)                   | `total`                   | `number`                 | "undefined"    | The total value of the counters.                 |
 | [validity](#validity)                | `validity`                | `string`                 | "undefined"    | Reflects the validity state.                     |
 | [value](#value)                   | `value`                   | `object`                 | "undefined"    | The current individual values of the nested counters. |
@@ -340,6 +342,131 @@ counter.addEventListener('input', (event) => {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Counter with Custom Error
+
+A custom error can be set on the counter by adding the `error` attribute the desired message.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
+  <auro-counter error="There is an error with the counter">
+    Adults
+  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<div class="exampleWrapper--ondark" aria-hidden>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
+  <auro-counter ondark error="There is an error with the counter">
+    Adults
+  </auro-counter>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
+
+```html
+<auro-counter error="There is an error with the counter">
+  Adults
+</auro-counter>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
+<!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
+<auro-counter ondark error="There is an error with the counter">
+  Adults
+</auro-counter>
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Counter Dropdown with Errored Counters
+
+A counter dropdown with counters in an errored state will display the errors for each errored counter by default
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-error-basic.html -->
+  <auro-counter-group isDropdown>
+    <div slot="bib.fullscreen.headline">Passengers</div>
+    <div slot="label">Passengers</div>
+    <auro-counter error="Cannot have less than 1 adult passenger">
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter error="Cannot have more than 2 child passengers">
+      Children
+      <span slot="description">2-17 years</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/dropdown-error-basic.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-basic.html -->
+
+```html
+<auro-counter-group isDropdown>
+  <div slot="bib.fullscreen.headline">Passengers</div>
+  <div slot="label">Passengers</div>
+  <auro-counter error="Cannot have less than 1 adult passenger">
+    Adults
+    <span slot="description">18 years or older</span>
+  </auro-counter>
+  <auro-counter error="Cannot have more than 2 child passengers">
+    Children
+    <span slot="description">2-17 years</span>
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Counter Dropdown with Custom Error
+
+The error message for a dropdown counter with errored counters can also be overridden with the `error` attribute.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-custom.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-error-custom.html -->
+  <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
+    <div slot="bib.fullscreen.headline">Passengers</div>
+    <div slot="label">Passengers</div>
+    <auro-counter error="Cannot have less than 1 adult passenger">
+      Adults
+      <span slot="description">18 years or older</span>
+    </auro-counter>
+    <auro-counter error="Cannot have more than 2 child passengers">
+      Children
+      <span slot="description">2-17 years</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/dropdown-error-custom.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-custom.html -->
+
+```html
+<auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
+  <div slot="bib.fullscreen.headline">Passengers</div>
+  <div slot="label">Passengers</div>
+  <auro-counter error="Cannot have less than 1 adult passenger">
+    Adults
+    <span slot="description">18 years or older</span>
+  </auro-counter>
+  <auro-counter error="Cannot have more than 2 child passengers">
+    Children
+    <span slot="description">2-17 years</span>
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Group Max/Min
 
 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.
@@ -428,7 +555,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   <div style="width: 350px">
     <auro-counter-group isDropdown offset="20" placement="bottom-end">
       <div slot="bib.fullscreen.headline">Passengers</div>
-      <div slot="label">bottom-end bib with 20px offset</div>
+      <span slot="label">Label</span>
+      <span slot="helpText">bottom-end bib with 20px offset</span>
       <auro-counter>
         Adults
         <span slot="description">18 years or older</span>
@@ -440,7 +568,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
     </auro-counter-group>
     <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
       <div slot="bib.fullscreen.headline">Passengers</div>
-      <div slot="label">bottom-end bib with 20px offset and noFlip</div>
+      <span slot="label">Label</span>
+      <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
       <auro-counter>
         Adults
         <span slot="description">18 years or older</span>
@@ -452,7 +581,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
     </auro-counter-group>
     <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
       <div slot="bib.fullscreen.headline">Passengers</div>
-      <div slot="label">right bib with 20px offset, noFlip and autoPlacement</div>
+      <span slot="label">Label</span>
+      <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
       <auro-counter>
         Adults
         <span slot="description">18 years or older</span>
@@ -474,7 +604,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
 <div style="width: 350px">
   <auro-counter-group isDropdown offset="20" placement="bottom-end">
     <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">bottom-end bib with 20px offset</div>
+    <span slot="label">Label</span>
+    <span slot="helpText">bottom-end bib with 20px offset</span>
     <auro-counter>
       Adults
       <span slot="description">18 years or older</span>
@@ -486,7 +617,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   </auro-counter-group>
   <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
     <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">bottom-end bib with 20px offset and noFlip</div>
+    <span slot="label">Label</span>
+    <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
     <auro-counter>
       Adults
       <span slot="description">18 years or older</span>
@@ -498,7 +630,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   </auro-counter-group>
   <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
     <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">right bib with 20px offset, noFlip and autoPlacement</div>
+    <span slot="label">Label</span>
+    <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
     <auro-counter>
       Adults
       <span slot="description">18 years or older</span>