Feat/192 popover

package.json

@@ -75,8 +75,10 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",

src/components/Popover/index.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as Separator from '@radix-ui/react-separator'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as ScrollArea from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+const popoverVariants = cva([
+  'z-50',
+  'border border-2 border-border-subtle dark:border-border-dark',
+  'rounded-lg',
+  'bg-background dark:bg-background-dark',
+  'text-foreground text-sm font-normal dark:text-white',
+  'shadow',
+  'outline-none',
+  'overflow-scroll'
+])
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+export interface PopoverProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>,
+    VariantProps<typeof popoverVariants> {}
+
+export interface SeparatorProps
+  extends React.ComponentPropsWithoutRef<typeof Separator.Root> {}
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(
+  (
+    { className, align = 'center', sideOffset = 4, children, ...props },
+    ref
+  ) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(popoverVariants(), className)}
+        {...props}
+      >
+        <ScrollArea.Root className="w-full h-full" type="auto">
+          <ScrollArea.Viewport className="w-full h-full">
+            {children}
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar
+            orientation="vertical"
+            className="w-3 pr-1 py-2"
+          >
+            <ScrollArea.Thumb className="bg-grey-200 w-2 rounded-lg" />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Root>
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+)
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+const PopoverSeparator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', ...props }, ref) => (
+  <div className="w-full">
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border-subtle dark:bg-border-dark',
+        orientation === 'horizontal' ? 'h-[1px] w-fill' : 'h-fill w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+PopoverSeparator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverSeparator }

src/components/index.ts

@@ -11,4 +11,5 @@ export * from './Chip'
 export * from './Modal'
 export * from './WebsiteFooter'
 export * from './Select'
+export * from './Popover'
 export * from './Calendar'

stories/Popover/Docs.mdx

@@ -0,0 +1,100 @@
+import { Canvas, Meta } from '@storybook/blocks'
+
+import * as PopoverStories from './Popover.stories'
+
+<Meta of={PopoverStories} />
+
+# Popover
+
+A popover overlay is a temporary, expandable menu that appears on top of the main content when activated. It typically displays a list of options or additional controls when a user clicks or hovers over a specific element, such as a button, icon or select input. This design element helps conserve screen space and provides a clean, unobtrusive way to present additional choices or information to users.
+
+## Default
+
+<Canvas of={PopoverStories.Default} />
+
+## Default with Scrolling
+
+<Canvas of={PopoverStories.ScrollableList} />
+
+## With Radio Group
+
+<Canvas of={PopoverStories.Radio} />
+
+### \<Popover>
+
+The root of the component.
+
+### \<PopoverTrigger>
+
+The button that triggers the popover to open and reveal its contents.
+
+### \<PopoverContent>
+
+The content contained in the popover. Style or className is ignored.
+
+<table>
+  <tbody>
+    <tr>
+      <td>Attribute</td>
+      <td>Type</td>
+      <td>Default</td>
+    </tr>
+    <tr>
+      <td>align</td>
+      <td>`'center' | 'start' | 'end`</td>
+      <td>`'center'`</td>
+    </tr>
+    <tr>
+      <td>sideOffset</td>
+      <td>`number`</td>
+      <td>`4`</td>
+    </tr>
+  </tbody>
+</table>
+
+### \<PopoverSeparator>
+
+Used to visually separate items in the popover. Can be used to create Headers or Footers.
+
+## Example
+
+```tsx
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverSeparator,
+  PopoverProps,
+  Button
+} from '@nearform/quantum'
+
+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>
+        </div>
+      </PopoverContent>
+    </Popover>
+)
+```