brainly-style-guide - npm Package Compare versions

Comparing version 158.0.1 to 158.0.2

commonjs/components/dropdowns/Dropdown.js

@@ -34,3 +34,6 @@ "use strict";
       links = _ref.links,
-      initiallyOpened = _ref.initiallyOpened;
+      initiallyOpened = _ref.initiallyOpened,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      fullWidth = _ref.fullWidth;
 
@@ -68,3 +71,5 @@ var _useState = (0, _react.useState)(initiallyOpened || false),
     className: (0, _classnames.default)('sg-dropdown', {
-      'sg-dropdown--opened': open
+      'sg-dropdown--opened': open,
+      'sg-dropdown--white': color === 'white',
+      'sg-dropdown--full-width': fullWidth
     }),
@@ -71,0 +76,0 @@ onClick: handleClickInside

esm/components/dropdowns/Dropdown.js

@@ -10,3 +10,6 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
       links = _ref.links,
-      initiallyOpened = _ref.initiallyOpened;
+      initiallyOpened = _ref.initiallyOpened,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      fullWidth = _ref.fullWidth;
 
@@ -44,3 +47,5 @@ var _useState = useState(initiallyOpened || false),
     className: classNames('sg-dropdown', {
-      'sg-dropdown--opened': open
+      'sg-dropdown--opened': open,
+      'sg-dropdown--white': color === 'white',
+      'sg-dropdown--full-width': fullWidth
     }),
@@ -47,0 +52,0 @@ onClick: handleClickInside

package.json

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

src/components/dropdowns/Dropdown.jsx

@@ -17,6 +17,14 @@ // @flow strict
   initiallyOpened?: boolean,
+  color?: 'default' | 'white',
+  fullWidth?: boolean,
 }>;
 
 // if possible, use Select component instead
-const Dropdown = ({name, links, initiallyOpened}: PropsType) => {
+const Dropdown = ({
+  name,
+  links,
+  initiallyOpened,
+  color = 'default',
+  fullWidth,
+}: PropsType) => {
   const [open, setOpen] = useState(initiallyOpened || false);
@@ -45,3 +53,7 @@ const clickedInside = useRef(false);
     <div
-      className={classNames('sg-dropdown', {'sg-dropdown--opened': open})}
+      className={classNames('sg-dropdown', {
+        'sg-dropdown--opened': open,
+        'sg-dropdown--white': color === 'white',
+        'sg-dropdown--full-width': fullWidth,
+      })}
       onClick={handleClickInside}
@@ -48,0 +60,0 @@ >

src/components/dropdowns/pages/dropdowns.jsx

@@ -5,8 +5,9 @@ import React from 'react';
 import Flex from '../../flex/Flex';
+import ContrastBox from 'components/ContrastBox';
 import Dropdown from '../Dropdown';
 
 const Dropdowns = () => (
-  <Flex alignItems="flex-end" style={{height: '190px'}}>
+  <div>
     <DocsBlock info="Closed and open">
-      <Flex>
+      <Flex alignItems="flex-end" style={{height: '140px'}}>
         <Flex direction="column" marginRight="l">
@@ -34,5 +35,44 @@ <Dropdown
     </DocsBlock>
-  </Flex>
+    <DocsBlock info="Dark and light">
+      <Flex alignItems="flex-end" style={{height: '185px'}}>
+        <Flex direction="column" marginRight="l">
+          <Dropdown
+            name="Brainly.com"
+            links={[
+              {label: 'Brainly.pl', url: 'http://www.brainly.pl'},
+              {label: 'Brainly.com', url: 'http://www.brainly.com'},
+            ]}
+          />
+        </Flex>
+        <Flex>
+          <ContrastBox
+            style={{display: 'flex', alignItems: 'flex-end', height: '185px'}}
+          >
+            <Dropdown
+              key={2}
+              name="Brainly.com"
+              initiallyOpened
+              links={[
+                {label: 'Brainly.pl', url: 'http://www.brainly.pl'},
+                {label: 'Brainly.com', url: 'http://www.brainly.com'},
+              ]}
+              color="white"
+            />
+          </ContrastBox>
+        </Flex>
+      </Flex>
+    </DocsBlock>
+    <DocsBlock info="Full width">
+      <Dropdown
+        fullWidth
+        name="Brainly.com"
+        links={[
+          {label: 'Brainly.pl', url: 'http://www.brainly.pl'},
+          {label: 'Brainly.com', url: 'http://www.brainly.com'},
+        ]}
+      />
+    </DocsBlock>
+  </div>
 );
 
 export default Dropdowns;

src/docs/components/ContrastBox.jsx

@@ -25,2 +25,3 @@ // @flow
   children,
+  ...otherProps
 }: PropsType) => {
@@ -35,3 +36,7 @@ const cssClass = classnames(contrastBlockCssClass, {
 
-  return <section className={cssClass}>{children}</section>;
+  return (
+    <section {...otherProps} className={cssClass}>
+      {children}
+    </section>
+  );
 };
@@ -38,0 +43,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2007541

increased by0.12%

Lines of code

26345

increased by0.25%

Number of medium supply chain risk alerts

3

decreased by-25%

No dependency changes