@rentalutions/elements - npm Package Compare versions

Comparing version 1.7.7 to 1.7.9

lib/Avatar/index.js

@@ -5,6 +5,6 @@ import _extends from "babel-runtime/helpers/extends";
 
-var _templateObject = _taggedTemplateLiteral(["\n  ", "\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  .photo-name-area {\n    display: flex;\n    align-items: center;\n  }\n  .photo-area {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: border-box;\n    padding: ", "px;\n    border-radius: 50%;\n    font-size: 0.875em;\n    font-weight: 600;\n    text-transform: uppercase;\n    background-color: ", ";\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-size: cover;\n  }\n  .indicator {\n    position: absolute;\n    bottom: -0.05em;\n    right: -0.05em;\n    box-sizing: border-box;\n    width: ", "px;\n    height: ", "px;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: 50%;\n  }\n  .name,\n  .contact-info {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .name {\n    padding: 0 ", "px;\n    line-height: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n  }\n  .contact-info {\n    flex: 0 0 100%;\n    margin-top: 0.25em;\n    font-size: 0.875em;\n    color: ", ";\n  }\n  & + & {\n    margin-top: 1em;\n  }\n"], ["\n  ", "\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  .photo-name-area {\n    display: flex;\n    align-items: center;\n  }\n  .photo-area {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: border-box;\n    padding: ", "px;\n    border-radius: 50%;\n    font-size: 0.875em;\n    font-weight: 600;\n    text-transform: uppercase;\n    background-color: ", ";\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-size: cover;\n  }\n  .indicator {\n    position: absolute;\n    bottom: -0.05em;\n    right: -0.05em;\n    box-sizing: border-box;\n    width: ", "px;\n    height: ", "px;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: 50%;\n  }\n  .name,\n  .contact-info {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .name {\n    padding: 0 ", "px;\n    line-height: ", ";\n    font-size: ", ";\n    font-weight: ", ";\n  }\n  .contact-info {\n    flex: 0 0 100%;\n    margin-top: 0.25em;\n    font-size: 0.875em;\n    color: ", ";\n  }\n  & + & {\n    margin-top: 1em;\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  display: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  .photo-name-area {\n    display: flex;\n    align-items: center;\n  }\n  .photo-area {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: border-box;\n    padding: ", "px;\n    border-radius: 50%;\n    font-size: 0.875em;\n    font-weight: 600;\n    text-transform: uppercase;\n    background-color: ", ";\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-size: cover;\n  }\n  .indicator {\n    position: absolute;\n    bottom: -0.05em;\n    right: -0.05em;\n    box-sizing: border-box;\n    width: ", "px;\n    height: ", "px;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: 50%;\n  }\n  .name,\n  .contact-info {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .name {\n    padding: 0 ", "px;\n    line-height: 1.3;\n    font-size: ", ";\n    font-weight: ", ";\n    max-width: ", ";\n  }\n  .contact-info {\n    flex: 0 0 100%;\n    margin-top: 0.25em;\n    font-size: 0.875em;\n    color: ", ";\n  }\n"], ["\n  display: ", ";\n  background-color: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  .photo-name-area {\n    display: flex;\n    align-items: center;\n  }\n  .photo-area {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: ", ";\n    width: ", ";\n    box-sizing: border-box;\n    padding: ", "px;\n    border-radius: 50%;\n    font-size: 0.875em;\n    font-weight: 600;\n    text-transform: uppercase;\n    background-color: ", ";\n    background-image: ", ";\n    background-repeat: no-repeat;\n    background-size: cover;\n  }\n  .indicator {\n    position: absolute;\n    bottom: -0.05em;\n    right: -0.05em;\n    box-sizing: border-box;\n    width: ", "px;\n    height: ", "px;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: 50%;\n  }\n  .name,\n  .contact-info {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .name {\n    padding: 0 ", "px;\n    line-height: 1.3;\n    font-size: ", ";\n    font-weight: ", ";\n    max-width: ", ";\n  }\n  .contact-info {\n    flex: 0 0 100%;\n    margin-top: 0.25em;\n    font-size: 0.875em;\n    color: ", ";\n  }\n"]);
 
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
@@ -17,3 +17,3 @@ import { sizing, colors } from "../variables";
       block = _ref.block;
-  return !email && !block ? "display: inline-block;" : null;
+  return !email && !block ? "inline-block" : "initial";
 }, function (_ref2) {
@@ -37,11 +37,11 @@ var email = _ref2.email;
 }, colors.light, sizing / 2, function (_ref7) {
-  var email = _ref7.email,
-      phone = _ref7.phone;
-  return email || phone ? "1.5" : "1.3";
+  var email = _ref7.email;
+  return email ? "1.5rem" : "0.75rem";
 }, function (_ref8) {
   var email = _ref8.email;
-  return email ? "1.5rem" : "0.875rem";
+  return email ? "600" : "500";
 }, function (_ref9) {
-  var email = _ref9.email;
-  return email ? "600" : "500";
+  var phone = _ref9.phone,
+      email = _ref9.email;
+  return email || phone ? "none" : "12em";
 }, colors.darkGray);
@@ -48,0 +48,0 @@

lib/index.js

 import Avatar from "./Avatar";
+import Button from "./Button";
+import Card from "./Card";
 import FullPageModal from "./FullPageModal";
+import Text from "./Text";
 
-export { Avatar, FullPageModal };
+export { Avatar, Button, Card, FullPageModal, Text };

lib/Stepper/index.js

@@ -0,2 +1,4 @@
+import _objectWithoutProperties from "babel-runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "babel-runtime/helpers/classCallCheck";
+import _createClass from "babel-runtime/helpers/createClass";
 import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
@@ -6,8 +8,7 @@ import _inherits from "babel-runtime/helpers/inherits";
 
-var _templateObject = _taggedTemplateLiteral(["\n  .step-list {\n  }\n  .step-content {\n  }\n"], ["\n  .step-list {\n  }\n  .step-content {\n  }\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["display: block;"], ["display: block;"]),
-    _templateObject3 = _taggedTemplateLiteral(["display: none;"], ["display: none;"]),
-    _templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"], ["\n  ", ";\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n  .step-list {\n    margin: 0;\n    padding: 1em;\n    list-style: none;\n    width: 100%;\n    max-width: 15em;\n    li {\n      margin-bottom: 1em;\n      a {\n        text-decoration: none;\n      }\n    }\n  }\n  .steps-container {\n    flex: 1;\n  }\n"], ["\n  display: flex;\n  height: 100%;\n  .step-list {\n    margin: 0;\n    padding: 1em;\n    list-style: none;\n    width: 100%;\n    max-width: 15em;\n    li {\n      margin-bottom: 1em;\n      a {\n        text-decoration: none;\n      }\n    }\n  }\n  .steps-container {\n    flex: 1;\n  }\n"]),
+    _templateObject2 = _taggedTemplateLiteral(["\n  padding: 1em;\n  background-color: #f9f9f9;\n  border-radius: 2px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n"], ["\n  padding: 1em;\n  background-color: #f9f9f9;\n  border-radius: 2px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n"]);
 
 import React, { Children, PureComponent } from "react";
+import { Route, NavLink, withRouter } from "react-router-dom";
 import PropTypes from "prop-types";
@@ -17,9 +18,4 @@ import styled, { css } from "styled-components";
 var Wrapper = styled.div(_templateObject);
-var stepActive = css(_templateObject2);
-var stepInactive = css(_templateObject3);
 
-export var Step = styled.div(_templateObject4, function (_ref) {
-  var active = _ref.active;
-  return active ? stepActive : stepInactive;
-});
+export var Step = styled.div(_templateObject2);
 
@@ -29,3 +25,3 @@ Step.displayName = "Step";
 Step.propTypes = {
-  active: PropTypes.bool.isRequired,
+  path: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   title: PropTypes.string.isRequired
@@ -38,3 +34,3 @@ };
   function Stepper() {
-    var _ref2;
+    var _ref;
 
@@ -49,23 +45,54 @@ var _temp, _this, _ret;
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Stepper.__proto__ || Object.getPrototypeOf(Stepper)).call.apply(_ref2, [this].concat(args))), _this), _this.render = function (_) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Stepper.__proto__ || Object.getPrototypeOf(Stepper)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      steps: [],
+      activeStep: null
+    }, _this.render = function (_) {
+      var _this$state = _this.state,
+          steps = _this$state.steps,
+          activeStep = _this$state.activeStep;
+
+      console.log(_this.props.match);
       return React.createElement(
         Wrapper,
         null,
-        React.createElement(
+        window.innerWidth > 720 ? [React.createElement(
           "ul",
           { className: "step-list" },
-          Children.map(_this.props.children, function (child) {
-            return child.type.displayName === "Step" && React.createElement(
+          steps.map(function (_ref2) {
+            var _ref2$props = _ref2.props,
+                path = _ref2$props.path,
+                title = _ref2$props.title;
+            return React.createElement(
               "li",
               null,
-              child.props.title
+              React.createElement(
+                NavLink,
+                {
+                  to: "/" + path,
+                  onClick: function onClick(e) {
+                    return _this.setState({ activeStep: path });
+                  }
+                },
+                title
+              )
             );
           })
-        ),
-        React.createElement(
-          "div",
-          { className: "step-content" },
-          Children.map(_this.props.children, function (child) {
-            return (child.type.displayName = "Step") && child;
+        ), React.createElement(
+          "section",
+          { className: "steps-container" },
+          steps.map(function (_ref3) {
+            var _ref3$props = _ref3.props,
+                children = _ref3$props.children,
+                props = _objectWithoutProperties(_ref3$props, ["children"]);
+
+            return props.path === activeStep ? React.createElement(
+              Step,
+              { className: "step", active: props.path === activeStep },
+              children
+            ) : null;
           })
+        )] : React.createElement(
+          "h1",
+          null,
+          "hello world"
         )
@@ -76,5 +103,26 @@ );
 
+  _createClass(Stepper, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.setState(function (state) {
+        var steps = Children.toArray(_this2.props.children).filter(function (child) {
+          return child.type.displayName = "Step";
+        });
+        var activeStep = steps.reduce(function (active, step) {
+          if (step.props.path === _this2.props.initialStep) return active = step.props.path;
+          return active;
+        }, steps[0].props.path);
+        return {
+          steps: steps,
+          activeStep: activeStep
+        };
+      });
+    }
+  }]);
+
   return Stepper;
 }(PureComponent);
 
-export default Stepper;
+export default withRouter(Stepper);

lib/Text/index.js

@@ -5,3 +5,3 @@ import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject = _taggedTemplateLiteral(["\n  margin: 1rem 0;\n  padding: 0;\n  color: ", ";\n  font-size: 1em;\n  line-height: 1.334;\n  &.small {\n    font-size: 0.75em;\n  }\n  &.subtitle {\n    font-size: 1.25em;\n    font-weight: 600;\n  }\n  &.title {\n    font-size: 1.5em;\n  }\n  &.headline {\n    font-size: 2em;\n  }\n  &.hero {\n    font-size: 4em;\n    font-weight: 300;\n  }\n  &.center {\n    text-align: center;\n  }\n  &.right {\n    text-align: right;\n  }\n  &.bold {\n    font-weight: bolder;\n  }\n"], ["\n  margin: 1rem 0;\n  padding: 0;\n  color: ", ";\n  font-size: 1em;\n  line-height: 1.334;\n  &.small {\n    font-size: 0.75em;\n  }\n  &.subtitle {\n    font-size: 1.25em;\n    font-weight: 600;\n  }\n  &.title {\n    font-size: 1.5em;\n  }\n  &.headline {\n    font-size: 2em;\n  }\n  &.hero {\n    font-size: 4em;\n    font-weight: 300;\n  }\n  &.center {\n    text-align: center;\n  }\n  &.right {\n    text-align: right;\n  }\n  &.bold {\n    font-weight: bolder;\n  }\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n  padding: 0;\n  color: ", ";\n  font-size: 1em;\n  line-height: 1.334;\n  &.small {\n    font-size: 0.75em;\n  }\n  &.subtitle {\n    font-size: 1.25em;\n    font-weight: 600;\n  }\n  &.title {\n    font-size: 1.5em;\n  }\n  &.headline {\n    font-size: 2em;\n  }\n  &.hero {\n    font-size: 4em;\n    font-weight: 300;\n  }\n  &.center {\n    text-align: center;\n  }\n  &.right {\n    text-align: right;\n  }\n  &.bold {\n    font-weight: bolder;\n  }\n"], ["\n  margin: 0;\n  padding: 0;\n  color: ", ";\n  font-size: 1em;\n  line-height: 1.334;\n  &.small {\n    font-size: 0.75em;\n  }\n  &.subtitle {\n    font-size: 1.25em;\n    font-weight: 600;\n  }\n  &.title {\n    font-size: 1.5em;\n  }\n  &.headline {\n    font-size: 2em;\n  }\n  &.hero {\n    font-size: 4em;\n    font-weight: 300;\n  }\n  &.center {\n    text-align: center;\n  }\n  &.right {\n    text-align: right;\n  }\n  &.bold {\n    font-weight: bolder;\n  }\n"]);
 
@@ -33,5 +33,4 @@ import React from "react";
     title: title,
-    small: small,
-    "rnt-text": true
-  }, className);
+    small: small
+  }, "rnt-text", className);
   return hero ? React.createElement(
@@ -38,0 +37,0 @@ "h1",

package.json

 {
   "name": "@rentalutions/elements",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "description": "A suite of elements for the consistent and responsive UI",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -0,1 +1,7 @@
+# Do not deprecate elements from this library without warning or following true semvar. This is a public package.
+
+If you find elements breaking your build, make sure all peerDependencies are installed or that youre importing each components directly
+
+`import Avatar from "@rentalutions/elements/lib/Avatar"`
+
 # A Set of Reusable Components
@@ -2,0 +8,0 @@

New alerts

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

Improved metrics

Number of lines in readme file

23

increased by35.29%

Worsened metrics

Total package byte prevSize

411749

decreased by-45.93%

Number of package files

24

decreased by-4%

Lines of code

4533

decreased by-69.56%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes