Merge pull request #361 from thejackshelton/info-popover

feat(api table-popover): added the info popover to the API table

Author: thejackshelton

apps/website/src/components/api-table/api-table.tsx

@@ -1,8 +1,12 @@
 import { component$ } from '@builder.io/qwik';
-
+import { Tooltip } from '@qwik-ui/headless';
+import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
+import {} from '@qwik-ui/headless';
+import { Button } from '@qwik-ui/tailwind';
 type APITableProps = {
   propDescriptors: {
     name: string;
+    info: string;
     type: string;
     description: string;
   }[];
@@ -28,8 +32,37 @@ export const APITable = component$(({ propDescriptors }: APITableProps) => {
                 <code>{propDescriptor.name}</code>
               </td>
               <td class="prose prose-sm py-3 align-baseline">
-                <span class="">
+                <span class="flex items-center">
                   <code>{propDescriptor.type}</code>
+                  {propDescriptor.info && (
+                    <Popover placement="top">
+                      <PopoverContent>
+                        <div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2  rounded-md">
+                          {propDescriptor?.info}
+                        </div>
+                      </PopoverContent>
+                      <PopoverTrigger>
+                        <div class="hover:bg-slate-500 hover:bg-opacity-50 h-[31px] mt-2 p-2 rounded-md">
+                          <svg
+                            width="15"
+                            height="15"
+                            viewBox="0 0 15 15"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            aria-hidden="true"
+                            focusable="false"
+                          >
+                            <path
+                              d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
+                              fill="currentColor"
+                              fill-rule="evenodd"
+                              clip-rule="evenodd"
+                            ></path>
+                          </svg>
+                        </div>{' '}
+                      </PopoverTrigger>
+                    </Popover>
+                  )}
                 </span>
               </td>
               <td class="py-3 align-baseline">

apps/website/src/routes/docs/headless/(components)/accordion/index.mdx

@@ -317,14 +317,15 @@ Thanks to `QwikIntrinsicAttributes` , you can use most if not all normal JSX pro
     {
       name: 'onClick$',
       type: 'function',
-      description:
-        'A custom click handler that executes when the element is clicked.',
-    },
-    {
+      info: 'PropFunction<() => void>',
+      description: 'A custom click handler that executes when the element is clicked.',
+      },
+      {
       name: 'onKeyDown$',
       type: 'function',
       description:
         'A custom click handler that executes when the key is pressed down.',
+        },
     },
   ]}
 />

apps/website/src/routes/docs/headless/(components)/autocomplete/index.mdx

@@ -164,7 +164,8 @@ By default, the API holds available attributes of both native DOM elements and c
     },
     {
       name: 'onClick$',
-      type: 'PropFunction<() => void>',
+      type: 'function',
+      info: 'PropFunction<() => void>',
       description: 'A custom click handler',
     },
   ]}

apps/website/src/routes/docs/headless/(components)/popover/index.mdx

@@ -65,12 +65,14 @@ import { APITable } from '../../../../../components/api-table/api-table';
   propDescriptors={[
     {
       name: 'placement',
-      type: '"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"',
+      type:"enum",
+      info: '"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end"',
       description: 'The side where to show the popover.',
     },
     {
       name: 'triggerEvent',
-      type: '"click" | "mouseOver"',
+      type: 'enum',
+      info: '"click" | "mouseOver"',
       description: 'Popover is opened when trigger is clicked or mouse overed.',
     },
     {
@@ -91,8 +93,11 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'onUpdate$',
-      type: 'PropFunction<(isOpen: boolean) => void>',
+      type: 'function',
+      info: 'PropFunction<(isOpen: boolean) => void>',
+
       description: 'Notify a state update to the parent.',
     },
-  ]}
+
+]}
 />

apps/website/src/routes/docs/headless/(components)/tabs/index.mdx

@@ -385,7 +385,8 @@ return <div>
     },
     {
       name: 'onSelectedIndexChange$',
-      type: '(index: number) => void',
+      type: 'function',
+      info: '(index: number) => void',
       description:
         'An event hook that getting notified whenever the selected index changes',
     },
@@ -403,7 +404,8 @@ return <div>
     },
     {
       name: 'onClick',
-      type: '(event: QwikMouseEvent) => void',
+      info: '(event: QwikMouseEvent) => void',
+      type: 'function',
       description: 'A custom click handler to wire to tab click event',
     },
     {

apps/website/src/routes/docs/headless/(components)/toggle/index.mdx

@@ -82,7 +82,8 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'onClick$',
-      type: 'PropFunction<() => void>',
+      info: 'PropFunction<() => void>',
+      type: 'function',
       description: 'A custom click handler to wire to the toggle click event',
     },
     {

apps/website/src/routes/docs/headless/(components)/tooltip/index.mdx

@@ -99,7 +99,8 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'position',
-      type: '"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"',
+      type: 'enum',
+      info: '"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"',
       description: 'Determines the position the Tooltip is rendered.',
     },
   ]}

apps/website/src/routes/docs/tailwind/(components)/accordion/index.mdx

@@ -143,7 +143,8 @@ import { APITable } from '../../../../../components/api-table/api-table';
     },
     {
       name: 'onClick$',
-      type: 'PropFunction<() => void>',
+      info: 'PropFunction<() => void>',
+      type: 'function',
       description: 'A custom click handler',
     },
   ]}