brainly-style-guide - npm Package Compare versions

Comparing version 188.0.0 to 188.0.1

commonjs/components/file-handler/FileHandler.js

@@ -87,3 +87,3 @@ "use strict";
   }, loading ? /*#__PURE__*/React.createElement(_Spinner.default, {
-    size: "small"
+    size: "xsmall"
   }) : thumbnail), /*#__PURE__*/React.createElement("span", {
@@ -90,0 +90,0 @@ className: "sg-file-handler__text",

commonjs/components/spinner-container/SpinnerContainer.js

@@ -14,2 +14,8 @@ "use strict";
 });
+Object.defineProperty(exports, "SPINNER_COLOR", {
+  enumerable: true,
+  get: function get() {
+    return _Spinner.SPINNER_COLOR;
+  }
+});
 exports.default = void 0;
@@ -37,7 +43,7 @@
   var loading = _ref.loading,
-      light = _ref.light,
+      color = _ref.color,
       fullWidth = _ref.fullWidth,
       size = _ref.size,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["loading", "light", "fullWidth", "size", "children"]);
+      props = _objectWithoutProperties(_ref, ["loading", "color", "fullWidth", "size", "children"]);
 
@@ -51,3 +57,3 @@ return /*#__PURE__*/React.createElement("div", _extends({}, props, {
   }, /*#__PURE__*/React.createElement(_Spinner.default, {
-    light: light,
+    color: color,
     size: size
@@ -54,0 +60,0 @@ })));

commonjs/components/spinner/Spinner.js

@@ -49,3 +49,3 @@ "use strict";
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? SPINNER_COLOR.BLACK : _ref$color,
+      color = _ref$color === void 0 ? SPINNER_COLOR.GRAY900 : _ref$color,
       _ref$size = _ref.size,
@@ -52,0 +52,0 @@ size = _ref$size === void 0 ? SPINNER_SIZE.SMALL : _ref$size,

esm/components/file-handler/FileHandler.js

@@ -59,3 +59,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   }, loading ? /*#__PURE__*/React.createElement(Spinner, {
-    size: "small"
+    size: "xsmall"
   }) : thumbnail), /*#__PURE__*/React.createElement("span", {
@@ -62,0 +62,0 @@ className: "sg-file-handler__text",

esm/components/spinner-container/SpinnerContainer.js

@@ -6,11 +6,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import classnames from 'classnames';
-export { SPINNER_SIZE } from '../spinner/Spinner';
+export { SPINNER_SIZE, SPINNER_COLOR } from '../spinner/Spinner';
 
 var SpinnerContainer = function SpinnerContainer(_ref) {
   var loading = _ref.loading,
-      light = _ref.light,
+      color = _ref.color,
       fullWidth = _ref.fullWidth,
       size = _ref.size,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["loading", "light", "fullWidth", "size", "children"]);
+      props = _objectWithoutProperties(_ref, ["loading", "color", "fullWidth", "size", "children"]);
 
@@ -24,3 +24,3 @@ return /*#__PURE__*/React.createElement("div", _extends({}, props, {
   }, /*#__PURE__*/React.createElement(Spinner, {
-    light: light,
+    color: color,
     size: size
@@ -27,0 +27,0 @@ })));

esm/components/spinner/Spinner.js

@@ -25,3 +25,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   var _ref$color = _ref.color,
-      color = _ref$color === void 0 ? SPINNER_COLOR.BLACK : _ref$color,
+      color = _ref$color === void 0 ? SPINNER_COLOR.GRAY900 : _ref$color,
       _ref$size = _ref.size,
@@ -28,0 +28,0 @@ size = _ref$size === void 0 ? SPINNER_SIZE.SMALL : _ref$size,

package.json

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

src/components/file-handler/FileHandler.jsx

@@ -147,3 +147,3 @@ // @flow strict
       <div className="sg-file-handler__icon">
-        {loading ? <Spinner size="small" /> : thumbnail}
+        {loading ? <Spinner size="xsmall" /> : thumbnail}
       </div>
@@ -150,0 +150,0 @@ <span className="sg-file-handler__text" ref={textRef}>

src/components/spinner-container/pages/spinner-containers-interactive.jsx

 import * as React from 'react';
-import SpinnerContainer, {SPINNER_SIZE} from '../SpinnerContainer';
+import SpinnerContainer, {
+  SPINNER_SIZE,
+  SPINNER_COLOR,
+} from '../SpinnerContainer';
 import Button from 'buttons/Button';
@@ -17,4 +20,4 @@ import DocsActiveBlock from 'components/DocsActiveBlock';
     {
-      name: 'light',
-      values: Boolean,
+      name: 'color',
+      values: SPINNER_COLOR,
     },
@@ -21,0 +24,0 @@ {

src/components/spinner-container/pages/spinner-containers.jsx

@@ -26,3 +26,3 @@ import * as React from 'react';
       </SpinnerContainer>
-      <SpinnerContainer loading light size={SPINNER_SIZE.SMALL}>
+      <SpinnerContainer loading color="white" size={SPINNER_SIZE.SMALL}>
         <Button disabled={IS_LOADING} type="solid">
@@ -43,3 +43,3 @@ Ask your question
       </SpinnerContainer>
-      <SpinnerContainer loading light size={SPINNER_SIZE.XSMALL}>
+      <SpinnerContainer loading color="white" size={SPINNER_SIZE.XSMALL}>
         <Button disabled={IS_LOADING} type="solid">
@@ -76,4 +76,4 @@ Ask your question
 
-    <DocsBlock info="with Box" additionalInfo="(light)">
-      <SpinnerContainer loading light>
+    <DocsBlock info="with Box" additionalInfo="color white">
+      <SpinnerContainer loading color="white">
         <Box color={COLOR.blueSecondary}>
@@ -80,0 +80,0 @@ blue-secondary (no border by default)

src/components/spinner-container/SpinnerContainer.jsx

 // @flow strict
 
 import * as React from 'react';
-import type {SpinnerSizeType} from '../spinner/Spinner';
 import Spinner from '../spinner/Spinner';
 import classnames from 'classnames';
 
-export {SPINNER_SIZE} from '../spinner/Spinner';
+export {SPINNER_SIZE, SPINNER_COLOR} from '../spinner/Spinner';
+export type SpinnerContainerSizeType = 'small' | 'xsmall' | 'xxsmall';
 
+export type SpinnerContainerColorType =
+  | 'black'
+  | 'white'
+  | 'gray-900'
+  | 'gray-700'
+  | 'peach-700'
+  | 'mustard-700'
+  | 'blue-700';
+
 export type SpinnerContainerPropsType = {
   loading?: boolean,
-  light?: boolean,
+  color?: SpinnerContainerColorType,
   fullWidth?: boolean,
-  size?: SpinnerSizeType,
+  size?: SpinnerContainerSizeType,
   children?: React.Node,
@@ -21,3 +30,3 @@ ...
   loading,
-  light,
+  color,
   fullWidth,
@@ -37,3 +46,3 @@ size,
       <div className="sg-spinner-container__overlay">
-        <Spinner light={light} size={size} />
+        <Spinner color={color} size={size} />
       </div>
@@ -40,0 +49,0 @@ )}

src/components/spinner/Spinner.jsx

@@ -41,3 +41,3 @@ // @flow strict
 const Spinner = ({
-  color = SPINNER_COLOR.BLACK,
+  color = SPINNER_COLOR.GRAY900,
   size = SPINNER_SIZE.SMALL,
@@ -44,0 +44,0 @@ className,

New 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

8077446

increased by0.23%

Number of package files

1024

increased by0.49%

Lines of code

38598

increased by0.2%

Worsened metrics

Number of medium supply chain risk alerts

12

increased by20%

No dependency changes