brainly-style-guide - npm Package Compare versions

Comparing version 174.0.0 to 174.1.0

commonjs/components/flex/Flex.js

@@ -57,3 +57,5 @@ "use strict";
 
-  var fullWidth = props.fullWidth,
+  var _props$htmlTag = props.htmlTag,
+      Container = _props$htmlTag === void 0 ? 'div' : _props$htmlTag,
+      fullWidth = props.fullWidth,
       fullHeight = props.fullHeight,
@@ -76,3 +78,3 @@ noShrink = props.noShrink,
       className = props.className,
-      otherProps = _objectWithoutProperties(props, ["fullWidth", "fullHeight", "noShrink", "inlineFlex", "alignItems", "alignContent", "justifyContent", "wrap", "wrapReverse", "alignSelf", "direction", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "children", "className"]);
+      otherProps = _objectWithoutProperties(props, ["htmlTag", "fullWidth", "fullHeight", "noShrink", "inlineFlex", "alignItems", "alignContent", "justifyContent", "wrap", "wrapReverse", "alignSelf", "direction", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "children", "className"]);
 
@@ -85,3 +87,3 @@ var flexClass = (0, _classnames.default)('sg-flex', (_classNames = {
   }, _defineProperty(_classNames, "sg-flex--align-items-".concat(alignItems || ''), alignItems), _defineProperty(_classNames, "sg-flex--align-content-".concat(alignContent || ''), alignContent), _defineProperty(_classNames, "sg-flex--align-self-".concat(alignSelf || ''), alignSelf), _defineProperty(_classNames, "sg-flex--justify-content-".concat(justifyContent || ''), justifyContent), _defineProperty(_classNames, 'sg-flex--wrap', wrap), _defineProperty(_classNames, 'sg-flex--wrap-reverse', wrapReverse), _defineProperty(_classNames, 'sg-flex--column', direction === _FlexConsts.FLEX_DIRECTION.COLUMN), _defineProperty(_classNames, 'sg-flex--column-reverse', direction === _FlexConsts.FLEX_DIRECTION.COLUMN_REVERSE), _defineProperty(_classNames, 'sg-flex--row', direction === _FlexConsts.FLEX_DIRECTION.ROW), _defineProperty(_classNames, 'sg-flex--row-reverse', direction === _FlexConsts.FLEX_DIRECTION.ROW_REVERSE), _defineProperty(_classNames, "sg-flex--margin-".concat(margin || ''), margin), _defineProperty(_classNames, "sg-flex--margin-top-".concat(marginTop || ''), marginTop), _defineProperty(_classNames, "sg-flex--margin-right-".concat(marginRight || ''), marginRight), _defineProperty(_classNames, "sg-flex--margin-bottom-".concat(marginBottom || ''), marginBottom), _defineProperty(_classNames, "sg-flex--margin-left-".concat(marginLeft || ''), marginLeft), _classNames), className);
-  return React.createElement("div", _extends({}, otherProps, {
+  return React.createElement(Container, _extends({}, otherProps, {
     className: flexClass
@@ -88,0 +90,0 @@ }), children);

esm/components/flex/Flex.js

@@ -12,3 +12,5 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-  var fullWidth = props.fullWidth,
+  var _props$htmlTag = props.htmlTag,
+      Container = _props$htmlTag === void 0 ? 'div' : _props$htmlTag,
+      fullWidth = props.fullWidth,
       fullHeight = props.fullHeight,
@@ -31,3 +33,3 @@ noShrink = props.noShrink,
       className = props.className,
-      otherProps = _objectWithoutProperties(props, ["fullWidth", "fullHeight", "noShrink", "inlineFlex", "alignItems", "alignContent", "justifyContent", "wrap", "wrapReverse", "alignSelf", "direction", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "children", "className"]);
+      otherProps = _objectWithoutProperties(props, ["htmlTag", "fullWidth", "fullHeight", "noShrink", "inlineFlex", "alignItems", "alignContent", "justifyContent", "wrap", "wrapReverse", "alignSelf", "direction", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "children", "className"]);
 
@@ -40,3 +42,3 @@ var flexClass = classNames('sg-flex', (_classNames = {
   }, _defineProperty(_classNames, "sg-flex--align-items-".concat(alignItems || ''), alignItems), _defineProperty(_classNames, "sg-flex--align-content-".concat(alignContent || ''), alignContent), _defineProperty(_classNames, "sg-flex--align-self-".concat(alignSelf || ''), alignSelf), _defineProperty(_classNames, "sg-flex--justify-content-".concat(justifyContent || ''), justifyContent), _defineProperty(_classNames, 'sg-flex--wrap', wrap), _defineProperty(_classNames, 'sg-flex--wrap-reverse', wrapReverse), _defineProperty(_classNames, 'sg-flex--column', direction === FLEX_DIRECTION.COLUMN), _defineProperty(_classNames, 'sg-flex--column-reverse', direction === FLEX_DIRECTION.COLUMN_REVERSE), _defineProperty(_classNames, 'sg-flex--row', direction === FLEX_DIRECTION.ROW), _defineProperty(_classNames, 'sg-flex--row-reverse', direction === FLEX_DIRECTION.ROW_REVERSE), _defineProperty(_classNames, "sg-flex--margin-".concat(margin || ''), margin), _defineProperty(_classNames, "sg-flex--margin-top-".concat(marginTop || ''), marginTop), _defineProperty(_classNames, "sg-flex--margin-right-".concat(marginRight || ''), marginRight), _defineProperty(_classNames, "sg-flex--margin-bottom-".concat(marginBottom || ''), marginBottom), _defineProperty(_classNames, "sg-flex--margin-left-".concat(marginLeft || ''), marginLeft), _classNames), className);
-  return React.createElement("div", _extends({}, otherProps, {
+  return React.createElement(Container, _extends({}, otherProps, {
     className: flexClass
@@ -43,0 +45,0 @@ }), children);

package.json

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

src/components/flex/Flex.jsx

@@ -13,2 +13,28 @@ // @flow strict
 
+type FlexContainerType =
+  | 'a'
+  | 'article'
+  | 'aside'
+  | 'div'
+  | 'footer'
+  | 'form'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'header'
+  | 'input'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'p'
+  | 'pre'
+  | 'section'
+  | 'span'
+  | 'textarea'
+  | 'ul';
+
 type FlexDirectionType = 'column' | 'column-reverse' | 'row' | 'row-reverse';
@@ -61,2 +87,6 @@
   /**
+   * Html tag used as container
+   */
+  htmlTag?: FlexContainerType,
+  /**
    * Additional class names
@@ -209,2 +239,3 @@ */
   const {
+    htmlTag: Container = 'div',
     fullWidth,
@@ -258,5 +289,5 @@ fullHeight,
   return (
-    <div {...otherProps} className={flexClass}>
+    <Container {...otherProps} className={flexClass}>
       {children}
-    </div>
+    </Container>
   );
@@ -263,0 +294,0 @@ };

src/components/flex/Flex.spec.jsx

@@ -89,2 +89,17 @@ import React from 'react';
   });
+
+  it('renders component with different html tag', () => {
+    const component = shallow(
+      <Flex htmlTag="ul">
+        <div>test</div>
+      </Flex>
+    );
+
+    expect(
+      component
+        .find('div')
+        .parent()
+        .is('ul')
+    ).toEqual(true);
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Number of package files

900

increased by0.11%

Lines of code

28097

increased by0.16%

Number of medium supply chain risk alerts

11

decreased by-15.38%

Worsened metrics

Total package byte prevSize

2168660

decreased by-1.07%

No dependency changes