chore: add Popover in storybook (#11021)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

packages/ui/components/popover/AnimatedPopover.tsx

@@ -59,10 +59,13 @@ export const AnimatedPopover = ({
           ) : (
             <div className="max-w-36 flex items-center">
               <Tooltip content={text}>
-                <div className="select-none truncate font-medium">
+                <div className="flex select-none truncate font-medium">
                   {text}
                   {count && count > 0 && (
-                    <div className="flex h-4 w-4 items-center justify-center rounded-full">{count}</div>
+                    <div className="text-emphasis flex items-center justify-center rounded-full font-semibold">
+                      <span>&nbsp;</span>
+                      {count}
+                    </div>
                   )}
                 </div>
               </Tooltip>

packages/ui/components/popover/popover.stories.mdx

@@ -0,0 +1,138 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import { Fragment } from "react";
+
+import { FilterCheckboxFieldsContainer } from "@calcom/features/filters/components/TeamsFilter";
+import {
+  CustomArgsTable,
+  Examples,
+  Example,
+  Title,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+import { Button, CheckboxField } from "@calcom/ui";
+
+import { List, ListItem } from "../list";
+import { AnimatedPopover } from "./AnimatedPopover";
+
+<Meta title="UI/Popover" component={AnimatedPopover} />
+
+<Title title="Popover" suffix="Brief" subtitle="Version 1.0 — Last Update: 29 Aug 2023" />
+
+## Definition
+
+The `Popover` component is used to display rich content in a portal.
+
+## Structure
+
+The `Popover` component can be used to display a rich content in a portal.
+
+<CustomArgsTable of={AnimatedPopover} />
+
+## Examples
+
+<Examples>
+  <Example title="Default">
+    <TooltipProvider>
+      <AnimatedPopover text="Go">
+        <FilterCheckboxFieldsContainer>
+          {["First", "Second", "Third"]?.map((eventType) => (
+            <div key={eventType.value} className="items-center hover:bg-muted flex cursor-pointer px-4 py-2">
+              <CheckboxField
+                checked={false}
+                onChange={(e) => {
+                  console.log("changed ", e);
+                }}
+                description={eventType}
+              />
+            </div>
+          ))}
+        </FilterCheckboxFieldsContainer>
+      </AnimatedPopover>
+    </TooltipProvider>
+  </Example>
+  <Example title="With Trigger">
+    <TooltipProvider>
+      <AnimatedPopover text="Go" Trigger={<button>click here</button>}>
+        <FilterCheckboxFieldsContainer>
+          {["First", "Second", "Third"]?.map((eventType) => (
+            <div key={eventType.value} className="items-center hover:bg-muted flex cursor-pointer px-4 py-2">
+              <CheckboxField
+                checked={false}
+                onChange={(e) => {
+                  console.log("changed ", e);
+                }}
+                description={eventType}
+              />
+            </div>
+          ))}
+        </FilterCheckboxFieldsContainer>
+      </AnimatedPopover>
+    </TooltipProvider>
+  </Example>
+  <Example title="With count">
+    <TooltipProvider>
+      <AnimatedPopover text="Go here" count={1}>
+        <FilterCheckboxFieldsContainer>
+          {["First", "Second", "Third"]?.map((eventType) => (
+            <div key={eventType.value} className="items-center hover:bg-muted flex cursor-pointer px-4 py-2">
+              <CheckboxField
+                checked={false}
+                onChange={(e) => {
+                  console.log("changed ", e);
+                }}
+                description={eventType}
+              />
+            </div>
+          ))}
+        </FilterCheckboxFieldsContainer>
+      </AnimatedPopover>
+    </TooltipProvider>
+  </Example>
+</Examples>
+
+## Popover Story
+
+<Canvas>
+  <Story
+    name="Popover"
+    args={{
+      text: "Go",
+      childrenText: "Here is it",
+      defaultOpen: false,
+    }}
+    argTypes={{
+      count: {
+        control: {
+          type: "number",
+        },
+      },
+    }}>
+    {({ text, childrenText, count, defaultOpen }) => (
+      <VariantsTable titles={["Default"]} columnMinWidth={50}>
+        <VariantRow>
+          <TooltipProvider>
+            <AnimatedPopover text={text} count={count} defaultOpen={defaultOpen}>
+              <FilterCheckboxFieldsContainer>
+                {["First", "Second", "Third"]?.map((eventType) => (
+                  <div
+                    key={eventType.value}
+                    className="items-center hover:bg-muted flex cursor-pointer px-4 py-2">
+                    <CheckboxField
+                      checked={false}
+                      onChange={(e) => {
+                        console.log("changed ", e);
+                      }}
+                      description={eventType}
+                    />
+                  </div>
+                ))}
+              </FilterCheckboxFieldsContainer>
+            </AnimatedPopover>
+          </TooltipProvider>
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>