@fluid-topics/ft-popover 1.2.64 → 1.2.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +20 -22
  2. package/build/ft-popover.light.js +353 -301
  3. package/build/ft-popover.min.js +198 -146
  4. package/build/ftds-popover-section.d.ts +13 -0
  5. package/build/ftds-popover-section.js +62 -0
  6. package/build/ftds-popover-section.properties.d.ts +3 -0
  7. package/build/ftds-popover-section.properties.js +1 -0
  8. package/build/ftds-popover-section.styles.d.ts +1 -0
  9. package/build/ftds-popover-section.styles.js +22 -0
  10. package/build/ftds-popover.d.ts +9 -4
  11. package/build/ftds-popover.js +24 -4
  12. package/build/ftds-popover.styles.js +10 -0
  13. package/build/index.d.ts +3 -0
  14. package/build/index.js +5 -0
  15. package/package.json +8 -8
package/README.md CHANGED
@@ -11,32 +11,30 @@ yarn add @fluid-topics/ftds-popover
11
11
 
12
12
  ```typescript
13
13
  import { html } from "lit"
14
- import { customElement, FtLitElement } from "@fluid-topics/ft-wc-utils";
15
14
  import "@fluid-topics/ft-link"
16
15
  import "@fluid-topics/ft-popover"
17
16
 
18
- @customElement("my-element")
19
- class MyElement extends FtLitElement {
17
+ function render() {
18
+ return html`
19
+ <ftds-popover heading="Popover heading">
20
+ Exemple popover content
21
+ <ftds-link slot="link" href="" variant="body-2-medium" family="brand" underlined>Example popover link</ftds-link>
22
+ </ftds-popover>
23
+ `
24
+ }
20
25
 
21
- render() {
22
- return html`
23
- <ftds-popover
24
- heading="Popover heading"
25
- ?opened="false"
26
- closeButtonLabel="close info"
27
- openButtonLabel="more info"
28
- openButtonTooltipPosition="bottom"
29
- openButtonFamily="brand"
30
- openButtonSize="medium"
31
- @opened-changed=${ (e: CustomEvent<{
32
- opened: boolean
33
- }>) => console.log("opened changed ", e.detail) }
34
- >
35
- Exemple popover content
36
- <ftds-link slot="link" href="" variant="body-2-medium" family="brand" underlined>Example popover link</ftds-link>
37
- </ftds-popover>
38
- `
39
- }
26
+ function render() {
27
+ return html`
28
+ <ftds-popover>
29
+ <ftds-popover-section slot="sections" heading="Popover section heading">
30
+ Example popover section content
31
+ <ftds-link slot="link">Example popover section link</ftds-link>
32
+ </ftds-popover-section>
33
+ <ftds-popover-section slot="sections">
34
+ Other example popover section content
35
+ </ftds-popover-section>
36
+ </ftds-popover>
37
+ `
40
38
  }
41
39
 
42
40
  ```