feat(accordion & website): accordion examples, feats, critical fix, website font build fix

Author: thejackshelton

apps/website/src/global.css

@@ -2,39 +2,6 @@
 @tailwind base;
 @tailwind utilities;
 
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('/fonts/poppins-400.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('/fonts/poppins-500.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('/fonts/poppins-700.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
-    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
 :root {
   --qwik-dark-blue: #006ce9;
   --qwik-light-blue: #18b6f6;
@@ -111,3 +78,18 @@ body {
   grid-template-columns: 25% 70%;
   grid-template-areas: 'sidebar  content';
 }
+
+/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
+  It would make more sense to supply the user with the animation declaration in the docs.
+*/
+@layer utilities {
+  .accordion-animation-1[data-state='open'] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
+      accordion-open;
+  }
+
+  .accordion-animation-1[data-state='closed'] {
+    animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
+      accordion-close;
+  }
+}

apps/website/src/routes/docs/headless/(components)/accordion/examples.tsx

@@ -5,27 +5,10 @@ import {
   AccordionHeader,
   AccordionTrigger,
   AccordionContent,
-  Checkbox,
 } from '@qwik-ui/headless';
 import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
 
-export function SVG(props: QwikIntrinsicElements['svg'], key: string) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="1em"
-      height="1em"
-      viewBox="0 0 1024 1024"
-      {...props}
-    >
-      <path
-        fill="currentColor"
-        d="M831.872 340.864L512 652.672L192.128 340.864a30.592 30.592 0 0 0-42.752 0a29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728a30.592 30.592 0 0 0-42.752 0z"
-      ></path>
-    </svg>
-  );
-}
-
+// single
 export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
@@ -44,7 +27,7 @@ export const Example01 = component$(() => {
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4 ">
                 Yes, if you wrap a heading around the trigger, screen readers
                 will announce it properly.
@@ -60,7 +43,7 @@ export const Example01 = component$(() => {
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4">
                 Yup! You can even use animations or CSS transitions from display
                 none, using the <strong>animated</strong> prop on the accordion
@@ -77,7 +60,7 @@ export const Example01 = component$(() => {
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4 dark:border-gray-600 border-t-[1px]">
                 You can do that by setting the <strong>behavior</strong> prop to
                 "multi" on the Accordion
@@ -94,6 +77,7 @@ export const Example01 = component$(() => {
   );
 });
 
+// multiple items
 export const Example02 = component$(() => {
   return (
     <PreviewCodeExample>
@@ -115,7 +99,7 @@ export const Example02 = component$(() => {
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4 ">
                 100%. The trigger has a <strong>[data-state]</strong> selector
                 that can be styled when opened or closed.
@@ -133,7 +117,7 @@ export const Example02 = component$(() => {
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4">
                 It's typed using <strong>QwikIntrinsicElements</strong>, meaning
                 you can treat it like an element!
@@ -151,7 +135,7 @@ export const Example02 = component$(() => {
                 </span>
               </AccordionTrigger>
             </h3>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4 dark:border-gray-600 border-t-[1px]">
                 You can use onClick$, onKeyDown$, any handlers you'd normally
                 use with Qwik!
@@ -168,6 +152,7 @@ export const Example02 = component$(() => {
   );
 });
 
+// non-collapsible
 export const Example03 = component$(() => {
   return (
     <PreviewCodeExample>
@@ -188,7 +173,7 @@ export const Example03 = component$(() => {
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4 ">
                 You can turn it off by setting the <strong>collapsible</strong>{' '}
                 prop to false.
@@ -206,7 +191,7 @@ export const Example03 = component$(() => {
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4">
                 It's typed using <strong>QwikIntrinsicElements</strong>, meaning
                 you can treat it like an element!
@@ -224,7 +209,7 @@ export const Example03 = component$(() => {
                 </span>
               </AccordionTrigger>
             </h3>
-            <AccordionContent>
+            <AccordionContent class="accordion-animation-1">
               <p class="bg-violet-200 dark:bg-gray-900 p-4 dark:border-gray-600 border-t-[1px]">
                 You can use onClick$, onKeyDown$, any handlers you'd normally
                 use with Qwik!
@@ -240,3 +225,165 @@ export const Example03 = component$(() => {
     </PreviewCodeExample>
   );
 });
+
+// disabled
+export const Example04 = component$(() => {
+  return (
+    <PreviewCodeExample>
+      <div class="w-full flex justify-center" q:slot="actualComponent">
+        <AccordionRoot class="bg-gray-100 dark:bg-gray-700 rounded-sm border-slate-200 dark:border-gray-600 border-[1px] box-border w-[min(400px,_100%)]">
+          <AccordionItem>
+            <AccordionHeader as="h3">
+              <AccordionTrigger class="px-4 py-2 w-full bg-violet-50 hover:bg-violet-100 dark:bg-gray-700 dark:hover:bg-gray-800  text-left dark:border-gray-600 border-b-[1px] flex items-center justify-between group rounded-t-sm">
+                <span>I'm enabled!</span>
+                <span class="pl-2">
+                  <p class="group-aria-expanded:transform group-aria-expanded:rotate-45 scale-150">
+                    +
+                  </p>
+                </span>
+              </AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p class="bg-violet-200 dark:bg-gray-900 p-4 ">
+                Hey, I'm enabled! This is because I don't use the{' '}
+                <strong>disabled</strong> prop on the trigger.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionHeader as="h3">
+              <AccordionTrigger class="px-4 py-2 w-full bg-violet-50 hover:bg-violet-100 dark:bg-gray-700 dark:hover:bg-gray-800  text-left dark:border-gray-600 border-b-[1px] flex items-center justify-between group">
+                <span>I'm enabled!</span>
+                <span class="pl-2">
+                  <p class="group-aria-expanded:transform group-aria-expanded:rotate-45 scale-150">
+                    +
+                  </p>
+                </span>
+              </AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p class="bg-violet-200 dark:bg-gray-900 p-4">
+                Hey, I'm enabled! This is because I don't use the{' '}
+                <strong>disabled</strong> prop on the trigger.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <h3>
+              <AccordionTrigger
+                disabled
+                class="bg-violet-50 hover:bg-violet-100 dark:bg-gray-700 px-4 py-2 w-full dark:hover:bg-gray-800 text-left flex items-center justify-between group aria-expanded:rounded-none aria-disabled:cursor-not-allowed"
+              >
+                <span>
+                  I'm{' '}
+                  <span class="text-[#f87171] dark:text-[#dc2626] font-bold">
+                    disabled!
+                  </span>
+                </span>
+                <span class="pl-2 flex">
+                  <p class="group-aria-expanded:transform group-aria-expanded:rotate-45 scale-150">
+                    +
+                  </p>
+                </span>
+              </AccordionTrigger>
+            </h3>
+            <AccordionContent>
+              <p class="bg-violet-200 dark:bg-gray-900 p-4 dark:border-gray-600 border-t-[1px]">
+                You shouldn't be able to see this!
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+        </AccordionRoot>
+      </div>
+
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});
+
+export const DefaultValueAccordion = component$(() => {
+  return (
+    <PreviewCodeExample>
+      <div class="w-full flex justify-center" q:slot="actualComponent">
+        <AccordionRoot class="bg-gray-100 dark:bg-gray-700 rounded-sm border-slate-200 dark:border-gray-600 border-[1px] box-border w-[min(400px,_100%)]">
+          <AccordionItem defaultValue>
+            <AccordionHeader as="h3">
+              <AccordionTrigger class="px-4 py-2 w-full bg-violet-50 hover:bg-violet-100 dark:bg-gray-700 dark:hover:bg-gray-800  text-left dark:border-gray-600 border-b-[1px] flex items-center justify-between group rounded-t-sm">
+                <span>I'm open!</span>
+                <span class="pl-2">
+                  <p class="group-aria-expanded:transform group-aria-expanded:rotate-45 scale-150">
+                    +
+                  </p>
+                </span>
+              </AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p class="bg-violet-200 dark:bg-gray-900 p-4 ">
+                Hey, I'm enabled! This is because I don't use the{' '}
+                <strong>disabled</strong> prop on the trigger.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <AccordionHeader as="h3">
+              <AccordionTrigger class="px-4 py-2 w-full bg-violet-50 hover:bg-violet-100 dark:bg-gray-700 dark:hover:bg-gray-800  text-left dark:border-gray-600 border-b-[1px] flex items-center justify-between group">
+                <span>Not open by default.</span>
+                <span class="pl-2">
+                  <p class="group-aria-expanded:transform group-aria-expanded:rotate-45 scale-150">
+                    +
+                  </p>
+                </span>
+              </AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p class="bg-violet-200 dark:bg-gray-900 p-4">
+                Hey, I'm enabled! This is because I don't use the{' '}
+                <strong>disabled</strong> prop on the trigger.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem>
+            <h3>
+              <AccordionTrigger class="bg-violet-50 hover:bg-violet-100 dark:bg-gray-700 px-4 py-2 w-full dark:hover:bg-gray-800 text-left flex items-center justify-between group aria-expanded:rounded-none">
+                <span>Not open by default.</span>
+                <span class="pl-2 flex">
+                  <p class="group-aria-expanded:transform group-aria-expanded:rotate-45 scale-150">
+                    +
+                  </p>
+                </span>
+              </AccordionTrigger>
+            </h3>
+            <AccordionContent>
+              <p class="bg-violet-200 dark:bg-gray-900 p-4 dark:border-gray-600 border-t-[1px]">
+                You shouldn't be able to see this!
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+        </AccordionRoot>
+      </div>
+
+      <div q:slot="codeExample">
+        <Slot />
+      </div>
+    </PreviewCodeExample>
+  );
+});
+
+export function SVG(props: QwikIntrinsicElements['svg'], key: string) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 1024 1024"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M831.872 340.864L512 652.672L192.128 340.864a30.592 30.592 0 0 0-42.752 0a29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728a30.592 30.592 0 0 0-42.752 0z"
+      ></path>
+    </svg>
+  );
+}