@pingux/astro 1.1.0-alpha.6 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,88 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.12...@pingux/astro@1.1.0) (2022-02-02)
+
+
+### Bug Fixes
+
+* [UIP-5016] OverlayPanel focus improvements ([eabfa8f](https://gitlab.corp.pingidentity.com/ux/pingux/commit/eabfa8f1b235a07c049d4a0bbc77d49bd02a2eec))
+
+
+### Features
+
+* [UIP-4876] Astro NavBar ([8d3e7de](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8d3e7ded13aec6034fd0ff813153dc0a4dc7375a))
+
+
+
+
+
+# [1.1.0-alpha.12](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.11...@pingux/astro@1.1.0-alpha.12) (2022-01-31)
+
+
+### Features
+
+* [UIP-5067] CodeView component ([c4e104c](https://gitlab.corp.pingidentity.com/ux/pingux/commit/c4e104c3638c8f6231b5f3c14cd65a1a62bb6591))
+
+
+
+
+
+# [1.1.0-alpha.11](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.10...@pingux/astro@1.1.0-alpha.11) (2022-01-28)
+
+
+### Bug Fixes
+
+* [UIP-5177] Icon Button Color Update ([05b8a95](https://gitlab.corp.pingidentity.com/ux/pingux/commit/05b8a95e3fae60e7f655cf2812dfd2104496b1c5))
+
+
+
+
+
+# [1.1.0-alpha.10](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.9...@pingux/astro@1.1.0-alpha.10) (2022-01-28)
+
+
+### Bug Fixes
+
+* [UIP-5180] File Upload Field Update Document Icon Color ([debaf91](https://gitlab.corp.pingidentity.com/ux/pingux/commit/debaf9100401c822c37fdd16be1a1b1704096f10))
+
+
+
+
+
+# [1.1.0-alpha.9](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.8...@pingux/astro@1.1.0-alpha.9) (2022-01-24)
+
+
+### Bug Fixes
+
+* [UIP-5111] Deprecate List Component ([3cd9b69](https://gitlab.corp.pingidentity.com/ux/pingux/commit/3cd9b699c48ac43e34d9cfd61b07f33b4b7d4fc4))
+
+
+
+
+
+# [1.1.0-alpha.8](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.7...@pingux/astro@1.1.0-alpha.8) (2022-01-24)
+
+
+### Bug Fixes
+
+* [UIP-4995] TextArea Safari resize issue ([33c8af3](https://gitlab.corp.pingidentity.com/ux/pingux/commit/33c8af35fbe82820427b87bdd9ab0744039a6c18))
+
+
+
+
+
+# [1.1.0-alpha.7](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.6...@pingux/astro@1.1.0-alpha.7) (2022-01-21)
+
+
+### Bug Fixes
+
+* [UIP-5109] AccordionGroup OverlayPanel Compatibility Fix ([6a78b76](https://gitlab.corp.pingidentity.com/ux/pingux/commit/6a78b76a3c3ab7b9ac78a7dcd6ca74a6449d63c2))
+
+
+
+
+
 # [1.1.0-alpha.6](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.1.0-alpha.5...@pingux/astro@1.1.0-alpha.6) (2022-01-21)
 
 

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -39,6 +39,22 @@ var getComponent = function getComponent() {
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button")))));
 };
 
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_AccordionGridGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))), (0, _react2.jsx)(_collections.Item, {
+    key: "third",
+    textValue: "Duplicate"
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Header Button"), (0, _react2.jsx)(_index.Link, null, "Second Header Button")), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, null, "Body Button"), (0, _react2.jsx)(_index.Link, null, "Second Body Button"))))));
+};
+
 (0, _testAxe["default"])(getComponent, {
   // landmark-unique rule conflicts with react-aria role definition
   rules: {
@@ -230,4 +246,12 @@ test('default expanded keys expands an accordion item', function () {
 
   var selectedRow = row[0];
   expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+
+  var row = _testWrapper.screen.getAllByRole('row');
+
+  var selectedRow = row[0];
+  expect(selectedRow).not.toHaveAttribute('aria-selected', 'true');
 });

package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js

@@ -20,6 +20,8 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _AccordionGroup = _interopRequireDefault(require("../AccordionGroup"));
 
+var _index = require("../../index");
+
 var _react2 = require("@emotion/react");
 
 var testId = 'test-accordion';
@@ -45,6 +47,25 @@ var getComponent = function getComponent() {
     "data-id": "third",
     label: "Accordion item"
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+};
+
+var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: true
+  }, (0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "third",
+    textValue: "Duplicate",
+    "data-id": "third"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -267,4 +288,12 @@ test('Item accepts a data-id and the data-id can be found in the DOM', function
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
   expect(parentElement).toHaveAttribute('data-id', 'first');
+});
+test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
+  getComponentInOverlayPanel();
+
+  var buttons = _testWrapper.screen.getAllByRole('button');
+
+  var selectedItem = buttons[0];
+  expect(selectedItem).not.toHaveAttribute('aria-expanded', 'true');
 });

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -121,9 +121,11 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ml: "5px"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"]
-  }))), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  }))), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordionBody"
-  }, accordionRegionProps, regionProps), item.rendered));
+  }, accordionRegionProps, regionProps, {
+    className: itemClasses
+  }), item.rendered));
 });
 AccordionItem.propTypes = {
   'aria-label': _propTypes["default"].string,

package/lib/cjs/components/CodeView/CodeView.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _focus = require("@react-aria/focus");
+
+var _interactions = require("@react-aria/interactions");
+
+var _utils = require("@react-aria/utils");
+
+var _prismReactRenderer = _interopRequireWildcard(require("prism-react-renderer"));
+
+var _hooks = require("../../hooks");
+
+var _ = require("../..");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * A text block that shows syntax highlighting code sample.
+ * Built on top of the [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
+ *
+ * A list of all supported languages that can be passed to `language` prop is [here](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
+ */
+var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      outerClassName = props.className,
+      hasLineNumbers = props.hasLineNumbers,
+      hasNoCopyButton = props.hasNoCopyButton,
+      language = props.language,
+      others = (0, _objectWithoutProperties2["default"])(props, ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language"]);
+
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+      isFocusVisible = _useFocusRing.isFocusVisible,
+      focusProps = _useFocusRing.focusProps;
+
+  var _useHover = (0, _interactions.useHover)(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(outerClassName, {
+    isFocused: isFocusVisible,
+    isHovered: isHovered,
+    hasLineNumbers: hasLineNumbers,
+    hasNoCopyButton: hasNoCopyButton
+  }),
+      classNames = _useStatusClasses.classNames; // Get the width for the line number element depending on the total amount of lines
+
+
+  var getLineNoWidth = function getLineNoWidth(tokens) {
+    return tokens.length.toString().length * 12;
+  };
+
+  var content = (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
+    theme: undefined,
+    code: (children === null || children === void 0 ? void 0 : (0, _trim["default"])(children).call(children)) || '',
+    language: language
+  }), function (_ref) {
+    var className = _ref.className,
+        style = _ref.style,
+        tokens = _ref.tokens,
+        getLineProps = _ref.getLineProps,
+        getTokenProps = _ref.getTokenProps;
+    return (0, _react2.jsx)(_.Box, {
+      as: "pre",
+      className: className,
+      style: style
+    }, (0, _map["default"])(tokens).call(tokens, function (line, i) {
+      return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+        isRow: true
+      }, getLineProps({
+        line: line,
+        key: i
+      })), hasLineNumbers && (0, _react2.jsx)(_.Box, {
+        as: "span",
+        variant: "codeView.lineNo",
+        sx: {
+          minWidth: getLineNoWidth(tokens)
+        }
+      }, i + 1), (0, _map["default"])(line).call(line, function (token, key) {
+        return (0, _react2.jsx)("span", getTokenProps({
+          token: token,
+          key: key
+        }));
+      }));
+    }));
+  });
+
+  if (hasNoCopyButton) {
+    return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+      ref: ref,
+      variant: "codeView.wrapper",
+      tabIndex: 0,
+      className: classNames
+    }, (0, _utils.mergeProps)(focusProps, hoverProps, others)), content);
+  }
+
+  return (0, _react2.jsx)(_.CopyText, {
+    mode: "nonClickableContent",
+    textToCopy: children,
+    tooltipProps: {
+      offset: 15
+    },
+    wrapperProps: _objectSpread({
+      className: classNames,
+      variant: 'codeView.wrapper'
+    }, others)
+  }, content);
+});
+CodeView.propTypes = {
+  hasLineNumbers: _propTypes["default"].bool,
+  hasNoCopyButton: _propTypes["default"].bool,
+  language: _propTypes["default"].string
+};
+CodeView.defaultProps = {
+  language: 'json',
+  hasLineNumbers: false,
+  hasNoCopyButton: false
+};
+var _default = CodeView;
+exports["default"] = _default;

package/lib/cjs/components/CodeView/CodeView.stories.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.WithCustomSize = exports.WithLineNumbers = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CodeView = _interopRequireDefault(require("./CodeView"));
+
+var _ = require("../..");
+
+var _react2 = require("@emotion/react");
+
+var code = "{\n  \"_links\": {\n    \"self\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"password\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.set\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.reset\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.check\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.recover\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"account.sendVerificationCode\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"linkedAccounts\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/linkedAccounts\"\n    }\n  },\n  \"id\": \"5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\",\n  \"environment\": {\n    \"id\": \"94e3268d-847d-47aa-a45e-1ef8dd8f4df0\"\n  },\n  \"account\": {\n    \"canAuthenticate\": true,\n    \"status\": \"OK\"\n  },\n  \"createdAt\": \"2021-09-03T15:01:43.555Z\",\n  \"email\": \"allegraweldon@pingidentity.com\",\n  \"enabled\": true,\n  \"identityProvider\": {\n    \"type\": \"PING_ONE\"\n  },\n  \"lifecycle\": {\n    \"status\": \"ACCOUNT_OK\"\n  },\n  \"mfaEnabled\": false,\n  \"population\": {\n    \"id\": \"c1adbc29-f188-4ea6-a015-49bddd74bc84\"\n  },\n  \"updatedAt\": \"2021-09-03T15:01:43.555Z\",\n  \"username\": \"allegraweldon@pingidentity.com\",\n  \"verifyStatus\": \"NOT_INITIATED\"\n}";
+var _default = {
+  title: 'CodeView',
+  component: _CodeView["default"],
+  argTypes: {
+    children: {
+      defaultValue: code,
+      table: {
+        type: {}
+      },
+      control: {
+        type: 'text'
+      }
+    }
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+        /* Turned off since rule conflicts with the way how `prism-react-renderer` works
+         * and design specs */
+        {
+          id: 'scrollable-region-focusable',
+          enabled: false,
+          selector: '.prism-code'
+        }]
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Text, {
+    sx: {
+      fontWeight: 2
+    }
+  }, "JSON"), (0, _react2.jsx)(_CodeView["default"], args));
+};
+
+exports.Default = Default;
+
+var WithLineNumbers = function WithLineNumbers() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_.Text, {
+    sx: {
+      fontWeight: 2
+    }
+  }, "JSON"), (0, _react2.jsx)(_CodeView["default"], {
+    hasLineNumbers: true
+  }, code));
+};
+
+exports.WithLineNumbers = WithLineNumbers;
+WithLineNumbers.story = {
+  parameters: {
+    docs: {
+      storyDescription: 'Please note that with adding line numbers, line wrapping does not work.'
+    }
+  }
+};
+
+var WithCustomSize = function WithCustomSize() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeView["default"], {
+    language: "javascript",
+    sx: {
+      width: '100%',
+      height: 300
+    },
+    hasNoCopyButton: true
+  }, "\nexport const ChipWithIcon = () => (\n  <>\n    <Chip label=\"Chip with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon Button\">\n      <IconButton aria-label=\"Clear Chip with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" />\n      </IconButton>\n    </Chip>\n\n    <div style={{ padding: '5px' }} />\n\n    <Chip label=\"Chip with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" />\n    </Chip>\n  </>\n);\n    "));
+};
+
+exports.WithCustomSize = WithCustomSize;

package/lib/cjs/components/CodeView/CodeView.test.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _ = require("../..");
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; (0, _forEach["default"])(_context5 = ownKeys(Object(source), true)).call(_context5, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context6; (0, _forEach["default"])(_context6 = ownKeys(Object(source))).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var testId = 'test-code-sample';
+
+var originalClipboard = _objectSpread({}, global.navigator.clipboard);
+
+var originalExecCommand = global.document.execCommand;
+var defaultProps = {
+  'data-testid': testId
+};
+var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), textValue));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders component in the default state', function () {
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(container).toBeInTheDocument();
+});
+test('tooltip renders on hover', function () {
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.mouseMove(container);
+
+  _testWrapper.fireEvent.mouseEnter(container);
+
+  expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
+});
+test('content and copy button are focused via keyboard', function () {
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  expect(container).not.toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(container).toHaveFocus();
+
+  var copyBtn = _testWrapper.screen.getByLabelText('copy');
+
+  expect(copyBtn).not.toHaveFocus();
+
+  _userEvent["default"].tab();
+
+  expect(copyBtn).toHaveFocus();
+  expect(copyBtn).toHaveClass('is-focused');
+});
+test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
+  getComponent({
+    hasNoCopyButton: true
+  });
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.mouseMove(container);
+
+  _testWrapper.fireEvent.mouseEnter(container);
+
+  expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByLabelText('copy')).not.toBeInTheDocument();
+});
+test('renders line numbers with prop hasLineNumbers', function () {
+  var linesLength = ((0, _trim["default"])(textValue).call(textValue).split('\n').length - 1).toString();
+  getComponent();
+  expect(_testWrapper.screen.queryByText('1')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText(linesLength)).not.toBeInTheDocument();
+  getComponent({
+    hasLineNumbers: true
+  });
+  expect(_testWrapper.screen.queryByText('1')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText(linesLength)).toBeInTheDocument();
+});
+beforeEach(function () {
+  var mockClipboard = {
+    writeText: jest.fn()
+  };
+  global.navigator.clipboard = mockClipboard;
+  global.document.execCommand = jest.fn();
+  global.document.execCommand.mockReturnValue(true);
+});
+afterEach(function () {
+  jest.resetAllMocks();
+  global.navigator.clipboard = originalClipboard;
+  global.document.execCommand = originalExecCommand;
+});
+test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+  var button;
+  return _regenerator["default"].wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponent();
+          button = _testWrapper.screen.getByLabelText('copy');
+          _context2.next = 4;
+          return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+            return _regenerator["default"].wrap(function _callee$(_context) {
+              while (1) {
+                switch (_context.prev = _context.next) {
+                  case 0:
+                    return _context.abrupt("return", _userEvent["default"].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('after button click, the tooltip renders with the text "Copied!"', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+  var button;
+  return _regenerator["default"].wrap(function _callee4$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
+          getComponent();
+          button = _testWrapper.screen.getByLabelText('copy');
+          _context4.next = 4;
+          return (0, _testWrapper.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+            return _regenerator["default"].wrap(function _callee3$(_context3) {
+              while (1) {
+                switch (_context3.prev = _context3.next) {
+                  case 0:
+                    return _context3.abrupt("return", _userEvent["default"].click(button));
+
+                  case 1:
+                  case "end":
+                    return _context3.stop();
+                }
+              }
+            }, _callee3);
+          })));
+
+        case 4:
+          expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+          expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copied!');
+
+        case 6:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _callee4);
+})));