@ausbom/button - npm Package Compare versions

Comparing version 0.2.5 to 0.3.0

CHANGELOG.md

@@ -6,20 +6,26 @@ # Change Log
 
-## [0.2.5](https://github.com/AusBOM/bom-design-system/compare/@ausbom/button@0.2.4...@ausbom/button@0.2.5) (2019-07-12)
+<a name="0.3.0"></a>
+# [0.3.0](https://github.com/AusBOM/bom-design-system/compare/@ausbom/button@0.2.5...@ausbom/button@0.3.0) (2019-10-21)
 
-**Note:** Version bump only for package @ausbom/button
 
+### Bug Fixes
 
+* fixes button sass imports ([46edd5b](https://github.com/AusBOM/bom-design-system/commit/46edd5b))
+* fixes issues identified by pa11y ([31b5a60](https://github.com/AusBOM/bom-design-system/commit/31b5a60))
+* removes incorrect extends ([18008a4](https://github.com/AusBOM/bom-design-system/commit/18008a4))
 
 
+### Features
 
-## [0.2.4](https://github.com/AusBOM/bom-design-system/compare/@ausbom/button@0.2.3...@ausbom/button@0.2.4) (2019-07-12)
+* adds cta link component ([a1e7de6](https://github.com/AusBOM/bom-design-system/commit/a1e7de6))
+* adds icons to button component ([966a11f](https://github.com/AusBOM/bom-design-system/commit/966a11f))
+* adds JSX and HTML example component to design system website ([2a232b5](https://github.com/AusBOM/bom-design-system/commit/2a232b5))
+* adds visual test page, adds tests, removes ripple ([ec22b00](https://github.com/AusBOM/bom-design-system/commit/ec22b00))
+* refactors sass structure ([eeaef5b](https://github.com/AusBOM/bom-design-system/commit/eeaef5b))
+* removes existing styled components ([1a2cd08](https://github.com/AusBOM/bom-design-system/commit/1a2cd08))
+* updates button to use type scale mixin and cleans up comments ([1ee02fc](https://github.com/AusBOM/bom-design-system/commit/1ee02fc))
 
-**Note:** Version bump only for package @ausbom/button
 
+### BREAKING CHANGES
 
-
-
-
-## [0.2.3](https://github.com/AusBOM/bom-design-system/compare/@ausbom/button@0.1.2...@ausbom/button@0.2.3) (2019-07-10)
-
-**Note:** Version bump only for package @ausbom/button
+* removes button and icon styled components for now

lib/Button.d.ts

@@ -1,42 +0,19 @@
-export interface IState {
-}
+import React from 'react'
 
-export interface IButtonThemeProps {
-  backgroundColor: string
-  color: string
-}
-export type buttonAs = 'primary' | 'secondary' | 'tertiary'
+export type Variant = 'primary' | 'secondary' | 'tertiary'
 
-export interface IStyleProps {
-  theme?: any
-  buttonAs?: buttonAs
-  dark?: boolean
-  disabled?: boolean
-  iconName?: string
-  rounded?: boolean
-  small?: boolean
-  text?: string
-}
-
 export interface IProps {
-  buttonAs?: buttonAs
+  as?: React.ElementType
   className?: string
   dark?: boolean
   disabled?: boolean
-  iconName?: string
-  onClick?: Function
-  rounded?: boolean
+  icon?: React.ElementType
   small?: boolean
-  text?: string
-  // If the target type accepts additional properties, add an indexer
+  variant?: Variant
+  innerRef?: React.RefObject<any>
   [x: string]: any
 }
 
-export interface IDefaultProps {
+export default class extends React.PureComponent<IProps> {
+  render(): JSX.Element
 }
-
-export type IPropsWithDefaults = IProps & IDefaultProps
-
-declare const Button: React.ComponentType<IProps>
-
-export default Button

lib/Button.js

@@ -1,25 +0,1 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=exports.buttonTextMargin=exports.outlineRadius=exports.buttonPadding=exports.roundedButton=exports.iconColor=exports.buttonUnderLine=exports.buttonColorHover=exports.buttonColor=exports.buttonTheme=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _styles=require("@ausbom/styles");var _polished=require("polished");var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var bomNavy=_styles.palette.primary.bomNavy;var bomBlack=_styles.palette.secondary.bomBlack;var coldWhite=_styles.palette.neutral.coldWhite;var focus1=_styles.palette.system.focus1;var Btn={Primary:"primary",Secondary:"secondary",Tertiary:"tertiary"/**
- * This function kicks in when custom css overrides for a button via theme provider
- * backgroundColor overrides the button background color
- * color overrides the text, border and system icon color
- */};var buttonTheme=function buttonTheme(props,cssAttr){var theme=props.theme;var themeButton=theme&&theme.button;if(!themeButton){return null}switch(cssAttr){case"backgroundColor":return themeButton&&themeButton.backgroundColor;case"color":return themeButton&&themeButton.color;default:return null;}};/**
- * Updates button background color, text color and border color
- * based on the button type, dark and small attribute if provided
- */exports.buttonTheme=buttonTheme;var buttonColor=function buttonColor(props){switch(props.buttonAs){case Btn.Secondary:return"\n    background-color: ".concat(props.dark?"transparent":(0,_polished.transparentize)(1,buttonTheme(props,"backgroundColor")||bomNavy),";\n    box-shadow: 0 0 0 ").concat(props.small?"1px":"2px"," ").concat(props.dark?buttonTheme(props,"backgroundColor")||coldWhite:buttonTheme(props,"backgroundColor")||bomNavy," inset;\n    color: ").concat(props.dark?buttonTheme(props,"color")||coldWhite:buttonTheme(props,"color")||bomBlack,";\n      ");case Btn.Tertiary:return"\n    background-color: ".concat(props.dark?"transparent":(0,_polished.transparentize)(1,buttonTheme(props,"backgroundColor")||bomNavy),";\n    color: ").concat(props.dark?buttonTheme(props,"color")||coldWhite:buttonTheme(props,"color")||bomBlack,";\n      ");default:return"\n    background-color: ".concat(props.dark?buttonTheme(props,"backgroundColor")||coldWhite:buttonTheme(props,"backgroundColor")||bomNavy,";\n    color: ").concat(props.dark?buttonTheme(props,"color")||bomBlack:buttonTheme(props,"color")||coldWhite,";\n      ");}};/**
- * Updates button hover background color and text color
- * based on the button type and dark attribute if provided
- */exports.buttonColor=buttonColor;var buttonColorHover=function buttonColorHover(props){if(props.disabled){return null}switch(props.buttonAs){case Btn.Secondary:case Btn.Tertiary:return"\n    background-color: ".concat(props.dark?(0,_polished.transparentize)(0.9,buttonTheme(props,"backgroundColor")||coldWhite):(0,_polished.transparentize)(0.9,buttonTheme(props,"backgroundColor")||bomNavy),";\n      ");default:return"\n    background-color: ".concat(props.dark?(0,_polished.transparentize)(0.1,buttonTheme(props,"backgroundColor")||coldWhite):(0,_polished.tint)(0.1,buttonTheme(props,"backgroundColor")||bomNavy),";\n      ");}};/**
- * Adds an dotted underline to button text when button type is tertiary
- */exports.buttonColorHover=buttonColorHover;var buttonUnderLine=function buttonUnderLine(props){if(props.buttonAs!==Btn.Tertiary){return null}var backgroundImage="linear-gradient(\n    to right, ".concat(buttonTheme(props,"color")||coldWhite," 40%,\n    rgba(255, 255, 255, 0) 20%);");if(!props.dark){backgroundImage="linear-gradient(\n      to right, ".concat(buttonTheme(props,"color")||bomBlack," 40%,\n      rgba(255, 255, 255, 0) 20%);")}return"\n    background-image: ".concat(backgroundImage,"\n    background-size: 0.1875rem 0.0625rem;\n    background-position: center bottom;\n    background-repeat: repeat-x;\n  ")};/**
- * Updates icon fill color
- * based on the button type and dark attribute if provided
- */exports.buttonUnderLine=buttonUnderLine;var iconColor=function iconColor(props){if(props.dark){switch(props.buttonAs){case Btn.Secondary:case Btn.Tertiary:return"".concat(buttonTheme(props,"color")||coldWhite);default:return"".concat(buttonTheme(props,"color")||bomNavy);}}switch(props.buttonAs){case Btn.Secondary:case Btn.Tertiary:return"".concat(buttonTheme(props,"color")||bomNavy);default:return"".concat(buttonTheme(props,"color")||coldWhite);}};/**
- * Add a rounded button when rounded attr is provided
- */exports.iconColor=iconColor;var roundedButton=function roundedButton(props){var rounded=props.rounded,iconName=props.iconName,text=props.text;if(!rounded){return null}if(iconName&&!text){return"border-radius: 1.5rem;"}return null};/**
- * Update the padding of the button across various conditions
- */exports.roundedButton=roundedButton;var buttonPadding=function buttonPadding(props){var iconName=props.iconName,text=props.text,small=props.small;if(small){if(iconName&&!text){return"padding: 0;"}if(iconName&&text){return"\n        padding: 0 0.5rem 0 0;\n        line-height: 1.25rem;\n        min-width: inherit;\n      "}return"padding: 0.25rem 0.5rem;"}if(iconName&&text){return"padding: 0.5rem 1rem 0.5rem 0.5rem;"}if(iconName&&!text){return"padding: 0.5rem;"}return"padding: 0.5rem 1rem;"};/**
- * Adds a outline radius for button focus state
- */exports.buttonPadding=buttonPadding;var outlineRadius=function outlineRadius(props){var rounded=props.rounded,iconName=props.iconName,text=props.text;if(rounded){if(iconName&&!text){return"-moz-outline-radius: 1.5rem;"}return null}return null};/**
- *  Adds different margin style rule based on the condition passed
- * (when it is a small button)
- */exports.outlineRadius=outlineRadius;var buttonTextMargin=function buttonTextMargin(props){var iconName=props.iconName,small=props.small;if(!iconName){return"margin: 0 auto;"}if(iconName&&small){return"margin: 0 auto 0 0.125rem;"}return"margin: 0 auto 0 0.25rem;"};exports.buttonTextMargin=buttonTextMargin;var Button=_styledComponents["default"].button.withConfig({displayName:"Button",componentId:"azpaiv-0"})(["display:inline-block;font-family:Inter,sans-serif;font-size:",";line-height:",";letter-spacing:0.25px;text-align:center;margin:0;border:0;color:white;min-width:",";cursor:pointer;"," "," "," & > span[class^=\"SystemIcon\"]{height:1.5rem;float:left;fill:",";.isvg{display:inline-block;}}&:hover{","}&:focus{outline:2px solid ",";outline-offset:1px;","}&[disabled]{cursor:not-allowed;opacity:0.45;}"],function(props){return props.small?"0.75rem":"0.875rem"},function(props){return props.small?"0.75rem":"1.25rem"},function(props){return!props.text?"inherit":"6.25rem"},function(props){return buttonColor(props)},function(props){return roundedButton(props)},function(props){return buttonPadding(props)},function(props){return iconColor(props)},function(props){return buttonColorHover(props)},function(props){return props.dark?coldWhite:focus1},function(props){return outlineRadius(props)});var ButtonText=_styledComponents["default"].span.withConfig({displayName:"Button__ButtonText",componentId:"azpaiv-1"})(["display:inline-block;padding-top:",";padding-bottom:",";"," ",""],function(props){return props.small?"0.125rem":"0.1875rem"},function(props){return props.small?"0.125rem":"0.0625rem"},function(props){return buttonUnderLine(props)},function(props){return buttonTextMargin(props)});var _default=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(_default,_React$PureComponent);function _default(){var _getPrototypeOf2;var _this;(0,_classCallCheck2["default"])(this,_default);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=(0,_possibleConstructorReturn2["default"])(this,(_getPrototypeOf2=(0,_getPrototypeOf3["default"])(_default)).call.apply(_getPrototypeOf2,[this].concat(args)));(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"displayName","Button");return _this}(0,_createClass2["default"])(_default,[{key:"renderIcon",value:function renderIcon(){var iconName=this.props.iconName;if(!iconName){return null}return _react["default"].createElement(_icon.SystemIcon,{name:iconName})}},{key:"renderText",value:function renderText(){var _this$props=this.props,buttonAs=_this$props.buttonAs,dark=_this$props.dark,iconName=_this$props.iconName,small=_this$props.small,text=_this$props.text;if(!text){return null}return _react["default"].createElement(ButtonText,{buttonAs:buttonAs,dark:dark,iconName:iconName,small:small},text)}},{key:"render",value:function render(){var _this$props2=this.props,buttonAs=_this$props2.buttonAs,className=_this$props2.className,dark=_this$props2.dark,disabled=_this$props2.disabled,iconName=_this$props2.iconName,rounded=_this$props2.rounded,small=_this$props2.small,text=_this$props2.text,_onClick=_this$props2.onClick,otherProps=(0,_objectWithoutProperties2["default"])(_this$props2,["buttonAs","className","dark","disabled","iconName","rounded","small","text","onClick"]);return _react["default"].createElement(Button,(0,_extends2["default"])({buttonAs:buttonAs,className:className,dark:dark,disabled:disabled,iconName:iconName,rounded:rounded,small:small,text:text,onClick:function onClick(){return _onClick&&_onClick()}},otherProps),this.renderIcon(),this.renderText())}}]);return _default}(_react["default"].PureComponent);exports["default"]=_default;
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _icon=require("@ausbom/icon");var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){keys.push.apply(keys,Object.getOwnPropertySymbols(object))}if(enumerableOnly)keys=keys.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(source,true).forEach(function(key){(0,_defineProperty2["default"])(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}var Button=/*#__PURE__*/function(_React$PureComponent){(0,_inherits2["default"])(Button,_React$PureComponent);function Button(){(0,_classCallCheck2["default"])(this,Button);return(0,_possibleConstructorReturn2["default"])(this,(0,_getPrototypeOf2["default"])(Button).apply(this,arguments))}(0,_createClass2["default"])(Button,[{key:"render",value:function render(){var _classNames;var _ref=this.props,Tag=_ref.as,children=_ref.children,className=_ref.className,dark=_ref.dark,disabled=_ref.disabled,fullWidth=_ref.fullWidth,icon=_ref.icon,innerRef=_ref.innerRef,small=_ref.small,variant=_ref.variant,restProps=(0,_objectWithoutProperties2["default"])(_ref,["as","children","className","dark","disabled","fullWidth","icon","innerRef","small","variant"]);var classes=(0,_classnames["default"])(className,"bom-button",(_classNames={},(0,_defineProperty2["default"])(_classNames,"bom-button--".concat(variant),variant),(0,_defineProperty2["default"])(_classNames,"bom-button--dark",dark),(0,_defineProperty2["default"])(_classNames,"bom-button--small",small),(0,_defineProperty2["default"])(_classNames,"bom-button--disabled",disabled),_classNames));var props=_objectSpread({ref:innerRef,className:classes,disabled:disabled},restProps);if(disabled){props.href=undefined}if(Tag==="input"){return _react["default"].createElement(Tag,props)}return _react["default"].createElement(Tag,props,icon&&_react["default"].createElement(_icon.SystemIcon,{className:"bom-button__icon","aria-hidden":true,icon:icon,size:16}),children&&_react["default"].createElement("span",{className:"bom-button__label"},children))}}]);return Button}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Button,"defaultProps",{as:"button",variant:"primary",dark:false});var _default=_react["default"].forwardRef(function(props,ref){return _react["default"].createElement(Button,(0,_extends2["default"])({innerRef:ref},props))});exports["default"]=_default;

package.json

 {
   "name": "@ausbom/button",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "Buttons help users perform actions and make choices. They can include text and icons to communicate what will happen when a user interacts with them.",
@@ -9,3 +9,3 @@ "keywords": [
   ],
-  "author": "Haw-Yang Peng <[e-mail]>",
+  "author": "",
   "homepage": "https://beta.design.bom.gov.au/components/button",
@@ -29,3 +29,3 @@ "license": "MIT",
     "build:readme": "../generate-readme.sh",
-    "postbuild": "cp -r ./src/*.d.* ./lib"
+    "postbuild": "copyfiles -u 1 \"./src/**/{*.d.*,*.scss}\" ./lib"
   },
@@ -39,14 +39,14 @@ "bugs": {
   "devDependencies": {
-    "@ausbom/babel-preset": "^0.1.1"
+    "@ausbom/babel-preset": "^0.2.0"
   },
+  "dependencies": {
+    "@ausbom/icon": "^0.3.0",
+    "@ausbom/styles": "^0.3.0",
+    "@ausbom/typography": "^0.2.0"
+  },
   "peerDependencies": {
-    "polished": ">= 3.4.x",
-    "react": ">= 16.3.x",
-    "styled-components": ">= 4"
+    "classnames": ">= 2.2.x",
+    "react": ">= 16.3.x"
   },
-  "dependencies": {
-    "@ausbom/icon": "^0.2.2",
-    "@ausbom/styles": "^0.2.5"
-  },
-  "gitHead": "23b28ea2c23aba31e7b1963ebb4796bc59cba9cc"
+  "gitHead": "f328498dc7f4fd60332199530cfaf5b2113a790e"
 }

README.md

@@ -15,10 +15,12 @@ # @ausbom/button
 import Button from '@ausbom/button'
+import ExternalLink16 from '@ausbom/icon/lib/icons/system/ExternalLink16'
 import React from 'react'
 
 <Button
-  buttonAs="tertiary"
-  iconName="map-pin"
-  rounded
+  icon={ExternalLink16}
+  variant="primary"
   dark
-/>
+>
+  Maps
+</Button>
 ```

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

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

16222

increased by14.98%

Number of package files

10

increased by42.86%

Number of lines in readme file

26

increased by8.33%

Worsened metrics

Lines of code

17

decreased by-77.92%

Number of low maintenance alerts

2

increased by100%

Number of low quality alerts

4

increased by33.33%

Dependency changes

• + Added@ausbom/typography@^0.2.0

• + Added@ausbom/icon@0.3.6(transitive)

• + Added@ausbom/styles@0.3.00.5.1(transitive)

• + Added@ausbom/typography@0.2.6(transitive)

• + Addedclassnames@2.2.62.5.1(transitive)

• + Addedddbreakpoints@1.1.3(transitive)

• + Addedwebfontloader@1.6.28(transitive)

• - Removed@ausbom/icon@0.2.2(transitive)

• - Removed@ausbom/styles@0.2.5(transitive)

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@emotion/is-prop-valid@1.2.2(transitive)

• - Removed@emotion/memoize@0.8.1(transitive)

• - Removed@emotion/unitless@0.8.1(transitive)

• - Removed@types/stylis@4.2.5(transitive)

• - Removedcamelize@1.0.1(transitive)

• - Removedcss-color-keywords@1.0.0(transitive)

• - Removedcss-to-react-native@3.2.0(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.7(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedpolished@4.3.1(transitive)

• - Removedpostcss@8.4.38(transitive)

• - Removedpostcss-value-parser@4.2.0(transitive)

• - Removedreact-dom@18.3.1(transitive)

• - Removedreact-from-dom@0.7.3(transitive)

• - Removedreact-inlinesvg@4.1.5(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removedshallowequal@1.1.0(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedstyled-components@6.1.13(transitive)

• - Removedstylis@4.3.2(transitive)

• - Removedtslib@2.6.2(transitive)

• Updated@ausbom/icon@^0.3.0

• Updated@ausbom/styles@^0.3.0