bright-components 10.2.2 → 10.2.5

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/ResponsiveTabs/index.js

@@ -108,10 +108,18 @@ const ResponsiveTabs = _ref => {
   } = _ref,
       rest = _objectWithoutProperties(_ref, ["tabs", "defaultIndex", "children", "autoTabWidth", "onSelected"]);
 
-  const [index, setIndex] = (0, _react.useState)(defaultIndex || 0);
+  const tabs = tabsProp || _react.default.Children.map(children, child => {
+    return child && child.props && child.props.name ? {
+      name: child.props.name,
+      counter: child.props.counter
+    } : null;
+  });
+
+  const [index, setIndex] = (0, _react.useState)(defaultIndex < tabs.length ? defaultIndex : 0);
+
+  const onSelectChange = (event, _tabs) => {
+    const names = _tabs.map(tab => tab.name);
 
-  const onSelectChange = (event, tabs) => {
-    const names = tabs.map(tab => tab.name);
     const newIndex = names.indexOf(event.target.value);
     setIndex(newIndex);
   };
@@ -120,13 +128,6 @@ const ResponsiveTabs = _ref => {
     setIndex(newIndex);
   };
 
-  const tabs = tabsProp || _react.default.Children.map(children, child => {
-    return child && child.props && child.props.name ? {
-      name: child.props.name,
-      counter: child.props.counter
-    } : null;
-  });
-
   const DesktopTabList = autoTabWidth ? AutoWidthTabList : StyledTabList;
   return _react.default.createElement(_Tabs.default, _extends({
     selectedIndex: index
@@ -151,7 +152,7 @@ const ResponsiveTabs = _ref => {
         onSelected(i);
       }
     },
-    value: tabs[index].name
+    value: tabs == null ? void 0 : tabs[index].name
   }, tabs.map(_ref3 => {
     let {
       name,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bright-components",
-	"version": "10.2.2",
+	"version": "10.2.5",
 	"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/ResponsiveTabs/index.js

@@ -94,18 +94,6 @@ const ResponsiveTabs = ({
 	onSelected,
 	...rest
 }) => {
-	const [index, setIndex] = useState(defaultIndex || 0);
-
-	const onSelectChange = (event, tabs) => {
-		const names = tabs.map(tab => tab.name);
-		const newIndex = names.indexOf(event.target.value);
-		setIndex(newIndex);
-	};
-
-	const onSelect = newIndex => {
-		setIndex(newIndex);
-	};
-
 	const tabs =
 		tabsProp ||
 		React.Children.map(children, child => {
@@ -117,6 +105,20 @@ const ResponsiveTabs = ({
 				: null;
 		});
 
+	const [index, setIndex] = useState(
+		defaultIndex < tabs.length ? defaultIndex : 0
+	);
+
+	const onSelectChange = (event, _tabs) => {
+		const names = _tabs.map(tab => tab.name);
+		const newIndex = names.indexOf(event.target.value);
+		setIndex(newIndex);
+	};
+
+	const onSelect = newIndex => {
+		setIndex(newIndex);
+	};
+
 	const DesktopTabList = autoTabWidth ? AutoWidthTabList : StyledTabList;
 
 	return (
@@ -140,7 +142,7 @@ const ResponsiveTabs = ({
 							onSelected(i);
 						}
 					}}
-					value={tabs[index].name}
+					value={tabs?.[index].name}
 				>
 					{tabs.map(({ name, counter = null }) => (
 						<Option key={name} value={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>

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

@@ -1,29 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = require("prop-types");
-
-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); }
-
-const VisibleIcon = 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"
-}));
-
-VisibleIcon.propTypes = {
-  size: _propTypes.number
-};
-VisibleIcon.defaultProps = {
-  size: 40
-};
-var _default = VisibleIcon;
-exports.default = _default;

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

@@ -1,5 +0,0 @@
-Visible example
-
-```js
-<VisibleIcon />
-```

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { number } from 'prop-types';
-import IconBase from 'react-icon-base';
-
-const VisibleIcon = 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>
-);
-
-VisibleIcon.propTypes = {
-	size: number
-};
-
-VisibleIcon.defaultProps = {
-	size: 40
-};
-
-export default VisibleIcon;