bpk-component-button - npm Package Compare versions

Comparing version 1.0.24 to 1.1.0-alpha.27779d2b

package.json

 {
   "name": "bpk-component-button",
-  "version": "1.0.24",
+  "version": "1.1.0-alpha.27779d2b",
   "description": "Backpack button component.",
@@ -16,4 +16,4 @@ "main": "index.js",
   "dependencies": {
-    "bpk-mixins": "^5.4.0"
+    "bpk-mixins": "^5.4.0-alpha.27779d2b"
   }
 }

readme.md

@@ -34,2 +34,3 @@ # bpk-component-button
 | href      | string   | false    | null          |
+| className | string   | false    | null          |
 | disabled  | bool     | false    | false         |
@@ -36,0 +37,0 @@ | submit    | bool     | false    | false         |

src/BpkButton-test.js

@@ -45,2 +45,12 @@ import React from 'react'
   })
+
+  it('should respect the class names entered as a string', () => {
+    const tree = renderer.create(<BpkButton large secondary className='custom-class-1 custom-class-2'>My button</BpkButton>).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should add only bpk specific classes if className prop is set to empty string', () => {
+    const tree = renderer.create(<BpkButton large secondary className=''>My button</BpkButton>).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })

src/BpkButton.js

 import React, { PropTypes } from 'react'
 import './bpk-button.scss'
 
-const BpkButton = ({
-  children,
-  disabled,
-  href,
-  submit,
-  secondary,
-  selected,
-  large,
-  link,
-  onClick
-}) => {
+const BpkButton = (props) => {
   const classNames = [ 'bpk-button' ]
 
-  secondary ? classNames.push('bpk-button--secondary') : null
-  selected ? classNames.push('bpk-button--selected') : null
-  large ? classNames.push('bpk-button--large') : null
-  link ? classNames.push('bpk-button--link') : null
+  props.secondary ? classNames.push('bpk-button--secondary') : null
+  props.selected ? classNames.push('bpk-button--selected') : null
+  props.large ? classNames.push('bpk-button--large') : null
+  props.link ? classNames.push('bpk-button--link') : null
+  props.className ? classNames.push(props.className) : null
 
   const className = classNames.join(' ')
 
-  if (href) {
+  if (props.href) {
     return <a
-      href={href}
+      href={props.href}
       className={className}
-      children={children}
-      onClick={onClick}
+      children={props.children}
+      onClick={props.onClick}
     />
@@ -34,7 +25,7 @@ }
   return <button
-    type={submit ? 'submit' : 'button'}
-    disabled={disabled}
+    type={props.submit ? 'submit' : 'button'}
+    disabled={props.disabled}
     className={className}
-    children={children}
-    onClick={onClick}
+    children={props.children}
+    onClick={props.onClick}
   />
@@ -49,2 +40,3 @@ }
   href: PropTypes.string,
+  className: PropTypes.string,
   disabled: PropTypes.bool,
@@ -61,2 +53,3 @@ submit: PropTypes.bool,
   href: null,
+  className: null,
   disabled: false,
@@ -63,0 +56,0 @@ submit: false,

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Improved metrics

Total package byte prevSize

11027

increased by11.87%

Lines of code

154

increased by0.65%

Number of lines in readme file

42

increased by2.44%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• Updatedbpk-mixins@^5.4.0-alpha.27779d2b