brainly-style-guide - npm Package Compare versions

Comparing version 187.0.0 to 188.0.0

commonjs/components/accordion/Accordion.js

@@ -18,4 +18,2 @@ "use strict";
 
-var _invariant = _interopRequireDefault(require("../utils/invariant"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -93,8 +91,8 @@
   if (_utils.__DEV__) {
-    (0, _invariant.default)(!(isControlled && !onChange), // eslint-disable-next-line max-len
+    (0, _utils.invariant)(!(isControlled && !onChange), // eslint-disable-next-line max-len
     ' You provided an `expanded` prop to a Accordion without an `onChange` handler. Users won`t be able to switch between expanded/collapsed state.');
-    (0, _invariant.default)(!(wasControlled && !isControlled), 'You cannot change Accordion component from controlled to uncontrolled variant.');
-    (0, _invariant.default)(!(!wasControlled && isControlled), 'You cannot change Accordion component from uncontrolled to controlled variant.');
-    (0, _invariant.default)(!(isControlled && allowMultiple), 'allowMultiple is not working in controlled Accordion');
-    (0, _invariant.default)(!(!allowMultiple && Array.isArray(defaultExpanded) && defaultExpanded.length > 1), // eslint-disable-next-line max-len
+    (0, _utils.invariant)(!(wasControlled && !isControlled), 'You cannot change Accordion component from controlled to uncontrolled variant.');
+    (0, _utils.invariant)(!(!wasControlled && isControlled), 'You cannot change Accordion component from uncontrolled to controlled variant.');
+    (0, _utils.invariant)(!(isControlled && allowMultiple), 'allowMultiple is not working in controlled Accordion');
+    (0, _utils.invariant)(!(!allowMultiple && Array.isArray(defaultExpanded) && defaultExpanded.length > 1), // eslint-disable-next-line max-len
     'defaultExpanded is an array with more than 1 element but allowMultiple prop is not set. The first value from the array was picked as a default expanded. Set allowMultiple attribute or provide only one default expanded.');
@@ -101,0 +99,0 @@ }

commonjs/components/buttons/Button.js

@@ -12,4 +12,10 @@ "use strict";
 
+var _Spinner = _interopRequireWildcard(require("../spinner/Spinner"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _utils = require("../utils");
+
+var _SPINNER_SIZE_MAP, _SPINNER_COLOR_MAP;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,6 +33,2 @@
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -40,10 +42,7 @@
 exports.BUTTON_SIZE = BUTTON_SIZE;
-var TOGGLE_BUTTON_TYPE = {
+var BUTTON_TYPE = {
   SOLID_LIGHT: 'solid-light',
   OUTLINE: 'outline',
   TRANSPARENT: 'transparent',
-  TRANSPARENT_LIGHT: 'transparent-light'
-};
-
-var BUTTON_TYPE = _objectSpread(_objectSpread({}, TOGGLE_BUTTON_TYPE), {}, {
+  TRANSPARENT_LIGHT: 'transparent-light',
   SOLID: 'solid',
@@ -58,4 +57,3 @@ SOLID_INVERTED: 'solid-inverted',
   FACEBOOK: 'facebook'
-});
-
+};
 exports.BUTTON_TYPE = BUTTON_TYPE;
@@ -68,2 +66,5 @@ var BUTTON_TOGGLE = {
 exports.BUTTON_TOGGLE = BUTTON_TOGGLE;
+var SPINNER_SIZE_MAP = (_SPINNER_SIZE_MAP = {}, _defineProperty(_SPINNER_SIZE_MAP, BUTTON_SIZE.L, _Spinner.SPINNER_SIZE.SMALL), _defineProperty(_SPINNER_SIZE_MAP, BUTTON_SIZE.M, _Spinner.SPINNER_SIZE.XSMALL), _defineProperty(_SPINNER_SIZE_MAP, BUTTON_SIZE.S, _Spinner.SPINNER_SIZE.XXSMALL), _SPINNER_SIZE_MAP);
+var SPINNER_COLOR_MAP = (_SPINNER_COLOR_MAP = {}, _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID, _Spinner.SPINNER_COLOR.WHITE), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID_INVERTED, _Spinner.SPINNER_COLOR.BLACK), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID_BLUE, _Spinner.SPINNER_COLOR.WHITE), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID_MINT, _Spinner.SPINNER_COLOR.WHITE), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID_LIGHT, _Spinner.SPINNER_COLOR.BLACK), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.OUTLINE, _Spinner.SPINNER_COLOR.BLACK), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT, _Spinner.SPINNER_COLOR.BLACK), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_LIGHT, _Spinner.SPINNER_COLOR.GRAY700), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_PEACH, _Spinner.SPINNER_COLOR.PEACH700), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_MUSTARD, _Spinner.SPINNER_COLOR.MUSTARD700), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_BLUE, _Spinner.SPINNER_COLOR.BLUE700), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_INVERTED, _Spinner.SPINNER_COLOR.WHITE), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.FACEBOOK, _Spinner.SPINNER_COLOR.WHITE), _SPINNER_COLOR_MAP);
+var TOGGLE_BUTTON_TYPES = ['solid-light', 'outline', 'transparent', 'transparent-light'];
 
@@ -73,4 +74,6 @@ var Button = function Button(_ref) {
 
-  var size = _ref.size,
-      type = _ref.type,
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'solid' : _ref$type,
       icon = _ref.icon,
@@ -82,8 +85,17 @@ iconOnly = _ref.iconOnly,
       disabled = _ref.disabled,
+      loading = _ref.loading,
       toggle = _ref.toggle,
       children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, ["size", "type", "icon", "iconOnly", "reversedOrder", "href", "fullWidth", "disabled", "toggle", "children", "className"]);
+      props = _objectWithoutProperties(_ref, ["size", "type", "icon", "iconOnly", "reversedOrder", "href", "fullWidth", "disabled", "loading", "toggle", "children", "className"]);
 
-  var btnClass = (0, _classnames.default)('sg-button', (_cx = {}, _defineProperty(_cx, "sg-button--".concat(String(size)), size), _defineProperty(_cx, "sg-button--".concat(String(type)), type), _defineProperty(_cx, 'sg-button--disabled', disabled), _defineProperty(_cx, 'sg-button--full-width', fullWidth), _defineProperty(_cx, 'sg-button--icon-only', Boolean(icon) && iconOnly), _defineProperty(_cx, "sg-button--".concat(String(type), "-toggle-").concat(String(toggle)), toggle), _defineProperty(_cx, 'sg-button--reversed-order', reversedOrder), _cx), className);
+  if (_utils.__DEV__) {
+    (0, _utils.invariant)(!(toggle === 'blue' && ![].concat(TOGGLE_BUTTON_TYPES, ['transparent-blue']).includes(type) || toggle === 'peach' && ![].concat(TOGGLE_BUTTON_TYPES, ['transparent-peach']).includes(type) || toggle === 'mustard' && ![].concat(TOGGLE_BUTTON_TYPES, ['transparent-mustard']).includes(type)), "Value of toggle property '".concat(String(toggle), "' has no effect when button type is set to '").concat(type, "'."));
+    (0, _utils.invariant)(!(iconOnly && !icon), "Using 'iconOnly' property has no effect when 'icon' property is not set.");
+    (0, _utils.invariant)(!(reversedOrder && !icon), "Using 'reversedOrder' property has no effect when 'icon' property is not set.");
+    (0, _utils.invariant)(!(iconOnly && reversedOrder), "Using 'reversedOrder' property has no effect when 'iconOnly' property is set.");
+  }
+
+  var isDisabled = disabled || loading;
+  var btnClass = (0, _classnames.default)('sg-button', (_cx = {}, _defineProperty(_cx, "sg-button--".concat(String(size)), size), _defineProperty(_cx, "sg-button--".concat(String(type)), type), _defineProperty(_cx, 'sg-button--disabled', isDisabled), _defineProperty(_cx, 'sg-button--loading', loading), _defineProperty(_cx, 'sg-button--full-width', fullWidth), _defineProperty(_cx, 'sg-button--icon-only', Boolean(icon) && iconOnly), _defineProperty(_cx, "sg-button--".concat(String(type), "-toggle-").concat(String(toggle)), toggle), _defineProperty(_cx, 'sg-button--reversed-order', reversedOrder), _cx), className);
   var iconClass = (0, _classnames.default)('sg-button__icon', _defineProperty({}, "sg-button__icon--".concat(size || ''), size));
@@ -102,4 +114,8 @@ var ico;
     href: href,
-    disabled: disabled,
+    disabled: isDisabled,
     role: href !== undefined ? 'button' : undefined
+  }), loading && /*#__PURE__*/React.createElement(_Spinner.default, {
+    size: SPINNER_SIZE_MAP[size],
+    color: SPINNER_COLOR_MAP[type],
+    className: "sg-button__spinner"
   }), ico, /*#__PURE__*/React.createElement("span", {
@@ -106,0 +122,0 @@ className: "sg-button__text"

commonjs/components/buttons/Button.stories.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.Outline = exports.Default = exports.default = void 0;
+exports.Default = exports.default = void 0;
 
@@ -15,2 +15,4 @@ var React = _interopRequireWildcard(require("react"));
 
+var _Icon = _interopRequireWildcard(require("icons/Icon"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,2 +24,33 @@
 
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var allIcons = Object.entries(_Icon.TYPE).reduce(function (acc, _ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      type = _ref2[1];
+
+  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, type));
+}, {});
 var _default = {
@@ -27,2 +60,10 @@ title: 'Components/Button',
     component: _Button.default
+  },
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+        options: allIcons
+      }
+    }
   }
@@ -32,14 +73,18 @@ };
 
-var Default = function Default() {
-  return /*#__PURE__*/React.createElement(_Button.default, null, "Button");
+var Default = function Default(_ref3) {
+  var icon = _ref3.icon,
+      args = _objectWithoutProperties(_ref3, ["icon"]);
+
+  return /*#__PURE__*/React.createElement(_Button.default, _extends({
+    icon: icon && /*#__PURE__*/React.createElement(_Icon.default, {
+      type: icon,
+      color: _Icon.ICON_COLOR.ADAPTIVE,
+      size: 24
+    })
+  }, args));
 };
 
 exports.Default = Default;
-
-var Outline = function Outline() {
-  return /*#__PURE__*/React.createElement(_Button.default, {
-    type: "outline"
-  }, "Button");
-};
-
-exports.Outline = Outline;
+Default.args = {
+  children: 'Button'
+};

commonjs/components/spinner/Spinner.js

@@ -8,3 +8,3 @@ "use strict";
 });
-exports.default = exports.SPINNER_SIZE = void 0;
+exports.default = exports.SPINNER_COLOR = exports.SPINNER_SIZE = void 0;
 
@@ -35,12 +35,24 @@ var React = _interopRequireWildcard(require("react"));
 exports.SPINNER_SIZE = SPINNER_SIZE;
+var SPINNER_COLOR = {
+  BLACK: 'black',
+  WHITE: 'white',
+  GRAY900: 'gray-900',
+  GRAY700: 'gray-700',
+  PEACH700: 'peach-700',
+  MUSTARD700: 'mustard-700',
+  BLUE700: 'blue-700'
+};
+exports.SPINNER_COLOR = SPINNER_COLOR;
 
 var Spinner = function Spinner(_ref) {
-  var light = _ref.light,
-      size = _ref.size,
+  var _classNames;
+
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? SPINNER_COLOR.BLACK : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SPINNER_SIZE.SMALL : _ref$size,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, ["light", "size", "className"]);
+      props = _objectWithoutProperties(_ref, ["color", "size", "className"]);
 
-  var spinnerClassNames = (0, _classnames.default)('sg-spinner', _defineProperty({
-    'sg-spinner--light': light
-  }, "sg-spinner--".concat(String(size)), size), className);
+  var spinnerClassNames = (0, _classnames.default)('sg-spinner', (_classNames = {}, _defineProperty(_classNames, "sg-spinner--".concat(String(color)), color), _defineProperty(_classNames, "sg-spinner--".concat(String(size)), size), _classNames), className);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
@@ -47,0 +59,0 @@ className: spinnerClassNames

commonjs/components/utils/invariant.js

@@ -8,6 +8,6 @@ "use strict";
 
-var _utils = require("../utils");
+var _consts = require("./consts");
 
 function invariant(condition, message) {
-  if (_utils.__DEV__) {
+  if (_consts.__DEV__) {
     if (condition) {
@@ -14,0 +14,0 @@ return;

esm/components/accordion/Accordion.js

@@ -15,4 +15,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import useReducedMotion from '../utils/useReducedMotion';
-import { __DEV__ } from '../utils';
-import invariant from '../utils/invariant';
+import { __DEV__, invariant } from '../utils';
 export var KEY_CODES = {
@@ -19,0 +18,0 @@ '32': 'space',

esm/components/buttons/Button.js

@@ -5,8 +5,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _SPINNER_SIZE_MAP, _SPINNER_COLOR_MAP;
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 import * as React from 'react';
+import Spinner, { SPINNER_SIZE, SPINNER_COLOR } from '../spinner/Spinner';
 import cx from 'classnames';
+import { __DEV__, invariant } from '../utils';
 export var BUTTON_SIZE = {
@@ -17,9 +17,7 @@ L: 'l',
 };
-var TOGGLE_BUTTON_TYPE = {
+export var BUTTON_TYPE = {
   SOLID_LIGHT: 'solid-light',
   OUTLINE: 'outline',
   TRANSPARENT: 'transparent',
-  TRANSPARENT_LIGHT: 'transparent-light'
-};
-export var BUTTON_TYPE = _objectSpread(_objectSpread({}, TOGGLE_BUTTON_TYPE), {}, {
+  TRANSPARENT_LIGHT: 'transparent-light',
   SOLID: 'solid',
@@ -34,3 +32,3 @@ SOLID_INVERTED: 'solid-inverted',
   FACEBOOK: 'facebook'
-});
+};
 export var BUTTON_TOGGLE = {
@@ -41,2 +39,5 @@ PEACH: 'peach',
 };
+var SPINNER_SIZE_MAP = (_SPINNER_SIZE_MAP = {}, _defineProperty(_SPINNER_SIZE_MAP, BUTTON_SIZE.L, SPINNER_SIZE.SMALL), _defineProperty(_SPINNER_SIZE_MAP, BUTTON_SIZE.M, SPINNER_SIZE.XSMALL), _defineProperty(_SPINNER_SIZE_MAP, BUTTON_SIZE.S, SPINNER_SIZE.XXSMALL), _SPINNER_SIZE_MAP);
+var SPINNER_COLOR_MAP = (_SPINNER_COLOR_MAP = {}, _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID, SPINNER_COLOR.WHITE), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID_INVERTED, SPINNER_COLOR.BLACK), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID_BLUE, SPINNER_COLOR.WHITE), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID_MINT, SPINNER_COLOR.WHITE), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.SOLID_LIGHT, SPINNER_COLOR.BLACK), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.OUTLINE, SPINNER_COLOR.BLACK), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT, SPINNER_COLOR.BLACK), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_LIGHT, SPINNER_COLOR.GRAY700), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_PEACH, SPINNER_COLOR.PEACH700), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_MUSTARD, SPINNER_COLOR.MUSTARD700), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_BLUE, SPINNER_COLOR.BLUE700), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.TRANSPARENT_INVERTED, SPINNER_COLOR.WHITE), _defineProperty(_SPINNER_COLOR_MAP, BUTTON_TYPE.FACEBOOK, SPINNER_COLOR.WHITE), _SPINNER_COLOR_MAP);
+var TOGGLE_BUTTON_TYPES = ['solid-light', 'outline', 'transparent', 'transparent-light'];
 
@@ -46,4 +47,6 @@ var Button = function Button(_ref) {
 
-  var size = _ref.size,
-      type = _ref.type,
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'solid' : _ref$type,
       icon = _ref.icon,
@@ -55,8 +58,17 @@ iconOnly = _ref.iconOnly,
       disabled = _ref.disabled,
+      loading = _ref.loading,
       toggle = _ref.toggle,
       children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, ["size", "type", "icon", "iconOnly", "reversedOrder", "href", "fullWidth", "disabled", "toggle", "children", "className"]);
+      props = _objectWithoutProperties(_ref, ["size", "type", "icon", "iconOnly", "reversedOrder", "href", "fullWidth", "disabled", "loading", "toggle", "children", "className"]);
 
-  var btnClass = cx('sg-button', (_cx = {}, _defineProperty(_cx, "sg-button--".concat(String(size)), size), _defineProperty(_cx, "sg-button--".concat(String(type)), type), _defineProperty(_cx, 'sg-button--disabled', disabled), _defineProperty(_cx, 'sg-button--full-width', fullWidth), _defineProperty(_cx, 'sg-button--icon-only', Boolean(icon) && iconOnly), _defineProperty(_cx, "sg-button--".concat(String(type), "-toggle-").concat(String(toggle)), toggle), _defineProperty(_cx, 'sg-button--reversed-order', reversedOrder), _cx), className);
+  if (__DEV__) {
+    invariant(!(toggle === 'blue' && ![].concat(TOGGLE_BUTTON_TYPES, ['transparent-blue']).includes(type) || toggle === 'peach' && ![].concat(TOGGLE_BUTTON_TYPES, ['transparent-peach']).includes(type) || toggle === 'mustard' && ![].concat(TOGGLE_BUTTON_TYPES, ['transparent-mustard']).includes(type)), "Value of toggle property '".concat(String(toggle), "' has no effect when button type is set to '").concat(type, "'."));
+    invariant(!(iconOnly && !icon), "Using 'iconOnly' property has no effect when 'icon' property is not set.");
+    invariant(!(reversedOrder && !icon), "Using 'reversedOrder' property has no effect when 'icon' property is not set.");
+    invariant(!(iconOnly && reversedOrder), "Using 'reversedOrder' property has no effect when 'iconOnly' property is set.");
+  }
+
+  var isDisabled = disabled || loading;
+  var btnClass = cx('sg-button', (_cx = {}, _defineProperty(_cx, "sg-button--".concat(String(size)), size), _defineProperty(_cx, "sg-button--".concat(String(type)), type), _defineProperty(_cx, 'sg-button--disabled', isDisabled), _defineProperty(_cx, 'sg-button--loading', loading), _defineProperty(_cx, 'sg-button--full-width', fullWidth), _defineProperty(_cx, 'sg-button--icon-only', Boolean(icon) && iconOnly), _defineProperty(_cx, "sg-button--".concat(String(type), "-toggle-").concat(String(toggle)), toggle), _defineProperty(_cx, 'sg-button--reversed-order', reversedOrder), _cx), className);
   var iconClass = cx('sg-button__icon', _defineProperty({}, "sg-button__icon--".concat(size || ''), size));
@@ -75,4 +87,8 @@ var ico;
     href: href,
-    disabled: disabled,
+    disabled: isDisabled,
     role: href !== undefined ? 'button' : undefined
+  }), loading && /*#__PURE__*/React.createElement(Spinner, {
+    size: SPINNER_SIZE_MAP[size],
+    color: SPINNER_COLOR_MAP[type],
+    className: "sg-button__spinner"
   }), ico, /*#__PURE__*/React.createElement("span", {
@@ -79,0 +95,0 @@ className: "sg-button__text"

esm/components/buttons/Button.stories.js

@@ -0,3 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
 import Button from './Button';
+import Icon, { TYPE as ICON_TYPES, ICON_COLOR } from 'icons/Icon';
+var allIcons = Object.entries(ICON_TYPES).reduce(function (acc, _ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      type = _ref2[1];
+
+  return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, type));
+}, {});
 export default {
@@ -7,11 +24,26 @@ title: 'Components/Button',
     component: Button
+  },
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+        options: allIcons
+      }
+    }
   }
 };
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Button, null, "Button");
+export var Default = function Default(_ref3) {
+  var icon = _ref3.icon,
+      args = _objectWithoutProperties(_ref3, ["icon"]);
+
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    icon: icon && /*#__PURE__*/React.createElement(Icon, {
+      type: icon,
+      color: ICON_COLOR.ADAPTIVE,
+      size: 24
+    })
+  }, args));
 };
-export var Outline = function Outline() {
-  return /*#__PURE__*/React.createElement(Button, {
-    type: "outline"
-  }, "Button");
+Default.args = {
+  children: 'Button'
 };

esm/components/spinner/Spinner.js

@@ -11,12 +11,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 };
+export var SPINNER_COLOR = {
+  BLACK: 'black',
+  WHITE: 'white',
+  GRAY900: 'gray-900',
+  GRAY700: 'gray-700',
+  PEACH700: 'peach-700',
+  MUSTARD700: 'mustard-700',
+  BLUE700: 'blue-700'
+};
 
 var Spinner = function Spinner(_ref) {
-  var light = _ref.light,
-      size = _ref.size,
+  var _classNames;
+
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? SPINNER_COLOR.BLACK : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? SPINNER_SIZE.SMALL : _ref$size,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, ["light", "size", "className"]);
+      props = _objectWithoutProperties(_ref, ["color", "size", "className"]);
 
-  var spinnerClassNames = classNames('sg-spinner', _defineProperty({
-    'sg-spinner--light': light
-  }, "sg-spinner--".concat(String(size)), size), className);
+  var spinnerClassNames = classNames('sg-spinner', (_classNames = {}, _defineProperty(_classNames, "sg-spinner--".concat(String(color)), color), _defineProperty(_classNames, "sg-spinner--".concat(String(size)), size), _classNames), className);
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
@@ -23,0 +34,0 @@ className: spinnerClassNames

esm/components/utils/invariant.js

@@ -1,2 +0,2 @@
-import { __DEV__ } from '../utils';
+import { __DEV__ } from './consts';
 export default function invariant(condition, message) {
@@ -3,0 +3,0 @@ if (__DEV__) {

package.json

 {
   "name": "brainly-style-guide",
-  "version": "187.0.0",
+  "version": "188.0.0",
   "description": "Brainly Front-End Style Guide",
@@ -5,0 +5,0 @@ "repository": "https://github.com/brainly/style-guide.git",

src/components/accordion/Accordion.jsx

@@ -17,4 +17,3 @@ //@flow strict
 import useReducedMotion from '../utils/useReducedMotion';
-import {__DEV__} from '../utils';
-import invariant from '../utils/invariant';
+import {__DEV__, invariant} from '../utils';
 
@@ -21,0 +20,0 @@ export const KEY_CODES = {

src/components/buttons/Button.jsx

 // @flow strict
 
 import * as React from 'react';
+import Spinner, {SPINNER_SIZE, SPINNER_COLOR} from '../spinner/Spinner';
 import cx from 'classnames';
+import {__DEV__, invariant} from '../utils';
 
@@ -16,14 +18,2 @@ export const BUTTON_SIZE: {
 
-const TOGGLE_BUTTON_TYPE: {
-  SOLID_LIGHT: 'solid-light',
-  OUTLINE: 'outline',
-  TRANSPARENT: 'transparent',
-  TRANSPARENT_LIGHT: 'transparent-light',
-} = {
-  SOLID_LIGHT: 'solid-light',
-  OUTLINE: 'outline',
-  TRANSPARENT: 'transparent',
-  TRANSPARENT_LIGHT: 'transparent-light',
-};
-
 export const BUTTON_TYPE: {
@@ -44,3 +34,6 @@ SOLID_LIGHT: 'solid-light',
 } = {
-  ...TOGGLE_BUTTON_TYPE,
+  SOLID_LIGHT: 'solid-light',
+  OUTLINE: 'outline',
+  TRANSPARENT: 'transparent',
+  TRANSPARENT_LIGHT: 'transparent-light',
   SOLID: 'solid',
@@ -67,41 +60,53 @@ SOLID_INVERTED: 'solid-inverted',
 
+const SPINNER_SIZE_MAP = {
+  [BUTTON_SIZE.L]: SPINNER_SIZE.SMALL,
+  [BUTTON_SIZE.M]: SPINNER_SIZE.XSMALL,
+  [BUTTON_SIZE.S]: SPINNER_SIZE.XXSMALL,
+};
+
+const SPINNER_COLOR_MAP = {
+  [BUTTON_TYPE.SOLID]: SPINNER_COLOR.WHITE,
+  [BUTTON_TYPE.SOLID_INVERTED]: SPINNER_COLOR.BLACK,
+  [BUTTON_TYPE.SOLID_BLUE]: SPINNER_COLOR.WHITE,
+  [BUTTON_TYPE.SOLID_MINT]: SPINNER_COLOR.WHITE,
+  [BUTTON_TYPE.SOLID_LIGHT]: SPINNER_COLOR.BLACK,
+  [BUTTON_TYPE.OUTLINE]: SPINNER_COLOR.BLACK,
+  [BUTTON_TYPE.TRANSPARENT]: SPINNER_COLOR.BLACK,
+  [BUTTON_TYPE.TRANSPARENT_LIGHT]: SPINNER_COLOR.GRAY700,
+  [BUTTON_TYPE.TRANSPARENT_PEACH]: SPINNER_COLOR.PEACH700,
+  [BUTTON_TYPE.TRANSPARENT_MUSTARD]: SPINNER_COLOR.MUSTARD700,
+  [BUTTON_TYPE.TRANSPARENT_BLUE]: SPINNER_COLOR.BLUE700,
+  [BUTTON_TYPE.TRANSPARENT_INVERTED]: SPINNER_COLOR.WHITE,
+  [BUTTON_TYPE.FACEBOOK]: SPINNER_COLOR.WHITE,
+};
+
+type ButtonType =
+  | 'solid-light'
+  | 'outline'
+  | 'transparent'
+  | 'transparent-light'
+  | 'solid'
+  | 'solid-inverted'
+  | 'solid-blue'
+  | 'solid-mint'
+  | 'transparent-peach'
+  | 'transparent-mustard'
+  | 'transparent-blue'
+  | 'transparent-inverted'
+  | 'facebook';
+
+type ButtonToggleType = 'peach' | 'mustard' | 'blue';
+
 type ButtonSizeType = 'l' | 'm' | 's';
 
-type ButtonColorType =
-  | {
-      type: $Values<typeof BUTTON_TYPE>,
-      toggle?: null,
-    }
-  | {
-      type: $Values<typeof TOGGLE_BUTTON_TYPE>,
-      toggle?: $Values<typeof BUTTON_TOGGLE> | null,
-    }
-  | {
-      type: $Values<typeof TOGGLE_BUTTON_TYPE> | 'transparent-peach',
-      toggle?: 'peach' | null,
-    }
-  | {
-      type: $Values<typeof TOGGLE_BUTTON_TYPE> | 'transparent-mustard',
-      toggle?: 'mustard' | null,
-    }
-  | {
-      type: $Values<typeof TOGGLE_BUTTON_TYPE> | 'transparent-blue',
-      toggle?: 'blue' | null,
-    };
+const TOGGLE_BUTTON_TYPES = [
+  'solid-light',
+  'outline',
+  'transparent',
+  'transparent-light',
+];
 
-type ButtonIconType =
-  | {
-      icon?: React.Node,
-      iconOnly?: null,
-      reversedOrder?: boolean,
-    }
-  | {
-      icon: React.Node,
-      iconOnly?: boolean,
-      reversedOrder?: null,
-    };
-
 export type ButtonPropsType = {
   /**
-   * type: Specify type of the button that you want to use
+   * Specify type of the button that you want to use
    * @example <Button type="solid">
@@ -124,10 +129,12 @@ *            button
    *
-   * toggle: optional union available just for selected type of buttons
-   *
-   * @example <Button type="solid-light" toggle="peach">
-   *            button
-   *          </Button>
    */
-  ...ButtonColorType,
+  type: ButtonType,
   /**
+   * Set toggle state of the button.
+   * Caution: Toggle property work with for specific button types:
+   * `solid-light`,`outline`, `transparent`, `transparent-light`, `transparent-peach`,
+   * `transparent-mustard`, `transparent-blue`
+   */
+  toggle?: ButtonToggleType,
+  /**
    * You can render icon inside each type of button on the left side
@@ -140,4 +147,5 @@ * @example <Button
    *          </Button>
-   *
-   * iconOnly: optional and available when icon is set. it hides button's text
+   */
+  icon?: React.Node,
+  /** Optional and available when icon is set. it hides button's text
    * @example <Button
@@ -150,4 +158,8 @@ *            icon={<Icon type="facebook" color="light" size={24} />}
    *          </Button>
+   * */
+  iconOnly?: boolean,
+  /**
+   * Reverses order of icon and text. Effective only when icon is set.
    */
-  ...ButtonIconType,
+  reversedOrder?: boolean,
   /**
@@ -188,2 +200,7 @@ * Children to be rendered inside Button
   /**
+   * Show loading state. By default loading state make button disabled while
+   * showing spinner inside and keep button's width unchanged.
+   */
+  loading?: boolean,
+  /**
    * Optional boolean for full width button
@@ -203,4 +220,4 @@ * @example <Button type="solid-mint" fullWidth>
 const Button = ({
-  size,
-  type,
+  size = 'm',
+  type = 'solid',
   icon,
@@ -212,2 +229,3 @@ iconOnly,
   disabled,
+  loading,
   toggle,
@@ -218,2 +236,35 @@ children,
 }: ButtonPropsType) => {
+  if (__DEV__) {
+    invariant(
+      !(
+        (toggle === 'blue' &&
+          ![...TOGGLE_BUTTON_TYPES, 'transparent-blue'].includes(type)) ||
+        (toggle === 'peach' &&
+          ![...TOGGLE_BUTTON_TYPES, 'transparent-peach'].includes(type)) ||
+        (toggle === 'mustard' &&
+          ![...TOGGLE_BUTTON_TYPES, 'transparent-mustard'].includes(type))
+      ),
+      `Value of toggle property '${String(
+        toggle
+      )}' has no effect when button type is set to '${type}'.`
+    );
+
+    invariant(
+      !(iconOnly && !icon),
+      `Using 'iconOnly' property has no effect when 'icon' property is not set.`
+    );
+
+    invariant(
+      !(reversedOrder && !icon),
+      `Using 'reversedOrder' property has no effect when 'icon' property is not set.`
+    );
+
+    invariant(
+      !(iconOnly && reversedOrder),
+      `Using 'reversedOrder' property has no effect when 'iconOnly' property is set.`
+    );
+  }
+
+  const isDisabled = disabled || loading;
+
   const btnClass = cx(
@@ -224,3 +275,4 @@ 'sg-button',
       [`sg-button--${String(type)}`]: type,
-      'sg-button--disabled': disabled,
+      'sg-button--disabled': isDisabled,
+      'sg-button--loading': loading,
       'sg-button--full-width': fullWidth,
@@ -251,5 +303,12 @@ 'sg-button--icon-only': Boolean(icon) && iconOnly,
       href={href}
-      disabled={disabled}
+      disabled={isDisabled}
       role={href !== undefined ? 'button' : undefined}
     >
+      {loading && (
+        <Spinner
+          size={SPINNER_SIZE_MAP[size]}
+          color={SPINNER_COLOR_MAP[type]}
+          className="sg-button__spinner"
+        />
+      )}
       {ico}
@@ -256,0 +315,0 @@ {/* As soon as we have Proxima fixed, we could remove that span */}

src/components/buttons/Button.spec.jsx

 import * as React from 'react';
+import {Spinner, Icon} from '../..';
 import Button, {BUTTON_TYPE} from './Button';
@@ -92,1 +93,19 @@ import {shallow} from 'enzyme';
 });
+
+test('in loading state button shows spinner and becomes disabled', () => {
+  const button = shallow(<Button loading>Some text</Button>);
+
+  expect(button.find(Spinner).exists()).toBe(true);
+  expect(button.is('[disabled]')).toEqual(true);
+});
+
+test('in loading state button shows spinner while hiding label and icon', () => {
+  const button = shallow(
+    <Button loading icon={<Icon type="heart" size="24" color="adaptive" />}>
+      Some text
+    </Button>
+  );
+
+  expect(button.hasClass('sg-button--loading')).toEqual(true);
+  expect(button.find(Spinner).exists()).toBe(true);
+});

src/components/buttons/Button.stories.jsx

 import * as React from 'react';
 import Button from './Button';
+import Icon, {TYPE as ICON_TYPES, ICON_COLOR} from 'icons/Icon';
 
+const allIcons = Object.entries(ICON_TYPES).reduce(
+  (acc, [key, type]) => ({
+    ...acc,
+    [key]: type,
+  }),
+  {}
+);
+
 export default {
@@ -9,5 +18,21 @@ title: 'Components/Button',
   },
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+        options: allIcons,
+      },
+    },
+  },
 };
 
-export const Default = () => <Button>Button</Button>;
-export const Outline = () => <Button type="outline">Button</Button>;
+export const Default = ({icon, ...args}) => (
+  <Button
+    icon={icon && <Icon type={icon} color={ICON_COLOR.ADAPTIVE} size={24} />}
+    {...args}
+  />
+);
+
+Default.args = {
+  children: 'Button',
+};

src/components/buttons/pages/buttons-interactive.jsx

@@ -37,2 +37,6 @@ import * as React from 'react';
     {
+      name: 'loading',
+      values: Boolean,
+    },
+    {
       name: 'fullWidth',
@@ -39,0 +43,0 @@ values: Boolean,

src/components/spinner/pages/spinners-interactive.jsx

 import * as React from 'react';
-import Spinner, {SPINNER_SIZE} from '../Spinner';
+import Spinner, {SPINNER_SIZE, SPINNER_COLOR} from '../Spinner';
 import DocsActiveBlock from 'components/DocsActiveBlock';
@@ -12,4 +12,4 @@
     {
-      name: 'light',
-      values: Boolean,
+      name: 'color',
+      values: SPINNER_COLOR,
     },
@@ -16,0 +16,0 @@ ];

src/components/spinner/pages/spinners.jsx

 import * as React from 'react';
 import DocsBlock from 'components/DocsBlock';
 import ContrastBox from 'components/ContrastBox';
-import Spinner, {SPINNER_SIZE} from '../Spinner';
+import Spinner, {SPINNER_SIZE, SPINNER_COLOR} from '../Spinner';
 
@@ -20,7 +20,13 @@ const Spinners = () => (
     </DocsBlock>
-    <DocsBlock info="Light">
-      <ContrastBox>
-        <Spinner light />
-      </ContrastBox>
-    </DocsBlock>
+    {Object.values(SPINNER_COLOR).map(color => (
+      <DocsBlock key={color} info={color}>
+        {color === 'white' ? (
+          <ContrastBox>
+            <Spinner color={color} />
+          </ContrastBox>
+        ) : (
+          <Spinner color={color} />
+        )}
+      </DocsBlock>
+    ))}
   </>
@@ -27,0 +33,0 @@ );

src/components/spinner/Spinner.jsx

@@ -8,2 +8,11 @@ // @flow strict
 
+export type SpinnerColorType =
+  | 'black'
+  | 'white'
+  | 'gray-900'
+  | 'gray-700'
+  | 'peach-700'
+  | 'mustard-700'
+  | 'blue-700';
+
 export const SPINNER_SIZE = {
@@ -15,4 +24,14 @@ SMALL: 'small',
 
+export const SPINNER_COLOR = {
+  BLACK: 'black',
+  WHITE: 'white',
+  GRAY900: 'gray-900',
+  GRAY700: 'gray-700',
+  PEACH700: 'peach-700',
+  MUSTARD700: 'mustard-700',
+  BLUE700: 'blue-700',
+};
+
 export type SpinnerPropsType = {
-  light?: boolean,
+  color?: SpinnerColorType,
   size?: SpinnerSizeType,
@@ -23,7 +42,12 @@ className?: string,
 
-const Spinner = ({light, size, className, ...props}: SpinnerPropsType) => {
+const Spinner = ({
+  color = SPINNER_COLOR.BLACK,
+  size = SPINNER_SIZE.SMALL,
+  className,
+  ...props
+}: SpinnerPropsType) => {
   const spinnerClassNames = classNames(
     'sg-spinner',
     {
-      'sg-spinner--light': light,
+      [`sg-spinner--${String(color)}`]: color,
       [`sg-spinner--${String(size)}`]: size,
@@ -30,0 +54,0 @@ },

src/components/spinner/Spinner.spec.jsx

 import * as React from 'react';
-import Spinner, {SPINNER_SIZE} from './Spinner';
+import Spinner, {SPINNER_SIZE, SPINNER_COLOR} from './Spinner';
 import {shallow} from 'enzyme';
@@ -19,7 +19,9 @@
 
-test('light', () => {
-  const component = shallow(<Spinner light />);
+test('colors', () => {
+  Object.values(SPINNER_COLOR).forEach(color => {
+    const component = shallow(<Spinner color={color} />);
 
-  expect(component).toHaveLength(1);
-  expect(component.hasClass('sg-spinner--light')).toEqual(true);
+    expect(component).toHaveLength(1);
+    expect(component.hasClass(`sg-spinner--${color}`)).toEqual(true);
+  });
 });
@@ -26,0 +28,0 @@

src/components/utils/invariant.js

 // @flow strict
 
-import {__DEV__} from '../utils';
+import {__DEV__} from './consts';
 
@@ -5,0 +5,0 @@ export default function invariant(condition: boolean, message: string): void {

Fixed alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8058606

increased by0.11%

Number of package files

1019

increased by0.39%

Lines of code

38520

increased by1.13%

Number of medium supply chain risk alerts

10

decreased by-16.67%

No dependency changes