@primer/components 0.0.0-20211024152644 → 0.0.0-20211024152952

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.
package/CHANGELOG.md CHANGED
@@ -1,13 +1,11 @@
1
1
  # @primer/components
2
2
 
3
- ## 0.0.0-20211024152644
3
+ ## 0.0.0-20211024152952
4
4
 
5
5
  ### Minor Changes
6
6
 
7
7
  - [#1606](https://github.com/primer/react/pull/1606) [`985120a6`](https://github.com/primer/react/commit/985120a61b62c1bbd1872d9a11e34fab407a4096) Thanks [@rezrah](https://github.com/rezrah)! - Adds a new Checkbox form component
8
8
 
9
- * [#1619](https://github.com/primer/react/pull/1619) [`38e45b33`](https://github.com/primer/react/commit/38e45b33c5efe70134d2459e39ddcfb66941957d) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Add composable `ActionMenu` to `@primer/components/drafts`
10
-
11
9
  ### Patch Changes
12
10
 
13
11
  - Fake entry to force publishing
@@ -1,6 +1,5 @@
1
- import React from 'react';
2
- import { SxProp } from '../sx';
1
+ /// <reference types="react" />
3
2
  /**
4
3
  * Visually separates `Item`s or `Group`s in an `ActionList`.
5
4
  */
6
- export declare const Divider: React.FC<SxProp>;
5
+ export declare function Divider(): JSX.Element;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.Divider = void 0;
6
+ exports.Divider = Divider;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -11,30 +11,25 @@ var _Box = _interopRequireDefault(require("../Box"));
11
11
 
12
12
  var _constants = require("../constants");
13
13
 
14
- var _sx = require("../sx");
15
-
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
15
 
18
16
  /**
19
17
  * Visually separates `Item`s or `Group`s in an `ActionList`.
20
18
  */
21
- const Divider = ({
22
- sx = {}
23
- }) => {
19
+ function Divider() {
24
20
  return /*#__PURE__*/_react.default.createElement(_Box.default, {
25
21
  as: "li",
26
22
  role: "separator",
27
- sx: (0, _sx.merge)({
23
+ sx: {
28
24
  height: 1,
29
25
  backgroundColor: 'actionListItem.inlineDivider',
30
26
  marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
31
27
  marginBottom: 2,
32
28
  listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
33
29
 
34
- }, sx),
30
+ },
35
31
  "data-component": "ActionList.Divider"
36
32
  });
37
- };
33
+ }
38
34
 
39
- exports.Divider = Divider;
40
35
  Divider.displayName = "Divider";
@@ -21,8 +21,6 @@ var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
21
21
 
22
22
  var _List = require("./List");
23
23
 
24
- var _MenuContext = require("./MenuContext");
25
-
26
24
  var _Selection = require("./Selection");
27
25
 
28
26
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -84,7 +82,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
84
82
  onSelect = () => null,
85
83
  sx: sxProp = {},
86
84
  id,
87
- role,
88
85
  _PrivateItemWrapper,
89
86
  ...props
90
87
  }, forwardedRef) => {
@@ -93,11 +90,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
93
90
  showDividers
94
91
  } = _react.default.useContext(_List.ListContext);
95
92
 
96
- const {
97
- itemRole,
98
- afterSelect
99
- } = _react.default.useContext(_MenuContext.MenuContext);
100
-
101
93
  const {
102
94
  theme
103
95
  } = (0, _ThemeProvider.useTheme)();
@@ -172,23 +164,16 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
172
164
 
173
165
  const clickHandler = _react.default.useCallback(event => {
174
166
  if (disabled) return;
175
-
176
- if (!event.defaultPrevented) {
177
- onSelect(event); // if this Item is inside a Menu, close the Menu
178
-
179
- if (typeof afterSelect === 'function') afterSelect();
180
- }
181
- }, [onSelect, disabled, afterSelect]);
167
+ if (!event.defaultPrevented) onSelect(event);
168
+ }, [onSelect, disabled]);
182
169
 
183
170
  const keyPressHandler = _react.default.useCallback(event => {
184
171
  if (disabled) return;
185
172
 
186
173
  if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
187
- onSelect(event); // if this Item is inside a Menu, close the Menu
188
-
189
- if (typeof afterSelect === 'function') afterSelect();
174
+ onSelect(event);
190
175
  }
191
- }, [onSelect, disabled, afterSelect]); // use props.id if provided, otherwise generate one.
176
+ }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
192
177
 
193
178
 
194
179
  const labelId = (0, _ssr.useSSRSafeId)(id);
@@ -211,8 +196,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
211
196
  "aria-disabled": disabled ? true : undefined,
212
197
  tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
213
198
  "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
214
- "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined,
215
- role: role || itemRole
199
+ "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
216
200
  }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
217
201
  selected: selected
218
202
  }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {
@@ -11,8 +11,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
 
12
12
  var _sx = _interopRequireWildcard(require("../sx"));
13
13
 
14
- var _MenuContext = require("./MenuContext");
15
-
16
14
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
15
 
18
16
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,7 +32,6 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
34
32
  variant = 'inset',
35
33
  selectionVariant,
36
34
  showDividers = false,
37
- role,
38
35
  sx: sxProp = {},
39
36
  ...props
40
37
  }, forwardedRef) => {
@@ -44,16 +41,9 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
44
41
  // reset ul styles
45
42
  paddingY: variant === 'inset' ? 2 : 0
46
43
  };
47
- /** if list is inside a Menu, it will get a role from the Menu */
48
-
49
- const {
50
- listRole
51
- } = _react.default.useContext(_MenuContext.MenuContext);
52
-
53
44
  return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
54
45
  sx: (0, _sx.merge)(styles, sxProp),
55
- "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined,
56
- role: role || listRole
46
+ "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
57
47
  }, props, {
58
48
  ref: forwardedRef
59
49
  }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {
@@ -13,8 +13,6 @@ var _List = require("./List");
13
13
 
14
14
  var _Group = require("./Group");
15
15
 
16
- var _MenuContext = require("./MenuContext");
17
-
18
16
  var _Visuals = require("./Visuals");
19
17
 
20
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,10 +27,6 @@ const Selection = ({
29
27
  const {
30
28
  selectionVariant: groupSelectionVariant
31
29
  } = _react.default.useContext(_Group.GroupContext);
32
-
33
- const {
34
- parent
35
- } = _react.default.useContext(_MenuContext.MenuContext);
36
30
  /** selectionVariant in Group can override the selectionVariant in List root */
37
31
 
38
32
 
@@ -44,11 +38,6 @@ const Selection = ({
44
38
  return null;
45
39
  }
46
40
 
47
- if (parent === 'ActionMenu') {
48
- throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
49
- return null;
50
- }
51
-
52
41
  if (selectionVariant === 'single') {
53
42
  return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
54
43
  }
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { Divider } from './Divider';
2
3
  export type { ListProps as ActionListProps } from './List';
3
4
  export type { GroupProps } from './Group';
4
5
  export type { ItemProps } from './Item';
@@ -25,7 +26,7 @@ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRe
25
26
  referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
26
27
  }>;
27
28
  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
28
- Divider: import("react").FC<import("../sx").SxProp>;
29
+ Divider: typeof Divider;
29
30
  /** Secondary text which provides additional information about an `Item`. */
30
31
  Description: import("react").FC<import("./Description").DescriptionProps>;
31
32
  /** Icon (or similar) positioned before `Item` text. */
package/lib/drafts.d.ts CHANGED
@@ -6,4 +6,3 @@
6
6
  */
7
7
  export * from './ActionList2';
8
8
  export * from './NewButton';
9
- export * from './ActionMenu2';
package/lib/drafts.js CHANGED
@@ -28,17 +28,4 @@ Object.keys(_NewButton).forEach(function (key) {
28
28
  return _NewButton[key];
29
29
  }
30
30
  });
31
- });
32
-
33
- var _ActionMenu = require("./ActionMenu2");
34
-
35
- Object.keys(_ActionMenu).forEach(function (key) {
36
- if (key === "default" || key === "__esModule") return;
37
- if (key in exports && exports[key] === _ActionMenu[key]) return;
38
- Object.defineProperty(exports, key, {
39
- enumerable: true,
40
- get: function () {
41
- return _ActionMenu[key];
42
- }
43
- });
44
31
  });
@@ -88,6 +88,17 @@ export declare function render(component: React.ReactElement, theme?: {
88
88
  additionBg: string;
89
89
  };
90
90
  searchKeyword: {
91
+ /**
92
+ * Render the component (a React.createElement() or JSX expression)
93
+ * into its intermediate object representation with 'type',
94
+ * 'props', and 'children' keys
95
+ *
96
+ * The returned object can be matched with expect().toEqual(), e.g.
97
+ *
98
+ * ```js
99
+ * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
100
+ * ```
101
+ */
91
102
  hl: string;
92
103
  };
93
104
  prettylights: {
@@ -108,6 +119,15 @@ export declare function render(component: React.ReactElement, theme?: {
108
119
  stringRegexp: string;
109
120
  markupList: string;
110
121
  markupHeading: string;
122
+ /**
123
+ * Get the HTML class names rendered by the component instance
124
+ * as an array.
125
+ *
126
+ * ```js
127
+ * expect(renderClasses(<div className='a b' />))
128
+ * .toEqual(['a', 'b'])
129
+ * ```
130
+ */
111
131
  markupItalic: string;
112
132
  markupBold: string;
113
133
  markupDeletedText: string;
@@ -541,4 +561,5 @@ interface BehavesAsComponent {
541
561
  }
542
562
  export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void;
543
563
  export declare function checkExports(path: string, exports: Record<any, any>): void;
564
+ export declare function checkStoriesForAxeViolations(name: string): void;
544
565
  export {};
@@ -19,6 +19,7 @@ exports.loadCSS = loadCSS;
19
19
  exports.unloadCSS = unloadCSS;
20
20
  exports.behavesAsComponent = behavesAsComponent;
21
21
  exports.checkExports = checkExports;
22
+ exports.checkStoriesForAxeViolations = checkStoriesForAxeViolations;
22
23
  exports.COMPONENT_DISPLAY_NAME_REGEX = void 0;
23
24
 
24
25
  var _react = _interopRequireDefault(require("react"));
@@ -31,6 +32,10 @@ var _enzyme = _interopRequireDefault(require("enzyme"));
31
32
 
32
33
  var _enzymeAdapterReact = _interopRequireDefault(require("@wojtekmaj/enzyme-adapter-react-17"));
33
34
 
35
+ var _react2 = require("@testing-library/react");
36
+
37
+ var _jestAxe = require("jest-axe");
38
+
34
39
  var _ = require("..");
35
40
 
36
41
  var _theme = _interopRequireDefault(require("../theme"));
@@ -270,4 +275,28 @@ function checkExports(path, exports) {
270
275
 
271
276
  expect(mod).toSetExports(exports);
272
277
  });
278
+ }
279
+
280
+ expect.extend(_jestAxe.toHaveNoViolations);
281
+
282
+ function checkStoriesForAxeViolations(name) {
283
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
284
+ const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
285
+
286
+
287
+ const {
288
+ default: _meta,
289
+ ...Stories
290
+ } = stories;
291
+ Object.values(Stories).map(Story => {
292
+ if (typeof Story !== 'function') return;
293
+ it(`story {Story.storyName} should have no axe violations`, async () => {
294
+ const {
295
+ container
296
+ } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Story, null));
297
+ const results = await (0, _jestAxe.axe)(container);
298
+ expect(results).toHaveNoViolations();
299
+ (0, _react2.cleanup)();
300
+ });
301
+ });
273
302
  }
@@ -1,6 +1,5 @@
1
- import React from 'react';
2
- import { SxProp } from '../sx';
1
+ /// <reference types="react" />
3
2
  /**
4
3
  * Visually separates `Item`s or `Group`s in an `ActionList`.
5
4
  */
6
- export declare const Divider: React.FC<SxProp>;
5
+ export declare function Divider(): JSX.Element;
@@ -1,26 +1,23 @@
1
1
  import React from 'react';
2
2
  import Box from '../Box';
3
3
  import { get } from '../constants';
4
- import { merge } from '../sx';
4
+
5
5
  /**
6
6
  * Visually separates `Item`s or `Group`s in an `ActionList`.
7
7
  */
8
-
9
- export const Divider = ({
10
- sx = {}
11
- }) => {
8
+ export function Divider() {
12
9
  return /*#__PURE__*/React.createElement(Box, {
13
10
  as: "li",
14
11
  role: "separator",
15
- sx: merge({
12
+ sx: {
16
13
  height: 1,
17
14
  backgroundColor: 'actionListItem.inlineDivider',
18
15
  marginTop: theme => `calc(${get('space.2')(theme)} - 1px)`,
19
16
  marginBottom: 2,
20
17
  listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
21
18
 
22
- }, sx),
19
+ },
23
20
  "data-component": "ActionList.Divider"
24
21
  });
25
- };
22
+ }
26
23
  Divider.displayName = "Divider";
@@ -8,7 +8,6 @@ import Box from '../Box';
8
8
  import sx, { merge } from '../sx';
9
9
  import createSlots from '../utils/create-slots';
10
10
  import { ListContext } from './List';
11
- import { MenuContext } from './MenuContext';
12
11
  import { Selection } from './Selection';
13
12
  export const getVariantStyles = (variant, disabled) => {
14
13
  if (disabled) {
@@ -55,7 +54,6 @@ export const Item = /*#__PURE__*/React.forwardRef(({
55
54
  onSelect = () => null,
56
55
  sx: sxProp = {},
57
56
  id,
58
- role,
59
57
  _PrivateItemWrapper,
60
58
  ...props
61
59
  }, forwardedRef) => {
@@ -63,10 +61,6 @@ export const Item = /*#__PURE__*/React.forwardRef(({
63
61
  variant: listVariant,
64
62
  showDividers
65
63
  } = React.useContext(ListContext);
66
- const {
67
- itemRole,
68
- afterSelect
69
- } = React.useContext(MenuContext);
70
64
  const {
71
65
  theme
72
66
  } = useTheme();
@@ -140,22 +134,15 @@ export const Item = /*#__PURE__*/React.forwardRef(({
140
134
  };
141
135
  const clickHandler = React.useCallback(event => {
142
136
  if (disabled) return;
143
-
144
- if (!event.defaultPrevented) {
145
- onSelect(event); // if this Item is inside a Menu, close the Menu
146
-
147
- if (typeof afterSelect === 'function') afterSelect();
148
- }
149
- }, [onSelect, disabled, afterSelect]);
137
+ if (!event.defaultPrevented) onSelect(event);
138
+ }, [onSelect, disabled]);
150
139
  const keyPressHandler = React.useCallback(event => {
151
140
  if (disabled) return;
152
141
 
153
142
  if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
154
- onSelect(event); // if this Item is inside a Menu, close the Menu
155
-
156
- if (typeof afterSelect === 'function') afterSelect();
143
+ onSelect(event);
157
144
  }
158
- }, [onSelect, disabled, afterSelect]); // use props.id if provided, otherwise generate one.
145
+ }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
159
146
 
160
147
  const labelId = useSSRSafeId(id);
161
148
  const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
@@ -177,8 +164,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
177
164
  "aria-disabled": disabled ? true : undefined,
178
165
  tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
179
166
  "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
180
- "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined,
181
- role: role || itemRole
167
+ "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
182
168
  }, props), /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
183
169
  selected: selected
184
170
  }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {
@@ -3,7 +3,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
3
3
  import React from 'react';
4
4
  import styled from 'styled-components';
5
5
  import sx, { merge } from '../sx';
6
- import { MenuContext } from './MenuContext';
7
6
  export const ListContext = /*#__PURE__*/React.createContext({});
8
7
  const ListBox = styled.ul.withConfig({
9
8
  displayName: "List__ListBox",
@@ -13,7 +12,6 @@ export const List = /*#__PURE__*/React.forwardRef(({
13
12
  variant = 'inset',
14
13
  selectionVariant,
15
14
  showDividers = false,
16
- role,
17
15
  sx: sxProp = {},
18
16
  ...props
19
17
  }, forwardedRef) => {
@@ -23,15 +21,9 @@ export const List = /*#__PURE__*/React.forwardRef(({
23
21
  // reset ul styles
24
22
  paddingY: variant === 'inset' ? 2 : 0
25
23
  };
26
- /** if list is inside a Menu, it will get a role from the Menu */
27
-
28
- const {
29
- listRole
30
- } = React.useContext(MenuContext);
31
24
  return /*#__PURE__*/React.createElement(ListBox, _extends({
32
25
  sx: merge(styles, sxProp),
33
- "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined,
34
- role: role || listRole
26
+ "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
35
27
  }, props, {
36
28
  ref: forwardedRef
37
29
  }), /*#__PURE__*/React.createElement(ListContext.Provider, {
@@ -2,7 +2,6 @@ import React from 'react';
2
2
  import { CheckIcon } from '@primer/octicons-react';
3
3
  import { ListContext } from './List';
4
4
  import { GroupContext } from './Group';
5
- import { MenuContext } from './MenuContext';
6
5
  import { LeadingVisualContainer } from './Visuals';
7
6
  export const Selection = ({
8
7
  selected
@@ -13,9 +12,6 @@ export const Selection = ({
13
12
  const {
14
13
  selectionVariant: groupSelectionVariant
15
14
  } = React.useContext(GroupContext);
16
- const {
17
- parent
18
- } = React.useContext(MenuContext);
19
15
  /** selectionVariant in Group can override the selectionVariant in List root */
20
16
 
21
17
  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
@@ -26,11 +22,6 @@ export const Selection = ({
26
22
  return null;
27
23
  }
28
24
 
29
- if (parent === 'ActionMenu') {
30
- throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
31
- return null;
32
- }
33
-
34
25
  if (selectionVariant === 'single') {
35
26
  return /*#__PURE__*/React.createElement(LeadingVisualContainer, null, selected && /*#__PURE__*/React.createElement(CheckIcon, null));
36
27
  }
@@ -1,4 +1,5 @@
1
1
  /// <reference types="react" />
2
+ import { Divider } from './Divider';
2
3
  export type { ListProps as ActionListProps } from './List';
3
4
  export type { GroupProps } from './Group';
4
5
  export type { ItemProps } from './Item';
@@ -25,7 +26,7 @@ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRe
25
26
  referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
26
27
  }>;
27
28
  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
28
- Divider: import("react").FC<import("../sx").SxProp>;
29
+ Divider: typeof Divider;
29
30
  /** Secondary text which provides additional information about an `Item`. */
30
31
  Description: import("react").FC<import("./Description").DescriptionProps>;
31
32
  /** Icon (or similar) positioned before `Item` text. */
@@ -6,4 +6,3 @@
6
6
  */
7
7
  export * from './ActionList2';
8
8
  export * from './NewButton';
9
- export * from './ActionMenu2';
package/lib-esm/drafts.js CHANGED
@@ -6,5 +6,4 @@
6
6
  */
7
7
  // Components
8
8
  export * from './ActionList2';
9
- export * from './NewButton';
10
- export * from './ActionMenu2';
9
+ export * from './NewButton';
@@ -88,6 +88,17 @@ export declare function render(component: React.ReactElement, theme?: {
88
88
  additionBg: string;
89
89
  };
90
90
  searchKeyword: {
91
+ /**
92
+ * Render the component (a React.createElement() or JSX expression)
93
+ * into its intermediate object representation with 'type',
94
+ * 'props', and 'children' keys
95
+ *
96
+ * The returned object can be matched with expect().toEqual(), e.g.
97
+ *
98
+ * ```js
99
+ * expect(render(<Foo />)).toEqual(render(<div foo='bar' />))
100
+ * ```
101
+ */
91
102
  hl: string;
92
103
  };
93
104
  prettylights: {
@@ -108,6 +119,15 @@ export declare function render(component: React.ReactElement, theme?: {
108
119
  stringRegexp: string;
109
120
  markupList: string;
110
121
  markupHeading: string;
122
+ /**
123
+ * Get the HTML class names rendered by the component instance
124
+ * as an array.
125
+ *
126
+ * ```js
127
+ * expect(renderClasses(<div className='a b' />))
128
+ * .toEqual(['a', 'b'])
129
+ * ```
130
+ */
111
131
  markupItalic: string;
112
132
  markupBold: string;
113
133
  markupDeletedText: string;
@@ -541,4 +561,5 @@ interface BehavesAsComponent {
541
561
  }
542
562
  export declare function behavesAsComponent({ Component, toRender, options }: BehavesAsComponent): void;
543
563
  export declare function checkExports(path: string, exports: Record<any, any>): void;
564
+ export declare function checkStoriesForAxeViolations(name: string): void;
544
565
  export {};
@@ -3,6 +3,8 @@ import { promisify } from 'util';
3
3
  import renderer from 'react-test-renderer';
4
4
  import enzyme from 'enzyme';
5
5
  import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
6
+ import { cleanup, render as HTMLRender } from '@testing-library/react';
7
+ import { axe, toHaveNoViolations } from 'jest-axe';
6
8
  import { ThemeProvider } from '..';
7
9
  import { default as defaultTheme } from '../theme';
8
10
  // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -219,4 +221,26 @@ export function checkExports(path, exports) {
219
221
 
220
222
  expect(mod).toSetExports(exports);
221
223
  });
224
+ }
225
+ expect.extend(toHaveNoViolations);
226
+ export function checkStoriesForAxeViolations(name) {
227
+ // eslint-disable-next-line @typescript-eslint/no-var-requires
228
+ const stories = require(`../stories/${name}.stories`); // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
229
+
230
+
231
+ const {
232
+ default: _meta,
233
+ ...Stories
234
+ } = stories;
235
+ Object.values(Stories).map(Story => {
236
+ if (typeof Story !== 'function') return;
237
+ it(`story {Story.storyName} should have no axe violations`, async () => {
238
+ const {
239
+ container
240
+ } = HTMLRender( /*#__PURE__*/React.createElement(Story, null));
241
+ const results = await axe(container);
242
+ expect(results).toHaveNoViolations();
243
+ cleanup();
244
+ });
245
+ });
222
246
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-20211024152644",
3
+ "version": "0.0.0-20211024152952",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -1,10 +0,0 @@
1
- /** This context can be used by components that compose ActionList inside a Menu */
2
- import React from 'react';
3
- declare type ContextProps = {
4
- parent?: string;
5
- listRole?: string;
6
- itemRole?: string;
7
- afterSelect?: () => void;
8
- };
9
- export declare const MenuContext: React.Context<ContextProps>;
10
- export {};
@@ -1,15 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.MenuContext = void 0;
7
-
8
- var _react = _interopRequireDefault(require("react"));
9
-
10
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
-
12
- /** This context can be used by components that compose ActionList inside a Menu */
13
- const MenuContext = /*#__PURE__*/_react.default.createContext({});
14
-
15
- exports.MenuContext = MenuContext;