playbook_ui 14.13.0.pre.rc.0 → 14.13.0.pre.rc.1

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fcf251161270426f1872fe6a3344fa2b30027ebf0e8de2438a1425b76227a846
4
- data.tar.gz: 7c0f7ef946114d87099cdf24562e8731f1686498dcef593092d0fd8a7c9f4091
3
+ metadata.gz: ec934923d24144acd3e8c89e5220ce814d3f88a3b46f65904d45720047aeceb1
4
+ data.tar.gz: 897bd9d197f2d3db6aa4ab309c9b84f05a42a6c10e3242aea2a2a3a70b19b990
5
5
  SHA512:
6
- metadata.gz: f1d66fe512c67ece02687f200a99c4daf2fd581b83e45857bac0214a6ea62160eee6f9152833b35ee6a9b618a212f360e721604ebfc913fdfb5871c4464e24ae
7
- data.tar.gz: fd937db687917267ff67e23f04344d63dda613ee7c56c17870892c8a2894f2a9d5c2c06916a607711c9d70dbd028acad003480d9585c4ab05f6481b7b96b1ff6
6
+ metadata.gz: 6d42bba771a7b47af28898bd32139f1b113781831cc6e870793b670082398ed440200c8e7d98f987cca69d4cb2ae551234cdfb91bf7b2dc115e69db639c052ab
7
+ data.tar.gz: 3f5e5f31e0817577b6b94118b5c641bcc749568726e47beabb853d9e6543b4680b206c8e3de9b883a6aec146ad8b292b4a66a794c84ea1d36adde7de3f23dffe
@@ -15,6 +15,7 @@
15
15
  @import 'pb_circle_chart/circle_chart';
16
16
  @import 'pb_circle_icon_button/circle_icon_button';
17
17
  @import 'pb_collapsible/collapsible';
18
+ @import 'pb_copy_button/copy_button';
18
19
  @import 'pb_contact/contact';
19
20
  @import 'pb_currency/currency';
20
21
  @import 'pb_dashboard_value/dashboard_value';
@@ -0,0 +1,3 @@
1
+ .pb_copy_button_kit {
2
+
3
+ }
@@ -0,0 +1,92 @@
1
+
2
+ import React, { useState } from 'react'
3
+ import classnames from 'classnames'
4
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
+
7
+ import Button from '../pb_button/_button'
8
+ import Tooltip from '../pb_tooltip/_tooltip'
9
+
10
+ type CopyButtonProps = {
11
+ aria?: { [key: string]: string },
12
+ className?: string,
13
+ data?: { [key: string]: string },
14
+ id?: string,
15
+ from?: string,
16
+ text?: string,
17
+ tooltipPlacement?: "top" | "right" | "bottom" | "left",
18
+ tooltipText?: string,
19
+ value?: string,
20
+ }
21
+
22
+ const CopyButton = (props: CopyButtonProps) => {
23
+ const {
24
+ aria = {},
25
+ className,
26
+ data = {},
27
+ from = '',
28
+ id,
29
+ text= 'Copy',
30
+ tooltipPlacement= 'bottom',
31
+ tooltipText = 'Copied!',
32
+ value = '',
33
+ } = props
34
+
35
+ const [copied, setCopied] = useState(false)
36
+
37
+ const ariaProps = buildAriaProps(aria)
38
+ const dataProps = buildDataProps(data)
39
+ const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
40
+
41
+ const copy = () => {
42
+ if (!from && !value) {
43
+ return
44
+ }
45
+
46
+ if (value) {
47
+ navigator.clipboard.writeText(value)
48
+ } else if (from) {
49
+ const copyElement = document.getElementById(from);
50
+ let copyText = copyElement?.innerText
51
+
52
+ if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
53
+ copyText = copyElement.value;
54
+ }
55
+
56
+ if (copyText) {
57
+ navigator.clipboard.writeText(copyText)
58
+ }
59
+ }
60
+
61
+ setCopied(true)
62
+
63
+ setTimeout(() => {
64
+ setCopied(false)
65
+ }, 1000);
66
+ }
67
+
68
+ return (
69
+ <div
70
+ {...ariaProps}
71
+ {...dataProps}
72
+ className={classes}
73
+ id={id}
74
+ >
75
+ <Tooltip
76
+ forceOpenTooltip={copied}
77
+ placement={tooltipPlacement}
78
+ showTooltip={false}
79
+ text={tooltipText}
80
+ >
81
+ <Button
82
+ icon='copy'
83
+ onClick={copy}
84
+ >
85
+ { text }
86
+ </Button>
87
+ </Tooltip>
88
+ </div>
89
+ )
90
+ }
91
+
92
+ export default CopyButton
@@ -0,0 +1,64 @@
1
+ import React from 'react';
2
+ import { CopyButton } from 'playbook-ui'
3
+ import { ensureAccessible, renderKit, render, fireEvent, screen } from '../utilities/test-utils'
4
+
5
+ const props = {
6
+ data: { testid: 'default', value: 'copy' }
7
+ }
8
+
9
+ test('returns namespaced class name', () => {
10
+ const kit = renderKit(CopyButton, props)
11
+ expect(kit).toBeInTheDocument()
12
+ expect(kit).toHaveClass('pb_copy_button_kit')
13
+ })
14
+
15
+ it('should be accessible', async () => {
16
+ ensureAccessible(CopyButton, props)
17
+ })
18
+
19
+ // It's difficult to actually use navigator.clipboard.readText, so we mock
20
+ it('copies the value to clipboard and pastes it into an input', async () => {
21
+ Object.defineProperty(global, 'navigator', {
22
+ value: {
23
+ clipboard: {
24
+ writeText: jest.fn().mockResolvedValueOnce(undefined),
25
+ },
26
+ },
27
+ writable: true,
28
+ })
29
+
30
+ render(<CopyButton {...props} />)
31
+
32
+ const copyButton = screen.getByTestId('default')
33
+ fireEvent.click(copyButton)
34
+
35
+ await navigator.clipboard.writeText('copy')
36
+
37
+ expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
38
+ })
39
+
40
+ test('passes text and tooltip props to button', () => {
41
+ render(
42
+ <CopyButton
43
+ data={{ testid: 'text-test' }}
44
+ text={"text"}
45
+ tooltipPlacement="right"
46
+ tooltipText="Text copied!"
47
+ value="copy"
48
+ />
49
+ )
50
+
51
+ const content = screen.getByText("text")
52
+ expect(content).toHaveTextContent("text")
53
+
54
+ const kit = screen.getByTestId('text-test')
55
+ const button = kit.querySelector('.pb_button_kit_primary_inline_enabled')
56
+ expect(button).toBeInTheDocument()
57
+
58
+ fireEvent.click(button)
59
+ const tooltipContent = screen.getByText("Text copied!")
60
+ expect(tooltipContent).toHaveTextContent("Text copied!")
61
+
62
+ const tooltip = kit.querySelector('.pb_tooltip_kit')
63
+ expect(tooltip).toBeInTheDocument()
64
+ })
@@ -0,0 +1,21 @@
1
+ import React from 'react'
2
+ import { CopyButton, Textarea } from 'playbook-ui'
3
+
4
+ const CopyButtonDefault = (props) => (
5
+ <div>
6
+ <CopyButton
7
+ {...props}
8
+ text="Copy Text"
9
+ tooltipPlacement="right"
10
+ tooltipText="Text copied!"
11
+ value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
12
+ />
13
+
14
+ <Textarea
15
+ {...props}
16
+ placeholder="Copy and paste here"
17
+ />
18
+ </div>
19
+ )
20
+
21
+ export default CopyButtonDefault
@@ -0,0 +1,45 @@
1
+ import React, { useState } from 'react'
2
+ import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
3
+
4
+ const CopyButtonFrom = (props) => {
5
+ const [text, setText] = useState("Copy this text input text")
6
+
7
+ const handleChange = (event) => {
8
+ setText(event.target.value);
9
+ }
10
+
11
+ return (<div>
12
+ <Body id="body">Copy this body text!</Body>
13
+ <CopyButton
14
+ {...props}
15
+ from="body"
16
+ marginBottom="sm"
17
+ text="Copy Body text"
18
+ tooltipPlacement="right"
19
+ tooltipText="Body text copied!"
20
+ />
21
+
22
+ <TextInput
23
+ {...props}
24
+ id="textinput"
25
+ onChange={handleChange}
26
+ value={text}
27
+ />
28
+ <CopyButton
29
+ {...props}
30
+ from="textinput"
31
+ marginBottom="sm"
32
+ text="Copy Text Input"
33
+ tooltipPlacement="right"
34
+ tooltipText="Text input copied!"
35
+ />
36
+
37
+ <Textarea
38
+ {...props}
39
+ placeholder="Copy and paste here"
40
+ />
41
+ </div>
42
+ )
43
+ }
44
+
45
+ export default CopyButtonFrom
@@ -0,0 +1 @@
1
+ Provide an element's ID as the `from` parameter, and its text will be copied. If the element is an input, its `value` will be copied; otherwise, the `innerText` will be used. Additionally, if a `value` prop is provided, it will override the content from the `from` element and be copied instead.
@@ -0,0 +1,8 @@
1
+ examples:
2
+
3
+
4
+ react:
5
+ - copy_button_default: Default
6
+ - copy_button_from: Copy From
7
+
8
+
@@ -0,0 +1,2 @@
1
+ export { default as CopyButtonDefault } from './_copy_button_default.jsx'
2
+ export { default as CopyButtonFrom } from './_copy_button_from.jsx'
@@ -32,6 +32,7 @@ type TooltipProps = {
32
32
  position?: "absolute" | "fixed";
33
33
  text: string,
34
34
  showTooltip?: boolean,
35
+ forceOpenTooltip?: boolean,
35
36
  } & GlobalProps
36
37
 
37
38
  const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
@@ -49,6 +50,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
49
50
  text,
50
51
  showTooltip = true,
51
52
  zIndex,
53
+ forceOpenTooltip = false,
52
54
  ...rest
53
55
  } = props
54
56
 
@@ -135,7 +137,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
135
137
  >
136
138
  {children}
137
139
  </div>
138
- {open && (
140
+ {(open || forceOpenTooltip) && (
139
141
  <div
140
142
  {...getFloatingProps({
141
143
  className: `tooltip_tooltip ${placement} visible`,