bpk-component-button - npm Package Compare versions

Comparing version 1.0.11 to 1.0.13-alpha.273912ea

index.js

@@ -1,3 +0,2 @@
-import component from './src/BpkButton'
-
-export default component
+require('./dist/BpkButton.css')
+module.exports = require('./dist/BpkButton.js')

package.json

 {
   "name": "bpk-component-button",
-  "version": "1.0.11",
+  "version": "1.0.13-alpha.273912ea",
   "description": "Backpack button component.",
   "main": "index.js",
+  "scripts": {
+    "build:sass": "node-sass src -o dist --importer=./../../scripts/node_sass_tilde_importer.js",
+    "build:js": "babel src --out-dir dist --ignore test.js ",
+    "build": "npm run build:js && npm run build:sass"
+  },
   "repository": {
@@ -16,4 +21,5 @@ "type": "git",
   "dependencies": {
-    "bpk-mixins": "^3.0.0"
+    "bpk-mixins": "^3.1.1-alpha.273912ea",
+    "react-themeable": "^1.1.0"
   }
 }

src/BpkButton.js

 import React, { PropTypes } from 'react'
-import './bpk-button.scss'
+import themeable from 'react-themeable'
 
-const BpkButton = ({
-  children,
-  disabled,
-  href,
-  submit,
-  secondary,
-  selected,
-  large,
-  link,
-  onClick
-}) => {
-  const classNames = [ 'bpk-button' ]
+const defaultTheme = {
+  'button': 'bpk-button',
+  'secondary': 'bpk-button--secondary',
+  'selected': 'bpk-button--selected',
+  'large': 'bpk-button--large',
+  'link': 'bpk-button--link'
+}
 
-  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
+const BpkButton = (props) => {
+  const theme = themeable(props.theme)
+  const themeNames = [ 'button' ]
 
-  const className = classNames.join(' ')
+  props.secondary ? themeNames.push('secondary') : null
+  props.selected ? themeNames.push('selected') : null
+  props.large ? themeNames.push('large') : null
+  props.link ? themeNames.push('link') : null
 
-  if (href) {
+  if (props.href) {
     return <a
-      href={href}
-      className={className}
-      children={children}
-      onClick={onClick}
+      href={props.href}
+      children={props.children}
+      onClick={props.onClick}
+      {...theme(1, ...themeNames)}
     />
@@ -34,7 +31,7 @@ }
   return <button
-    type={submit ? 'submit' : 'button'}
-    disabled={disabled}
-    className={className}
-    children={children}
-    onClick={onClick}
+    type={props.submit ? 'submit' : 'button'}
+    disabled={props.disabled}
+    children={props.children}
+    onClick={props.onClick}
+    {...theme(1, ...themeNames)}
   />
@@ -55,3 +52,4 @@ }
   link: PropTypes.bool,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  theme: PropTypes.object
 }
@@ -67,5 +65,6 @@
   link: false,
-  onClick: null
+  onClick: null,
+  theme: defaultTheme
 }
 
 export default BpkButton

stories.js

 import React from 'react'
 import { storiesOf, action } from '@kadira/storybook'
 
-import BpkButton from './index'
+import './src/BpkButton.scss'
+import BpkButton from './src/BpkButton'
 
@@ -6,0 +7,0 @@ storiesOf('bpk-component-button', module)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

14687

increased by61.24%

Number of package files

11

increased by37.5%

Lines of code

312

increased by103.92%

Worsened metrics

Dependency count

3

increased by50%

Number of maintainers

7

decreased by-12.5%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-themeable@^1.1.0

• + Addedobject-assign@3.0.0(transitive)

• + Addedreact-themeable@1.1.0(transitive)

• Updatedbpk-mixins@^3.1.1-alpha.273912ea