@aurodesignsystem/auro-formkit 5.9.1 → 5.9.2

package/components/counter/demo/index.md

@@ -1,24 +1,34 @@
 <!--
-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`
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
-# Counter
-
+# 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
+## 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-counter` element should be used in situations where users may:
+
+* Need to input a numeric value within a defined range
+* Need a user-friendly interface for quantity selection
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Example(s)
+
 ### Basic Counter
 
-The counter component provides a simple interface for incrementing or decrementing numeric values. It displays a label with increment/decrement buttons and the current value. This is the most basic implementation of a standalone counter:
+The counter component provides a simple interface for incrementing or decrementing numeric values. It displays a label with increment/decrement buttons and the current value. 
 
+This example demonstrates most basic implementation of a standalone counter.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
   <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
@@ -27,14 +37,6 @@ The counter component provides a simple interface for incrementing or decrementi
   </auro-counter>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
-  <auro-counter appearance="inverse">
-    Adults
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
@@ -46,142 +48,11 @@ The counter component provides a simple interface for incrementing or decrementi
 </auro-counter>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearance.html -->
-<auro-counter appearance="inverse">
-  Adults
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Counter with Description
-
-Adding a description provides additional context to users. The description appears below the main label and is useful for displaying important information or requirements:
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-description.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic-description.html -->
-  <auro-counter>
-    Adults
-    <span slot="description">18 years or older</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDescription.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDescription.html -->
-  <auro-counter appearance="inverse">
-    Adults
-    <span slot="description">18 years or older</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-description.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic-description.html -->
-
-```html
-<auro-counter>
-  Adults
-  <span slot="description">18 years or older</span>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDescription.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDescription.html -->
-<auro-counter appearance="inverse">
-  Adults
-  <span slot="description">18 years or older</span>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Counter with Help Text
-
-Help text is supported with counters, and can be added by targetting the `helptext` slot.
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-helptext.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/counter-helptext.html -->
-  <auro-counter>
-    Adults
-    <span slot="helpText">This is help text for the counter</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance-counter-helptext.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance-counter-helptext.html -->
-  <auro-counter appearance="inverse">
-    Adults
-    <span slot="helpText">This is help text for the counter</span>
-  </auro-counter>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-helptext.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/counter-helptext.html -->
-
-```html
-<auro-counter>
-  Adults
-  <span slot="helpText">This is help text for the counter</span>
-</auro-counter>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance-counter-helptext.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearance-counter-helptext.html -->
-<auro-counter appearance="inverse">
-  Adults
-  <span slot="helpText">This is help text for the counter</span>
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Counter with Custom Error
-
-A custom error can be set on the counter by adding the `error` attribute with 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/inverseAppearance-counter-error.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance-counter-error.html -->
-  <auro-counter appearance="inverse" 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/inverseAppearance-counter-error.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearance-counter-error.html -->
-<auro-counter appearance="inverse" error="There is an error with the counter">
-  Adults
-</auro-counter>
-<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
 ### Basic Counter Group
 
-Counter groups allow you to manage multiple related counters together. This is useful when you need to collect multiple quantities that are related, such as different passenger types:
+Counter groups allow you to manage multiple related counters together. This is useful when you need to collect multiple quantities that are related, such as different passenger types.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
@@ -199,22 +70,6 @@ Counter groups allow you to manage multiple related counters together. This is u
   </auro-counter-group>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceGroup.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceGroup.html -->
-  <auro-counter-group appearance="inverse">
-    <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) -->
@@ -234,168 +89,4 @@ Counter groups allow you to manage multiple related counters together. This is u
 </auro-counter-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceGroup.html) -->
-<!-- The below content is automatically added from ./../apiExamples/inverseAppearanceGroup.html -->
-<auro-counter-group appearance="inverse">
-  <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>
-
-### Dropdown Counter Group
-
-The dropdown mode provides a more compact interface, ideal for forms where space is limited. It collapses the counters into a dropdown that expands when clicked.
-
-When using a dropdown, an additional layout, `snowflake`, is available for use:
-
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-basic.html -->
-  <auro-counter-group isDropdown>
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <auro-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
-      Children
-      <span slot="description">2-17 years</span>
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark" aria-hidden>
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDropdown.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDropdown.html -->
-  <auro-counter-group appearance="inverse" isDropdown>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <auro-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
-      Children
-      <span slot="description">2-17 years</span>
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
-  <!-- Example of counter-group properties -->
-  <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-    <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
-    <div slot="label">Snowflake Dropdown Group</div>
-    <div slot="helpText">Total must be between 2-10</div>
-    <auro-counter>
-      Counter 1
-    </auro-counter>
-    <auro-counter>
-      Counter 2
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<div class="exampleWrapper--ondark">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance-dropdown-snowflake.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance-dropdown-snowflake.html -->
-  <!-- Example of counter-group properties -->
-  <auro-counter-group max="10" min="2" isDropdown layout="snowflake" appearance="inverse">
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-    <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
-    <div slot="label">Snowflake Dropdown Group</div>
-    <div slot="helpText">Total must be between 2-10</div>
-    <auro-counter>
-      Counter 1
-    </auro-counter>
-    <auro-counter>
-      Counter 2
-    </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-basic.html) -->
-  <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-basic.html -->
-  ```html
-  <auro-counter-group isDropdown>
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <auro-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
-      Children
-      <span slot="description">2-17 years</span>
-    </auro-counter>
-  </auro-counter-group>
-  ```
-  <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearanceDropdown.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearanceDropdown.html -->
-  <auro-counter-group appearance="inverse" isDropdown>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <auro-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </auro-counter>
-    <auro-counter>
-      Children
-      <span slot="description">2-17 years</span>
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
-  <!-- Example of counter-group properties -->
-  <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-    <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
-    <div slot="label">Snowflake Dropdown Group</div>
-    <div slot="helpText">Total must be between 2-10</div>
-    <auro-counter>
-      Counter 1
-    </auro-counter>
-    <auro-counter>
-      Counter 2
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inverseAppearance-dropdown-snowflake.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/inverseAppearance-dropdown-snowflake.html -->
-  <!-- Example of counter-group properties -->
-  <auro-counter-group max="10" min="2" isDropdown layout="snowflake" appearance="inverse">
-    <span slot="ariaLabel.bib.close">Close Popup</span>
-    <div slot="bib.fullscreen.headline">Group fullscreen label</div>
-    <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
-    <div slot="label">Snowflake Dropdown Group</div>
-    <div slot="helpText">Total must be between 2-10</div>
-    <auro-counter>
-      Counter 1
-    </auro-counter>
-    <auro-counter>
-      Counter 2
-    </auro-counter>
-  </auro-counter-group>
-  <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>