@aurodesignsystem/auro-formkit 2.0.0-beta.44 → 2.0.0-beta.46

package/components/counter/README.md

@@ -100,7 +100,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.13.0/dist/tokens/CSSCustomProperties.css" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.43/dist/auro-counter__bundled.js" type="module"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-counter@2.0.0-beta.45/dist/auro-counter__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-counter use cases

package/components/counter/demo/api.js

@@ -1,10 +1,11 @@
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */
 import '../src/registered.js';
+import { dropdownCounterExample } from "../apiExamples/dropdown-mobile-properties.js";
 
 export function initExamples(initialCount = 0) {
   try {
     // javascript example function calls to be added here upon creation to test examples
-
+    dropdownCounterExample();
   } catch (err) {
     if (initialCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/counter/demo/api.md

@@ -38,14 +38,16 @@
 
 ## Properties
 
-| Property     | Attribute    | Type      | Default     | Description                                      |
-|--------------|--------------|-----------|-------------|--------------------------------------------------|
-| [isDropdown](#isDropdown) | `isDropdown` | `boolean` | false       | Indicates if the counter group is displayed as a dropdown. |
-| [max](#max)        | `max`        | `number`  | "undefined" | The maximum value allowed for the whole group of counters. |
-| [min](#min)        | `min`        | `number`  | "undefined" | The minimum value allowed for the whole group of counters. |
-| [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. |
+| Property               | Attribute              | Type      | Default     | Description                                      |
+|------------------------|------------------------|-----------|-------------|--------------------------------------------------|
+| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string`  | "sm"        | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode 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. |
+| [largeMobileHeadline](#largeMobileHeadline)  | `largeMobileHeadline`  | `boolean` |             | If declared, make mobileHeadline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [max](#max)                  | `max`                  | `number`  | "undefined" | The maximum value allowed for the whole group of counters. |
+| [min](#min)                  | `min`                  | `number`  | "undefined" | The minimum value allowed for the whole group of counters. |
+| [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. |
 
 ## Methods
 
@@ -61,12 +63,14 @@
 
 ## Slots
 
-| Name        | Description                                      |
-|-------------|--------------------------------------------------|
-| [Default](#Default)   | Slot for counter elements.                       |
-| [HelpText](#HelpText)  | Dropdown help text content. Only used when `isDropdown` is true. |
-| [Label](#Label)     | Dropdown label content. Only used when `isDropdown` is true. |
-| [ValueText](#ValueText) | Dropdown value text display. Only used when `isDropdown` is true. |
+| Name                      | Description                                      |
+|---------------------------|--------------------------------------------------|
+| [Default](#Default)                 | Slot for counter elements.                       |
+| [HelpText](#HelpText)                | Dropdown help text content. Only used when `isDropdown` is true. |
+| [Label](#Label)                   | Dropdown label content. Only used when `isDropdown` is true. |
+| [ValueText](#ValueText)               | Dropdown value text display. Only used when `isDropdown` is true. |
+| `bib.fullscreen.footer`   | Defines the footer to display at the bottom of fullscreen bib |
+| `bib.fullscreen.headline` | Defines the headline to display above menu-options |
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## API Examples
@@ -143,4 +147,74 @@ You can also individually set the max or min value for each counter in a group.
 </auro-counter-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
+### Dropdown with fullscreen bib
+
+You can make the dropdown open in fullscreen at a specific breakpoint by setting `fullscreenBreakpoint`.
+
+The default value of `fullscreenBreakpoint` is `sm`. 
+
+Breakpoint token can be found [here](https://auro.alaskaair.com/getting-started/developers/design-tokens)
+
+To support fullcreen bib, setting `bib.fullscreen.headline` is **STRONGLY RECOMMENDED**.
+You can also set `bib.fullscreen.footer` to add any additional options on fullscreen view.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-mobile-properties.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+  <div style="max-width: 350px;">
+    <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+      <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>
+      <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+        <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+        <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
+      </div>
+    </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-mobile-properties.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
+
+```html
+<div style="max-width: 350px;">
+  <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
+    <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>
+    <div slot="bib.fullscreen.footer" style="display:flex; justify-content: stretch; gap: 1.5rem">
+      <auro-button id="dropdownCounterExampleResetbutton" fluid variant="secondary" style="flex: 1 50%">Reset</auro-button>
+      <auro-button id="dropdownCounterExampleSavebutton" fluid style="flex: 1 50%">Save</auro-button>
+    </div>
+  </auro-counter-group>
+</div>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>