Export popover close (#230)

* chore: export popover close * chore: added popover close to docs --------- Co-authored-by: Swastik Dilip <[email protected]>
nearform · Dec 14, 2023 · 8e99f2e · 8e99f2e
1 parent 6f20e9b
commit 8e99f2e
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 25 deletions.
diff --git a/src/components/Popover/index.tsx b/src/components/Popover/index.tsx
@@ -24,6 +24,8 @@ const Popover = PopoverPrimitive.Root
 
 const PopoverTrigger = PopoverPrimitive.Trigger
 
+const PopoverClose = PopoverPrimitive.Close
+
 export interface PopoverProps
   extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>,
     VariantProps<typeof popoverVariants> {}
@@ -84,4 +86,10 @@ const PopoverSeparator = React.forwardRef<
 ))
 PopoverSeparator.displayName = SeparatorPrimitive.Root.displayName
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverSeparator }
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverSeparator,
+  PopoverClose
+}
diff --git a/stories/Popover/Docs.mdx b/stories/Popover/Docs.mdx
@@ -20,6 +20,10 @@ A popover overlay is a temporary, expandable menu that appears on top of the mai
 
 <Canvas of={PopoverStories.Radio} />
 
+## With Close Button
+
+<Canvas of={PopoverStories.CloseButton} />
+
 ### \<Popover>
 
 The root of the component.
@@ -56,6 +60,10 @@ The content contained in the popover. Style or className is ignored.
 
 Used to visually separate items in the popover. Can be used to create Headers or Footers.
 
+### \<PopoverClose>
+
+The button that closes the popover.
+
 ## Example
 
 ```tsx
@@ -64,6 +72,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   PopoverSeparator,
+  PopoverClose,
   PopoverProps,
   Button
 } from '@nearform/quantum'
@@ -72,29 +81,29 @@ import { PlusIcon } from '@/assets/build'
 
 const ShoppingList = () => (
   <Popover>
-      <PopoverTrigger>
-        <Button>Open Shopping List</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-72">
-        <div className="flex flex-col gap-3 px-4">
-          <div className="flex font-semibold justify-center pt-2">
-            Shopping List
-          </div>
-          <PopoverSeparator className="-mx-4" />
-          <li>Bananas</li>
-          <li>Bread</li>
-          <li>Butter</li>
-          <li>Sugar</li>
-          <li>Icing Sugar</li>
-          <li>Eggs</li>
-          <li>Baking Powder</li>
-          <PopoverSeparator className="-mx-4" />
-          <div className="flex items-center gap-2 font-semibold pb-2">
-            <PlusIcon className="stroke-current" />
-            Add new item
-          </div>
+    <PopoverTrigger>
+      <Button>Open Shopping List</Button>
+    </PopoverTrigger>
+    <PopoverContent className="w-72">
+      <div className="flex flex-col gap-3 px-4">
+        <div className="flex font-semibold justify-center pt-2">
+          Shopping List
+        </div>
+        <PopoverSeparator className="-mx-4" />
+        <li>Bananas</li>
+        <li>Bread</li>
+        <li>Butter</li>
+        <li>Sugar</li>
+        <li>Icing Sugar</li>
+        <li>Eggs</li>
+        <li>Baking Powder</li>
+        <PopoverSeparator className="-mx-4" />
+        <div className="flex items-center gap-2 font-semibold pb-2">
+          <PlusIcon className="stroke-current" />
+          Add new item
         </div>
-      </PopoverContent>
-    </Popover>
+      </div>
+    </PopoverContent>
+  </Popover>
 )
 ```
diff --git a/stories/Popover/Popover.example.tsx b/stories/Popover/Popover.example.tsx
@@ -3,6 +3,7 @@ import {
   PopoverContent,
   PopoverTrigger,
   PopoverSeparator,
+  PopoverClose,
   PopoverProps
 } from '@/components/Popover'
 import { Button, Label, PlusIcon, Radio, RadioGroup } from '@/index'
@@ -27,7 +28,7 @@ const PopoverDemoRadio = () => {
           <div className="font-semibold pt-2">
             How often would you like to recieve notifications?
           </div>
-          <PopoverSeparator className="-mx-4"/>
+          <PopoverSeparator className="-mx-4" />
           <RadioGroup
             className="flex flex-col gap-4 my-2 pb-2"
             defaultValue="Never"
@@ -101,6 +102,26 @@ const PopoverDemoScrollableList = () => {
   )
 }
 
+const PopoverDemoWithCloseButton = () => {
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72 h-30 p-5">
+        <div className="flex flex-col">
+          <div className="font-semibold pt-2">
+            Press the button below to close the popover
+          </div>
+          <PopoverClose className="justify-center items-center">
+            <Button>Close Popover</Button>
+          </PopoverClose>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
 interface DemoProps extends PopoverProps {
   example: string
 }
@@ -111,6 +132,7 @@ const PopoverDemo = ({ example }: DemoProps) => {
       {example === 'list' && <PopoverDemoList />}
       {example === 'radio' && <PopoverDemoRadio />}
       {example === 'scrollableList' && <PopoverDemoScrollableList />}
+      {example === 'popoverClose' && <PopoverDemoWithCloseButton />}
     </>
   )
 }

diff --git a/stories/Popover/Popover.stories.ts b/stories/Popover/Popover.stories.ts
@@ -19,3 +19,4 @@ export const ScrollableList: Story = { args: { example: 'scrollableList' } }
 
 export const Radio: Story = { args: { example: 'radio' } }
 
+export const CloseButton: Story = { args: { example: 'popoverClose' } }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,3 +19,4 @@ export const ScrollableList: Story = { args: { example: 'scrollableList' } }

		export const Radio: Story = { args: { example: 'radio' } }

		export const CloseButton: Story = { args: { example: 'popoverClose' } }