bright-components 10.2.1 → 10.2.4

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.
@@ -0,0 +1,22 @@
1
+ {
2
+ "eslint.format.enable": true,
3
+ "editor.renderWhitespace": "all",
4
+ "editor.defaultFormatter": "dbaeumer.vscode-eslint",
5
+ "editor.formatOnSave": true,
6
+ "editor.formatOnPaste": true,
7
+ "cSpell.words": [
8
+ "autobind",
9
+ "brighthr",
10
+ "cronersupplieddocuments",
11
+ "firstname",
12
+ "Formik",
13
+ "lastname",
14
+ "pathnames",
15
+ "pendo",
16
+ "previewable",
17
+ "selectall",
18
+ "tailwindcss",
19
+ "testid",
20
+ "testprops"
21
+ ]
22
+ }
@@ -5,50 +5,24 @@ exports.default = void 0;
5
5
 
6
6
  var _react = _interopRequireDefault(require("react"));
7
7
 
8
- var _reactIconBase = _interopRequireDefault(require("react-icon-base"));
9
-
10
8
  var _propTypes = require("prop-types");
11
9
 
12
- var _colors = _interopRequireDefault(require("../../../constants/colors"));
10
+ var _reactIconBase = _interopRequireDefault(require("react-icon-base"));
13
11
 
14
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
13
 
16
14
  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); }
17
15
 
18
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
19
-
20
- 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; }
21
-
22
- const EyeIcon = _ref => {
23
- let {
24
- size
25
- } = _ref,
26
- props = _objectWithoutProperties(_ref, ["size"]);
27
-
28
- return _react.default.createElement(_reactIconBase.default, _extends({}, props, {
29
- size: size,
30
- viewBox: "0 0 24 24"
31
- }), _react.default.createElement("rect", {
32
- transform: "translate(0)"
33
- }), _react.default.createElement("circle", {
34
- fill: props.color,
35
- cx: "5",
36
- cy: "5",
37
- r: "5",
38
- transform: "translate(7 7)"
39
- }), _react.default.createElement("path", {
40
- fill: props.color,
41
- d: "M12,20C5.089,20,.359,12.849.162,12.545a1,1,0,0,1,0-1.09C.359,11.15,5.089,4,12,4s11.641,7.15,11.838,7.455a1,1,0,0,1,0,1.09C23.641,12.849,18.911,20,12,20ZM2.23,12c1.189,1.573,4.961,6,9.77,6s8.581-4.427,9.77-6C20.581,10.427,16.809,6,12,6S3.419,10.427,2.23,12Z"
42
- }));
43
- };
16
+ const EyeIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
17
+ viewBox: "0 0 32 32"
18
+ }, props), _react.default.createElement("path", {
19
+ d: "M29.769 15.36C29.519 15.06 23.562 8 16 8S2.481 15.06 2.231 15.36a1 1 0 000 1.28C2.481 16.94 8.438 24 16 24s13.519-7.06 13.769-7.36a1 1 0 000-1.28zM16 22c-5.372 0-10.05-4.336-11.647-6 1.028-1.07 3.33-3.243 6.269-4.66a6 6 0 1010.757 0c2.939 1.416 5.24 3.59 6.268 4.66-1.598 1.665-6.275 6-11.647 6z"
20
+ }));
44
21
 
45
- EyeIcon.displayName = 'EyeIcon';
46
22
  EyeIcon.propTypes = {
47
- color: _propTypes.string,
48
23
  size: _propTypes.number
49
24
  };
50
25
  EyeIcon.defaultProps = {
51
- color: _colors.default.iconColor,
52
26
  size: 40
53
27
  };
54
28
  var _default = EyeIcon;
@@ -16,7 +16,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
16
16
  const UsersIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
17
17
  viewBox: "0 0 32 32"
18
18
  }, props), _react.default.createElement("path", {
19
- d: "M28.465 13.771A8.125 8.125 0 1 0 15.859 3.626 9.963 9.963 0 0 0 11.25 2.5c-5.522 0-10 4.478-10 10 0 2.7 1.071 5.148 2.81 6.946A10.945 10.945 0 0 0 0 27.963v1.844c0 1.206.986 2.192 2.192 2.192h18.115a2.198 2.198 0 0 0 2.192-2.192v-1.844c0-1.444-.284-2.824-.796-4.089h8.796c.825 0 1.5-.675 1.5-1.5v-2.25c0-2.671-1.416-5.025-3.535-6.354zM22.625 3c2.826 0 5.125 2.299 5.125 5.125s-2.299 5.125-5.125 5.125c-.483 0-.949-.069-1.391-.194a9.966 9.966 0 0 0-2.945-7.657A5.125 5.125 0 0 1 22.625 3zM11.25 5.5c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7zM19.5 29H3v-1.036a7.96 7.96 0 0 1 3.56-6.631 9.96 9.96 0 0 0 4.69 1.168 9.958 9.958 0 0 0 4.685-1.165 8.16 8.16 0 0 1 1.224 1.006 7.903 7.903 0 0 1 2.341 5.621v1.038zm9.5-8.125h-9.117c-.44-.516-.925-.991-1.451-1.419.95-.981 1.7-2.156 2.188-3.459a8.12 8.12 0 0 0 4.86-.264 4.493 4.493 0 0 1 2.199 1.215 4.465 4.465 0 0 1 1.325 3.175v.751h-.003z"
19
+ d: "M6.421 16.496C6.15 15.635 6 14.773 6 14c0-3.308 2.692-6 6-6 1.069 0 2.073.283 2.944.775A6 6 0 0120 6c3.308 0 6 2.692 6 6 0 .773-.15 1.635-.421 2.496C28.166 15.525 30 18.051 30 21c0 1.654-1.346 3-3 3h-5.172A3.004 3.004 0 0119 26H5c-1.654 0-3-1.346-3-3 0-2.949 1.834-5.475 4.421-6.504zM8 14c0 2.479 2.069 6 4 6s4-3.521 4-6c0-2.206-1.794-4-4-4s-4 1.794-4 4zm12-6a4 4 0 00-3.49 2.05A5.974 5.974 0 0118 14c0 .773-.15 1.635-.421 2.496a7 7 0 012.315 1.506L20 18c1.931 0 4-3.521 4-6 0-2.206-1.794-4-4-4zm8 13a5.006 5.006 0 00-3.194-4.66 9.92 9.92 0 01-.43.737c-.903 1.402-1.995 2.331-3.156 2.717A6.93 6.93 0 0121.927 22H27c.551 0 1-.449 1-1zM5 24h14c.551 0 1-.449 1-1a5.006 5.006 0 00-3.194-4.66 9.92 9.92 0 01-.43.737C15.162 20.962 13.608 22 12 22c-1.608 0-3.162-1.038-4.376-2.923a10.13 10.13 0 01-.43-.737A5.006 5.006 0 004 23c0 .551.449 1 1 1z"
20
20
  }));
21
21
 
22
22
  UsersIcon.propTypes = {
@@ -14,27 +14,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
14
14
  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); }
15
15
 
16
16
  const VisibilityIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
17
- viewBox: "0 0 256 256"
17
+ viewBox: "0 0 32 32"
18
18
  }, props), _react.default.createElement("path", {
19
- d: "M254.89 122.97c-.36-.78-9.08-19.38-29.04-37.79C207.48 68.22 175.58 48 128 48S48.52 68.22 30.14 85.18c-19.95 18.41-28.67 37-29.04 37.79a12.026 12.026 0 0 0 0 10.06c.36.78 9.08 19.38 29.04 37.79C48.52 187.78 80.42 208 128 208s79.48-20.22 97.86-37.18c19.95-18.41 28.67-37 29.04-37.79 1.47-3.19 1.47-6.87-.01-10.06zM184 128c0 30.88-25.12 56-56 56s-56-25.12-56-56 25.12-56 56-56 56 25.12 56 56zm-158.3 0c3.54-5.84 10.5-15.91 21.44-25.84 2.49-2.26 5.05-4.39 7.68-6.4C50.44 105.63 48 116.53 48 128s2.44 22.37 6.81 32.24c-2.62-2.01-5.18-4.14-7.68-6.4-10.93-9.93-17.9-20-21.43-25.84zm183.17 25.84a118.32 118.32 0 0 1-7.68 6.4c4.36-9.87 6.81-20.77 6.81-32.24s-2.44-22.37-6.81-32.24c2.62 2.01 5.18 4.14 7.68 6.4 10.94 9.93 17.91 20.01 21.44 25.83-3.54 5.85-10.51 15.92-21.44 25.85z",
20
- fill: props.color
21
- }), _react.default.createElement("circle", {
22
- cx: "128",
23
- cy: "128",
24
- r: "30",
25
- fill: props.color
26
- }), _react.default.createElement("path", {
27
- d: "M252.49 3.51c-4.69-4.69-12.29-4.69-16.97 0l-232 232c-4.69 4.69-4.69 12.28 0 16.97 4.69 4.69 12.29 4.69 16.97 0l232-232c4.68-4.68 4.68-12.28 0-16.97z",
28
- fill: props.color
19
+ d: "M29.769 15.36C29.519 15.06 23.562 8 16 8c-1.938 0-3.77.464-5.427 1.159L5.707 4.293a1 1 0 00-1.414 1.414l4.38 4.38c-3.774 2.108-6.282 5.08-6.442 5.274a1 1 0 000 1.278C2.481 16.94 8.438 24 16 24c1.938 0 3.77-.463 5.427-1.158l4.866 4.866a1 1 0 001.414-1.414l-4.38-4.38c3.774-2.108 6.282-5.081 6.442-5.274a1 1 0 000-1.278zM16 22c-5.372 0-10.05-4.336-11.647-6 .973-1.014 3.088-3.015 5.805-4.428l.25.25a6 6 0 007.77 7.77l1.699 1.699C18.653 21.727 17.349 22 16 22zm5.842-1.572l-9.719-9.719C13.347 10.274 14.651 10 16 10c5.372 0 10.049 4.335 11.647 6-.973 1.014-3.088 3.015-5.805 4.428z"
29
20
  }));
30
21
 
31
- VisibilityIcon.displayName = 'VisibilityIcon';
32
22
  VisibilityIcon.propTypes = {
33
- color: _propTypes.string,
34
23
  size: _propTypes.number
35
24
  };
36
25
  VisibilityIcon.defaultProps = {
37
- color: '#000',
38
26
  size: 40
39
27
  };
40
28
  var _default = VisibilityIcon;
@@ -108,7 +108,7 @@ const ResponsiveTabs = _ref => {
108
108
  } = _ref,
109
109
  rest = _objectWithoutProperties(_ref, ["tabs", "defaultIndex", "children", "autoTabWidth", "onSelected"]);
110
110
 
111
- const [index, setIndex] = (0, _react.useState)(defaultIndex || 0);
111
+ const [index, setIndex] = (0, _react.useState)(defaultIndex < children.length ? defaultIndex : 0);
112
112
 
113
113
  const onSelectChange = (event, tabs) => {
114
114
  const names = tabs.map(tab => tab.name);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bright-components",
3
- "version": "10.2.1",
3
+ "version": "10.2.4",
4
4
  "private": false,
5
5
  "main": "./dist",
6
6
  "repository": {
@@ -2,4 +2,4 @@ Eye example
2
2
 
3
3
  ```js
4
4
  <EyeIcon />
5
- ```
5
+ ```
@@ -1,33 +1,18 @@
1
1
  import React from 'react';
2
+ import { number } from 'prop-types';
2
3
  import IconBase from 'react-icon-base';
3
- import { string, number } from 'prop-types';
4
- import colors from 'constants/colors';
5
4
 
6
- const EyeIcon = ({ size, ...props }) => (
7
- <IconBase {...props} size={size} viewBox="0 0 24 24">
8
- <rect transform="translate(0)" />
9
- <circle
10
- fill={props.color}
11
- cx="5"
12
- cy="5"
13
- r="5"
14
- transform="translate(7 7)"
15
- />
16
- <path
17
- fill={props.color}
18
- d="M12,20C5.089,20,.359,12.849.162,12.545a1,1,0,0,1,0-1.09C.359,11.15,5.089,4,12,4s11.641,7.15,11.838,7.455a1,1,0,0,1,0,1.09C23.641,12.849,18.911,20,12,20ZM2.23,12c1.189,1.573,4.961,6,9.77,6s8.581-4.427,9.77-6C20.581,10.427,16.809,6,12,6S3.419,10.427,2.23,12Z"
19
- />
5
+ const EyeIcon = props => (
6
+ <IconBase viewBox="0 0 32 32" {...props}>
7
+ <path d="M29.769 15.36C29.519 15.06 23.562 8 16 8S2.481 15.06 2.231 15.36a1 1 0 000 1.28C2.481 16.94 8.438 24 16 24s13.519-7.06 13.769-7.36a1 1 0 000-1.28zM16 22c-5.372 0-10.05-4.336-11.647-6 1.028-1.07 3.33-3.243 6.269-4.66a6 6 0 1010.757 0c2.939 1.416 5.24 3.59 6.268 4.66-1.598 1.665-6.275 6-11.647 6z" />
20
8
  </IconBase>
21
9
  );
22
- EyeIcon.displayName = 'EyeIcon';
23
10
 
24
11
  EyeIcon.propTypes = {
25
- color: string,
26
12
  size: number
27
13
  };
28
14
 
29
15
  EyeIcon.defaultProps = {
30
- color: colors.iconColor,
31
16
  size: 40
32
17
  };
33
18
 
@@ -4,7 +4,7 @@ import IconBase from 'react-icon-base';
4
4
 
5
5
  const UsersIcon = props => (
6
6
  <IconBase viewBox="0 0 32 32" {...props}>
7
- <path d="M28.465 13.771A8.125 8.125 0 1 0 15.859 3.626 9.963 9.963 0 0 0 11.25 2.5c-5.522 0-10 4.478-10 10 0 2.7 1.071 5.148 2.81 6.946A10.945 10.945 0 0 0 0 27.963v1.844c0 1.206.986 2.192 2.192 2.192h18.115a2.198 2.198 0 0 0 2.192-2.192v-1.844c0-1.444-.284-2.824-.796-4.089h8.796c.825 0 1.5-.675 1.5-1.5v-2.25c0-2.671-1.416-5.025-3.535-6.354zM22.625 3c2.826 0 5.125 2.299 5.125 5.125s-2.299 5.125-5.125 5.125c-.483 0-.949-.069-1.391-.194a9.966 9.966 0 0 0-2.945-7.657A5.125 5.125 0 0 1 22.625 3zM11.25 5.5c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.14-7-7 3.14-7 7-7zM19.5 29H3v-1.036a7.96 7.96 0 0 1 3.56-6.631 9.96 9.96 0 0 0 4.69 1.168 9.958 9.958 0 0 0 4.685-1.165 8.16 8.16 0 0 1 1.224 1.006 7.903 7.903 0 0 1 2.341 5.621v1.038zm9.5-8.125h-9.117c-.44-.516-.925-.991-1.451-1.419.95-.981 1.7-2.156 2.188-3.459a8.12 8.12 0 0 0 4.86-.264 4.493 4.493 0 0 1 2.199 1.215 4.465 4.465 0 0 1 1.325 3.175v.751h-.003z" />
7
+ <path d="M6.421 16.496C6.15 15.635 6 14.773 6 14c0-3.308 2.692-6 6-6 1.069 0 2.073.283 2.944.775A6 6 0 0120 6c3.308 0 6 2.692 6 6 0 .773-.15 1.635-.421 2.496C28.166 15.525 30 18.051 30 21c0 1.654-1.346 3-3 3h-5.172A3.004 3.004 0 0119 26H5c-1.654 0-3-1.346-3-3 0-2.949 1.834-5.475 4.421-6.504zM8 14c0 2.479 2.069 6 4 6s4-3.521 4-6c0-2.206-1.794-4-4-4s-4 1.794-4 4zm12-6a4 4 0 00-3.49 2.05A5.974 5.974 0 0118 14c0 .773-.15 1.635-.421 2.496a7 7 0 012.315 1.506L20 18c1.931 0 4-3.521 4-6 0-2.206-1.794-4-4-4zm8 13a5.006 5.006 0 00-3.194-4.66 9.92 9.92 0 01-.43.737c-.903 1.402-1.995 2.331-3.156 2.717A6.93 6.93 0 0121.927 22H27c.551 0 1-.449 1-1zM5 24h14c.551 0 1-.449 1-1a5.006 5.006 0 00-3.194-4.66 9.92 9.92 0 01-.43.737C15.162 20.962 13.608 22 12 22c-1.608 0-3.162-1.038-4.376-2.923a10.13 10.13 0 01-.43-.737A5.006 5.006 0 004 23c0 .551.449 1 1 1z" />
8
8
  </IconBase>
9
9
  );
10
10
 
@@ -1,29 +1,18 @@
1
1
  import React from 'react';
2
- import { string, number } from 'prop-types';
2
+ import { number } from 'prop-types';
3
3
  import IconBase from 'react-icon-base';
4
4
 
5
5
  const VisibilityIcon = props => (
6
- <IconBase viewBox="0 0 256 256" {...props}>
7
- <path
8
- d="M254.89 122.97c-.36-.78-9.08-19.38-29.04-37.79C207.48 68.22 175.58 48 128 48S48.52 68.22 30.14 85.18c-19.95 18.41-28.67 37-29.04 37.79a12.026 12.026 0 0 0 0 10.06c.36.78 9.08 19.38 29.04 37.79C48.52 187.78 80.42 208 128 208s79.48-20.22 97.86-37.18c19.95-18.41 28.67-37 29.04-37.79 1.47-3.19 1.47-6.87-.01-10.06zM184 128c0 30.88-25.12 56-56 56s-56-25.12-56-56 25.12-56 56-56 56 25.12 56 56zm-158.3 0c3.54-5.84 10.5-15.91 21.44-25.84 2.49-2.26 5.05-4.39 7.68-6.4C50.44 105.63 48 116.53 48 128s2.44 22.37 6.81 32.24c-2.62-2.01-5.18-4.14-7.68-6.4-10.93-9.93-17.9-20-21.43-25.84zm183.17 25.84a118.32 118.32 0 0 1-7.68 6.4c4.36-9.87 6.81-20.77 6.81-32.24s-2.44-22.37-6.81-32.24c2.62 2.01 5.18 4.14 7.68 6.4 10.94 9.93 17.91 20.01 21.44 25.83-3.54 5.85-10.51 15.92-21.44 25.85z"
9
- fill={props.color}
10
- />
11
- <circle cx="128" cy="128" r="30" fill={props.color} />
12
- <path
13
- d="M252.49 3.51c-4.69-4.69-12.29-4.69-16.97 0l-232 232c-4.69 4.69-4.69 12.28 0 16.97 4.69 4.69 12.29 4.69 16.97 0l232-232c4.68-4.68 4.68-12.28 0-16.97z"
14
- fill={props.color}
15
- />
6
+ <IconBase viewBox="0 0 32 32" {...props}>
7
+ <path d="M29.769 15.36C29.519 15.06 23.562 8 16 8c-1.938 0-3.77.464-5.427 1.159L5.707 4.293a1 1 0 00-1.414 1.414l4.38 4.38c-3.774 2.108-6.282 5.08-6.442 5.274a1 1 0 000 1.278C2.481 16.94 8.438 24 16 24c1.938 0 3.77-.463 5.427-1.158l4.866 4.866a1 1 0 001.414-1.414l-4.38-4.38c3.774-2.108 6.282-5.081 6.442-5.274a1 1 0 000-1.278zM16 22c-5.372 0-10.05-4.336-11.647-6 .973-1.014 3.088-3.015 5.805-4.428l.25.25a6 6 0 007.77 7.77l1.699 1.699C18.653 21.727 17.349 22 16 22zm5.842-1.572l-9.719-9.719C13.347 10.274 14.651 10 16 10c5.372 0 10.049 4.335 11.647 6-.973 1.014-3.088 3.015-5.805 4.428z" />
16
8
  </IconBase>
17
9
  );
18
- VisibilityIcon.displayName = 'VisibilityIcon';
19
10
 
20
11
  VisibilityIcon.propTypes = {
21
- color: string,
22
12
  size: number
23
13
  };
24
14
 
25
15
  VisibilityIcon.defaultProps = {
26
- color: '#000',
27
16
  size: 40
28
17
  };
29
18
 
@@ -94,7 +94,9 @@ const ResponsiveTabs = ({
94
94
  onSelected,
95
95
  ...rest
96
96
  }) => {
97
- const [index, setIndex] = useState(defaultIndex || 0);
97
+ const [index, setIndex] = useState(
98
+ defaultIndex < children.length ? defaultIndex : 0
99
+ );
98
100
 
99
101
  const onSelectChange = (event, tabs) => {
100
102
  const names = tabs.map(tab => tab.name);
@@ -7,6 +7,20 @@ import ResponsiveTabs from '.';
7
7
  jest.mock('react-ga');
8
8
 
9
9
  describe('<ResponsiveTabs />', () => {
10
+ it('should handle when defaultIndex is larger than the amount of tabs', () => {
11
+ const { getByRole, getAllByRole } = render(
12
+ <ResponsiveTabs defaultIndex={3}>
13
+ <TabPanel name="One">One</TabPanel>
14
+ <TabPanel name="Two">Two</TabPanel>
15
+ </ResponsiveTabs>
16
+ );
17
+
18
+ expect(getByRole('combobox')).toBeInTheDocument();
19
+ expect(getAllByRole('option')).toHaveLength(2);
20
+
21
+ // doesn't throw an error is good
22
+ });
23
+
10
24
  it('should render a dropdown for selecting tabs on mobile', () => {
11
25
  const { getByRole, getAllByRole } = render(
12
26
  <ResponsiveTabs>