✨ Add Popover component

Author: Frontendland

src/components/Modal/modal.module.scss

@@ -3,7 +3,7 @@
 .modal {
     @include transition();
     @include position(fixed, 't50%', 'l50%');
-    @include spacing(0, p-default);
+    @include spacing(m0, p-default);
     @include layer(modal);
     @include visibility(block, 0);
     @include border(primary-50);

src/components/Popover/Popover.astro

@@ -0,0 +1,23 @@
+---
+import type { PopoverProps } from './popover'
+import styles from './popover.module.scss'
+
+interface Props extends PopoverProps {}
+
+const {
+    id,
+    className
+} = Astro.props
+
+const classes = [
+    styles.popover,
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+>
+    <slot />
+</dialog>

src/components/Popover/Popover.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { PopoverProps } from './popover'
+
+    import styles from './popover.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let id: PopoverProps['id'] = ''
+    export let className: PopoverProps['className'] = ''
+
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+</script>
+
+<dialog
+    class={classes}
+    id={id}
+>
+    <slot />
+</dialog>

src/components/Popover/Popover.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { ReactPopoverProps } from './popover'
+
+import styles from './popover.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Popover = ({
+    id,
+    className,
+    children
+}: ReactPopoverProps) => {
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+
+    return (
+        <dialog
+            className={classes}
+            id={id}
+        >
+            {children}
+        </dialog>
+    )
+}
+
+export default Popover

src/components/Popover/popover.module.scss

@@ -0,0 +1,51 @@
+@import '../../scss/config.scss';
+
+.popover {
+    @include spacing(m0, p-default);
+    @include layer(modal);
+    @include visibility(block, 0);
+    @include border(primary-50);
+    @include background(primary-70);
+    @include typography(primary);
+    @include border-radius(md);
+    @include size(w300px);
+
+    transform: translateY(-5px);
+    pointer-events: none;
+
+    &[data-show] {
+        @include transition();
+    }
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translateY(0);
+        pointer-events: all;
+    }
+
+    &[data-position="top"] {
+        transform: translateY(5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+
+    &[data-position="left"] {
+        transform: translateY(0) translateX(5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+
+
+    &[data-position="right"] {
+        transform: translateY(0) translateX(-5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+}

src/components/Popover/popover.ts

@@ -0,0 +1,8 @@
+export type PopoverProps = {
+    id?: string
+    className?: string
+}
+
+export type ReactPopoverProps = {
+    children?: React.ReactNode
+} & PopoverProps

src/pages/index.astro

@@ -149,6 +149,9 @@ const tabItems = [{
         <CardWrapper title="Modal" href="/modal">
             <Button theme="outline">Trigger Modal</Button>
         </CardWrapper>
+        <CardWrapper title="Popover" href="/popover">
+            <Button theme="outline">Open Popover</Button>
+        </CardWrapper>
         <CardWrapper title="Progress" href="/progress">
             <Progress value={33} />
         </CardWrapper>