bright-components 10.2.1 → 10.2.4

package/.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+    "eslint.format.enable": true,
+    "editor.renderWhitespace": "all",
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true,
+    "cSpell.words": [
+        "autobind",
+        "brighthr",
+        "cronersupplieddocuments",
+        "firstname",
+        "Formik",
+        "lastname",
+        "pathnames",
+        "pendo",
+        "previewable",
+        "selectall",
+        "tailwindcss",
+        "testid",
+        "testprops"
+    ]
+}

package/dist/components/Icons/Eye/index.js

@@ -5,50 +5,24 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactIconBase = _interopRequireDefault(require("react-icon-base"));
-
 var _propTypes = require("prop-types");
 
-var _colors = _interopRequireDefault(require("../../../constants/colors"));
+var _reactIconBase = _interopRequireDefault(require("react-icon-base"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 _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; }
-
-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; }
-
-const EyeIcon = _ref => {
-  let {
-    size
-  } = _ref,
-      props = _objectWithoutProperties(_ref, ["size"]);
-
-  return _react.default.createElement(_reactIconBase.default, _extends({}, props, {
-    size: size,
-    viewBox: "0 0 24 24"
-  }), _react.default.createElement("rect", {
-    transform: "translate(0)"
-  }), _react.default.createElement("circle", {
-    fill: props.color,
-    cx: "5",
-    cy: "5",
-    r: "5",
-    transform: "translate(7 7)"
-  }), _react.default.createElement("path", {
-    fill: props.color,
-    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"
-  }));
-};
+const EyeIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
+  viewBox: "0 0 32 32"
+}, props), _react.default.createElement("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"
+}));
 
-EyeIcon.displayName = 'EyeIcon';
 EyeIcon.propTypes = {
-  color: _propTypes.string,
   size: _propTypes.number
 };
 EyeIcon.defaultProps = {
-  color: _colors.default.iconColor,
   size: 40
 };
 var _default = EyeIcon;

package/dist/components/Icons/Users/index.js

@@ -16,7 +16,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const UsersIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
   viewBox: "0 0 32 32"
 }, props), _react.default.createElement("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"
+  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"
 }));
 
 UsersIcon.propTypes = {

package/dist/components/Icons/Visibility/index.js

@@ -14,27 +14,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 
 const VisibilityIcon = props => _react.default.createElement(_reactIconBase.default, _extends({
-  viewBox: "0 0 256 256"
+  viewBox: "0 0 32 32"
 }, props), _react.default.createElement("path", {
-  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",
-  fill: props.color
-}), _react.default.createElement("circle", {
-  cx: "128",
-  cy: "128",
-  r: "30",
-  fill: props.color
-}), _react.default.createElement("path", {
-  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",
-  fill: props.color
+  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"
 }));
 
-VisibilityIcon.displayName = 'VisibilityIcon';
 VisibilityIcon.propTypes = {
-  color: _propTypes.string,
   size: _propTypes.number
 };
 VisibilityIcon.defaultProps = {
-  color: '#000',
   size: 40
 };
 var _default = VisibilityIcon;

package/dist/components/ResponsiveTabs/index.js

@@ -108,7 +108,7 @@ const ResponsiveTabs = _ref => {
   } = _ref,
       rest = _objectWithoutProperties(_ref, ["tabs", "defaultIndex", "children", "autoTabWidth", "onSelected"]);
 
-  const [index, setIndex] = (0, _react.useState)(defaultIndex || 0);
+  const [index, setIndex] = (0, _react.useState)(defaultIndex < children.length ? defaultIndex : 0);
 
   const onSelectChange = (event, tabs) => {
     const names = tabs.map(tab => tab.name);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bright-components",
-	"version": "10.2.1",
+	"version": "10.2.4",
 	"private": false,
 	"main": "./dist",
 	"repository": {

package/src/components/Icons/Eye/examples.md

@@ -2,4 +2,4 @@ Eye example
 
 ```js
 <EyeIcon />
-```
+```

package/src/components/Icons/Eye/index.js

@@ -1,33 +1,18 @@
 import React from 'react';
+import { number } from 'prop-types';
 import IconBase from 'react-icon-base';
-import { string, number } from 'prop-types';
-import colors from 'constants/colors';
 
-const EyeIcon = ({ size, ...props }) => (
-	<IconBase {...props} size={size} viewBox="0 0 24 24">
-		<rect transform="translate(0)" />
-		<circle
-			fill={props.color}
-			cx="5"
-			cy="5"
-			r="5"
-			transform="translate(7 7)"
-		/>
-		<path
-			fill={props.color}
-			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"
-		/>
+const EyeIcon = props => (
+	<IconBase viewBox="0 0 32 32" {...props}>
+		<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" />
 	</IconBase>
 );
-EyeIcon.displayName = 'EyeIcon';
 
 EyeIcon.propTypes = {
-	color: string,
 	size: number
 };
 
 EyeIcon.defaultProps = {
-	color: colors.iconColor,
 	size: 40
 };
 

package/src/components/Icons/Users/index.js

@@ -4,7 +4,7 @@ import IconBase from 'react-icon-base';
 
 const UsersIcon = props => (
 	<IconBase viewBox="0 0 32 32" {...props}>
-		<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" />
+		<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" />
 	</IconBase>
 );
 

package/src/components/Icons/Visibility/index.js

@@ -1,29 +1,18 @@
 import React from 'react';
-import { string, number } from 'prop-types';
+import { number } from 'prop-types';
 import IconBase from 'react-icon-base';
 
 const VisibilityIcon = props => (
-	<IconBase viewBox="0 0 256 256" {...props}>
-		<path
-			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"
-			fill={props.color}
-		/>
-		<circle cx="128" cy="128" r="30" fill={props.color} />
-		<path
-			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"
-			fill={props.color}
-		/>
+	<IconBase viewBox="0 0 32 32" {...props}>
+		<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" />
 	</IconBase>
 );
-VisibilityIcon.displayName = 'VisibilityIcon';
 
 VisibilityIcon.propTypes = {
-	color: string,
 	size: number
 };
 
 VisibilityIcon.defaultProps = {
-	color: '#000',
 	size: 40
 };
 

package/src/components/ResponsiveTabs/index.js

@@ -94,7 +94,9 @@ const ResponsiveTabs = ({
 	onSelected,
 	...rest
 }) => {
-	const [index, setIndex] = useState(defaultIndex || 0);
+	const [index, setIndex] = useState(
+		defaultIndex < children.length ? defaultIndex : 0
+	);
 
 	const onSelectChange = (event, tabs) => {
 		const names = tabs.map(tab => tab.name);

package/src/components/ResponsiveTabs/test.js

@@ -7,6 +7,20 @@ import ResponsiveTabs from '.';
 jest.mock('react-ga');
 
 describe('<ResponsiveTabs />', () => {
+	it('should handle when defaultIndex is larger than the amount of tabs', () => {
+		const { getByRole, getAllByRole } = render(
+			<ResponsiveTabs defaultIndex={3}>
+				<TabPanel name="One">One</TabPanel>
+				<TabPanel name="Two">Two</TabPanel>
+			</ResponsiveTabs>
+		);
+
+		expect(getByRole('combobox')).toBeInTheDocument();
+		expect(getAllByRole('option')).toHaveLength(2);
+
+		// doesn't throw an error is good
+	});
+
 	it('should render a dropdown for selecting tabs on mobile', () => {
 		const { getByRole, getAllByRole } = render(
 			<ResponsiveTabs>