bright-components 9.32.0 → 10.1.0

package/dist/components/SearchInput/index.js

@@ -21,57 +21,68 @@ var _Cross = _interopRequireDefault(require("../Icons/Cross"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex !important;\n\talign-items: center;\n\tmax-width: 300px;\n\tpadding: 4px 4px 4px ", ";\n\tmargin: ", " 0;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tborder: 2px solid ", ";\n\tborder-radius: 4px;\n\tsvg {\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t}\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tborder-radius: 2px;\n\tpadding: ", ";\n\n\t", "\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\theight: ", " !important;\n\tmin-height: ", " !important;\n\tflex: 1;\n\toverflow: auto;\n\tmargin: 0 !important;\n\tborder: 0 !important;\n\toutline: 0;\n\tvertical-align: middle;\n\t&:hover,\n\t&:focus {\n\t\tbox-shadow: none;\n\t}\n"]);
+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; }
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+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; }
 
-var InputField = (0, _styledComponents.default)(_Input.default)(_templateObject(), _spacing.default.s4, _spacing.default.s4);
+const InputField = (0, _styledComponents.default)(_Input.default)`
+	height: ${_spacing.default.s4} !important;
+	min-height: ${_spacing.default.s4} !important;
+	flex: 1;
+	overflow: auto;
+	margin: 0 !important;
+	border: 0 !important;
+	outline: 0;
+	vertical-align: middle;
+	&:hover,
+	&:focus {
+		box-shadow: none;
+	}
+`;
 InputField.displayName = 'InputField';
-var CrossIcon = (0, _styledComponents.default)(_Cross.default)(_templateObject2(), _spacing.default.s1, function (_ref) {
-  var filter = _ref.filter;
-  return filter ? "color: " + _colors.default.primaryDarker + ";\n\t\t\tbackground-color: " + _colors.default.bodyBackground + ";\n\t\t\tcursor: pointer;\n\t\t\t&:hover {\n\t\t\t\tcolor: white;\n\t\t\t\tbackground-color: " + _colors.default.primaryDark + ";\n\t\t\t}" : "color: lightgrey;\n\t\t\tbackground-color: " + _colors.default.disabledBackground + ";";
-});
+const CrossIcon = (0, _styledComponents.default)(_Cross.default)`
+	border-radius: 2px;
+	padding: ${_spacing.default.s1};
+
+	${_ref => {
+  let {
+    filter
+  } = _ref;
+  return filter ? `color: ${_colors.default.primaryDarker};
+			background-color: ${_colors.default.bodyBackground};
+			cursor: pointer;
+			&:hover {
+				color: white;
+				background-color: ${_colors.default.primaryDark};
+			}` : `color: lightgrey;
+			background-color: ${_colors.default.disabledBackground};`;
+}}
+`;
 CrossIcon.displayName = 'CrossIcon';
-
-var Container = _styledComponents.default.div(_templateObject3(), _spacing.default.s1, _spacing.default.s1, _colors.default.borderColor);
-
+const Container = _styledComponents.default.div`
+	display: flex !important;
+	align-items: center;
+	max-width: 300px;
+	padding: 4px 4px 4px ${_spacing.default.s1};
+	margin: ${_spacing.default.s1} 0;
+	display: inline-block;
+	vertical-align: middle;
+	border: 2px solid ${_colors.default.borderColor};
+	border-radius: 4px;
+	svg {
+		display: inline-block;
+		vertical-align: middle;
+	}
+`;
 Container.displayName = 'Container';
 
-var SearchInput = function SearchInput(_ref2) {
-  var _onChange = _ref2.onChange,
-      value = _ref2.value,
-      placeholder = _ref2.placeholder,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["onChange", "value", "placeholder"]);
+const SearchInput = _ref2 => {
+  let {
+    onChange,
+    value,
+    placeholder
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, ["onChange", "value", "placeholder"]);
 
   return _react.default.createElement(Container, rest, _react.default.createElement(_Search.default, {
     size: 16,
@@ -80,10 +91,13 @@ var SearchInput = function SearchInput(_ref2) {
       verticalAlign: 'middle'
     }
   }), _react.default.createElement(InputField, {
-    onChange: function onChange(_ref3) {
-      var newValue = _ref3.currentTarget.value;
-
-      _onChange(newValue);
+    onChange: _ref3 => {
+      let {
+        currentTarget: {
+          value: newValue
+        }
+      } = _ref3;
+      onChange(newValue);
     },
     value: value,
     placeholder: placeholder,
@@ -91,9 +105,7 @@ var SearchInput = function SearchInput(_ref2) {
   }), _react.default.createElement(CrossIcon, {
     filter: value,
     size: 32,
-    onClick: function onClick() {
-      return _onChange('');
-    },
+    onClick: () => onChange(''),
     "data-testid": "clear-button"
   }));
 };

package/dist/components/Select/Optgroup/index.js

@@ -9,11 +9,15 @@ var _propTypes = require("prop-types");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
 
-var OptGroup = function OptGroup(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+const OptGroup = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["children"]);
 
   return _react.default.createElement("optgroup", props, children);
 };

package/dist/components/Select/Option/index.js

@@ -11,12 +11,16 @@ 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); }
 
+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; }
 
-var Option = function Option(_ref) {
-  var children = _ref.children,
-      value = _ref.value,
-      props = _objectWithoutPropertiesLoose(_ref, ["children", "value"]);
+const Option = _ref => {
+  let {
+    children,
+    value
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["children", "value"]);
 
   return _react.default.createElement("option", _extends({}, props, {
     value: value

package/dist/components/Select/index.js

@@ -25,38 +25,52 @@ 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); }
 
-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; }
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tvertical-align: top;\n\tpadding-right: ", " !important;\n\toutline: none;\n\tbackground-color: ", ";\n\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='", "' height='", "' viewBox='0 0 20 20'%3E %3Cpath d='M10 1l-5 7h10l-5-7zM10 19l5-7h-10l5 7z' fill='%23", "'%3E%3C/path%3E %3C/svg%3E\");\n\tbackground-repeat: no-repeat;\n\tbackground-position: right 5px center;\n\n\t", "\n\n\t&&::-ms-expand {\n\t\tdisplay: none;\n\t}\n\n    -moz-appearance: none;\n\n\t&.option {\n\t\tfont-family: ", ";\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+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 _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var size = (0, _stripUnit.default)(_spacing.default.s2);
-
-var arrowColour = _colors.default.borderColor.slice(1);
+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; }
 
-var Box = (0, _styledComponents.default)(_Input.default.withComponent('select'))(_templateObject(), _spacing.default.s4, _colors.default.white, size, size, arrowColour, function (_ref) {
-  var placeholder = _ref.placeholder,
-      value = _ref.value;
-  return placeholder && value === '' && "color: " + _colors.default.placeholder + "; font-family: " + _vars.default.fontStackNormal + ";";
-}, _vars.default.fontStackNormal);
+const size = (0, _stripUnit.default)(_spacing.default.s2);
+
+const arrowColour = _colors.default.borderColor.slice(1);
+
+const Box = (0, _styledComponents.default)(_Input.default.withComponent('select'))`
+	vertical-align: top;
+	padding-right: ${_spacing.default.s4} !important;
+	outline: none;
+	background-color: ${_colors.default.white};
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${size}' height='${size}' viewBox='0 0 20 20'%3E %3Cpath d='M10 1l-5 7h10l-5-7zM10 19l5-7h-10l5 7z' fill='%23${arrowColour}'%3E%3C/path%3E %3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 5px center;
+
+	${_ref => {
+  let {
+    placeholder,
+    value
+  } = _ref;
+  return placeholder && value === '' && `color: ${_colors.default.placeholder}; font-family: ${_vars.default.fontStackNormal};`;
+}}
+
+	&&::-ms-expand {
+		display: none;
+	}
+
+    -moz-appearance: none;
+
+	&.option {
+		font-family: ${_vars.default.fontStackNormal};
+	}
+`;
 Box.displayName = 'Box';
 
-var Select = function Select(_ref2) {
-  var children = _ref2.children,
-      name = _ref2.name,
-      gaAction = _ref2.gaAction,
-      gaTrackValue = _ref2.gaTrackValue,
-      placeholder = _ref2.placeholder,
-      props = _objectWithoutPropertiesLoose(_ref2, ["children", "name", "gaAction", "gaTrackValue", "placeholder"]);
+const Select = _ref2 => {
+  let {
+    children,
+    name,
+    gaAction,
+    gaTrackValue,
+    placeholder
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, ["children", "name", "gaAction", "gaTrackValue", "placeholder"]);
 
   props['data-track-action'] = gaAction;
 

package/dist/components/SelectedFile/index.js

@@ -23,101 +23,78 @@ var _FileIcons = _interopRequireDefault(require("../FileIcons"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: relative;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\twidth: ", ";\n\tbackground: ", ";\n\tz-index: 0;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tfloat: left;\n\tmargin-right: ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tfloat: right;\n\tcolor: ", ";\n\tcursor: pointer;\n\tmargin-top: 2px;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: 80% !important;\n\tfloat: left;\n\twidth: auto;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 40px;\n\tcolor: ", ";\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\n\t@media screen and (max-width: ", ") {\n\t\twidth: 70% !important;\n\t}\n"]);
+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; }
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\toverflow: hidden;\n\tposition: relative;\n\twidth: 100%;\n\tfloat: left;\n\tbackground: ", ";\n\tpadding: ", ";\n\tmargin-bottom: ", ";\n\tborder-radius: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var StyledSelectedFile = _styledComponents.default.div(_templateObject(), _colors.default.greyPale, _spacing.default.s2, _spacing.default.s1, _vars.default.borderRadius);
+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 StyledSelectedFile = _styledComponents.default.div`
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+	float: left;
+	background: ${_colors.default.greyPale};
+	padding: ${_spacing.default.s2};
+	margin-bottom: ${_spacing.default.s1};
+	border-radius: ${_vars.default.borderRadius};
+`;
 StyledSelectedFile.displayName = StyledSelectedFile;
-
-var FileName = _styledComponents.default.div(_templateObject2(), function (_ref) {
-  var hasError = _ref.hasError;
+const FileName = _styledComponents.default.div`
+	width: 80% !important;
+	float: left;
+	width: auto;
+	position: absolute;
+	top: 0;
+	left: 40px;
+	color: ${_ref => {
+  let {
+    hasError
+  } = _ref;
   return hasError ? _colors.default.error : _colors.default.textColor;
-}, _breakpoints.default.smallDesktop);
-
+}};
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+
+	@media screen and (max-width: ${_breakpoints.default.smallDesktop}) {
+		width: 70% !important;
+	}
+`;
 FileName.displayName = 'FileName';
-var RemoveFile = (0, _styledComponents.default)(_CrossCircle.default)(_templateObject3(), _colors.default.primary);
+const RemoveFile = (0, _styledComponents.default)(_CrossCircle.default)`
+	float: right;
+	color: ${_colors.default.primary};
+	cursor: pointer;
+	margin-top: 2px;
+`;
 RemoveFile.displayName = 'RemoveFile';
-var FileIconStyled = (0, _styledComponents.default)(_FileIcons.default)(_templateObject4(), _spacing.default.s2);
+const FileIconStyled = (0, _styledComponents.default)(_FileIcons.default)`
+	float: left;
+	margin-right: ${_spacing.default.s2};
+`;
 FileIconStyled.displayName = 'FileIconStyled';
-
-var Progress = _styledComponents.default.div(_templateObject5(), function (props) {
-  return props.progress;
-}, _colors.default.primaryLighter);
-
+const Progress = _styledComponents.default.div`
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: ${props => props.progress};
+	background: ${_colors.default.primaryLighter};
+	z-index: 0;
+`;
 Progress.displayName = 'Progress';
-
-var Content = _styledComponents.default.div(_templateObject6());
-
+const Content = _styledComponents.default.div`
+	position: relative;
+`;
 Content.displayName = 'Content';
 
-var SelectedFile = function SelectedFile(_ref2) {
-  var fileName = _ref2.fileName,
-      removeFile = _ref2.removeFile,
-      progress = _ref2.progress,
-      hasError = _ref2.hasError,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["fileName", "removeFile", "progress", "hasError"]);
+const SelectedFile = _ref2 => {
+  let {
+    fileName,
+    removeFile,
+    progress,
+    hasError
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, ["fileName", "removeFile", "progress", "hasError"]);
 
   if (!fileName) {
     return null;