@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

package/lib/components/ComboBoxField/index.js

@@ -0,0 +1 @@
+export { default } from './ComboBoxField';

package/lib/components/CopyText/CopyButton.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { forwardRef } from 'react';
+import ContentCopy from 'mdi-react/ContentCopyIcon';
+import { omit } from 'lodash';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var CopyButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(IconButton, _extends({
+    ref: ref,
+    "aria-label": "copy to clipboard",
+    variant: "buttons.copy"
+  }, omit(props, 'iconProps')), ___EmotionJSX(Icon, _extends({
+    icon: ContentCopy,
+    size: 15
+  }, props === null || props === void 0 ? void 0 : props.iconProps)));
+});
+CopyButton.propTypes = {
+  iconProps: PropTypes.shape({})
+};
+export default CopyButton;

package/lib/components/CopyText/CopyText.js

@@ -0,0 +1,188 @@
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "tooltip"],
+    _excluded2 = ["children", "textToCopy", "tooltipText", "mode", "tooltipProps", "wrapperProps"];
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
+import { announce } from '@react-aria/live-announcer';
+import { Box, Tooltip, TooltipTrigger } from '../../index';
+import CopyButton from './CopyButton';
+import useCopyToClipboard from '../../hooks/useCopyToClipboard';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var TooltipWrapper = function TooltipWrapper(_ref) {
+  var children = _ref.children,
+      tooltip = _ref.tooltip,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(TooltipTrigger, _extends({
+    key: tooltip,
+    direction: "top",
+    isNotFlippable: true
+  }, others), children, ___EmotionJSX(Tooltip, null, tooltip));
+};
+
+TooltipWrapper.propTypes = {
+  isOpen: PropTypes.bool,
+  targetRef: PropTypes.shape({}),
+  tooltip: PropTypes.string
+};
+/**
+ * Allows copying some pieces of text by clicking on the text or by the button nearby.
+ */
+
+var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      textToCopy = props.textToCopy,
+      tooltipText = props.tooltipText,
+      mode = props.mode,
+      tooltipProps = props.tooltipProps,
+      wrapperProps = props.wrapperProps,
+      others = _objectWithoutProperties(props, _excluded2);
+
+  var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCopied = _useState2[0],
+      setIsCopied = _useState2[1];
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useFocusRing = useFocusRing(),
+      focusProps = _useFocusRing.focusProps,
+      isFocusVisible = _useFocusRing.isFocusVisible;
+
+  useEffect(function () {
+    setIsCopied(false);
+  }, [isHovered]); // Hiding "Copied!" tooltip after delay
+
+  /* istanbul ignore next */
+
+  useEffect(function () {
+    if (isCopied) {
+      announce('Copied!', 'polite');
+
+      var timer = _setTimeout(function () {
+        setIsCopied(false);
+      }, 1000);
+
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+
+    return undefined;
+  }, [isCopied]);
+  var copyToClipboard = useCopyToClipboard(value, setIsCopied);
+
+  var onTextClick = function onTextClick() {
+    var selection = window.getSelection();
+
+    if (selection.toString() === '') {
+      copyToClipboard();
+    }
+  };
+  /* Used for text copying */
+
+
+  var contentRef = useRef();
+
+  var _usePress = usePress({
+    ref: contentRef,
+    onClick: onTextClick
+  }),
+      pressProps = _usePress.pressProps;
+
+  delete pressProps.onMouseDown;
+  delete pressProps.onPointerDown;
+  var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Box, _extends({
+    ref: contentRef
+  }, mergeProps(focusProps, pressProps)), children);
+  var tooltip = isCopied ? 'Copied!' : tooltipText;
+  var isTooltipOpen = isFocusVisible || isHovered || isCopied;
+  var pressableRef = useRef();
+
+  var _usePress2 = usePress({
+    ref: pressableRef
+  }),
+      pressableProps = _usePress2.pressProps;
+
+  delete pressableProps.onMouseDown;
+  delete pressableProps.onPointerDown;
+  var wrapperRef = useRef();
+
+  if (mode === 'nonClickableContent') {
+    return ___EmotionJSX(TooltipWrapper, _extends({
+      isOpen: isTooltipOpen,
+      tooltip: tooltip,
+      targetRef: wrapperRef
+    }, tooltipProps), ___EmotionJSX(Box, _extends({
+      ref: wrapperRef,
+      isRow: true,
+      tabIndex: 0
+    }, mergeProps(hoverProps, others), wrapperProps), content, ___EmotionJSX(CopyButton, _extends({
+      onPress: copyToClipboard
+    }, focusProps))));
+  }
+
+  if (mode === 'link') {
+    return ___EmotionJSX(Box, _extends({
+      ref: ref,
+      isRow: true,
+      variant: "boxes.copy"
+    }, wrapperProps, others), content, ___EmotionJSX(TooltipWrapper, {
+      isOpen: isTooltipOpen,
+      tooltip: tooltip
+    }, ___EmotionJSX(CopyButton, _extends({
+      onPress: copyToClipboard
+    }, mergeProps(hoverProps, focusProps)))));
+  }
+
+  return ___EmotionJSX(TooltipWrapper, {
+    isOpen: isTooltipOpen,
+    tooltip: tooltip,
+    targetRef: pressableRef
+  }, ___EmotionJSX(Box, _extends({
+    ref: pressableRef
+  }, mergeProps(hoverProps, pressableProps), {
+    sx: {
+      width: 'min-content'
+    }
+  }), ___EmotionJSX(Box, _extends({
+    ref: ref,
+    isRow: true,
+    variant: "boxes.copy"
+  }, others), content, ___EmotionJSX(CopyButton, _extends({
+    onPress: copyToClipboard
+  }, focusProps)))));
+});
+CopyText.propTypes = {
+  /** The behavioral pattern to apply to the component. */
+  mode: PropTypes.oneOf(['text', 'link', 'nonClickableContent']),
+
+  /** The text to be copied instead of the text inside the child component. */
+  textToCopy: PropTypes.string,
+
+  /** The text to be displayed in the tooltip. */
+  tooltipText: PropTypes.string,
+
+  /** Props to apply to the tooltip in nonClickableContent mode. */
+  tooltipProps: PropTypes.shape({}),
+
+  /** Props to apply to the wrapper in nonClickableContent mode. */
+  wrapperProps: PropTypes.shape({})
+};
+CopyText.defaultProps = {
+  mode: 'text',
+  tooltipText: 'Copy to clipboard'
+};
+CopyText.displayName = 'CopyText';
+export default CopyText;

package/lib/components/CopyText/CopyText.stories.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import Link from '../Link';
+import Text from '../Text';
+import CopyText from './CopyText';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'CopyText',
+  component: CopyText,
+  argTypes: {
+    mode: {
+      control: 'none'
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(CopyText, args, ___EmotionJSX(Text, null, "Here is a value"));
+};
+export var WithLink = function WithLink(args) {
+  return ___EmotionJSX(CopyText, _extends({}, args, {
+    mode: "link"
+  }), ___EmotionJSX(Link, {
+    href: "https://a.url.com"
+  }, "https://a.url.com"));
+};
+export var WithChangedCopiedValue = function WithChangedCopiedValue(args) {
+  return ___EmotionJSX(CopyText, _extends({}, args, {
+    textToCopy: "Here is a copied value"
+  }), ___EmotionJSX(Text, null, "Here is a value"));
+};

package/lib/components/CopyText/CopyText.test.js

@@ -0,0 +1,440 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context17, _context18; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context17 = ownKeys(Object(source), !0)).call(_context17, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context18 = ownKeys(Object(source))).call(_context18, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import axeTest from '../../utils/testUtils/testAxe';
+import { act, fireEvent, render, screen, waitForElementToBeRemoved } from '../../utils/testUtils/testWrapper';
+import { Link, Text } from '../..';
+import CopyText from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-copy-text';
+
+var originalClipboard = _objectSpread({}, global.navigator.clipboard);
+
+var originalExecCommand = global.document.execCommand;
+var originalGetSelection = window.getSelection;
+
+var defaultTest = function defaultTest() {
+  var getComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  getComponent();
+  var container = screen.getByTestId(testId);
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(container).toBeInTheDocument();
+};
+
+describe('Text mode', function () {
+  var defaultProps = {
+    'data-testid': testId
+  };
+  var textValue = 'Here is a value';
+
+  var getComponent = function getComponent() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return render(___EmotionJSX(CopyText, _extends({}, defaultProps, props), ___EmotionJSX(Text, null, textValue)));
+  }; // Need to be added to each test file to test accessibility using axe.
+
+
+  axeTest(getComponent);
+  test('renders component in the default state', function () {
+    defaultTest(getComponent);
+  });
+  test('tooltip renders on hover', function () {
+    getComponent();
+    var container = screen.getByTestId(testId);
+    fireEvent.mouseMove(container);
+    fireEvent.mouseEnter(container);
+    expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+    expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
+  });
+  test('copy button is focused with keyboard', function () {
+    getComponent();
+    var copyBtn = screen.getByLabelText('copy to clipboard');
+    expect(copyBtn).not.toHaveFocus();
+    userEvent.tab();
+    expect(copyBtn).toHaveFocus();
+    expect(copyBtn).toHaveClass('is-focused');
+  });
+  beforeEach(function () {
+    var mockClipboard = {
+      writeText: jest.fn()
+    };
+    global.navigator.clipboard = mockClipboard;
+    global.document.execCommand = jest.fn();
+    global.document.execCommand.mockReturnValue(true);
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
+  });
+  afterEach(function () {
+    jest.resetAllMocks();
+    global.navigator.clipboard = originalClipboard;
+    global.document.execCommand = originalExecCommand;
+    window.getSelection = originalGetSelection;
+  });
+  test('click on text copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var button;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            getComponent();
+            button = screen.getByText(textValue);
+            _context2.next = 4;
+            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) {
+                  switch (_context.prev = _context.next) {
+                    case 0:
+                      return _context.abrupt("return", userEvent.click(button));
+
+                    case 1:
+                    case "end":
+                      return _context.stop();
+                  }
+                }
+              }, _callee);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textValue);
+
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var button;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            getComponent();
+            button = screen.getByLabelText('copy to clipboard');
+            _context4.next = 4;
+            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+              return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                while (1) {
+                  switch (_context3.prev = _context3.next) {
+                    case 0:
+                      return _context3.abrupt("return", userEvent.click(button));
+
+                    case 1:
+                    case "end":
+                      return _context3.stop();
+                  }
+                }
+              }, _callee3);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textValue);
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var textToCopy, button;
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            textToCopy = 'This text is copied';
+            getComponent({
+              textToCopy: textToCopy
+            });
+            button = screen.getByLabelText('copy to clipboard');
+            _context6.next = 5;
+            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+              return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+                while (1) {
+                  switch (_context5.prev = _context5.next) {
+                    case 0:
+                      return _context5.abrupt("return", userEvent.click(button));
+
+                    case 1:
+                    case "end":
+                      return _context5.stop();
+                  }
+                }
+              }, _callee5);
+            })));
+
+          case 5:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(textToCopy);
+
+          case 7:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  test('copying works in insecure origin', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var button;
+    return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+      while (1) {
+        switch (_context8.prev = _context8.next) {
+          case 0:
+            global.navigator.clipboard = undefined;
+            getComponent();
+            button = screen.getByLabelText('copy to clipboard');
+            _context8.next = 5;
+            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+              return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+                while (1) {
+                  switch (_context7.prev = _context7.next) {
+                    case 0:
+                      return _context7.abrupt("return", userEvent.click(button));
+
+                    case 1:
+                    case "end":
+                      return _context7.stop();
+                  }
+                }
+              }, _callee7);
+            })));
+
+          case 5:
+            expect(document.execCommand).toBeCalledTimes(1);
+            expect(document.execCommand).toHaveBeenCalledWith('copy');
+
+          case 7:
+          case "end":
+            return _context8.stop();
+        }
+      }
+    }, _callee8);
+  })));
+  test('if copying is failed, a warning shows in the console', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var spy, button;
+    return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            global.navigator.clipboard = undefined;
+            global.document.execCommand.mockReturnValue(false);
+
+            global.console.error = function () {
+              return jest.mock();
+            }; // eslint-disable-line no-console
+
+
+            getComponent();
+            spy = jest.spyOn(console, 'error');
+            expect(spy).not.toHaveBeenCalled();
+            button = screen.getByLabelText('copy to clipboard');
+            _context10.next = 9;
+            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+              return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+                while (1) {
+                  switch (_context9.prev = _context9.next) {
+                    case 0:
+                      return _context9.abrupt("return", userEvent.click(button));
+
+                    case 1:
+                    case "end":
+                      return _context9.stop();
+                  }
+                }
+              }, _callee9);
+            })));
+
+          case 9:
+            expect(document.execCommand).toBeCalledTimes(1);
+            expect(document.execCommand).toHaveBeenCalledWith('copy');
+            expect(spy).toHaveBeenCalledWith(expect.stringMatching('Failed to copy:'), expect.any(Error));
+
+          case 12:
+          case "end":
+            return _context10.stop();
+        }
+      }
+    }, _callee10);
+  })));
+  test('after button click, the tooltip renders with the text "Copied!"', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var button;
+    return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+      while (1) {
+        switch (_context12.prev = _context12.next) {
+          case 0:
+            getComponent();
+            button = screen.getByLabelText('copy to clipboard');
+            _context12.next = 4;
+            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+              return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+                while (1) {
+                  switch (_context11.prev = _context11.next) {
+                    case 0:
+                      return _context11.abrupt("return", userEvent.click(button));
+
+                    case 1:
+                    case "end":
+                      return _context11.stop();
+                  }
+                }
+              }, _callee11);
+            })));
+
+          case 4:
+            expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+            expect(screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+
+          case 6:
+          case "end":
+            return _context12.stop();
+        }
+      }
+    }, _callee12);
+  })));
+  test('tooltip renders with the text "Copied!" hides after delay', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var button;
+    return _regeneratorRuntime.wrap(function _callee14$(_context14) {
+      while (1) {
+        switch (_context14.prev = _context14.next) {
+          case 0:
+            getComponent();
+            button = screen.getByLabelText('copy to clipboard');
+            _context14.next = 4;
+            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+              return _regeneratorRuntime.wrap(function _callee13$(_context13) {
+                while (1) {
+                  switch (_context13.prev = _context13.next) {
+                    case 0:
+                      return _context13.abrupt("return", userEvent.click(button));
+
+                    case 1:
+                    case "end":
+                      return _context13.stop();
+                  }
+                }
+              }, _callee13);
+            })));
+
+          case 4:
+            expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+            expect(screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+            _context14.next = 8;
+            return waitForElementToBeRemoved(screen.queryByRole('tooltip'));
+
+          case 8:
+          case "end":
+            return _context14.stop();
+        }
+      }
+    }, _callee14);
+  })));
+});
+describe('Link mode', function () {
+  var defaultProps = {
+    'data-testid': testId,
+    mode: 'link'
+  };
+  var linkValue = 'https://a.url.com';
+
+  var getComponent = function getComponent() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return render(___EmotionJSX(CopyText, _extends({}, defaultProps, props), ___EmotionJSX(Link, {
+      href: linkValue
+    }, linkValue)));
+  }; // Need to be added to each test file to test accessibility using axe.
+
+
+  axeTest(getComponent);
+  test('renders component in the default state', function () {
+    defaultTest(getComponent);
+  });
+  test('tooltip renders only when the copy button is hovered', function () {
+    getComponent();
+    var container = screen.getByTestId(testId);
+    fireEvent.mouseMove(container);
+    fireEvent.mouseEnter(container);
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    var button = screen.getByLabelText('copy to clipboard');
+    fireEvent.mouseMove(button);
+    fireEvent.mouseEnter(button);
+    expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+  });
+  test('copy button is focused with keyboard', function () {
+    getComponent();
+    var copyBtn = screen.getByLabelText('copy to clipboard');
+    expect(copyBtn).not.toHaveFocus();
+    userEvent.tab();
+    userEvent.tab();
+    expect(copyBtn).toHaveFocus();
+    expect(copyBtn).toHaveClass('is-focused');
+  });
+  beforeEach(function () {
+    var mockClipboard = {
+      writeText: jest.fn()
+    };
+    global.navigator.clipboard = mockClipboard;
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
+  });
+  afterEach(function () {
+    jest.resetAllMocks();
+    global.navigator.clipboard = originalClipboard;
+    window.getSelection = originalGetSelection;
+  });
+  test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var button;
+    return _regeneratorRuntime.wrap(function _callee16$(_context16) {
+      while (1) {
+        switch (_context16.prev = _context16.next) {
+          case 0:
+            getComponent();
+            button = screen.getByLabelText('copy to clipboard');
+            _context16.next = 4;
+            return act( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+              return _regeneratorRuntime.wrap(function _callee15$(_context15) {
+                while (1) {
+                  switch (_context15.prev = _context15.next) {
+                    case 0:
+                      return _context15.abrupt("return", userEvent.click(button));
+
+                    case 1:
+                    case "end":
+                      return _context15.stop();
+                  }
+                }
+              }, _callee15);
+            })));
+
+          case 4:
+            expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(linkValue);
+
+          case 6:
+          case "end":
+            return _context16.stop();
+        }
+      }
+    }, _callee16);
+  })));
+});

package/lib/components/CopyText/index.js

@@ -0,0 +1 @@
+export { default } from './CopyText';