@fluid-topics/ft-popover 1.1.115

package/README.md

@@ -0,0 +1,42 @@
+A popover component.
+
+## Install
+
+```shell
+npm install @fluid-topics/ftds-popover
+yarn add @fluid-topics/ftds-popover
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import "@fluid-topics/ft-link"
+import "@fluid-topics/ft-popover"
+
+@customElement("my-element")
+class MyElement extends FtLitElement {
+
+    render() {
+        return html`
+            <ftds-popover
+                    heading="Popover heading"
+                    ?opened="false"
+                    closeButtonLabel="close info"
+                    openButtonLabel="more info"
+                    openButtonTooltipPosition="bottom"
+                    openButtonFamily="brand"
+                    openButtonSize="medium"
+                    @opened-changed=${ (e: CustomEvent<{
+                        opened: boolean
+                    }>) => console.log("opened changed ", e.detail) }
+                >
+                Exemple popover content
+                <ftds-link slot="link" href="" variant="body-2-medium" family="brand" underlined>Example popover link</ftds-link>
+            </ftds-popover>
+        `
+    }
+}
+
+```