@automattic/vip-design-system 0.9.0 → 0.9.3

package/build/system/Avatar/Avatar.test.js

@@ -13,42 +13,61 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 describe('<Avatar />', function () {
-  it('renders the Avatar without an image', function () {
-    (0, _react.render)((0, _jsxRuntime.jsx)(_Avatar.Avatar, {
-      name: "John Doe"
-    }));
-    expect(_react.screen.getByText('J')).toBeInTheDocument();
-  });
-  it('renders the Avatar with image', function () {
-    (0, _react.render)((0, _jsxRuntime.jsx)(_Avatar.Avatar, {
-      name: "John Doe",
-      src: "path/to/image"
-    }));
-    expect(_react.screen.getByAltText('Avatar image from John Doe')).toBeInTheDocument();
-  });
-  it('should not have basic accessibility issues', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var _render, container, results;
+  it('renders the Avatar without an image', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
 
     return regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Avatar.Avatar, {
-              name: "John Doe",
-              src: "path/to/image"
+              name: "John Doe"
             })), container = _render.container;
-            _context.next = 3;
-            return (0, _jestAxe.axe)(container);
+            expect(_react.screen.getByText('J')).toBeInTheDocument(); // Check for accessibility issues
 
-          case 3:
-            results = _context.sent;
-            expect(results).toHaveNoViolations();
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
 
           case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
           case "end":
             return _context.stop();
         }
       }
     }, _callee);
   })));
+  it('renders the Avatar with image', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, container;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Avatar.Avatar, {
+              name: "John Doe",
+              src: "path/to/image"
+            })), container = _render2.container;
+            expect(_react.screen.getByAltText('Avatar image from John Doe')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context2.t1 = _context2.sent;
+            _context2.next = 8;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });

package/build/system/Badge/Badge.test.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _Badge = require("./Badge");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<Badge />', function () {
+  it('renders the Badge component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Badge.Badge, {
+              children: "Badge text"
+            })), container = _render.container;
+            expect(_react.screen.getByText('Badge text')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders the Badge component with a different variant', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, container;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Badge.Badge, {
+              variant: "primary",
+              children: "Badge text"
+            })), container = _render2.container;
+            expect(_react.screen.getByText('Badge text')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context2.t1 = _context2.sent;
+            _context2.next = 8;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/BlankState/BlankState.js

@@ -21,11 +21,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * Internal dependencies
  */
 var BlankState = function BlankState(_ref) {
-  var image = _ref.image,
+  var body = _ref.body,
+      cta = _ref.cta,
       icon = _ref.icon,
-      title = _ref.title,
-      body = _ref.body,
-      cta = _ref.cta;
+      image = _ref.image,
+      _ref$imageAlt = _ref.imageAlt,
+      imageAlt = _ref$imageAlt === void 0 ? 'Image representing the blank state' : _ref$imageAlt,
+      title = _ref.title;
   return (0, _jsxRuntime.jsxs)(_.Box, {
     sx: {
       textAlign: 'center',
@@ -36,7 +38,7 @@ var BlankState = function BlankState(_ref) {
       sx: {
         mb: 3
       },
-      alt: "Icon representing the blank state"
+      alt: imageAlt
     }), (0, _jsxRuntime.jsx)(_.Heading, {
       variant: "h4",
       children: title
@@ -53,9 +55,10 @@ var BlankState = function BlankState(_ref) {
 
 exports.BlankState = BlankState;
 BlankState.propTypes = {
-  image: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string]),
-  icon: _propTypes["default"].node,
-  title: _propTypes["default"].node,
   body: _propTypes["default"].node,
-  cta: _propTypes["default"].node
+  cta: _propTypes["default"].node,
+  icon: _propTypes["default"].node,
+  image: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].string]),
+  imageAlt: _propTypes["default"].string,
+  title: _propTypes["default"].node
 };

package/build/system/BlankState/BlankState.test.js

@@ -0,0 +1,124 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _md = require("react-icons/md");
+
+var _BlankState = require("./BlankState");
+
+var _Link = require("../Link");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+// eslint-disable-next-line max-len
+var image = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='79' height='79' viewBox='0 0 79 79' fill='none'%3E%3Cpath d='M66.3001 15.9C66.3001 15.9 66.3 15.8 66.2 15.8C66.1 15.7 66 15.5 65.9001 15.4C65.9001 15.4 65.9001 15.4 65.9001 15.3L44.4001 0.2C44.3001 0.0999998 44.2 0.0999994 44.1 0.0999994C44 0.0999994 44.0001 0 43.9001 0H43.3C43.2 0 43.1 0.0999994 43.1 0.0999994C43 0.0999994 42.9 0.2 42.8 0.2L28.2001 10.3C28.1 10.4 28.0001 10.5 27.9001 10.6C27.9001 10.6 27.9001 10.6 27.9001 10.7C27.8001 10.8 27.7001 11 27.7001 11.2C27.7001 11.2 27.7001 11.2 27.7001 11.3V31.1L13.9 40.8L13.7001 41C13.6001 41.1 13.6 41.1 13.6 41.2L13.5 41.3C13.5 41.4 13.4 41.5 13.4 41.5V41.6C13.4 41.7 13.3 41.8 13.3 42V62.2C13.3 62.4 13.3 62.6 13.4 62.7V62.8C13.5 62.9 13.6001 63.1 13.7001 63.2C13.7001 63.2 13.7 63.2 13.8 63.3L13.9 63.4L35.3 78.6H35.4001C35.4001 78.6 35.5 78.6 35.5 78.7H35.6C35.8 78.8 36 78.8 36.2001 78.8C36.3001 78.8 36.5 78.8 36.6 78.7H36.7001C36.8001 78.7 36.8001 78.7 36.9001 78.6C36.9001 78.6 37 78.6 37 78.5H37.1L66 58.3C66.1 58.2 66.2001 58.1 66.3001 58V15.9ZM34.6 74.5L16.1 61.3V44.7L34.6 57.8V74.5ZM36 55.3L17.2001 41.9L29 33.5L47.9001 46.9L36 55.3ZM49 44.1L30.5 31V14.4L49 27.5V44.1ZM50.5 24.9L31.6 11.5L43.5 3.2L62.4001 16.6L50.5 24.9Z' fill='%23BD9D70'/%3E%3C/svg%3E";
+var defaultProps = {
+  body: 'Sorry, there\'s nothing here yet.',
+  cta: (0, _jsxRuntime.jsx)(_Link.Link, {
+    as: "a",
+    children: "Explore add-ons \u2192"
+  }),
+  image: image,
+  imageAlt: 'This is the image alt',
+  title: 'Power up your application'
+};
+describe('<BlankState />', function () {
+  it('renders the BlankState component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_BlankState.BlankState, _extends({}, defaultProps))), container = _render.container;
+            expect(_react.screen.getByText(defaultProps.body)).toBeInTheDocument();
+            expect(_react.screen.getByText(defaultProps.title)).toBeInTheDocument();
+            expect(_react.screen.getByText('Explore add-ons →')).toBeInTheDocument();
+            expect(_react.screen.getByAltText(defaultProps.imageAlt)).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 8;
+            return (0, _jestAxe.axe)(container);
+
+          case 8:
+            _context.t1 = _context.sent;
+            _context.next = 11;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders the BlankState component with default alt text for the given image', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var props, _render2, container;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            props = _extends({}, defaultProps, {
+              imageAlt: undefined
+            });
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_BlankState.BlankState, _extends({}, props))), container = _render2.container;
+            expect(_react.screen.getByAltText('Image representing the blank state')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context2.t1 = _context2.sent;
+            _context2.next = 9;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders the BlankState component with an icon', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var icon, props, _render3, container;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            icon = (0, _jsxRuntime.jsx)(_md.MdContentCopy, {
+              title: "this is an icon"
+            });
+            props = _extends({}, defaultProps, {
+              icon: icon
+            });
+            _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_BlankState.BlankState, _extends({}, props))), container = _render3.container;
+            expect(_react.screen.getByTitle('this is an icon')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context3.t0 = expect;
+            _context3.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context3.t1 = _context3.sent;
+            _context3.next = 10;
+            return (0, _context3.t0)(_context3.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+});

package/build/system/Button/Button.test.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _Button = require("./Button");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('<Button />', function () {
+  it('renders the Button component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Button.Button, {
+              children: "Button text"
+            })), container = _render.container;
+            expect(_react.screen.getByText('Button text')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/build/system/Card/Card.js

@@ -19,7 +19,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var CardComponent = function CardComponent(_ref, ref) {
+var Card = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
       _ref$sx = _ref.sx,
@@ -34,13 +34,11 @@ var CardComponent = function CardComponent(_ref, ref) {
       overflow: 'hidden'
     }, sx)
   }, props));
-};
+});
 
-CardComponent.propTypes = {
+exports.Card = Card;
+Card.propTypes = {
   variant: _propTypes["default"].string,
   sx: _propTypes["default"].object
 };
-
-var Card = /*#__PURE__*/_react["default"].forwardRef(CardComponent);
-
-exports.Card = Card;
+Card.displayName = 'Card';

package/build/system/Card/Card.test.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _md = require("react-icons/md");
+
+var _Card = require("./Card");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var defaultProps = {};
+describe('<Card />', function () {
+  it('renders the Card component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Card.Card, _extends({}, defaultProps, {
+              children: "This is a Card"
+            }))), container = _render.container;
+            expect(_react.screen.getByText('This is a Card')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('renders the Card component with a different variant', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var _render2, container;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Card.Card, {
+              variant: "primary",
+              children: "Card text"
+            })), container = _render2.container;
+            expect(_react.screen.getByText('Card text')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context2.t1 = _context2.sent;
+            _context2.next = 8;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+});

package/build/system/Code/Code.js

@@ -61,18 +61,21 @@ var Code = function Code(_ref) {
     sx: {
       position: 'relative'
     },
-    children: [codeDom, (0, _jsxRuntime.jsx)("span", {
+    children: [codeDom, (0, _jsxRuntime.jsx)("button", {
+      "aria-label": "Copy",
       sx: {
-        position: 'absolute',
-        top: 0,
         bg: 'grey.10',
-        right: 0,
-        paddingRight: 2,
-        paddingLeft: 2,
-        paddingTop: 1,
-        paddingBottom: 1,
         borderTopRightRadius: 1,
+        borderWidth: 0,
+        color: 'muted',
         opacity: 0.8,
+        paddingBottom: 1,
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 1,
+        position: 'absolute',
+        right: 0,
+        top: '-1px',
         '&:hover': {
           opacity: 1,
           cursor: 'pointer'

package/build/system/Code/Code.test.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _md = require("react-icons/md");
+
+var _Code = require("./Code");
+
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+var defaultProps = {
+  showCopy: false
+}; // Mock navigator.clipboard because jsdom doesn't support it
+
+Object.defineProperty(window.navigator, 'clipboard', {
+  value: {
+    writeText: function writeText() {}
+  }
+});
+describe('<Code />', function () {
+  it('renders the Code component', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var _render, container;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, defaultProps, {
+              children: "This is a code"
+            }))), container = _render.container;
+            expect(_react.screen.getByText('This is a code')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context.t0 = expect;
+            _context.next = 5;
+            return (0, _jestAxe.axe)(container);
+
+          case 5:
+            _context.t1 = _context.sent;
+            _context.next = 8;
+            return (0, _context.t0)(_context.t1).toHaveNoViolations();
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }))); // jsdom currently doesn't support pseudo-elements with getComputedStyle
+
+  it.skip('renders "$" in front of the code when in prompt mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var props, _render2, container, codeElement;
+
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            props = _extends({}, defaultProps, {
+              prompt: true
+            });
+            _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+              children: "This is a code"
+            }))), container = _render2.container;
+            codeElement = _react.screen.getByText('This is a code');
+            expect(window.getComputedStyle(codeElement, ':before').content).toEqual('$'); // Check for accessibility issues
+
+            _context2.t0 = expect;
+            _context2.next = 7;
+            return (0, _jestAxe.axe)(container);
+
+          case 7:
+            _context2.t1 = _context2.sent;
+            _context2.next = 10;
+            return (0, _context2.t0)(_context2.t1).toHaveNoViolations();
+
+          case 10:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('renders the Code component with a copy button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var props, _render3, container;
+
+    return regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            props = _extends({}, defaultProps, {
+              showCopy: true
+            });
+            _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+              children: "This is a code"
+            }))), container = _render3.container;
+            expect(_react.screen.getByRole('button', {
+              name: 'Copy'
+            })).toBeInTheDocument(); // Check for accessibility issues
+
+            _context3.t0 = expect;
+            _context3.next = 6;
+            return (0, _jestAxe.axe)(container);
+
+          case 6:
+            _context3.t1 = _context3.sent;
+            _context3.next = 9;
+            return (0, _context3.t0)(_context3.t1).toHaveNoViolations();
+
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  it('updates the the UI after clicking on "Copy"', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+    var props, _render4, container;
+
+    return regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            props = _extends({}, defaultProps, {
+              showCopy: true
+            });
+            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_Code.Code, _extends({}, props, {
+              children: "This is a code"
+            }))), container = _render4.container;
+
+            _react.fireEvent.click(_react.screen.getByRole('button', {
+              name: 'Copy'
+            }));
+
+            _context4.next = 5;
+            return (0, _react.waitFor)(function () {
+              return new Promise(function (res) {
+                return setTimeout(res, 0);
+              });
+            });
+
+          case 5:
+            expect(_react.screen.getByText('Copied!')).toBeInTheDocument(); // Check for accessibility issues
+
+            _context4.t0 = expect;
+            _context4.next = 9;
+            return (0, _jestAxe.axe)(container);
+
+          case 9:
+            _context4.t1 = _context4.sent;
+            _context4.next = 12;
+            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+
+          case 12:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+});