ucdbiadv-floatingbutton - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.js

@@ -40,3 +40,4 @@ "use strict";
 var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n  position: relative;\n  display: inline-block;\n  border-radius: 50%;\n  height: 56px;\n  line-height: 56px;\n  width: 56px;\n  color: ", ";\n  background: ", ";\n  cursor: pointer;\n  box-shadow: ", ";\n\n  &:after {\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    transition: background-color 0.15s ease-in-out;\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: inline-block;\n  border-radius: 50%;\n  height: 56px;\n  line-height: 56px;\n  width: 56px;\n  color: ", ";\n  background: ", ";\n  cursor: pointer;\n  box-shadow: ", ";\n\n  &:after {\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    border-radius: inherit;\n    transition: background-color 0.15s ease-in-out;\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n"]),
-    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n  background: #555;\n  border-radius: 2px;\n  color: #fff;\n  font-size: 13px;\n  left: -145px;\n  line-height: 32px;\n  padding: 0px 12px;\n  position: absolute;\n  text-align: center;\n  top: 12px;\n  transition: all 0.15s ease-in-out;\n  width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-family: \"Roboto\", sans-serif;\n  display: none;\n\n  ", ":hover & {\n    display: block;\n  }\n"], ["\n  background: #555;\n  border-radius: 2px;\n  color: #fff;\n  font-size: 13px;\n  left: -145px;\n  line-height: 32px;\n  padding: 0px 12px;\n  position: absolute;\n  text-align: center;\n  top: 12px;\n  transition: all 0.15s ease-in-out;\n  width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-family: \"Roboto\", sans-serif;\n  display: none;\n\n  ", ":hover & {\n    display: block;\n  }\n"]);
+    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n  background: #555;\n  border-radius: 2px;\n  color: #fff;\n  font-size: 13px;\n  left: -145px;\n  line-height: 32px;\n  padding: 0px 12px;\n  position: absolute;\n  text-align: center;\n  top: 12px;\n  transition: all 0.15s ease-in-out;\n  width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-family: \"Roboto\", sans-serif;\n  display: none;\n\n  ", ":hover & {\n    display: block;\n  }\n"], ["\n  background: #555;\n  border-radius: 2px;\n  color: #fff;\n  font-size: 13px;\n  left: -145px;\n  line-height: 32px;\n  padding: 0px 12px;\n  position: absolute;\n  text-align: center;\n  top: 12px;\n  transition: all 0.15s ease-in-out;\n  width: 100px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-family: \"Roboto\", sans-serif;\n  display: none;\n\n  ", ":hover & {\n    display: block;\n  }\n"]),
+    _templateObject3 = (0, _taggedTemplateLiteral3.default)(["\n  font-size: 28px;\n  line-height: 56px;\n  width: 56px;\n  height: 56px;\n  display: block;\n  text-align: center;\n  border-radius: 50%;\n  user-select: none;\n  font-family: \"Material Icons\";\n  font-style: normal;\n"], ["\n  font-size: 28px;\n  line-height: 56px;\n  width: 56px;\n  height: 56px;\n  display: block;\n  text-align: center;\n  border-radius: 50%;\n  user-select: none;\n  font-family: \"Material Icons\";\n  font-style: normal;\n"]);
 
@@ -107,9 +108,3 @@ var _react = require("react");
 
-// const Icon = styled.div`
-//   font-size: 28px;
-//   line-height: 56px;
-//   text-align: center;
-//   border-radius: 50%;
-//   user-select: none;
-// `
+var ButtonIcon = (0, _styledComponents2.default)(_ucdbiadvIcon2.default)(_templateObject3);
 
@@ -129,4 +124,5 @@ var FloatingButton = function (_PureComponent) {
           label = _props.label,
+          icon = _props.icon,
           onClick = _props.onClick,
-          other = (0, _objectWithoutProperties3.default)(_props, ["label", "onClick"]);
+          other = (0, _objectWithoutProperties3.default)(_props, ["label", "icon", "onClick"]);
 
@@ -143,3 +139,3 @@ return _react2.default.createElement(
         ),
-        _react2.default.createElement(_ucdbiadvIcon2.default, { type: "hot_tub", color: "white" })
+        _react2.default.createElement(ButtonIcon, { type: icon, color: "white" })
       );
@@ -153,2 +149,3 @@ }
   label: _propTypes2.default.string,
+  icon: _propTypes2.default.string,
   onClick: _propTypes2.default.func,
@@ -164,2 +161,3 @@ disabled: _propTypes2.default.bool,
   disabled: false,
+  icon: "star",
   color: "white",
@@ -166,0 +164,0 @@ colorVariant: "500",

package.json

 {
   "name": "ucdbiadv-floatingbutton",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Floating Button",
@@ -11,5 +11,6 @@ "main": "dist/index.js",
     "styled-components": "^2.2.3",
-    "ucdbiadv-material-color-picker": "^1.0.10",
+    "ucdbiadv-icon": "^1.0.2",
+    "ucdbiadv-material-color-picker": "^1.0.11",
     "webfontloader": "^1.6.28"
   }
 }

src/index.js

@@ -94,13 +94,18 @@ import React, { PureComponent } from "react"
 
-// const Icon = styled.div`
-//   font-size: 28px;
-//   line-height: 56px;
-//   text-align: center;
-//   border-radius: 50%;
-//   user-select: none;
-// `
+const ButtonIcon = styled(Icon)`
+  font-size: 28px;
+  line-height: 56px;
+  width: 56px;
+  height: 56px;
+  display: block;
+  text-align: center;
+  border-radius: 50%;
+  user-select: none;
+  font-family: "Material Icons";
+  font-style: normal;
+`
 
 class FloatingButton extends PureComponent {
   render() {
-    var { label, onClick, ...other } = this.props
+    var { label, icon, onClick, ...other } = this.props
     return (
@@ -112,3 +117,3 @@ <ButtonContainer
         <Label>{label}</Label>
-        <Icon type="hot_tub" color="white" />
+        <ButtonIcon type={icon} color="white" />
       </ButtonContainer>
@@ -121,2 +126,3 @@ )
   label: PropTypes.string,
+  icon: PropTypes.string,
   onClick: PropTypes.func,
@@ -132,2 +138,3 @@ disabled: PropTypes.bool,
   disabled: false,
+  icon: "star",
   color: "white",
@@ -134,0 +141,0 @@ colorVariant: "500",

src/index.spec.js

@@ -7,7 +7,7 @@ import React from "react"
 
-import RaisedButton from "."
+import FloatingButton from "."
 
-describe("tests for <FlatButton>", function() {
+describe("tests for <FloatingButton>", function() {
   it("renders without props", function() {
-    const wrapper = mount(<RaisedButton />)
+    const wrapper = mount(<FloatingButton />)
     const button = wrapper.find("div")
@@ -20,3 +20,3 @@
     const onClick = jest.fn()
-    const wrapper = mount(<RaisedButton onClick={onClick} />)
+    const wrapper = mount(<FloatingButton onClick={onClick} />)
 
@@ -28,5 +28,5 @@ wrapper.simulate("click")
   it("renders a label", () => {
-    const wrapper = mount(<RaisedButton label="test" />)
-    expect(wrapper.text()).toBe("test")
+    const wrapper = mount(<FloatingButton label="test" />)
+    expect(wrapper.text()).toContain("test")
   })
 })

src/index.story.js

@@ -6,2 +6,3 @@ import React from "react"
 import { withInfo } from "@storybook/addon-info"
+import styled from "styled-components"
 
@@ -12,2 +13,6 @@ const stories = storiesOf("Button", module)
 
+const DisplayButton = styled(FloatingButton)`
+  margin-left: 200px;
+`
+
 stories.addDecorator(withKnobs)
@@ -21,6 +26,7 @@
   })(() => (
-    <FloatingButton
+    <DisplayButton
       onClick={action("clicked")}
       disabled={boolean("Disabled", false)}
       label={text("Label", "floating button")}
+      icon={text("Icon", "star")}
       color={text("Color", "white")}
@@ -27,0 +33,0 @@ colorVariant={text("Color Variant", "500")}

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

Improved metrics

Total package byte prevSize

21106

increased by72.75%

Number of package files

7

increased by16.67%

Lines of code

534

increased by81.63%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addeducdbiadv-icon@^1.0.2

• + Addeducdbiadv-icon@1.0.3(transitive)

• Updateducdbiadv-material-color-picker@^1.0.11