playbook_ui 11.3.0 → 11.4.0

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 (52) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -0
  3. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -6
  4. data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.jsx → _circle_icon_button.tsx} +6 -10
  5. data/app/pb_kits/playbook/pb_contact/contact.test.js +45 -1
  6. data/app/pb_kits/playbook/pb_currency/{_currency.jsx → _currency.tsx} +17 -12
  7. data/app/pb_kits/playbook/pb_date/_date.tsx +101 -0
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +10 -9
  9. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +80 -0
  10. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  11. data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx} +2 -4
  12. data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts} +5 -6
  13. data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx} +2 -4
  14. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx} +7 -8
  18. data/app/pb_kits/playbook/pb_time/_time.tsx +92 -0
  19. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -1
  21. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -1
  23. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +1 -1
  24. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  26. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +49 -6
  27. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +144 -0
  28. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +59 -0
  29. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md +5 -0
  30. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +10 -0
  31. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +52 -0
  32. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md +1 -0
  33. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +40 -0
  34. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md +1 -0
  35. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +39 -0
  36. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.md +3 -0
  37. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +7 -1
  39. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +4 -0
  40. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +50 -0
  41. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb +37 -0
  42. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md +1 -0
  43. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  44. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -2
  45. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +10 -2
  46. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
  47. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  48. data/lib/playbook/version.rb +2 -2
  49. metadata +25 -11
  50. data/app/pb_kits/playbook/pb_date/_date.jsx +0 -138
  51. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +0 -93
  52. data/app/pb_kits/playbook/pb_time/_time.jsx +0 -90
@@ -0,0 +1,92 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+
4
+ import DateTime from "../pb_kit/dateTime";
5
+ import { buildCss } from "../utilities/props";
6
+ import { globalProps } from "../utilities/globalProps";
7
+
8
+ import Body from "../pb_body/_body";
9
+ import Caption from "../pb_caption/_caption";
10
+ import Icon from "../pb_icon/_icon";
11
+
12
+ type TimeProps = {
13
+ align?: "left" | "center" | "right";
14
+ className?: string | string[];
15
+ data?: string;
16
+ date: string;
17
+ dark?: boolean;
18
+ id?: string;
19
+ showIcon?: boolean;
20
+ size?: "md" | "sm";
21
+ showTimezone?: boolean;
22
+ timeZone?: string;
23
+ };
24
+
25
+ const Time = (props: TimeProps) => {
26
+ const {
27
+ align,
28
+ className,
29
+ date,
30
+ showIcon,
31
+ size,
32
+ timeZone,
33
+ showTimezone = true,
34
+ } = props;
35
+ const classes = classnames(
36
+ buildCss("pb_time_kit", align, size),
37
+ globalProps(props),
38
+ className
39
+ );
40
+
41
+ const dateTimestamp = new DateTime({ value: date, zone: timeZone });
42
+
43
+ return (
44
+ <div className={classes}>
45
+ {showIcon && (
46
+ <>
47
+ <Body color="light" tag="span">
48
+ <Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
49
+ </Body>{" "}
50
+ </>
51
+ )}
52
+
53
+ <time dateTime={date}>
54
+ <span>
55
+ {size === "md" ? (
56
+ <>
57
+ <Body
58
+ className="pb_time"
59
+ tag="span"
60
+ text={dateTimestamp.toTimeWithMeridian()}
61
+ />{" "}
62
+ {showTimezone && (
63
+ <Body
64
+ color="light"
65
+ tag="span"
66
+ text={dateTimestamp.toTimezone()}
67
+ />
68
+ )}
69
+ </>
70
+ ) : (
71
+ <>
72
+ <Caption
73
+ color="light"
74
+ tag="span"
75
+ text={dateTimestamp.toTimeWithMeridian()}
76
+ />{" "}
77
+ {showTimezone && (
78
+ <Caption
79
+ color="light"
80
+ tag="span"
81
+ text={dateTimestamp.toTimezone()}
82
+ />
83
+ )}
84
+ </>
85
+ )}
86
+ </span>
87
+ </time>
88
+ </div>
89
+ );
90
+ };
91
+
92
+ export default Time;
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeAlign = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React, { Fragment } from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeSizes = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeStamp = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeTimezone = (props) => {
5
5
  const zones = {
@@ -3,7 +3,7 @@
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
5
 
6
- import DateTime from '../pb_kit/dateTime.js'
6
+ import DateTime from '../pb_kit/dateTime'
7
7
  import { buildCss, buildDataProps } from '../utilities/props'
8
8
  import { deprecatedProps, globalProps } from '../utilities/globalProps'
9
9
 
@@ -5,7 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
5
5
 
6
6
  type TitleProps = {
7
7
  aria?: {[key: string]: string},
8
- children?: React.ReactChild[],
8
+ children?: React.ReactChild[] | React.ReactChild,
9
9
  className?: string,
10
10
  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
11
11
  data?: {[key: string]: string},
@@ -23,6 +23,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
23
23
  }
24
24
 
25
25
  [class^="pb_tooltip_kit"] {
26
+ ~ .tooltip_tooltip,
26
27
  .tooltip_tooltip {
27
28
  display: block;
28
29
  opacity: 0;
@@ -52,15 +53,42 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
52
53
  border-width: 10px;
53
54
  margin-bottom: 50px;
54
55
  }
56
+
57
+ &.visible,
55
58
  &.show {
56
- opacity: 1;
57
59
  z-index: $z_9;
58
- margin-bottom: $space_sm;
59
- background-color: $white;
60
60
  padding: $space_xs $space_sm;
61
61
  box-shadow: $shadow_deeper;
62
62
  border-radius: $border_rad_light;
63
+ }
63
64
 
65
+ // react only
66
+ &.visible {
67
+ color: $white;
68
+ background-color: rgba($black, $opacity_9);
69
+ &.right {
70
+ box-shadow: -8px 0 28px 0 $tooltip_shadow;
71
+ }
72
+ &.bottom {
73
+ box-shadow: 0 -12px 28px 0 $tooltip_shadow;
74
+ }
75
+ &.left {
76
+ box-shadow: 8px 0 28px 0 $tooltip_shadow;
77
+ }
78
+ // react arrow
79
+ .arrow_bg {
80
+ width: 10px;
81
+ height: 10px;
82
+ background-color: rgba($black, $opacity_9);
83
+ transform: rotate(45deg);
84
+ }
85
+ }
86
+
87
+ //rails only
88
+ &.show {
89
+ opacity: 1;
90
+ margin-bottom: $space_sm;
91
+ background-color: $white;
64
92
  &.fade_out {
65
93
  animation-name: fadeOut;
66
94
  animation-duration: 150ms;
@@ -69,14 +97,29 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
69
97
  }
70
98
  }
71
99
  }
100
+
101
+ &.dark,
72
102
  &[class*=_dark]{
73
- .tooltip_tooltip{
74
- color: $white;
75
- background-color: rgba($black, $opacity_9);
103
+ ~.tooltip_tooltip,
104
+ .tooltip_tooltip {
105
+ //react
106
+ &.visible {
107
+ color: $charcoal;
108
+ background-color: $white;
109
+ }
110
+ //rails
111
+ &.show {
112
+ color: $white;
113
+ background-color: rgba($black, $opacity_9);
114
+ }
76
115
  .arrow {
77
116
  border-color: $black transparent transparent transparent;
78
117
  opacity: $opacity_9;
79
118
  }
119
+ // react arrow
120
+ .arrow_bg {
121
+ background-color: $white;
122
+ }
80
123
  &.flipped {
81
124
  .arrow {
82
125
  border-color: transparent transparent $black transparent;
@@ -0,0 +1,144 @@
1
+ /* @flow*/
2
+
3
+ import React, { useRef, useState } from "react"
4
+ import classnames from "classnames"
5
+ import {
6
+ Placement,
7
+ offset,
8
+ arrow,
9
+ shift,
10
+ useFloating,
11
+ useInteractions,
12
+ useHover,
13
+ flip,
14
+ safePolygon,
15
+ } from "@floating-ui/react-dom-interactions"
16
+ import { GlobalProps, globalProps } from "../utilities/globalProps"
17
+ import { buildAriaProps, buildDataProps } from "../utilities/props"
18
+ import Flex from "../pb_flex/_flex"
19
+
20
+ type TooltipProps = {
21
+ aria?: { [key: string]: string },
22
+ data?: { [key: string]: string },
23
+ text: string,
24
+ icon?: string,
25
+ interaction?: boolean,
26
+ placement?: Placement,
27
+ children: JSX.Element,
28
+ zIndex?: Pick<GlobalProps, "ZIndex">,
29
+ } & GlobalProps
30
+
31
+ const Tooltip = (props: TooltipProps) => {
32
+ const {
33
+ aria = {},
34
+ children,
35
+ data = {},
36
+ icon = null,
37
+ interaction = false,
38
+ text,
39
+ placement: preferredPlacement = "top",
40
+ zIndex,
41
+ ...rest
42
+ } = props
43
+
44
+ console.log(rest)
45
+
46
+ const dataProps: { [key: string]: any } = buildDataProps(data)
47
+ const ariaProps: { [key: string]: any } = buildAriaProps(aria)
48
+
49
+ const css = classnames(globalProps({...rest}))
50
+ const [open, setOpen] = useState(false)
51
+ const arrowRef = useRef(null)
52
+ const {
53
+ x,
54
+ y,
55
+ reference,
56
+ floating,
57
+ strategy,
58
+ context,
59
+ placement,
60
+ middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
61
+ } = useFloating({
62
+ placement: preferredPlacement,
63
+ open,
64
+ onOpenChange(open) {
65
+ setOpen(open)
66
+ },
67
+ middleware: [
68
+ offset(10),
69
+ shift(),
70
+ flip({
71
+ fallbackPlacements: ["top", "right", "bottom", "left"],
72
+ fallbackStrategy: "initialPlacement",
73
+ flipAlignment: false,
74
+ }),
75
+ arrow({
76
+ element: arrowRef,
77
+ }),
78
+ ],
79
+ })
80
+
81
+ const { getFloatingProps } = useInteractions([
82
+ useHover(context, {
83
+ handleClose: interaction ? safePolygon({
84
+ blockPointerEvents: false
85
+ }) : null,
86
+ })
87
+ ])
88
+
89
+ const staticSide = {
90
+ top: "bottom",
91
+ right: "left",
92
+ bottom: "top",
93
+ left: "right",
94
+ }[placement.split("-")[0]]
95
+
96
+ return (
97
+ <>
98
+ <div
99
+ ref={reference}
100
+ className={`pb_tooltip_kit ${css}`}
101
+ style={{ display: "inline-flex" }}
102
+ role="tooltip_trigger"
103
+ {...ariaProps}
104
+ {...dataProps}
105
+ >
106
+ {children}
107
+ </div>
108
+ {open && (
109
+ <div
110
+ {...getFloatingProps({
111
+ role: "tooltip",
112
+ ref: floating,
113
+ className: `tooltip_tooltip ${placement} visible`,
114
+ style: {
115
+ position: strategy,
116
+ top: y ?? 0,
117
+ left: x ?? 0,
118
+ zIndex: zIndex ?? 0,
119
+ },
120
+ })}
121
+ >
122
+ <Flex gap="xs" align="center">
123
+ {icon && (
124
+ <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
125
+ )}
126
+ {text}
127
+ </Flex>
128
+ <div
129
+ ref={arrowRef}
130
+ className="arrow_bg"
131
+ style={{
132
+ position: strategy,
133
+ left: arrowX != null ? `${arrowX}px` : "",
134
+ top: arrowY != null ? `${arrowY}px` : "",
135
+ [staticSide]: "-5px",
136
+ }}
137
+ />
138
+ </div>
139
+ )}
140
+ </>
141
+ )
142
+ }
143
+
144
+ export default Tooltip
@@ -0,0 +1,59 @@
1
+ // @flow
2
+
3
+ import React from 'react'
4
+ import { Tooltip, Flex, FlexItem } from '../..';
5
+
6
+ const TooltipDefaultReact = (props) => {
7
+
8
+ return (
9
+ <Flex
10
+ flexDirection='row'
11
+ gap='md'
12
+ justifyContent='center'
13
+ wrap
14
+ >
15
+ <FlexItem>
16
+ <Tooltip
17
+ placement='top'
18
+ text="Whoa. I'm a Tooltip"
19
+ zIndex={10}
20
+ {...props}
21
+ >
22
+ {'Hover here (Top)'}
23
+ </Tooltip>
24
+ </FlexItem>
25
+ <FlexItem>
26
+ <Tooltip
27
+ placement='bottom'
28
+ text="Whoa. I'm a Tooltip"
29
+ zIndex={10}
30
+ {...props}
31
+ >
32
+ {'Hover here (Bottom)'}
33
+ </Tooltip>
34
+ </FlexItem>
35
+ <FlexItem>
36
+ <Tooltip
37
+ placement='right'
38
+ text="Whoa. I'm a Tooltip"
39
+ zIndex={10}
40
+ {...props}
41
+ >
42
+ {'Hover here (Right)'}
43
+ </Tooltip>
44
+ </FlexItem>
45
+ <FlexItem>
46
+ <Tooltip
47
+ placement='left'
48
+ text="Whoa. I'm a Tooltip"
49
+ zIndex={10}
50
+ {...props}
51
+ >
52
+ {'Hover here (Left)'}
53
+ </Tooltip>
54
+ </FlexItem>
55
+ </Flex>
56
+ )
57
+ }
58
+
59
+ export default TooltipDefaultReact
@@ -0,0 +1,5 @@
1
+ You can define the tooltip placement sending the prop `placement` with one of the available options: `top | right | bottom | left`.
2
+
3
+ If you don't specify a desired `placement`, the component will automatically choose the one that fits better.
4
+
5
+ If the desired `placement` doesn't fit on screen, the component will automatically switch to the one that fits better.
@@ -0,0 +1,10 @@
1
+ <%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
2
+
3
+ <%= pb_rails("tooltip", props: {
4
+ trigger_element_id: "result-1-sample-email-link",
5
+ tooltip_id: "sample-email-tooltip-result-1",
6
+ position: "top",
7
+ dark: true
8
+ }) do %>
9
+ Send Email
10
+ <% end %>
@@ -0,0 +1,52 @@
1
+ // @flow
2
+
3
+ import React from 'react'
4
+ import { Tooltip, Button, Flex } from '../..'
5
+
6
+ const TooltipIcon = (props) => {
7
+ return (
8
+ <Flex flexDirection='row'
9
+ gap='md'
10
+ wrap
11
+ >
12
+ <Tooltip
13
+ icon='paper-plane'
14
+ placement='top'
15
+ text='Send Email'
16
+ zIndex={10}
17
+ {...props}
18
+ >
19
+ <Button text='Tooltip With Icon' />
20
+ </Tooltip>
21
+ <Tooltip
22
+ icon='paper-plane'
23
+ placement='bottom'
24
+ text='Send Email'
25
+ zIndex={10}
26
+ {...props}
27
+ >
28
+ <Button text='Tooltip With Icon' />
29
+ </Tooltip>
30
+ <Tooltip
31
+ icon='paper-plane'
32
+ placement='right'
33
+ text='Send Email'
34
+ zIndex={10}
35
+ {...props}
36
+ >
37
+ <Button text='Tooltip With Icon' />
38
+ </Tooltip>
39
+ <Tooltip
40
+ icon='paper-plane'
41
+ placement='left'
42
+ text='Send Email'
43
+ zIndex={10}
44
+ {...props}
45
+ >
46
+ <Button text='Tooltip With Icon' />
47
+ </Tooltip>
48
+ </Flex>
49
+ )
50
+ }
51
+
52
+ export default TooltipIcon
@@ -0,0 +1 @@
1
+ Set the prop `icon` with the desired icon to display inside the tooltip.
@@ -0,0 +1,40 @@
1
+ // @flow
2
+
3
+ import React from 'react'
4
+ import { Tooltip, Button, Flex, FlexItem } from '../..';
5
+
6
+ const TooltipInteraction = (props) => {
7
+
8
+ return (
9
+ <Flex
10
+ flexDirection='row'
11
+ gap='md'
12
+ justifyContent='center'
13
+ wrap
14
+ >
15
+ <FlexItem>
16
+ <Tooltip
17
+ interaction
18
+ placement='top'
19
+ text="You can copy me"
20
+ zIndex={10}
21
+ {...props}
22
+ >
23
+ <Button text="With Interaction"/>
24
+ </Tooltip>
25
+ </FlexItem>
26
+ <FlexItem>
27
+ <Tooltip
28
+ placement='top'
29
+ text="I'm just a regular tooltip"
30
+ zIndex={10}
31
+ {...props}
32
+ >
33
+ <Button text="No Interaction"/>
34
+ </Tooltip>
35
+ </FlexItem>
36
+ </Flex>
37
+ )
38
+ }
39
+
40
+ export default TooltipInteraction
@@ -0,0 +1 @@
1
+ Set the prop `interaction` as `true` for cases that require users to copy the content inside the tooltip.
@@ -0,0 +1,39 @@
1
+ // @flow
2
+
3
+ import React from 'react'
4
+ import { Tooltip, Flex, CircleIconButton } from '../..'
5
+
6
+ const TooltipMargin = (props) => {
7
+ return (
8
+ <Flex
9
+ flexDirection='row'
10
+ justifyContent='center'
11
+ wrap
12
+ >
13
+ <Tooltip
14
+ margin='md'
15
+ placement='top'
16
+ text='Send Email'
17
+ zIndex={10}
18
+ {...props}
19
+ >
20
+ <CircleIconButton
21
+ icon='paper-plane'
22
+ />
23
+ </Tooltip>
24
+ <Tooltip
25
+ margin='md'
26
+ placement='top'
27
+ text='Send Email'
28
+ zIndex={10}
29
+ {...props}
30
+ >
31
+ <CircleIconButton
32
+ icon='paper-plane'
33
+ />
34
+ </Tooltip>
35
+ </Flex>
36
+ )
37
+ }
38
+
39
+ export default TooltipMargin
@@ -0,0 +1,3 @@
1
+ You should set `margin` in the `tooltip` component itself. If you add this prop to the child, it will cause the tooltip to be pulled away from the trigger.
2
+
3
+ It is not recommended to set `padding` in the `tooltip` nor its child, doing so will cause it to be pulled away from its trigger element.
@@ -7,4 +7,4 @@
7
7
  dark: true
8
8
  }) do %>
9
9
  Send Email
10
- <% end %>
10
+ <% end %>
@@ -4,4 +4,10 @@ examples:
4
4
  - tooltip_default: Default
5
5
  - tooltip_selectors: Using Common Selectors
6
6
  - tooltip_white: White
7
- - tooltip_with_icon_circle: Icon Circle Tooptip
7
+ - tooltip_with_icon_circle: Icon Circle Tooltip
8
+
9
+ react:
10
+ - tooltip_default_react: Default
11
+ - tooltip_interaction: Content Interaction
12
+ - tooltip_margin: Margin
13
+ - tooltip_icon: Tooltip with Icon
@@ -0,0 +1,4 @@
1
+ export { default as TooltipDefaultReact } from './_tooltip_default_react'
2
+ export { default as TooltipInteraction } from './_tooltip_interaction'
3
+ export { default as TooltipMargin } from './_tooltip_margin'
4
+ export { default as TooltipIcon } from './_tooltip_icon'
@@ -0,0 +1,50 @@
1
+ import React from "react";
2
+ import { cleanup, render, screen, fireEvent } from "../utilities/test-utils";
3
+ import { Button, Tooltip } from "..";
4
+
5
+ function TooltipTest() {
6
+ const text = "this is a text",
7
+ placement = "top",
8
+ triggerText = "hover me",
9
+ zIndex = "10";
10
+
11
+ return (
12
+ <Tooltip
13
+ data={{ testid: "primary-test" }}
14
+ placement={placement}
15
+ text={text}
16
+ zIndex={zIndex}
17
+ >
18
+ <Button text={triggerText} />
19
+ </Tooltip>
20
+ );
21
+ }
22
+
23
+ test("renders the component", () => {
24
+ render(<TooltipTest />);
25
+
26
+ const kit = screen.getByTestId("primary-test");
27
+ expect(kit).toBeInTheDocument();
28
+ expect(kit).toHaveClass("pb_tooltip_kit");
29
+
30
+ cleanup();
31
+ });
32
+
33
+ test("opens on mouseenter", () => {
34
+ render(<TooltipTest />);
35
+
36
+ fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
37
+ expect(screen.queryByRole("tooltip")).toBeInTheDocument();
38
+
39
+ cleanup();
40
+ });
41
+
42
+ test("closes on mouseleave", () => {
43
+ render(<TooltipTest />);
44
+
45
+ fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
46
+ fireEvent.mouseLeave(screen.getByRole("tooltip_trigger"));
47
+ expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
48
+
49
+ cleanup();
50
+ });