@pingux/astro 1.5.0-alpha.1 → 1.5.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/lib/cjs/components/CodeView/CodeView.js +1 -1
  2. package/lib/cjs/components/CodeView/CodeView.test.js +22 -27
  3. package/lib/cjs/components/CopyText/CopyText.js +1 -1
  4. package/lib/cjs/styles/variants/codeView.js +2 -1
  5. package/lib/components/CodeView/CodeView.js +1 -1
  6. package/lib/components/CodeView/CodeView.test.js +22 -23
  7. package/lib/components/CopyText/CopyText.js +1 -1
  8. package/lib/styles/variants/codeView.js +2 -1
  9. package/package.json +1 -1
package/lib/cjs/components/CodeView/CodeView.js CHANGED
@@ -140,7 +140,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
140
140
  }
141
141
 
142
142
  return (0, _react2.jsx)(_.CopyText, {
143
- mode: "nonClickableContent",
143
+ mode: "link",
144
144
  textToCopy: children,
145
145
  tooltipProps: {
146
146
  offset: 15
package/lib/cjs/components/CodeView/CodeView.test.js CHANGED
@@ -57,8 +57,21 @@ var textValue = "\nexport const Default = args => (\n <>\n <Text sx={{ fontW
57
57
  var getComponent = function getComponent() {
58
58
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
59
59
  return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), textValue));
60
- }; // Need to be added to each test file to test accessibility using axe.
60
+ };
61
61
 
62
+ beforeEach(function () {
63
+ var mockClipboard = {
64
+ writeText: jest.fn()
65
+ };
66
+ global.navigator.clipboard = mockClipboard;
67
+ global.document.execCommand = jest.fn();
68
+ global.document.execCommand.mockReturnValue(true);
69
+ });
70
+ afterEach(function () {
71
+ jest.resetAllMocks();
72
+ global.navigator.clipboard = originalClipboard;
73
+ global.document.execCommand = originalExecCommand;
74
+ }); // Need to be added to each test file to test accessibility using axe.
62
75
 
63
76
  (0, _testAxe["default"])(getComponent);
64
77
  test('renders component in the default state', function () {
@@ -69,29 +82,22 @@ test('renders component in the default state', function () {
69
82
  expect(container).toBeInstanceOf(HTMLDivElement);
70
83
  expect(container).toBeInTheDocument();
71
84
  });
72
- test('tooltip renders on hover', function () {
85
+ test('copy button is hovered and renders tooltip via mouse', function () {
73
86
  getComponent();
74
87
 
75
- var container = _testWrapper.screen.getByTestId(testId);
88
+ var copyBtn = _testWrapper.screen.getByLabelText('copy');
76
89
 
77
- _testWrapper.fireEvent.mouseMove(container);
90
+ expect(copyBtn).not.toHaveFocus();
78
91
 
79
- _testWrapper.fireEvent.mouseEnter(container);
92
+ _userEvent["default"].hover(copyBtn);
80
93
 
94
+ expect(copyBtn).toHaveClass('is-hovered');
81
95
  expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
82
96
  expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
83
97
  });
84
- test('content and copy button are focused via keyboard', function () {
98
+ test('copy button is focused and renders tooltip via keyboard', function () {
85
99
  getComponent();
86
100
 
87
- var container = _testWrapper.screen.getByTestId(testId);
88
-
89
- expect(container).not.toHaveFocus();
90
-
91
- _userEvent["default"].tab();
92
-
93
- expect(container).toHaveFocus();
94
-
95
101
  var copyBtn = _testWrapper.screen.getByLabelText('copy');
96
102
 
97
103
  expect(copyBtn).not.toHaveFocus();
@@ -100,6 +106,8 @@ test('content and copy button are focused via keyboard', function () {
100
106
 
101
107
  expect(copyBtn).toHaveFocus();
102
108
  expect(copyBtn).toHaveClass('is-focused');
109
+ expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
110
+ expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
103
111
  });
104
112
  test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
105
113
  getComponent({
@@ -126,19 +134,6 @@ test('renders line numbers with prop hasLineNumbers', function () {
126
134
  expect(_testWrapper.screen.queryByText('1')).toBeInTheDocument();
127
135
  expect(_testWrapper.screen.queryByText(linesLength)).toBeInTheDocument();
128
136
  });
129
- beforeEach(function () {
130
- var mockClipboard = {
131
- writeText: jest.fn()
132
- };
133
- global.navigator.clipboard = mockClipboard;
134
- global.document.execCommand = jest.fn();
135
- global.document.execCommand.mockReturnValue(true);
136
- });
137
- afterEach(function () {
138
- jest.resetAllMocks();
139
- global.navigator.clipboard = originalClipboard;
140
- global.document.execCommand = originalExecCommand;
141
- });
142
137
  test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
143
138
  var button;
144
139
  return _regenerator["default"].wrap(function _callee2$(_context2) {
package/lib/cjs/components/CopyText/CopyText.js CHANGED
@@ -129,7 +129,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
129
129
  ref: ref,
130
130
  isRow: true,
131
131
  variant: "boxes.copy"
132
- }, others), content, (0, _react2.jsx)(TooltipWrapper, {
132
+ }, wrapperProps, others), content, (0, _react2.jsx)(TooltipWrapper, {
133
133
  isOpen: isTooltipOpen,
134
134
  tooltip: tooltip
135
135
  }, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
package/lib/cjs/styles/variants/codeView.js CHANGED
@@ -12,7 +12,8 @@ var theme = {
12
12
  color: '#545454',
13
13
  background: 'none',
14
14
  lineHeight: 1.5,
15
- tabSize: 4
15
+ tabSize: 4,
16
+ fontFamily: '"Roboto Mono", "Lucida Console", Courier, monospace'
16
17
  },
17
18
  styles: [{
18
19
  types: ['prolog', 'constant', 'builtin'],
package/lib/components/CodeView/CodeView.js CHANGED
@@ -105,7 +105,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
105
105
  }
106
106
 
107
107
  return ___EmotionJSX(CopyText, {
108
- mode: "nonClickableContent",
108
+ mode: "link",
109
109
  textToCopy: children,
110
110
  tooltipProps: {
111
111
  offset: 15
package/lib/components/CodeView/CodeView.test.js CHANGED
@@ -35,8 +35,21 @@ var textValue = "\nexport const Default = args => (\n <>\n <Text sx={{ fontW
35
35
  var getComponent = function getComponent() {
36
36
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
37
37
  return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), textValue));
38
- }; // Need to be added to each test file to test accessibility using axe.
38
+ };
39
39
 
40
+ beforeEach(function () {
41
+ var mockClipboard = {
42
+ writeText: jest.fn()
43
+ };
44
+ global.navigator.clipboard = mockClipboard;
45
+ global.document.execCommand = jest.fn();
46
+ global.document.execCommand.mockReturnValue(true);
47
+ });
48
+ afterEach(function () {
49
+ jest.resetAllMocks();
50
+ global.navigator.clipboard = originalClipboard;
51
+ global.document.execCommand = originalExecCommand;
52
+ }); // Need to be added to each test file to test accessibility using axe.
40
53
 
41
54
  axeTest(getComponent);
42
55
  test('renders component in the default state', function () {
@@ -45,25 +58,24 @@ test('renders component in the default state', function () {
45
58
  expect(container).toBeInstanceOf(HTMLDivElement);
46
59
  expect(container).toBeInTheDocument();
47
60
  });
48
- test('tooltip renders on hover', function () {
61
+ test('copy button is hovered and renders tooltip via mouse', function () {
49
62
  getComponent();
50
- var container = screen.getByTestId(testId);
51
- fireEvent.mouseMove(container);
52
- fireEvent.mouseEnter(container);
63
+ var copyBtn = screen.getByLabelText('copy');
64
+ expect(copyBtn).not.toHaveFocus();
65
+ userEvent.hover(copyBtn);
66
+ expect(copyBtn).toHaveClass('is-hovered');
53
67
  expect(screen.queryByRole('tooltip')).toBeInTheDocument();
54
68
  expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
55
69
  });
56
- test('content and copy button are focused via keyboard', function () {
70
+ test('copy button is focused and renders tooltip via keyboard', function () {
57
71
  getComponent();
58
- var container = screen.getByTestId(testId);
59
- expect(container).not.toHaveFocus();
60
- userEvent.tab();
61
- expect(container).toHaveFocus();
62
72
  var copyBtn = screen.getByLabelText('copy');
63
73
  expect(copyBtn).not.toHaveFocus();
64
74
  userEvent.tab();
65
75
  expect(copyBtn).toHaveFocus();
66
76
  expect(copyBtn).toHaveClass('is-focused');
77
+ expect(screen.queryByRole('tooltip')).toBeInTheDocument();
78
+ expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
67
79
  });
68
80
  test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
69
81
  getComponent({
@@ -86,19 +98,6 @@ test('renders line numbers with prop hasLineNumbers', function () {
86
98
  expect(screen.queryByText('1')).toBeInTheDocument();
87
99
  expect(screen.queryByText(linesLength)).toBeInTheDocument();
88
100
  });
89
- beforeEach(function () {
90
- var mockClipboard = {
91
- writeText: jest.fn()
92
- };
93
- global.navigator.clipboard = mockClipboard;
94
- global.document.execCommand = jest.fn();
95
- global.document.execCommand.mockReturnValue(true);
96
- });
97
- afterEach(function () {
98
- jest.resetAllMocks();
99
- global.navigator.clipboard = originalClipboard;
100
- global.document.execCommand = originalExecCommand;
101
- });
102
101
  test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
103
102
  var button;
104
103
  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
package/lib/components/CopyText/CopyText.js CHANGED
@@ -106,7 +106,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
106
106
  ref: ref,
107
107
  isRow: true,
108
108
  variant: "boxes.copy"
109
- }, others), content, ___EmotionJSX(TooltipWrapper, {
109
+ }, wrapperProps, others), content, ___EmotionJSX(TooltipWrapper, {
110
110
  isOpen: isTooltipOpen,
111
111
  tooltip: tooltip
112
112
  }, ___EmotionJSX(CopyButton, _extends({
package/lib/styles/variants/codeView.js CHANGED
@@ -3,7 +3,8 @@ var theme = {
3
3
  color: '#545454',
4
4
  background: 'none',
5
5
  lineHeight: 1.5,
6
- tabSize: 4
6
+ tabSize: 4,
7
+ fontFamily: '"Roboto Mono", "Lucida Console", Courier, monospace'
7
8
  },
8
9
  styles: [{
9
10
  types: ['prolog', 'constant', 'builtin'],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.5.0-alpha.1",
3
+ "version": "1.5.0-alpha.2",
4
4
  "description": "PingUX themeable React component library",
5
5
  "author": "ux-development@pingidentity.com",
6
6
  "license": "Apache-2.0",