docs(introduction): fix accordion misalignment

qwikifiers · Dec 8, 2023 · 81f74b4 · 81f74b4
1 parent 56e46cd
commit 81f74b4
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 85 deletions.
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
@@ -20,8 +20,8 @@
     --accent-foreground: 197 33% 0%;
     --destructive: 0 70% 50%;
     --destructive-foreground: 187 40% 98%;
-    --border: 190 18% 67%;
-    --input: 190 18% 67%;
+    --border: 190 11% 67%;
+    --input: 190 11% 67%;
     --ring: 197 100% 43%;
     --radius: 0.5rem;
   }

diff --git a/apps/website/src/routes/docs/headless/accordion/examples/custom-heading.tsx b/apps/website/src/routes/docs/headless/accordion/examples/custom-heading.tsx
@@ -24,7 +24,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">My Heading is an h4!</p>
+              <p class="pb-4">My Heading is an h4!</p>
             </AccordionContent>
           </AccordionItem>
           <AccordionItem class="border-b">
@@ -39,7 +39,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">My Heading is an h5!</p>
+              <p class="pb-4">My Heading is an h5!</p>
             </AccordionContent>
           </AccordionItem>
           <AccordionItem class="border-b">
@@ -54,7 +54,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">My Heading is an h6!</p>
+              <p class="pb-4">My Heading is an h6!</p>
             </AccordionContent>
           </AccordionItem>
         </AccordionRoot>

diff --git a/apps/website/src/routes/docs/headless/accordion/examples/default-value.tsx b/apps/website/src/routes/docs/headless/accordion/examples/default-value.tsx
@@ -24,7 +24,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">I wasn't open by default!</p>
+              <p class="pb-4">I wasn't open by default!</p>
             </AccordionContent>
           </AccordionItem>
           <AccordionItem defaultValue>
@@ -39,7 +39,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 You can open me by default by putting the <strong>defaultValue</strong>{' '}
                 prop on the Accordion Item.
               </p>
@@ -57,7 +57,7 @@ export default component$(() => {
               </AccordionTrigger>
             </h3>
             <AccordionContent>
-              <p class="py-4 pt-0">I wasn't open by default!</p>
+              <p class="pb-4">I wasn't open by default!</p>
             </AccordionContent>
           </AccordionItem>
         </AccordionRoot>

diff --git a/apps/website/src/routes/docs/headless/accordion/examples/disabled.tsx b/apps/website/src/routes/docs/headless/accordion/examples/disabled.tsx
@@ -25,7 +25,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 Hey, I'm enabled! This is because I don't use the{' '}
                 <strong>disabled</strong> prop on the trigger.
               </p>
@@ -43,7 +43,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 Hey, I'm enabled! This is because I don't use the{' '}
                 <strong>disabled</strong> prop on the trigger.
               </p>
@@ -69,7 +69,7 @@ export default component$(() => {
               </AccordionTrigger>
             </h3>
             <AccordionContent>
-              <p class="py-4 pt-0">You shouldn't be able to see this!</p>
+              <p class="pb-4">You shouldn't be able to see this!</p>
             </AccordionContent>
           </AccordionItem>
         </AccordionRoot>

diff --git a/apps/website/src/routes/docs/headless/accordion/examples/focused-index.tsx b/apps/website/src/routes/docs/headless/accordion/examples/focused-index.tsx
@@ -31,7 +31,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 Yes! Since 1.0 back in May, Qwik apps are great for production.
               </p>
             </AccordionContent>
@@ -48,7 +48,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 Because you're doing less work! Thanks to resumability we execute
                 JavaScript on interaction.
               </p>
@@ -66,7 +66,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 Check out Qwik-React! It allows you to partially hydrate React components
                 into your Qwik app.
               </p>

diff --git a/apps/website/src/routes/docs/headless/accordion/examples/hero.tsx b/apps/website/src/routes/docs/headless/accordion/examples/hero.tsx
@@ -15,47 +15,47 @@ export default component$(() => {
         <AccordionRoot animated enhance={true} class="w-[min(400px,_100%)]">
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
-              <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4  text-left  hover:underline hover:underline">
+              <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
                 <span>Can I add headings inside the accordion?</span>
                 <span class="pl-2">
                   <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class=" py-4  pt-0">
+              <p class="pb-4">
                 Yes, if you wrap the <strong>AccordionHeader</strong> component around the
                 trigger, screen readers will announce it properly.
               </p>
             </AccordionContent>
           </AccordionItem>
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
-              <AccordionTrigger class="group flex w-full items-center justify-between py-4  text-left  hover:underline hover:underline">
+              <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
                 <span>Is it easy to animate?</span>
                 <span class="pl-2">
                   <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class=" py-4  pt-0">
+              <p class="pb-4">
                 Yup! You can even use animations or CSS transitions using the{' '}
                 <strong>animated</strong> prop on the accordion root!
               </p>
             </AccordionContent>
           </AccordionItem>
           <AccordionItem class="border-b">
             <AccordionHeader as="h3">
-              <AccordionTrigger class="group flex w-full items-center justify-between py-4  text-left  hover:underline hover:underline aria-expanded:rounded-none">
+              <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
                 <span>How about opening multiple items?</span>
                 <span class="pl-2">
                   <SVG class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform" />
                 </span>
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class=" py-4  pt-0">
+              <p class="pb-4">
                 You can do that by setting the <strong>behavior</strong> prop to "multi"
                 on the Accordion
               </p>

diff --git a/apps/website/src/routes/docs/headless/accordion/examples/multi.tsx b/apps/website/src/routes/docs/headless/accordion/examples/multi.tsx
@@ -23,7 +23,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 100%. The trigger has a <strong>[data-state]</strong> selector that can be
                 styled when equal to the <strong>open</strong> or <strong>closed</strong>{' '}
                 values.
@@ -43,7 +43,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 It's typed using <strong>QwikIntrinsicElements</strong>, meaning you can
                 treat it like an element!
               </p>
@@ -59,7 +59,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 You can use onClick$, onKeyDown$, any handlers you'd normally use with
                 Qwik!
               </p>

diff --git a/apps/website/src/routes/docs/headless/accordion/examples/non-collapsible.tsx b/apps/website/src/routes/docs/headless/accordion/examples/non-collapsible.tsx
@@ -24,7 +24,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 You can turn it off by setting the <strong>collapsible</strong> prop to
                 false.
               </p>
@@ -40,7 +40,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class="py-4 pt-0">Yes, there's a dynamic section further below.</p>
+              <p class="pb-4">Yes, there's a dynamic section further below.</p>
             </AccordionContent>
           </AccordionItem>
           <AccordionItem class="border-b">
@@ -53,7 +53,7 @@ export default component$(() => {
               </AccordionTrigger>
             </h3>
             <AccordionContent class="accordion-animation-1 overflow-hidden">
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 Of course! You can also use the onFocusIndexChange$ and
                 onSelectedIndexChange$ custom events.
               </p>

diff --git a/apps/website/src/routes/docs/headless/accordion/examples/selected-index.tsx b/apps/website/src/routes/docs/headless/accordion/examples/selected-index.tsx
@@ -31,7 +31,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 Absolutely! You can reach out to us in the Qwikifiers discord.
               </p>
             </AccordionContent>
@@ -48,7 +48,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
+              <p class="pb-4">
                 According to the 2023 <strong>stack overflow survey</strong>, it's close
                 to the amount of people learning Remix already!
               </p>
@@ -66,9 +66,7 @@ export default component$(() => {
               </AccordionTrigger>
             </AccordionHeader>
             <AccordionContent>
-              <p class="py-4 pt-0">
-                A group of active contributors in the Qwik ecosystem!
-              </p>
+              <p class="pb-4">A group of active contributors in the Qwik ecosystem!</p>
             </AccordionContent>
           </AccordionItem>
         </AccordionRoot>

diff --git a/apps/website/src/routes/docs/headless/introduction/index.mdx b/apps/website/src/routes/docs/headless/introduction/index.mdx
@@ -26,10 +26,9 @@ Qwik UI Headless Kit provides a complete set of totally customizable components
 It gives you, the developer, more time to focus on what matters most, building your awesome app! Apply your favorite styling technology, CSS-in-JS, Tailwind CSS, or whatever floats your boat. Add just a few _ad hoc_ styles or implement a full-on design system, Qwik UI Headless makes it easy.
 
 <Note status="warning">
-**Woah, why is there a 0 by the version?**
-
-Qwik UI is in its beta phase - it's like a roller coaster, thrilling and full of surprises! **Expect new features and some breaking changes** until we reach version 1.0. So, buckle up and enjoy the ride. 🏍️
-
+  Qwik UI is in its **beta** phase - it's like a roller coaster, thrilling and full of
+  surprises! Expect new features and some breaking changes until we reach version 1.0. So,
+  buckle up and enjoy the ride. 🏍️
 </Note>
 
 ## Vision
@@ -108,60 +107,47 @@ Qwik UI is for the community, by the community. An open source project that woul
 
 ## FAQ
 
-<AccordionRoot
-    enhance={true}
-    class="box-border w-full text-slate-950 dark:text-white mb-6"
->
-    <AccordionItem>
-        <AccordionHeader as="h3">
-            <AccordionTrigger class="text-md group flex min-h-[44px] w-full items-center justify-between border-slate-200 dark:border-slate-800 border-b-[1px] text-left py-4">
-                **What kind of support or resources are available if I encounter issues with Qwik UI?**
-                <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transfor min-w-[1rem]" />
-            </AccordionTrigger>
+<AccordionRoot animated enhance={true}>
+    <AccordionItem class="border-b">
+    <AccordionHeader as="h3">
+        <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
+            <span class="font-medium">What kind of support or resources are available if I encounter issues with Qwik UI?</span>
+            <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform min-w-[1rem]" />              </AccordionTrigger>
         </AccordionHeader>
-        <AccordionContent class=" overflow-hidden text-slate-700 dark:text-slate-200">
-            <div class="py-4">
-            <div class="pb-4">
-                If you stumble into any problems, [create an issue](https://github.com/qwikifiers/qwik-ui/issues) on the Qwik UI repository.
-            </div>
-
+    <AccordionContent class="accordion-animation-1 overflow-hidden">
+        <div class="pb-4">
+            If you stumble into any problems, [create an issue](https://github.com/qwikifiers/qwik-ui/issues) on the Qwik UI repository.
             We also have a [discord community](https://discord.gg/PVWUUejrez) with a Qwik UI channel where you can raise any concerns, propose ideas, or chat all things Qwik UI 😊
-            </div>
-        </AccordionContent>
+        </div>
+    </AccordionContent>
     </AccordionItem>
-    <AccordionItem>
-        <AccordionHeader as="h3">
-            <AccordionTrigger class="text-md group flex min-h-[44px] w-full items-center justify-between border-slate-200 dark:border-slate-800 border-b-[1px] text-left py-4">
-                **How can I contribute to the project?**
-                <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transfor min-w-[1rem]" />
-            </AccordionTrigger>
-        </AccordionHeader>
-        <AccordionContent class=" overflow-hidden text-slate-700 dark:text-slate-200">
-            <div class="py-4">
-                We provide a [contributing](/docs/headless/contributing) guide to help get familiar with the repository.
-
-                <div class="pt-4">
-                    Additionally, we offer a quick start [setup guide](https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md) and a section dedicated to advanced resources below the Components navigation.
-                </div>
-            </div>
-        </AccordionContent>
+    <AccordionItem class="border-b">
+    <AccordionHeader as="h3">
+        <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
+        <span class="font-medium">How can I contribute to the project?</span>
+        <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform min-w-[1rem]" />
+        </AccordionTrigger>
+    </AccordionHeader>
+    <AccordionContent class="accordion-animation-1 overflow-hidden">
+        <div class="pb-4">
+            We provide a [contributing](/docs/headless/contributing) guide to help get familiar with the repository.
+            Additionally, we offer a quick start [setup guide](https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md) and a section dedicated to advanced resources below the Components navigation.
+        </div>
+    </AccordionContent>
     </AccordionItem>
-    <AccordionItem>
-        <AccordionHeader as="h3">
-            <AccordionTrigger class="text-md group flex min-h-[44px] w-full items-center justify-between text-left py-4">
-                **How can I migrate my existing application to use Qwik UI?**
-                <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transfor min-w-[1rem]" />
-            </AccordionTrigger>
-        </AccordionHeader>
-        <AccordionContent class="animation-1 overflow-hidden text-slate-700 dark:text-slate-200 border-t-[1px] border-slate-200 dark:border-slate-800">
-            <div class="py-4">
-                If you're using `Qwik-React`, `Qwik-Angular`, `@qwikdev/astro`, we suggest incrementally adding Qwik UI components to your application.
-
-                <div class="pt-4">
-                    Qwik, built as a microfrontend, allows you to incrementally integrate Qwik UI components into your existing application. This approach reduces migration risk and complexity, letting you leverage Qwik UI's benefits at your own pace.
-                </div>
-            </div>
-        </AccordionContent>
+    <AccordionItem class="border-b">
+    <AccordionHeader as="h3">
+        <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
+        <span class="font-medium">How can I migrate my existing application to use Qwik UI?</span>
+        <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform min-w-[1rem]" />
+        </AccordionTrigger>
+    </AccordionHeader>
+    <AccordionContent class="accordion-animation-1 overflow-hidden">
+        <div class="pb-4">
+            If you're using `Qwik-React`, `Qwik-Angular`, `@qwikdev/astro`, we suggest incrementally adding Qwik UI components to your application.
+            Qwik, built as a microfrontend, allows you to incrementally integrate Qwik UI components into your existing application. This approach reduces migration risk and complexity, letting you leverage Qwik UI's benefits at your own pace.
+        </div> 
+    </AccordionContent>
     </AccordionItem>
 
 </AccordionRoot>