From d6ff4d3ce37cbed00202cf3a9d00dc6d1816f048 Mon Sep 17 00:00:00 2001
From: riccardovettore <riccardo.vettore.dev@gmail.com>
Date: Mon, 20 Feb 2023 13:03:49 +0100
Subject: [PATCH 1/2] feat(component): the first version of Accordion Component

re #126
---
 apps/website/src/components/menu/menu.tsx     |   4 +
 .../src/routes/docs/daisy/accordion/index.tsx |  56 ++++++++++
 .../routes/docs/headless/accordion/index.tsx  |  51 +++++++++
 .../src/components/accordion/accordion.tsx    |  45 ++++++++
 packages/daisy/src/index.ts                   |   1 +
 .../src/components/accordion/accordion.tsx    | 100 ++++++++++++++++++
 packages/headless/src/index.ts                |   1 +
 7 files changed, 258 insertions(+)
 create mode 100644 apps/website/src/routes/docs/daisy/accordion/index.tsx
 create mode 100644 apps/website/src/routes/docs/headless/accordion/index.tsx
 create mode 100644 packages/daisy/src/components/accordion/accordion.tsx
 create mode 100644 packages/headless/src/components/accordion/accordion.tsx

diff --git a/apps/website/src/components/menu/menu.tsx b/apps/website/src/components/menu/menu.tsx
index 4839efb27..57d2d86f9 100644
--- a/apps/website/src/components/menu/menu.tsx
+++ b/apps/website/src/components/menu/menu.tsx
@@ -11,6 +11,10 @@ type Props = {
 export const Menu = component$<Props>(({ onClose$ }) => {
   const appState = useContext(APP_STATE);
   const menu = [
+    {
+      label: 'Accordion',
+      path: `/docs/${appState.theme.toLowerCase()}/accordion`,
+    },
     { label: 'Button', path: `/docs/${appState.theme.toLowerCase()}/button` },
     {
       label: 'ButtonGroup',
diff --git a/apps/website/src/routes/docs/daisy/accordion/index.tsx b/apps/website/src/routes/docs/daisy/accordion/index.tsx
new file mode 100644
index 000000000..9c251bdca
--- /dev/null
+++ b/apps/website/src/routes/docs/daisy/accordion/index.tsx
@@ -0,0 +1,56 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Accordion, AccordionItem } from '@qwik-ui/theme-daisy';
+
+export default component$(() => {
+  useStylesScoped$(`
+    h1 { margin: 2rem 0; padding-top: 1rem; font-weight: bold; border-top: 1px dotted #222}
+    .container { width: 300px } Accordion {border: 1px solid white}
+  `);
+  return (
+    <>
+      <div className="container">
+        <h2>This is the documentation for the Accordion</h2>
+
+        <h1>Accordion Example</h1>
+        <Accordion>
+          <AccordionItem label="Heading 1">
+            <div class="p-2">
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Accusamus aliquid architecto delectus deleniti dolor
+              </p>
+            </div>
+          </AccordionItem>
+          <AccordionItem label="Heading 2">
+            <div className="p-2">
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Accusamus aliquid architecto delectus deleniti dolor
+              </p>
+            </div>
+          </AccordionItem>
+        </Accordion>
+
+        <h1>Accordion with Disabled Item Example</h1>
+        <Accordion>
+          <AccordionItem label="Heading 1">
+            <div class="p-2">
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Accusamus aliquid architecto delectus deleniti dolor
+              </p>
+            </div>
+          </AccordionItem>
+          <AccordionItem label="Heading 2 - Disabled" disabled>
+            <div className="p-2">
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                Accusamus aliquid architecto delectus deleniti dolor
+              </p>
+            </div>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/accordion/index.tsx b/apps/website/src/routes/docs/headless/accordion/index.tsx
new file mode 100644
index 000000000..f90e66c0e
--- /dev/null
+++ b/apps/website/src/routes/docs/headless/accordion/index.tsx
@@ -0,0 +1,51 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { Accordion, AccordionItem } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStylesScoped$(`
+    h1 { margin: 2rem 0; padding-top: 1rem; font-weight: bold; border-top: 1px dotted #222}
+    .container { width: 300px }
+  `);
+  return (
+    <div class="container">
+      <h2>This is the documentation for the Accordion</h2>
+
+      <h1>Accordion Example</h1>
+
+      <Accordion>
+        <AccordionItem label="Heading 1">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
+            aliquid architecto delectus deleniti dolor
+          </p>
+        </AccordionItem>
+        <AccordionItem label="Heading 2">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
+            aliquid architecto delectus deleniti dolor
+          </p>
+        </AccordionItem>
+      </Accordion>
+
+      <h1>Accordion with Disabled Item Example</h1>
+      <Accordion>
+        <AccordionItem label="Heading 1">
+          <div>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              Accusamus aliquid architecto delectus deleniti dolor
+            </p>
+          </div>
+        </AccordionItem>
+        <AccordionItem label="Heading 2 - Disabled" disabled>
+          <div>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+              Accusamus aliquid architecto delectus deleniti dolor
+            </p>
+          </div>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+});
diff --git a/packages/daisy/src/components/accordion/accordion.tsx b/packages/daisy/src/components/accordion/accordion.tsx
new file mode 100644
index 000000000..cd9ba55f1
--- /dev/null
+++ b/packages/daisy/src/components/accordion/accordion.tsx
@@ -0,0 +1,45 @@
+import {
+  component$,
+  HTMLAttributes,
+  PropFunction,
+  Slot,
+} from '@builder.io/qwik';
+
+import {
+  Accordion as HeadlessAccordion,
+  AccordionItem as HeadlessAccordionItem,
+} from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+
+export type AccordionProps = HTMLAttributes<HTMLElement>;
+export interface AccordionItemProps {
+  label: string;
+  disabled?: boolean;
+  class?: string;
+  style?: string;
+  onClick$?: PropFunction<() => void>;
+}
+
+export const Accordion = component$((props: AccordionProps) => {
+  const { class: classNames, ...rest } = props;
+  return (
+    <HeadlessAccordion
+      class={clsq('border collapse border collapse-arrow', classNames)}
+      {...rest}
+    >
+      <Slot />
+    </HeadlessAccordion>
+  );
+});
+
+export const AccordionItem = component$((props: AccordionItemProps) => {
+  const { class: classNames, ...rest } = props;
+  return (
+    <HeadlessAccordionItem
+      class={clsq('collapse-title border', classNames)}
+      {...rest}
+    >
+      <Slot />
+    </HeadlessAccordionItem>
+  );
+});
diff --git a/packages/daisy/src/index.ts b/packages/daisy/src/index.ts
index 9bcfbec31..45c0e6689 100644
--- a/packages/daisy/src/index.ts
+++ b/packages/daisy/src/index.ts
@@ -1,3 +1,4 @@
+export * from './components/accordion/accordion';
 export * from './components/button/button';
 export * from './components/button-group/button-group';
 export * from './components/card';
diff --git a/packages/headless/src/components/accordion/accordion.tsx b/packages/headless/src/components/accordion/accordion.tsx
new file mode 100644
index 000000000..b2cb66a25
--- /dev/null
+++ b/packages/headless/src/components/accordion/accordion.tsx
@@ -0,0 +1,100 @@
+import {
+  $,
+  component$,
+  createContextId,
+  HTMLAttributes,
+  PropFunction,
+  QRL,
+  Signal,
+  Slot,
+  useBrowserVisibleTask$,
+  useContext,
+  useContextProvider,
+  useSignal,
+  useStore,
+  useStylesScoped$,
+} from '@builder.io/qwik';
+
+export type AccordionProps = HTMLAttributes<HTMLElement>;
+
+export const accordionContext =
+  createContextId<AccordionContextService>('accordion');
+
+interface AccordionContextService {
+  items: HTMLElement[];
+  setItemsBoxRef$: QRL<(ref: Signal<HTMLElement | undefined>) => void>;
+}
+
+interface AccordionItemProps {
+  label: string;
+  disabled?: boolean;
+  class?: string;
+  style?: string;
+  onClick$?: PropFunction<() => void>;
+}
+
+export const Accordion = component$((props: AccordionProps) => {
+  const items = useStore([]);
+  const itemsBoxRef = useSignal<HTMLElement>();
+  const setItemsBoxRef$ = $((ref: Signal<HTMLElement | undefined>) => {
+    if (ref) {
+      itemsBoxRef.value = ref.value;
+    }
+  });
+  const contextService: AccordionContextService = {
+    items,
+    setItemsBoxRef$,
+  };
+
+  useContextProvider(accordionContext, contextService);
+
+  useBrowserVisibleTask$(() => {
+    contextService.setItemsBoxRef$(itemsBoxRef);
+    const items = itemsBoxRef.value?.querySelectorAll<HTMLElement>('div.item');
+    if (items?.length) {
+      items.forEach((item) => contextService.items.push(item));
+    }
+  });
+
+  return (
+    <div {...props} ref={itemsBoxRef}>
+      <Slot></Slot>
+    </div>
+  );
+});
+
+export const AccordionItem = component$((props: AccordionItemProps) => {
+  useStylesScoped$(`
+      div.item .content {
+        display: none;
+      }
+      div.item[open] .content {
+       display: block;
+      }
+    `);
+  const contextService = useContext(accordionContext);
+  return (
+    <div class="item">
+      <button
+        onClick$={(e) => {
+          const target = (e.target as HTMLElement).parentElement;
+          const isTargetOpen = target?.hasAttribute('open');
+          contextService.items.forEach((i: HTMLElement) => {
+            i.removeAttribute('open');
+          });
+          isTargetOpen
+            ? target?.removeAttribute('open')
+            : target?.setAttribute('open', '');
+        }}
+        style={props.style}
+        class={props.class}
+        disabled={props.disabled}
+      >
+        {props.label}
+      </button>
+      <div class="content">
+        <Slot />
+      </div>
+    </div>
+  );
+});
diff --git a/packages/headless/src/index.ts b/packages/headless/src/index.ts
index eb2d274a4..00e192147 100644
--- a/packages/headless/src/index.ts
+++ b/packages/headless/src/index.ts
@@ -1,3 +1,4 @@
+export * from './components/accordion/accordion';
 export * from './components/button/button';
 export * from './components/button-group/button-group';
 export * from './components/card';

From 99fe6b8952de65f2147f98a505a395b236479566 Mon Sep 17 00:00:00 2001
From: riccardovettore <riccardo.vettore.dev@gmail.com>
Date: Mon, 20 Feb 2023 15:39:54 +0100
Subject: [PATCH 2/2] fix: insert open toggle

---
 packages/headless/src/components/accordion/accordion.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/headless/src/components/accordion/accordion.tsx b/packages/headless/src/components/accordion/accordion.tsx
index b2cb66a25..4f720a761 100644
--- a/packages/headless/src/components/accordion/accordion.tsx
+++ b/packages/headless/src/components/accordion/accordion.tsx
@@ -78,13 +78,13 @@ export const AccordionItem = component$((props: AccordionItemProps) => {
       <button
         onClick$={(e) => {
           const target = (e.target as HTMLElement).parentElement;
-          const isTargetOpen = target?.hasAttribute('open');
           contextService.items.forEach((i: HTMLElement) => {
+            if (target === i) {
+              return;
+            }
             i.removeAttribute('open');
           });
-          isTargetOpen
-            ? target?.removeAttribute('open')
-            : target?.setAttribute('open', '');
+          target?.toggleAttribute('open');
         }}
         style={props.style}
         class={props.class}