@tds2/button - npm Package Compare versions

Comparing version 0.1.28 to 0.1.29

lib/Button.js

@@ -1,1 +0,1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _hooks=require("../../hooks");var _sharedStyle=require("./sharedStyle");var _ThemeProvider=require("../../providers/ThemeProvider");var _this=this,_jsxFileName="/Users/hamedmamdoohi/Desktop/react-native-storybook/packages/Button/src/Button.jsx";var Button=function Button(_ref){var variant=_ref.variant,children=_ref.children;var tokens=(0,_ThemeProvider.useTokens)('button',variant,overrides);console.log(tokens);var color=(0,_sharedStyle.setColorByVariant)(variant);var fontsLoaded=(0,_hooks.useCustomFonts)();return fontsLoaded?_react.default.createElement(_reactNative.TouchableOpacity,{style:{minWidth:180,width:'max-content'},onPress:function onPress(){},style:[styles.button,{backgroundColor:color.default.background,borderColor:color.default.border,borderWidth:1.5}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:15,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:[styles.text,{color:color.default.text,fontFamily:'TELUS-web-medium'}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:27,columnNumber:7}},children)):_react.default.createElement(_reactNative.View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:5}},_react.default.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:7}},"Loading"));};var styles=_reactNative.StyleSheet.create({button:_sharedStyle.button,text:_sharedStyle.text});Button.propTypes={type:_propTypes.default.oneOf(['button','submit','reset']),variant:_propTypes.default.oneOf(['primary','secondary','inverted','standard','brand','danger']),children:_propTypes.default.string};Button.defaultProps={type:'button',variant:'primary'};var _default=Button;exports.default=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _hooks=require("../../hooks");var _sharedStyle=require("./sharedStyle");var _ThemeProvider=require("../../providers/ThemeProvider");var _this=this,_jsxFileName="/Users/hamedmamdoohi/Desktop/react-native-storybook/packages/Button/src/Button.jsx";var Button=function Button(_ref){var variant=_ref.variant,children=_ref.children,overrides=_ref.tokens;var tokens=(0,_ThemeProvider.useTokens)('button',variant,overrides);var color=(0,_sharedStyle.setColorByVariant)(variant,tokens);var fontsLoaded=(0,_hooks.useCustomFonts)();return fontsLoaded?_react.default.createElement(_reactNative.TouchableOpacity,{style:{minWidth:180,width:'max-content'},onPress:function onPress(){},style:[styles.button,{backgroundColor:color.default.background,borderColor:color.default.border,borderWidth:1.5}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:14,columnNumber:5}},_react.default.createElement(_reactNative.Text,{style:[styles.text,{color:color.default.text,fontFamily:'TELUS-medium'}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:26,columnNumber:7}},children)):_react.default.createElement(_reactNative.View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:36,columnNumber:5}},_react.default.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:7}},"Loading"));};var styles=_reactNative.StyleSheet.create({button:_sharedStyle.button,text:_sharedStyle.text});Button.propTypes={type:_propTypes.default.oneOf(['button','submit','reset']),variant:_propTypes.default.oneOf(['primary','secondary','inverted','standard','brand','danger']),children:_propTypes.default.string};Button.defaultProps={type:'button',variant:'primary'};var _default=Button;exports.default=_default;

lib/Button.web.js

@@ -1,1 +0,1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _sharedStyle=require("./sharedStyle");var _ThemeProvider=require("../../providers/ThemeProvider");var _this=this,_jsxFileName="/Users/hamedmamdoohi/Desktop/react-native-storybook/packages/Button/src/Button.web.jsx";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var StyledButton=(0,_styledComponents.default)('button')(function(_ref){var variant=_ref.variant;var color=(0,_sharedStyle.setColorByVariant)(variant);return"\n    border: 2px solid "+color.default.border+" !important;\n    background-color: "+color.default.background+" !important;\n    color: "+color.default.text+" !important;\n    &[style] {\n      :hover {\n        border: 2px solid "+color.hover.border+" !important;\n        background-color: "+color.hover.background+" !important;\n        color: "+color.hover.text+" !important;\n        cursor: pointer;\n      }\n      :active {\n        background-color: "+color.active.background+" !important;\n        color: "+color.active.text+" !important;\n        box-shadow: 0 0 0 3px "+color.active.boxShadow+" !important;\n      }\n      :focus {\n        outline: 0 !important;\n        background-color: "+color.focus.background+" !important;\n        box-shadow: 0 0 0 3px "+color.focus.boxShadow+" !important;\n        \n        color: "+color.focus.text+" !important;\n        border: 2px solid "+color.focus.border+" !important;\n        \n      }\n      :active:focus {\n        background-color: "+color.activeFocus.background+" !important;\n        box-shadow: 0 0 0 3px "+color.activeFocus.boxShadow+" !important;\n        color: "+color.activeFocus.text+" !important;\n        border: 2px solid "+color.activeFocus.border+" !important;\n      }\n    }\n  ";});var Button=function Button(_ref2){var variant=_ref2.variant,overrides=_ref2.tokens,children=_ref2.children;var tokens=(0,_ThemeProvider.useTokens)('button',variant,overrides);console.log(tokens);return _react.default.createElement(StyledButton,{variant:variant,style:_objectSpread(_objectSpread({fontFamily:'TELUS-web',fontWeight:400,letterSpacing:'normal'},_sharedStyle.text),_sharedStyle.button),__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},children);};Button.propTypes={type:_propTypes.default.oneOf(['button','submit','reset']),variant:_propTypes.default.oneOf(['primary','secondary','inverted','standard','brand','danger']),children:_propTypes.default.string};Button.defaultProps={type:'button',variant:'primary'};var _default=Button;exports.default=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _sharedStyle=require("./sharedStyle");var _ThemeProvider=require("../../providers/ThemeProvider");var _this=this,_jsxFileName="/Users/hamedmamdoohi/Desktop/react-native-storybook/packages/Button/src/Button.web.jsx";function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var StyledButton=(0,_styledComponents.default)('button')(function(_ref){var variant=_ref.variant,tokens=_ref.tokens;var color=(0,_sharedStyle.setColorByVariant)(variant,tokens);return"\n    border: 2px solid "+color.default.border+" !important;\n    background-color: "+color.default.background+" !important;\n    color: "+color.default.text+" !important;\n    &[style] {\n      :hover {\n        border: 2px solid "+color.hover.border+" !important;\n        background-color: "+color.hover.background+" !important;\n        color: "+color.hover.text+" !important;\n        cursor: pointer;\n      }\n      :active {\n        background-color: "+color.active.background+" !important;\n        color: "+color.active.text+" !important;\n        box-shadow: 0 0 0 3px "+color.active.boxShadow+" !important;\n      }\n      :focus {\n        outline: 0 !important;\n        background-color: "+color.focus.background+" !important;\n        box-shadow: 0 0 0 3px "+color.focus.boxShadow+" !important;\n        \n        color: "+color.focus.text+" !important;\n        border: 2px solid "+color.focus.border+" !important;\n        \n      }\n      :active:focus {\n        background-color: "+color.activeFocus.background+" !important;\n        box-shadow: 0 0 0 3px "+color.activeFocus.boxShadow+" !important;\n        color: "+color.activeFocus.text+" !important;\n        border: 2px solid "+color.activeFocus.border+" !important;\n      }\n    }\n  ";});var Button=function Button(_ref2){var variant=_ref2.variant,overrides=_ref2.tokens,children=_ref2.children;var tokens=(0,_ThemeProvider.useTokens)('button',variant,overrides);return _react.default.createElement(StyledButton,{variant:variant,tokens:tokens,style:_objectSpread(_objectSpread({fontFamily:'TELUS-web',fontWeight:400,letterSpacing:'normal'},_sharedStyle.text),_sharedStyle.button),__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:5}},children);};Button.propTypes={type:_propTypes.default.oneOf(['button','submit','reset']),variant:_propTypes.default.oneOf(['primary','secondary','inverted','standard','brand','danger']),children:_propTypes.default.string};Button.defaultProps={type:'button',variant:'primary'};var _default=Button;exports.default=_default;

lib/sharedStyle.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.setColorByVariant=exports.button=exports.text=void 0;var button={width:180,borderRadius:24,minHeight:41,justifyContent:'center'};exports.button=button;var text={fontSize:16,textAlign:'center'};exports.text=text;var buttonType={PRIMARY:'primary',SECONDARY:'secondary',INVERTED:'inverted',STANDARD:'standard',BRAND:'brand',DANGER:'danger'};var setColorByVariant=function setColorByVariant(variant){switch(variant){case buttonType.PRIMARY:return{default:{background:'#2B8000',text:'#FFFFFF',border:'#2B8000',boxShadow:'#FFFFFF'},hover:{background:'#1F5C09',text:'#FFFFFF',border:'#1F5C09',boxShadow:'#FFFFFF'},active:{background:'#163E06',text:'#FFFFFF',border:'#163E06',boxShadow:'#FFFFFF'},focus:{background:'#1F5C09',text:'#FFFFFF',border:'#FFFFFF',boxShadow:'#509F33'},activeFocus:{background:'#163E06',text:'#FFFFFF',border:'#FFFFFF',boxShadow:'#509F33'}};case buttonType.SECONDARY:return{default:{background:'#FFFFFF',text:'#2B8000',border:'#2B8000',boxShadow:'#FFFFFF'},hover:{background:'#FFFFFF',text:'#1F5C09',border:'#1F5C09',boxShadow:'#FFFFFF'},active:{background:'#E3F6D1',text:'#163E06',border:'#163E06',boxShadow:'#FFFFFF'},focus:{background:'#FFFFFF',text:'#1F5C09',border:'#FFFFFF',boxShadow:'#509F33'},activeFocus:{background:'#E3F6D1',text:'#1F5C09',border:'#FFFFFF',boxShadow:'#509F33'}};case buttonType.INVERTED:return{default:{background:'#FFFFFF',text:'#2C2E30',border:'#FFFFFF',boxShadow:'#FFFFFF'},hover:{background:'#CDCECE',text:'#2C2E30',border:'#CDCECE',boxShadow:'#FFFFFF'},active:{background:'#CDCECE',text:'#2C2E30',border:'#CDCECE',boxShadow:'#FFFFFF'},focus:{background:'#E7E7E7',text:'#2C2E30',border:'#CDCECE',boxShadow:'#FFFFFF'},activeFocus:{background:'#CDCECE',text:'#2C2E30',border:'#CDCECE',boxShadow:'#FFFFFF'}};default:return{default:{background:'#2B8000',text:'#FFFFFF',border:'#2B8000',boxShadow:'#FFFFFF'},hover:{background:'#1F5C09',text:'#FFFFFF',border:'#1F5C09',boxShadow:'#FFFFFF'},active:{background:'#163E06',text:'#FFFFFF',border:'#163E06',boxShadow:'#FFFFFF'},focus:{background:'#1F5C09',text:'#FFFFFF',border:'#FFFFFF',boxShadow:'#509F33'},activeFocus:{background:'#163E06',text:'#FFFFFF',border:'#FFFFFF',boxShadow:'#509F33'}};}};exports.setColorByVariant=setColorByVariant;
+Object.defineProperty(exports,"__esModule",{value:true});exports.setColorByVariant=exports.button=exports.text=void 0;var button={width:180,borderRadius:24,minHeight:41,justifyContent:'center'};exports.button=button;var text={fontSize:16,textAlign:'center'};exports.text=text;var buttonType={PRIMARY:'primary',SECONDARY:'secondary',INVERTED:'inverted',STANDARD:'standard',BRAND:'brand',DANGER:'danger'};var setColorByVariant=function setColorByVariant(variant,tokens){switch(variant){case buttonType.PRIMARY:return tokens.primary;case buttonType.SECONDARY:return tokens.secondary;case buttonType.INVERTED:return tokens.inverted;default:return tokens.primary;}};exports.setColorByVariant=setColorByVariant;

package.json

 {
   "name": "@tds2/button",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "Button component",
@@ -43,3 +43,3 @@ "keywords": [
   },
-  "gitHead": "947a998a173e2a62070069194a4820270deed16c"
+  "gitHead": "048517c051581921a86f412a6e64bac8e64ee6e2"
 }

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

Worsened metrics

Total package byte prevSize

7778

decreased by-16.75%

No dependency changes