box-ui-elements 22.1.0-beta.51 → 22.1.0-beta.52

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 (7) hide show
  1. package/es/components/thumbnail-card/ThumbnailCard.js +3 -3
  2. package/es/components/thumbnail-card/ThumbnailCard.js.flow +2 -2
  3. package/es/components/thumbnail-card/ThumbnailCard.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/thumbnail-card/ThumbnailCard.js +2 -2
  6. package/src/components/thumbnail-card/__tests__/ThumbnailCard.test.js +15 -0
  7. package/src/components/thumbnail-card/__tests__/__snapshots__/ThumbnailCard.test.js.snap +3 -3
package/es/components/thumbnail-card/ThumbnailCard.js CHANGED
@@ -20,11 +20,11 @@ const ThumbnailCard = _ref => {
20
20
  } = _ref,
21
21
  rest = _objectWithoutProperties(_ref, _excluded);
22
22
  return /*#__PURE__*/React.createElement("div", _extends({
23
- role: "button",
24
- tabIndex: "0",
25
23
  className: classNames('thumbnail-card', className, {
26
24
  'is-highlight-applied': highlightOnHover
27
- })
25
+ }),
26
+ role: onKeyDown ? null : 'button',
27
+ tabIndex: onKeyDown ? null : 0
28
28
  }, rest), /*#__PURE__*/React.createElement(ThumbnailCardThumbnail, {
29
29
  thumbnail: thumbnail
30
30
  }), /*#__PURE__*/React.createElement(ThumbnailCardDetails, {
package/es/components/thumbnail-card/ThumbnailCard.js.flow CHANGED
@@ -30,9 +30,9 @@ const ThumbnailCard = ({
30
30
  ...rest
31
31
  }: Props) => (
32
32
  <div
33
- role="button"
34
- tabIndex="0"
35
33
  className={classNames('thumbnail-card', className, { 'is-highlight-applied': highlightOnHover })}
34
+ role={onKeyDown ? null : 'button'}
35
+ tabIndex={onKeyDown ? null : 0}
36
36
  {...rest}
37
37
  >
38
38
  <ThumbnailCardThumbnail thumbnail={thumbnail} />
package/es/components/thumbnail-card/ThumbnailCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThumbnailCard.js","names":["React","classNames","ThumbnailCardDetails","ThumbnailCardThumbnail","ThumbnailCard","_ref","actionItem","className","highlightOnHover","icon","onKeyDown","subtitle","thumbnail","title","rest","_objectWithoutProperties","_excluded","createElement","_extends","role","tabIndex"],"sources":["../../../src/components/thumbnail-card/ThumbnailCard.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport ThumbnailCardDetails from './ThumbnailCardDetails';\nimport ThumbnailCardThumbnail from './ThumbnailCardThumbnail';\n\nimport './ThumbnailCard.scss';\n\ntype Props = {\n actionItem?: React.Element<any>,\n className?: string,\n highlightOnHover?: boolean,\n icon?: React.Node,\n onKeyDown?: () => void,\n subtitle?: React.Node,\n thumbnail: React.Node,\n title: React.Node,\n};\n\nconst ThumbnailCard = ({\n actionItem,\n className = '',\n highlightOnHover = false,\n icon,\n onKeyDown,\n subtitle,\n thumbnail,\n title,\n ...rest\n}: Props) => (\n <div\n role=\"button\"\n tabIndex=\"0\"\n className={classNames('thumbnail-card', className, { 'is-highlight-applied': highlightOnHover })}\n {...rest}\n >\n <ThumbnailCardThumbnail thumbnail={thumbnail} />\n <ThumbnailCardDetails\n actionItem={actionItem}\n icon={icon}\n onKeyDown={onKeyDown}\n subtitle={subtitle}\n title={title}\n />\n </div>\n);\n\nexport default ThumbnailCard;\n"],"mappings":";;;;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,sBAAsB,MAAM,0BAA0B;AAE7D,OAAO,sBAAsB;AAa7B,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;MACnBC,UAAU;MACVC,SAAS,GAAG,EAAE;MACdC,gBAAgB,GAAG,KAAK;MACxBC,IAAI;MACJC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC;IAEG,CAAC,GAAAR,IAAA;IADDS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAAA,oBAEPhB,KAAA,CAAAiB,aAAA,QAAAC,QAAA;IACIC,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAC,GAAG;IACZb,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,EAAE;MAAE,sBAAsB,EAAEC;IAAiB,CAAC;EAAE,GAC7FM,IAAI,gBAERd,KAAA,CAAAiB,aAAA,CAACd,sBAAsB;IAACS,SAAS,EAAEA;EAAU,CAAE,CAAC,eAChDZ,KAAA,CAAAiB,aAAA,CAACf,oBAAoB;IACjBI,UAAU,EAAEA,UAAW;IACvBG,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,QAAQ,EAAEA,QAAS;IACnBE,KAAK,EAAEA;EAAM,CAChB,CACA,CAAC;AAAA,CACT;AAED,eAAeT,aAAa","ignoreList":[]}
1
+ {"version":3,"file":"ThumbnailCard.js","names":["React","classNames","ThumbnailCardDetails","ThumbnailCardThumbnail","ThumbnailCard","_ref","actionItem","className","highlightOnHover","icon","onKeyDown","subtitle","thumbnail","title","rest","_objectWithoutProperties","_excluded","createElement","_extends","role","tabIndex"],"sources":["../../../src/components/thumbnail-card/ThumbnailCard.js"],"sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport ThumbnailCardDetails from './ThumbnailCardDetails';\nimport ThumbnailCardThumbnail from './ThumbnailCardThumbnail';\n\nimport './ThumbnailCard.scss';\n\ntype Props = {\n actionItem?: React.Element<any>,\n className?: string,\n highlightOnHover?: boolean,\n icon?: React.Node,\n onKeyDown?: () => void,\n subtitle?: React.Node,\n thumbnail: React.Node,\n title: React.Node,\n};\n\nconst ThumbnailCard = ({\n actionItem,\n className = '',\n highlightOnHover = false,\n icon,\n onKeyDown,\n subtitle,\n thumbnail,\n title,\n ...rest\n}: Props) => (\n <div\n className={classNames('thumbnail-card', className, { 'is-highlight-applied': highlightOnHover })}\n role={onKeyDown ? null : 'button'}\n tabIndex={onKeyDown ? null : 0}\n {...rest}\n >\n <ThumbnailCardThumbnail thumbnail={thumbnail} />\n <ThumbnailCardDetails\n actionItem={actionItem}\n icon={icon}\n onKeyDown={onKeyDown}\n subtitle={subtitle}\n title={title}\n />\n </div>\n);\n\nexport default ThumbnailCard;\n"],"mappings":";;;;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,oBAAoB,MAAM,wBAAwB;AACzD,OAAOC,sBAAsB,MAAM,0BAA0B;AAE7D,OAAO,sBAAsB;AAa7B,MAAMC,aAAa,GAAGC,IAAA;EAAA,IAAC;MACnBC,UAAU;MACVC,SAAS,GAAG,EAAE;MACdC,gBAAgB,GAAG,KAAK;MACxBC,IAAI;MACJC,SAAS;MACTC,QAAQ;MACRC,SAAS;MACTC;IAEG,CAAC,GAAAR,IAAA;IADDS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAAA,oBAEPhB,KAAA,CAAAiB,aAAA,QAAAC,QAAA;IACIX,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEM,SAAS,EAAE;MAAE,sBAAsB,EAAEC;IAAiB,CAAC,CAAE;IACjGW,IAAI,EAAET,SAAS,GAAG,IAAI,GAAG,QAAS;IAClCU,QAAQ,EAAEV,SAAS,GAAG,IAAI,GAAG;EAAE,GAC3BI,IAAI,gBAERd,KAAA,CAAAiB,aAAA,CAACd,sBAAsB;IAACS,SAAS,EAAEA;EAAU,CAAE,CAAC,eAChDZ,KAAA,CAAAiB,aAAA,CAACf,oBAAoB;IACjBI,UAAU,EAAEA,UAAW;IACvBG,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBC,QAAQ,EAAEA,QAAS;IACnBE,KAAK,EAAEA;EAAM,CAChB,CACA,CAAC;AAAA,CACT;AAED,eAAeT,aAAa","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-ui-elements",
3
- "version": "22.1.0-beta.51",
3
+ "version": "22.1.0-beta.52",
4
4
  "description": "Box UI Elements",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/components/thumbnail-card/ThumbnailCard.js CHANGED
@@ -30,9 +30,9 @@ const ThumbnailCard = ({
30
30
  ...rest
31
31
  }: Props) => (
32
32
  <div
33
- role="button"
34
- tabIndex="0"
35
33
  className={classNames('thumbnail-card', className, { 'is-highlight-applied': highlightOnHover })}
34
+ role={onKeyDown ? null : 'button'}
35
+ tabIndex={onKeyDown ? null : 0}
36
36
  {...rest}
37
37
  >
38
38
  <ThumbnailCardThumbnail thumbnail={thumbnail} />
package/src/components/thumbnail-card/__tests__/ThumbnailCard.test.js CHANGED
@@ -20,6 +20,21 @@ describe('components/thumbnail-card/ThumbnailCard', () => {
20
20
  expect(wrapper).toMatchSnapshot();
21
21
  });
22
22
 
23
+ test('should have role and tabIndex when onKeyDown prop does not exist', () => {
24
+ const wrapper = getWrapper();
25
+
26
+ expect(wrapper.find('.thumbnail-card').prop('role')).toBe('button');
27
+ expect(wrapper.find('.thumbnail-card').prop('tabIndex')).toBe(0);
28
+ });
29
+
30
+ test('should not have role and tabIndex when onKeyDown prop exists', () => {
31
+ const onKeyDown = () => {};
32
+ const wrapper = getWrapper({ onKeyDown });
33
+
34
+ expect(wrapper.find('.thumbnail-card').prop('role')).toBe(null);
35
+ expect(wrapper.find('.thumbnail-card').prop('tabIndex')).toBe(null);
36
+ });
37
+
23
38
  test('should pass down actionItem, icon, and subtitle', () => {
24
39
  const icon = <img alt="icon" />;
25
40
  const subtitle = <div>Subtitle!</div>;
package/src/components/thumbnail-card/__tests__/__snapshots__/ThumbnailCard.test.js.snap CHANGED
@@ -4,7 +4,7 @@ exports[`components/thumbnail-card/ThumbnailCard should pass down actionItem, ic
4
4
  <div
5
5
  className="thumbnail-card"
6
6
  role="button"
7
- tabIndex="0"
7
+ tabIndex={0}
8
8
  >
9
9
  <ThumbnailCardThumbnail
10
10
  thumbnail={
@@ -44,7 +44,7 @@ exports[`components/thumbnail-card/ThumbnailCard should render 1`] = `
44
44
  <div
45
45
  className="thumbnail-card"
46
46
  role="button"
47
- tabIndex="0"
47
+ tabIndex={0}
48
48
  >
49
49
  <ThumbnailCardThumbnail
50
50
  thumbnail={
@@ -67,7 +67,7 @@ exports[`components/thumbnail-card/ThumbnailCard should use additional className
67
67
  <div
68
68
  className="thumbnail-card fooBar"
69
69
  role="button"
70
- tabIndex="0"
70
+ tabIndex={0}
71
71
  >
72
72
  <ThumbnailCardThumbnail
73
73
  thumbnail={