feat: accordion module docs

packages/docs/content/zero-core/modules/accordion/components.md

@@ -2,13 +2,39 @@
 # Zero Accordion Section
 
 
-
+A single accordion section comprised of a header and content that expands and collapses when the header is clicked.
 
 ## Props
 
 | Prop | type | description | values |
 | ---- | ---- | ----------- | ------ |
-| `accordionId` | string |  |  |
+| `accordionId` | string | The ID of this section's parent accordion. |  |
+
+## Computed properties
+
+#### accordion()
+
+
+Returns the parent accordion of this section from the [accordions](/zero-core/modules/accordion/store#accordions) array in the accordion store.
+
+
+ - **returns:** `Object`  
+
+#### active()
+
+
+Returns an array of active sections in this [accordion](/zero-core/modules/accordion/components#zero-accordion). Each section is referenced by a Unique ID set from `instance.uid` where instance is given by the `getCurrentInstance()` composable.
+
+
+ - **returns:** `[number]`  
+
+#### open()
+
+
+Returns the open/expanded state of this section as a boolean; true for open, false for closed.
+
+
+ - **returns:** `boolean`  
 
 ## Slots
 
@@ -17,27 +43,57 @@
 
 **name:** `header`  **scoped:** `false`
 
+
+Header content for each section. This content is wrapped in a clickable div when will toggle the section's expanded state.
+
 #### Content
 
 
 **name:** `content`  **scoped:** `false`
 
+
+Collapsible content for each section. The content slot requires a single root HTML element to animate correctly.
+
 ## Methods
 
 #### toggle()
 
+
+Toggles the expanded state of this section using the accordion store's [toggleAccordionSection](/zero-core/modules/accordion/store#toggleaccordionsection) method.
+
 #### setHeight()
 
-# Zero Accordion Toggle Button
 
+Calculates and sets the height of the accordion section content. Called every time the [open](/zero-core/modules/accordion/components#open) state changes using a watcher.
+
+# Zero Accordion Toggle Button
 
 
+An instance of the [zeroButton](/zero-core/modules/button/components) that expands and collapses all accordion sections of its associated accordion at once.
 
 ## Props
 
 | Prop | type | description | values |
 | ---- | ---- | ----------- | ------ |
-| `accordionId` | string |  |  |
+| `accordionId` | string | The ID of the target accordion for this component. |  |
+
+## Computed properties
+
+#### accordion()
+
+
+Returns the accordion associated with this component from the [accordions](/zero-core/modules/accordion/store#accordions) array in the accordion store.
+
+
+ - **returns:** `Object`  
+
+#### allSectionsOpen()
+
+
+A boolean indicating if all the sections belonging to this component's accordion are open or not. True if all are open, false if otherwise.
+
+
+ - **returns:** `boolean`  
 
 ## Slots
 
@@ -46,26 +102,34 @@
 
 **name:** `default`  **scoped:** `true`
 
+
+Button content
+
 | binding | type | description |
 | ------- | ---- | ----------- |
-| `all-sections-open` |  |  |
+| `all-sections-open` | `mixed` | Binds the [allSectionsOpen](/zero-core/modules/accordion/components#allsectionsopen) computed prop to the slot. |
 
 ## Methods
 
 #### toggleAllAccordionSections()
 
+
+Called when the button is clicked. This method subsequently calls the [toggleAllSections](/zero-core/modules/accordion/store#toggleallsections) method from the accordion store. Sets the [zeroButton](/zero-core/modules/button/components) component instance to loading: `false`.
+
 # Zero Accordion
 
 
+A component with child sections that can be toggled to expand and collapse. This component is relatively simple, consisting of a slot for multiple [zeroAccordionSection](/zero-core/modules/accordion/components#zero-accordion-section) components.
 
+In the `onBeforeMount` hook of this component, an instance tracking object is set in the accordion store using the store's [setAccordion](/zero-core/modules/accordion/store#setaccordion) method. When the component is mounted, if the `toggleOnLoad` and `multiple` props are set to true, the [toggleAllSections](/zero-core/modules/accordion/store#toggleallsections) method of the accordion store will be called for this accordion instance.
 
 ## Props
 
 | Prop | type | description | values |
 | ---- | ---- | ----------- | ------ |
-| `accordionId` | string |  |  |
-| `multiple`<span>(optional)</span> | boolean |  |  |
-| `toggleOnLoad`<span>(optional)</span> | boolean |  |  |
+| `accordionId` | string | A unique identifier for this accordion instance. This same prop is present in all children components and its value should match those of its children. |  |
+| `multiple`<span>(optional)</span> | boolean | A boolean indicating whether or not multiple accordion sections can be expanded at the same time. `true` if so, `false` indicates expanded section states are mutually exclusive. |  |
+| `toggleOnLoad`<span>(optional)</span> | boolean | A boolean indicating whether or not all accordion sections should be expanded upon mounting the component. **If `multiple` is set to false, this setting has no effect.** |  |
 
 ## Slots
 
@@ -74,6 +138,16 @@
 
 **name:** `default`  **scoped:** `false`
 
+
+[zeroAccordionSections](/zero-core/modules/accordion/components#zero-accordion-section) should be added to this slot
+
 ## Methods
 
 #### handleKeyboardNavigation()
+
+
+The keyboard event handler that is called on window `keydown` events. Used to navigate the accordion with the keyboard. It will call the accordion store's [toggleAllSections](/zero-core/modules/accordion/store#toggleallsections) method if the 'f' and meta keys are pressed.
+
+| param | type | description |
+| ----- | ---- | ----------- |
+| `e` | Object | The [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) object. |

packages/docs/content/zero-core/modules/accordion/store.md

@@ -1 +1,114 @@
 
+# useZeroAccordionStore()
+
+
+A store for tracking [accordion](/zero-core/modules/accordion/components#zero-accordion) instances and their expanded/collapsed [section](/zero-core/modules/accordion/components#zero-accordion-section) states.
+
+## Data
+
+
+ - [accordions](#accordions)
+
+## Methods
+
+
+ - [setAccordion()](#setaccordion)
+ - [removeAccordion()](#removeaccordion)
+ - [setAccordionSection()](#setaccordionsection)
+ - [toggleAccordionSection()](#toggleaccordionsection)
+ - [toggleAllSections()](#toggleallsections)
+
+## All Members 
+
+#### accordions
+
+
+**type:** `Object`
+
+
+An object containing nested objects representing individual accordion instances. Each nested object exists at the root level of this object, has a key corresponding to its accordionId and should be of the following structure:
+
+```js
+
+{
+
+  accordionId: string,
+
+  multiple: boolean,
+
+  id: string,
+
+  children: Array,
+
+  active: Array|boolean,
+
+  allSectionsOpen: boolean
+
+}
+
+```
+
+
+**Kind:** inner ref of [useZeroAccordionStore](#usezeroaccordionstore)
+
+#### setAccordion()
+
+
+Adds an accordion instance tracking object to the [accordions object](/zero-core/modules/accordion/store#accordions) above.
+
+
+**Kind:** inner method of [useZeroAccordionStore](#usezeroaccordionstore)
+
+| param | type | description |
+| ----- | ---- | ----------- |
+| `payload` | Object | The tracking object. Should have the structure defined in the [accordions object](/zero-core/modules/accordion/store#accordions) above. |
+
+#### removeAccordion()
+
+
+Removes an accordion tracking object from the accordions state above.
+
+
+**Kind:** inner method of [useZeroAccordionStore](#usezeroaccordionstore)
+
+| param | type | description |
+| ----- | ---- | ----------- |
+| `accordionId` | string | The ID of the accordion to remove. |
+
+#### setAccordionSection()
+
+
+Adds a section to be tracked to the accordion tracking object in the accordions state above. This method pushes the section ID to the `children` array in the tracking above.
+
+
+**Kind:** inner method of [useZeroAccordionStore](#usezeroaccordionstore)
+
+| param | type | description |
+| ----- | ---- | ----------- |
+| `accordionId` | string | The ID of the accordion to add the section to. |
+| `sectionId` | string | The ID of the section. |
+
+#### toggleAccordionSection()
+
+
+Toggles the expanded/collapsed state of an accordion section. If the toggle results in all sections of the accordion in question being set to expanded, the `allSectionsOpen` boolean in the accordion tracking object will be set to `true`. Otherwise, it is set to `false`.
+
+
+**Kind:** inner method of [useZeroAccordionStore](#usezeroaccordionstore)
+
+| param | type | description |
+| ----- | ---- | ----------- |
+| `accordionId` | string | The ID of the accordion that the section belongs to. |
+| `sectionId` | string | The ID of the section whose expanded or collapsed state should be toggled. |
+
+#### toggleAllSections()
+
+
+Sets all sections belonging to an accordion to their expanded states.
+
+
+**Kind:** inner method of [useZeroAccordionStore](#usezeroaccordionstore)
+
+| param | type | description |
+| ----- | ---- | ----------- |
+| `accordionId` | string | The ID of the accordion in question. |

packages/zero-core/modules/accordion/components/zero-accordion-section.vue

@@ -8,33 +8,39 @@
       :class="['accordion-header', { open }]"
       @click="toggleSection"
       @keydown.enter="toggleSection">
-
+      <!-- @slot Header content for each section. This content is wrapped in a clickable div when will toggle the section's expanded state. -->
       <slot name="header" />
 
     </div>
 
     <div ref="content" :class="['accordion-content-wrapper', { open }]" :style="{ height }">
-      <!-- content slot requires a single root HTML element to animate correctly -->
+      <!-- @slot Collapsible content for each section. The content slot requires a single root HTML element to animate correctly. -->
       <slot name="content" />
     </div>
 
   </div>
 </template>
 
 <script setup>
+/**
+ * @description A single accordion section comprised of a header and content that expands and collapses when the header is clicked.
+ */
 // ===================================================================== Imports
 import { storeToRefs } from 'pinia'
 
 // ======================================================================= Props
 const props = defineProps({
+  /**
+   * The ID of this section's parent accordion.
+   */
   accordionId: {
     type: String,
     required: true
   }
 })
 
 // ======================================================================= Setup
-const instance  = getCurrentInstance()
+const instance = getCurrentInstance()
 const accordionStore = useZeroAccordionStore()
 
 // ======================================================================== Data
@@ -47,9 +53,28 @@ const resize = ref(false)
 const resizeObserver = ref(false)
 
 // ==================================================================== Computed
+/**
+ * @method accordion
+ * @computed
+ * @desc Returns the parent accordion of this section from the [accordions](/zero-core/modules/accordion/store#accordions) array in the accordion store.
+ * @returns {Object}
+ */
 const accordion = computed(() => accordions.value[props.accordionId])
+
+/**
+ * @method active
+ * @computed
+ * @desc Returns an array of active sections in this [accordion](/zero-core/modules/accordion/components#zero-accordion). Each section is referenced by a Unique ID set from `instance.uid` where instance is given by the `getCurrentInstance()` composable.
+ * @returns {[number]}
+ */
 const active = computed(() => accordion.value ? accordion.value.active : false)
 
+/**
+ * @method open
+ * @computed
+ * @desc Returns the open/expanded state of this section as a boolean; true for open, false for closed.
+ * @returns {boolean}
+ */
 const open = computed(() => {
   if (Array.isArray(active.value)) {
     return active.value.includes(sectionId.value)
@@ -81,13 +106,15 @@ onBeforeUnmount(() => {
 // ===================================================================== Methods
 /**
  * @method toggle
+ * @desc Toggles the expanded state of this section using the accordion store's [toggleAccordionSection](/zero-core/modules/accordion/store#toggleaccordionsection) method.
  */
 const toggleSection = () => {
   accordionStore.toggleAccordionSection(props.accordionId, sectionId.value)
 }
 
 /**
  * @method setHeight
+ * @desc Calculates and sets the height of the accordion section content. Called every time the [open](/zero-core/modules/accordion/components#open) state changes using a watcher.
  */
 const setHeight = () => {
   if (open.value) {