docs: improved accordion docs changed

Author: thejackshelton

apps/website/adapters/cloudflare-pages/vite.config.ts

@@ -2,6 +2,7 @@ import { cloudflarePagesAdapter } from '@builder.io/qwik-city/adapters/cloudflar
 import { extendConfig } from '@builder.io/qwik-city/vite';
 import baseConfig from '../../vite.config';
 
+// @ts-ignore
 export default extendConfig(baseConfig, () => {
   return {
     build: {

apps/website/src/routes/docs/headless/accordion/examples/disabled-root.tsx

@@ -0,0 +1,29 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Accordion } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  const items = [1, 2, 3, 4];
+
+  return (
+    <Accordion.Root disabled={true}>
+      {items.map((item) => (
+        <Accordion.Item class="collapsible" key={item}>
+          <Accordion.Header>
+            <Accordion.Trigger class="collapsible-trigger">
+              <span>Trigger {item}</span>
+              <LuChevronDown />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Content class="collapsible-content collapsible-content-outline">
+            Inside Content {item}
+          </Accordion.Content>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  );
+});
+
+// interal
+import styles from '../snippets/accordion.css?inline';
+import { LuChevronDown } from '@qwikest/icons/lucide';

apps/website/src/routes/docs/headless/accordion/examples/dynamic.tsx

@@ -26,65 +26,52 @@ export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {
 
   return (
     <>
-      <div class="flex w-full flex-col items-center">
-        <div class="flex gap-4">
-          <label class="mb-4 flex flex-col-reverse items-center text-center">
-            <input
-              class="max-w-[50px] rounded-base bg-accent px-2"
-              type="text"
-              bind:value={itemIndexToAdd}
-            />
-            <span>Index to Add</span>
-          </label>
+      <div class="dynamic-input">
+        <label class="add">
+          <input bind:value={itemIndexToAdd} />
+          <span>Index to Add</span>
+        </label>
 
-          <label class="mb-4 flex flex-col-reverse items-center text-center">
-            <input
-              class="max-w-[50px] rounded-base bg-accent px-2"
-              type="text"
-              bind:value={itemIndexToDelete}
-            />
-            <span>Index to Delete</span>
-          </label>
-        </div>
+        <label class="delete">
+          <input bind:value={itemIndexToDelete} />
+          <span>Index to Delete</span>
+        </label>
+      </div>
+
+      <Accordion.Root>
+        {itemStore.map(({ label, id }, index) => {
+          return (
+            <Accordion.Item id={`${id}`} key={id} class="collapsible">
+              <Accordion.Header>
+                <Accordion.Trigger class="collapsible-trigger">{label}</Accordion.Trigger>
+              </Accordion.Header>
+              <Accordion.Content class="collapsible-content collapsible-content-outline">
+                index: {index}
+              </Accordion.Content>
+            </Accordion.Item>
+          );
+        })}
+      </Accordion.Root>
 
-        <Accordion.Root>
-          {itemStore.map(({ label, id }, index) => {
-            return (
-              <Accordion.Item id={`${id}`} key={id} class="collapsible">
-                <Accordion.Header>
-                  <Accordion.Trigger class="collapsible-trigger">
-                    {label}
-                  </Accordion.Trigger>
-                </Accordion.Header>
-                <Accordion.Content class="collapsible-content">
-                  index: {index}
-                </Accordion.Content>
-              </Accordion.Item>
-            );
-          })}
-        </Accordion.Root>
-        <div class="flex gap-2 md:gap-4">
-          <button
-            style={{ color: 'green', marginTop: '1rem' }}
-            onClick$={() => {
-              if (itemStore.length < 6) {
-                itemStore.splice(parseInt(itemIndexToAdd.value), 0, newItem);
-              }
-            }}
-          >
-            <strong>Add Item</strong>
-          </button>
-          <button
-            style={{ color: 'red', marginTop: '1rem' }}
-            onClick$={() => {
-              if (itemStore.length > 2) {
-                itemStore.splice(parseInt(itemIndexToDelete.value), 1);
-              }
-            }}
-          >
-            <strong>Remove Item</strong>
-          </button>
-        </div>
+      <div class="dynamic-buttons">
+        <button
+          onClick$={() => {
+            if (itemStore.length < 6) {
+              itemStore.splice(parseInt(itemIndexToAdd.value), 0, newItem);
+            }
+          }}
+        >
+          <strong>Add Item</strong>
+        </button>
+        <button
+          onClick$={() => {
+            if (itemStore.length > 2) {
+              itemStore.splice(parseInt(itemIndexToDelete.value), 1);
+            }
+          }}
+        >
+          <strong>Remove Item</strong>
+        </button>
       </div>
     </>
   );

apps/website/src/routes/docs/headless/accordion/index.mdx

@@ -75,38 +75,68 @@ Qwik UI includes a headless Accordion component that uses ARIA and JavaScript to
 
 ## Component State
 
-## Initial value
+### Initial value
+
+To set a default or initial value on page load, use the `value` prop on the `<Accordion.Root />` component.
 
 <Showcase name="initial" />
 
-## Reactive value
+The `value` prop on the `<Accordion.Root>` was set to `item-2`, which is the value of the second item. As a result, the second item is selected by default.
+
+### Reactive value
+
+Pass reactive state by using the `bind:value` prop on the `<Accordion.Root /> `component.
 
 <Showcase name="reactive" />
 
-## Programmatic changes
+### Programmatic changes
+
+You can also change the current expanded item values programmatically by updating the signal's value.
 
 <Showcase name="programmatic" />
 
-## Handling selection changes
+### Handling selection changes
+
+Listen to when a new item is selected by passing a callback function to the `onChange$` prop.
 
 <Showcase name="on-change" />
 
-## Disabled items
+### Disabled items
+
+Items can be disabled by setting the `disabled` prop to true on the `<Accordion.Item />` component.
 
 <Showcase name="disabled" />
 
+> Disabled items are not selectable or focusable. They are also skipped when using the arrow keys to navigate through the items.
+
+### Disabled Component
+
+The component itself can also be disabled by setting the `disabled` prop to true on the `<Accordion.Root />` component.
+
+<Showcase name="disabled-root" />
+
 ## Animation
 
+Animations can also be added using the `--qwikui-collapsible-content-height` variable.
+
 <Showcase name="animation" />
 
+<CodeSnippet name="animation.css" />
+
 ## CSR
 
+The Accordion automatically renders based on its environment. This means that it works for both server-side and client-side rendering.
+
 <Showcase name="csr" />
 
 ## Dynamic
 
+You have custom control over how to render items in the Accordion, allowing for dynamic rendering of items.
+
 <Showcase name="dynamic" />
 
+> This also updates the selected items, disabled items, and focus order automatically for you.
+
 ## Example CSS
 
 <CodeSnippet name="accordion.css" />

apps/website/src/routes/docs/headless/accordion/snippets/accordion.css

@@ -90,3 +90,39 @@
 .collapsible-animation[data-closed] {
   animation: 350ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards collapsible-closed;
 }
+
+.dynamic-input {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.dynamic-input label {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin-block: 0.5rem;
+  align-items: center;
+}
+
+.dynamic-input input {
+  margin-bottom: 0.5rem;
+  width: 5rem;
+  background: hsl(var(--accent));
+  border: 2px dotted hsl(var(--foreground));
+  padding-left: 0.5rem;
+}
+
+.dynamic-input .add input {
+  background: hsla(var(--primary) / 0.2);
+}
+
+.dynamic-input .delete input {
+  background: hsla(var(--secondary) / 0.2);
+}
+
+.dynamic-buttons {
+  display: flex;
+  gap: 1rem;
+  margin-block: 0.5rem;
+}

apps/website/src/routes/docs/headless/accordion/snippets/animation.css

@@ -0,0 +1,25 @@
+@keyframes collapsible-open {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: var(--qwikui-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-closed {
+  0% {
+    height: var(--qwikui-collapsible-content-height);
+  }
+  100% {
+    height: 0;
+  }
+}
+
+.collapsible-animation[data-open] {
+  animation: 550ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards collapsible-open;
+}
+
+.collapsible-animation[data-closed] {
+  animation: 350ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards collapsible-closed;
+}

packages/kit-headless/src/components/accordion/accordion-context.tsx

@@ -10,6 +10,7 @@ export type AccordionContext = {
   onChange$: QRL<(value: string) => void> | undefined;
   itemsMapSig?: Signal<Map<number, boolean>> | undefined;
   triggerRefsArray: Signal<Array<Signal>>;
+  disabled?: boolean;
 };
 
 export const accordionItemContextId =

packages/kit-headless/src/components/accordion/accordion-inline.tsx

@@ -20,6 +20,9 @@ export type AccordionRootProps = PropsOf<'div'> & {
 
   /** A map of the item indexes and their disabled state. */
   itemsMap?: Map<number, boolean>;
+
+  /** If true, the accordion is disabled. */
+  disabled?: boolean;
 };
 
 export const HAccordionRoot: Component<AccordionRootProps> = (

packages/kit-headless/src/components/accordion/accordion-item.tsx

@@ -98,7 +98,13 @@ export const HAccordionItem = component$(
     useContextProvider(accordionItemContextId, itemContext);
 
     return (
-      <HCollapsible triggerRef={triggerRef} bind:open={isOpenSig} id={itemId} {...props}>
+      <HCollapsible
+        triggerRef={triggerRef}
+        bind:open={isOpenSig}
+        id={itemId}
+        disabled={context.disabled || props.disabled}
+        {...props}
+      >
         <Slot />
       </HCollapsible>
     );

packages/kit-headless/src/components/accordion/accordion-root.tsx

@@ -5,6 +5,7 @@ import {
   useComputed$,
   useContextProvider,
   useSignal,
+  useTask$,
 } from '@builder.io/qwik';
 import { AccordionRootProps } from './accordion-inline';
 import { accordionContextId } from './accordion-context';
@@ -15,12 +16,10 @@ export const HAccordionRootImpl = component$((props: AccordionRootProps) => {
     'bind:value': givenValueSig,
     initialIndex,
     onChange$,
-    itemsMap,
+    disabled,
     ...rest
   } = props;
 
-  itemsMap;
-
   const selectedIndexSig = useSignal<number>(initialIndex ?? -1);
   const triggerRefsArray = useSignal<Array<Signal>>([]);
 
@@ -36,8 +35,13 @@ export const HAccordionRootImpl = component$((props: AccordionRootProps) => {
     onChange$,
     itemsMapSig,
     triggerRefsArray,
+    disabled,
   };
 
+  useTask$(({ track }) => {
+    context.disabled = track(() => disabled);
+  });
+
   useContextProvider(accordionContextId, context);
 
   return (