feat(popover): add Popover component

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 160 components exported from carbon-components-svelte@0.30.0.
+> 161 components exported from carbon-components-svelte@0.30.0.
 
 ## Components
 
@@ -93,6 +93,7 @@
 - [`PaginationNav`](#paginationnav)
 - [`PaginationSkeleton`](#paginationskeleton)
 - [`PasswordInput`](#passwordinput)
+- [`Popover`](#popover)
 - [`ProgressIndicator`](#progressindicator)
 - [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
 - [`ProgressStep`](#progressstep)
@@ -2632,6 +2633,29 @@ None.
 | focus      | forwarded | --     |
 | blur       | forwarded | --     |
 
+## `Popover`
+
+### Props
+
+| Prop name    | Kind             | Reactive | Type                                                                                                                                                                                                                            | Default value      | Description                                       |
+| :----------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------- |
+| open         | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to display the popover              |
+| caret        | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` render a caret                      |
+| align        | <code>let</code> | No       | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>"top"</code> | Specify the alignment of the caret                |
+| light        | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to enable the light variant         |
+| highContrast | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to enable the high contrast variant |
+| relative     | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to use a relative position          |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `ProgressIndicator`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -1,5 +1,5 @@
 {
-  "total": 160,
+  "total": 161,
   "components": [
     {
       "moduleName": "Accordion",
@@ -6778,6 +6778,76 @@
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "input" }
     },
+    {
+      "moduleName": "Popover",
+      "filePath": "src/Popover/Popover.svelte",
+      "props": [
+        {
+          "name": "open",
+          "kind": "let",
+          "description": "Set to `true` to display the popover",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "caret",
+          "kind": "let",
+          "description": "Set to `true` render a caret",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "align",
+          "kind": "let",
+          "description": "Specify the alignment of the caret",
+          "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
+          "value": "\"top\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "light",
+          "kind": "let",
+          "description": "Set to `true` to enable the light variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "highContrast",
+          "kind": "let",
+          "description": "Set to `true` to enable the high contrast variant",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "relative",
+          "kind": "let",
+          "description": "Set to `true` to use a relative position",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "div" }
+    },
     {
       "moduleName": "ProgressIndicator",
       "filePath": "src/ProgressIndicator/ProgressIndicator.svelte",

docs/src/layouts/ComponentLayout.svelte

@@ -208,7 +208,12 @@
     }
   }
 
-  .preview-viewer > .bx--aspect-ratio {
+  .preview-viewer > .bx--aspect-ratio,
+  .preview-viewer [data-outline] {
     outline: 1px solid var(--cds-interactive-04);
   }
+
+  [data-outline="relative"] {
+    position: relative;
+  }
 </style>

docs/src/pages/_layout.svelte

@@ -20,7 +20,7 @@
   import Footer from "../components/Footer.svelte";
 
   const deprecated = ["ToggleSmall", "Icon"];
-  const new_components = ["ImageLoader", "LocalStorage"];
+  const new_components = ["Popover"];
 
   let isOpen = false;
   let isSideNavOpen = true;

docs/src/pages/components/Popover.svx

@@ -0,0 +1,67 @@
+<script>
+  import { Popover } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+### Default
+
+By default, the position of the popover component is absolute.
+
+<div data-outline="relative">
+    Parent
+    <Popover open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Relative
+
+Set `relative` to `true` to use a relative position.
+
+<div data-outline="relative">
+    Parent
+    <Popover relative open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+
+### With caret
+
+<div data-outline="relative">
+    Parent
+    <Popover caret open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Custom caret alignment
+
+By default, the caret is aligned "top".
+
+Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
+
+<div data-outline="relative">
+    Parent
+    <Popover caret align="top-left" open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### Light variant
+
+<div data-outline="relative">
+    Parent
+    <Popover light open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>
+
+### High contrast variant
+
+<div data-outline="relative">
+    Parent
+    <Popover highContrast open>
+        <div style="padding: var(--cds-spacing-05)">Content</div>
+    </Popover>
+</div>

src/Popover/Popover.svelte

@@ -0,0 +1,48 @@
+<script>
+  /** Set to `true` to display the popover */
+  export let open = false;
+
+  /** Set to `true` render a caret */
+  export let caret = false;
+
+  /**
+   * Specify the alignment of the caret
+   * @type {"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"}
+   */
+  export let align = "top";
+
+  /** Set to `true` to enable the light variant */
+  export let light = false;
+
+  /** Set to `true` to enable the high contrast variant */
+  export let highContrast = false;
+
+  /** Set to `true` to use a relative position */
+  export let relative = false;
+</script>
+
+<div
+  class:bx--popover="{true}"
+  class:bx--popover--caret="{caret}"
+  class:bx--popover--light="{light}"
+  class:bx--popover--high-contrast="{highContrast}"
+  class:bx--popover--top="{align === 'top'}"
+  class:bx--popover--top-left="{align === 'top-left'}"
+  class:bx--popover--top-right="{align === 'top-right'}"
+  class:bx--popover--bottom="{align === 'bottom'}"
+  class:bx--popover--bottom-left="{align === 'bottom-left'}"
+  class:bx--popover--bottom-right="{align === 'bottom-right'}"
+  class:bx--popover--left="{align === 'left'}"
+  class:bx--popover--left-bottom="{align === 'left-bottom'}"
+  class:bx--popover--left-top="{align === 'left-top'}"
+  class:bx--popover--right="{align === 'right'}"
+  class:bx--popover--right-bottom="{align === 'right-bottom'}"
+  class:bx--popover--right-top="{align === 'right-top'}"
+  class:bx--popover--open="{open}"
+  class:bx--popover--relative="{relative}"
+  {...$$restProps}
+>
+  <div class:bx--popover-contents="{true}">
+    <slot />
+  </div>
+</div>

src/Popover/index.js

@@ -0,0 +1 @@
+export { default as Popover } from "./Popover.svelte";

src/index.js

@@ -77,6 +77,7 @@ export { OrderedList } from "./OrderedList";
 export { OverflowMenu, OverflowMenuItem } from "./OverflowMenu";
 export { Pagination, PaginationSkeleton } from "./Pagination";
 export { PaginationNav } from "./PaginationNav";
+export { Popover } from "./Popover";
 export {
   ProgressIndicator,
   ProgressIndicatorSkeleton,

types/Popover/Popover.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface PopoverProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  /**
+   * Set to `true` to display the popover
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Set to `true` render a caret
+   * @default false
+   */
+  caret?: boolean;
+
+  /**
+   * Specify the alignment of the caret
+   * @default "top"
+   */
+  align?:
+    | "top"
+    | "top-left"
+    | "top-right"
+    | "bottom"
+    | "bottom-left"
+    | "bottom-right"
+    | "left"
+    | "left-bottom"
+    | "left-top"
+    | "right"
+    | "right-bottom"
+    | "right-top";
+
+  /**
+   * Set to `true` to enable the light variant
+   * @default false
+   */
+  light?: boolean;
+
+  /**
+   * Set to `true` to enable the high contrast variant
+   * @default false
+   */
+  highContrast?: boolean;
+
+  /**
+   * Set to `true` to use a relative position
+   * @default false
+   */
+  relative?: boolean;
+}
+
+export default class Popover extends SvelteComponentTyped<
+  PopoverProps,
+  {},
+  { default: {} }
+> {}

types/index.d.ts

@@ -86,6 +86,7 @@ export { default as OverflowMenuItem } from "./OverflowMenu/OverflowMenuItem";
 export { default as Pagination } from "./Pagination/Pagination";
 export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton";
 export { default as PaginationNav } from "./PaginationNav/PaginationNav";
+export { default as Popover } from "./Popover/Popover";
 export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndicator";
 export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton";
 export { default as ProgressStep } from "./ProgressIndicator/ProgressStep";