@daisypayments/petals - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

build-es/Address.js

@@ -55,7 +55,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
       _useState2 = _slicedToArray(_useState, 2),
-      containerSize = _useState2[0],
-      setContainerSize = _useState2[1];
+      fontSize = _useState2[0],
+      setfontSize = _useState2[1];
 
-  var eighth = containerSize / 8;
-  var quarter = containerSize / 4;
+  var eighth = fontSize / 8;
+  var quarter = fontSize / 4;
   var account = String(children); // Set Jazzicon size on mount, once font size is determined
@@ -65,3 +65,3 @@
     if (addressContainer.current) {
-      setContainerSize(parseFloat(getComputedStyle(addressContainer.current).fontSize));
+      setfontSize(parseFloat(getComputedStyle(addressContainer.current).fontSize));
     }
@@ -80,10 +80,10 @@ }, [addressContainer]);
   }, props), metamask && !ethereumLogo && React.createElement(Jazzicon, {
-    diameter: containerSize,
+    diameter: fontSize * 1.2,
     seed: jsNumberForAddress(account),
     paperStyles: {
-      margin: "".concat(eighth, "px ").concat(quarter, "px ").concat(eighth, "px ").concat(eighth, "px"),
+      margin: "".concat(eighth, "px ").concat(quarter, "px 0 ").concat(eighth, "px"),
       verticalAlign: "text-bottom"
     }
   }), ethereumLogo && !metamask && React.createElement(EthereumIcon, {
-    height: containerSize
+    height: fontSize
   }), abbreviated ? abbreviate(account) : account));
@@ -90,0 +90,0 @@ };

build-es/Form.js

@@ -1,10 +0,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import React from "react";
-import PropTypes from "prop-types";
 import styled from "styled-components";
+import { column } from "./grid";
+export var Form = styled.form;
 export var Fieldset = styled.fieldset.withConfig({
@@ -14,37 +8,21 @@ displayName: "Form__Fieldset",
 })(["padding:0;margin:0;border:none;"]);
-export function Form(_ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, ["children", "disabled"]);
-
-  return React.createElement("form", props, React.createElement(Fieldset, {
-    disabled: disabled
-  }, children));
-}
-Form.propTypes = {
-  method: PropTypes.string,
-  disabled: PropTypes.bool
-};
-Form.defaultProps = {
-  method: "post",
-  disabled: false
-};
-
-Form.withGuard = function withGuard(InteractionGuardContext) {
-  // eslint-disable-next-line no-shadow
-  function FormWithGuard(_ref2) {
-    var method = _ref2.method,
-        disabled = _ref2.disabled,
-        props = _objectWithoutProperties(_ref2, ["method", "disabled"]);
-
-    return React.createElement(InteractionGuardContext.Consumer, null, function (mounted) {
-      return React.createElement(Form, _extends({}, props, {
-        method: mounted ? method : "post",
-        disabled: mounted ? disabled : true
-      }));
-    });
-  }
-
-  FormWithGuard.displayName = "withGuard(Form)";
-  return FormWithGuard;
-};
+export var FormRow = styled.label.withConfig({
+  displayName: "Form__FormRow",
+  componentId: "sc-1aeblka-1"
+})(["display:flex;align-items:center;"]);
+FormRow.Label = styled.div.withConfig({
+  displayName: "Form__Label",
+  componentId: "sc-1aeblka-2"
+})(["", " flex-direction:column;align-items:flex-end;text-align:right;padding-top:1em;padding-bottom:1em;padding-left:0;"], function (props) {
+  return column({
+    col: props.col || 3
+  });
+});
+FormRow.Control = styled.div.withConfig({
+  displayName: "Form__Control",
+  componentId: "sc-1aeblka-3"
+})(["", " padding-right:0;& > *{flex:1;}"], function (props) {
+  return column({
+    col: props.col || 9
+  });
+});

build-es/index.js

@@ -11,3 +11,3 @@ export { createInteractionGuardContext, getDisplayName, withDelay, withFocus } from "./addons";
 export { default as Dropdown } from "./Dropdown";
-export { Form, Fieldset } from "./Form";
+export { Form, Fieldset, FormRow } from "./Form";
 export { default as Information } from "./Information";
@@ -14,0 +14,0 @@ export { InputControl, Input, InputDetail } from "./Inputs";

build-es/Inputs.js

@@ -13,5 +13,10 @@ import PropTypes from "prop-types";
 });
+InputControl.Checkbox = styled(InputControl).withConfig({
+  displayName: "Inputs__Checkbox",
+  componentId: "qkl6qy-1"
+})(["display:initial;"]);
+InputControl.Radio = InputControl.Checkbox;
 export var Input = styled.label.withConfig({
   displayName: "Inputs__Input",
-  componentId: "qkl6qy-1"
+  componentId: "qkl6qy-2"
 })(["--input-border-radius:8px;--input-border-width:2px;--input-inner-border-radius:calc(var(--input-border-radius) - var(--input-border-width));display:flex;box-sizing:border-box;position:relative;min-height:3em;width:", ";padding:0;background-color:white;border-style:solid;border-width:var(--input-border-width);border-radius:var(--input-border-radius);border-color:", ";&:focus-within{border-color:", ";box-shadow:inset 0 1px 2px rgba(27,31,35,0.075),0 0 0 0.1em ", ";}"], function (props) {
@@ -40,3 +45,3 @@ return props.block ? "100%" : "auto";
   displayName: "Inputs__Label",
-  componentId: "qkl6qy-2"
+  componentId: "qkl6qy-3"
 })(["--label-gutter-v:9px;--label-gutter-h:6px;position:absolute;top:0em;left:1em;padding:0 var(--label-gutter-h);margin:calc(var(--label-gutter-v) * -1) 0 0 calc(calc(var(--label-gutter-h) / 2) * -1);color:", ";height:auto;line-height:initial;font-size:0.8em;background-color:", ";cursor:default;user-select:none;"], function (props) {
@@ -49,3 +54,3 @@ return props.theme.texts.colors.neutral;
   displayName: "Inputs__Item",
-  componentId: "qkl6qy-3"
+  componentId: "qkl6qy-4"
 })(["box-sizing:border-box;display:flex;background-color:", ";align-items:center;justify-content:center;white-space:nowrap;padding:0 1em;flex:-1;color:", ";min-width:3em;border-radius:0;border:solid ", ";border-width:0 var(--input-border-width);&:first-of-type:not(:last-child){border-radius:var(--input-inner-border-radius) 0 0 var(--input-inner-border-radius);border-left:0;}&:last-of-type:not(:first-child){border-radius:0 var(--input-inner-border-radius) var(--input-inner-border-radius) 0;border-right:0;}~ ", "{display:none;}"], function (props) {
@@ -67,3 +72,3 @@ return props.theme.colors.neutral.lightest;
   displayName: "Inputs__Input",
-  componentId: "qkl6qy-4"
+  componentId: "qkl6qy-5"
 })(["width:100%;max-width:100%;box-sizing:border-box;margin:0;padding:0 1em;border-top-left-radius:var(--input-inner-border-radius);border-bottom-left-radius:var(--input-inner-border-radius);border:none;outline:none;flex:1;color:", ";&:disabled{color:", ";background-color:white;}&::placeholder{color:", ";}&:disabled::placeholder{color:", ";}&:last-of-type{border-top-right-radius:var(--input-inner-border-radius);border-bottom-right-radius:var(--input-inner-border-radius);}&:not(:placeholder-shown) + ", "{font-size:0.8em;cursor:default;transform:translateX(0);opacity:1;}+ ", "{transform:translateX(-0.5em);opacity:0;transition:all 0.2s ease;}&:focus ~ ", "{width:100%;}&:-webkit-autofill{-webkit-box-shadow:0 0 0 30px white inset;-webkit-text-fill-color:", " !important;}&:disabled:-webkit-autofill{-webkit-text-fill-color:", " !important;}&:-webkit-autofill + ", "{top:0em;font-size:0.8em;}", " + &{padding:0 0.5em;}"], function (props) {
@@ -88,3 +93,3 @@ return props.theme.colors.neutral.darkest;
   displayName: "Inputs__Text",
-  componentId: "qkl6qy-5"
+  componentId: "qkl6qy-6"
 })([""]);
@@ -97,3 +102,3 @@ Input.Numeric = styled(Input.Input).attrs(function (props) {
   displayName: "Inputs__Numeric",
-  componentId: "qkl6qy-6"
+  componentId: "qkl6qy-7"
 })([""]);
@@ -104,3 +109,3 @@ Input.Textarea = styled(Input.Input).attrs({
   displayName: "Inputs__Textarea",
-  componentId: "qkl6qy-7"
+  componentId: "qkl6qy-8"
 })(["min-height:4em;padding-top:0.7em;padding-bottom:0.7em;"]);
@@ -113,5 +118,5 @@ export var InputDetail = styled(Text).attrs(function (props) {
   displayName: "Inputs__InputDetail",
-  componentId: "qkl6qy-8"
+  componentId: "qkl6qy-9"
 })(["color:", ";font-style:normal;font-weight:normal;font-size:12px;line-height:1.5em;"], function (props) {
   return props.theme.colors.neutral;
 });

build/Address.js

@@ -79,7 +79,7 @@ "use strict";
       _useState2 = _slicedToArray(_useState, 2),
-      containerSize = _useState2[0],
-      setContainerSize = _useState2[1];
+      fontSize = _useState2[0],
+      setfontSize = _useState2[1];
 
-  var eighth = containerSize / 8;
-  var quarter = containerSize / 4;
+  var eighth = fontSize / 8;
+  var quarter = fontSize / 4;
   var account = String(children); // Set Jazzicon size on mount, once font size is determined
@@ -89,3 +89,3 @@
     if (addressContainer.current) {
-      setContainerSize(parseFloat(getComputedStyle(addressContainer.current).fontSize));
+      setfontSize(parseFloat(getComputedStyle(addressContainer.current).fontSize));
     }
@@ -104,10 +104,10 @@ }, [addressContainer]);
   }, props), metamask && !ethereumLogo && _react["default"].createElement(_reactJazzicon["default"], {
-    diameter: containerSize,
+    diameter: fontSize * 1.2,
     seed: (0, _reactJazzicon.jsNumberForAddress)(account),
     paperStyles: {
-      margin: "".concat(eighth, "px ").concat(quarter, "px ").concat(eighth, "px ").concat(eighth, "px"),
+      margin: "".concat(eighth, "px ").concat(quarter, "px 0 ").concat(eighth, "px"),
       verticalAlign: "text-bottom"
     }
   }), ethereumLogo && !metamask && _react["default"].createElement(EthereumIcon, {
-    height: containerSize
+    height: fontSize
   }), abbreviated ? abbreviate(account) : account));
@@ -114,0 +114,0 @@ };

build/Form.js

@@ -6,19 +6,13 @@ "use strict";
 });
-exports.Form = Form;
-exports.Fieldset = void 0;
+exports.FormRow = exports.Fieldset = exports.Form = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _grid = require("./grid");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var Form = _styledComponents["default"].form;
+exports.Form = Form;
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 var Fieldset = _styledComponents["default"].fieldset.withConfig({
@@ -31,38 +25,23 @@ displayName: "Form__Fieldset",
 
-function Form(_ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      props = _objectWithoutProperties(_ref, ["children", "disabled"]);
+var FormRow = _styledComponents["default"].label.withConfig({
+  displayName: "Form__FormRow",
+  componentId: "sc-1aeblka-1"
+})(["display:flex;align-items:center;"]);
 
-  return _react["default"].createElement("form", props, _react["default"].createElement(Fieldset, {
-    disabled: disabled
-  }, children));
-}
-
-Form.propTypes = {
-  method: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool
-};
-Form.defaultProps = {
-  method: "post",
-  disabled: false
-};
-
-Form.withGuard = function withGuard(InteractionGuardContext) {
-  // eslint-disable-next-line no-shadow
-  function FormWithGuard(_ref2) {
-    var method = _ref2.method,
-        disabled = _ref2.disabled,
-        props = _objectWithoutProperties(_ref2, ["method", "disabled"]);
-
-    return _react["default"].createElement(InteractionGuardContext.Consumer, null, function (mounted) {
-      return _react["default"].createElement(Form, _extends({}, props, {
-        method: mounted ? method : "post",
-        disabled: mounted ? disabled : true
-      }));
-    });
-  }
-
-  FormWithGuard.displayName = "withGuard(Form)";
-  return FormWithGuard;
-};
+exports.FormRow = FormRow;
+FormRow.Label = _styledComponents["default"].div.withConfig({
+  displayName: "Form__Label",
+  componentId: "sc-1aeblka-2"
+})(["", " flex-direction:column;align-items:flex-end;text-align:right;padding-top:1em;padding-bottom:1em;padding-left:0;"], function (props) {
+  return (0, _grid.column)({
+    col: props.col || 3
+  });
+});
+FormRow.Control = _styledComponents["default"].div.withConfig({
+  displayName: "Form__Control",
+  componentId: "sc-1aeblka-3"
+})(["", " padding-right:0;& > *{flex:1;}"], function (props) {
+  return (0, _grid.column)({
+    col: props.col || 9
+  });
+});

build/index.js

@@ -194,2 +194,8 @@ "use strict";
 });
+Object.defineProperty(exports, "FormRow", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormRow;
+  }
+});
 Object.defineProperty(exports, "Information", {
@@ -196,0 +202,0 @@ enumerable: true,

build/Inputs.js

@@ -28,6 +28,11 @@ "use strict";
 exports.InputControl = InputControl;
+InputControl.Checkbox = (0, _styledComponents["default"])(InputControl).withConfig({
+  displayName: "Inputs__Checkbox",
+  componentId: "qkl6qy-1"
+})(["display:initial;"]);
+InputControl.Radio = InputControl.Checkbox;
 
 var Input = _styledComponents["default"].label.withConfig({
   displayName: "Inputs__Input",
-  componentId: "qkl6qy-1"
+  componentId: "qkl6qy-2"
 })(["--input-border-radius:8px;--input-border-width:2px;--input-inner-border-radius:calc(var(--input-border-radius) - var(--input-border-width));display:flex;box-sizing:border-box;position:relative;min-height:3em;width:", ";padding:0;background-color:white;border-style:solid;border-width:var(--input-border-width);border-radius:var(--input-border-radius);border-color:", ";&:focus-within{border-color:", ";box-shadow:inset 0 1px 2px rgba(27,31,35,0.075),0 0 0 0.1em ", ";}"], function (props) {
@@ -58,3 +63,3 @@ return props.block ? "100%" : "auto";
   displayName: "Inputs__Label",
-  componentId: "qkl6qy-2"
+  componentId: "qkl6qy-3"
 })(["--label-gutter-v:9px;--label-gutter-h:6px;position:absolute;top:0em;left:1em;padding:0 var(--label-gutter-h);margin:calc(var(--label-gutter-v) * -1) 0 0 calc(calc(var(--label-gutter-h) / 2) * -1);color:", ";height:auto;line-height:initial;font-size:0.8em;background-color:", ";cursor:default;user-select:none;"], function (props) {
@@ -67,3 +72,3 @@ return props.theme.texts.colors.neutral;
   displayName: "Inputs__Item",
-  componentId: "qkl6qy-3"
+  componentId: "qkl6qy-4"
 })(["box-sizing:border-box;display:flex;background-color:", ";align-items:center;justify-content:center;white-space:nowrap;padding:0 1em;flex:-1;color:", ";min-width:3em;border-radius:0;border:solid ", ";border-width:0 var(--input-border-width);&:first-of-type:not(:last-child){border-radius:var(--input-inner-border-radius) 0 0 var(--input-inner-border-radius);border-left:0;}&:last-of-type:not(:first-child){border-radius:0 var(--input-inner-border-radius) var(--input-inner-border-radius) 0;border-right:0;}~ ", "{display:none;}"], function (props) {
@@ -85,3 +90,3 @@ return props.theme.colors.neutral.lightest;
   displayName: "Inputs__Input",
-  componentId: "qkl6qy-4"
+  componentId: "qkl6qy-5"
 })(["width:100%;max-width:100%;box-sizing:border-box;margin:0;padding:0 1em;border-top-left-radius:var(--input-inner-border-radius);border-bottom-left-radius:var(--input-inner-border-radius);border:none;outline:none;flex:1;color:", ";&:disabled{color:", ";background-color:white;}&::placeholder{color:", ";}&:disabled::placeholder{color:", ";}&:last-of-type{border-top-right-radius:var(--input-inner-border-radius);border-bottom-right-radius:var(--input-inner-border-radius);}&:not(:placeholder-shown) + ", "{font-size:0.8em;cursor:default;transform:translateX(0);opacity:1;}+ ", "{transform:translateX(-0.5em);opacity:0;transition:all 0.2s ease;}&:focus ~ ", "{width:100%;}&:-webkit-autofill{-webkit-box-shadow:0 0 0 30px white inset;-webkit-text-fill-color:", " !important;}&:disabled:-webkit-autofill{-webkit-text-fill-color:", " !important;}&:-webkit-autofill + ", "{top:0em;font-size:0.8em;}", " + &{padding:0 0.5em;}"], function (props) {
@@ -106,3 +111,3 @@ return props.theme.colors.neutral.darkest;
   displayName: "Inputs__Text",
-  componentId: "qkl6qy-5"
+  componentId: "qkl6qy-6"
 })([""]);
@@ -115,3 +120,3 @@ Input.Numeric = (0, _styledComponents["default"])(Input.Input).attrs(function (props) {
   displayName: "Inputs__Numeric",
-  componentId: "qkl6qy-6"
+  componentId: "qkl6qy-7"
 })([""]);
@@ -122,3 +127,3 @@ Input.Textarea = (0, _styledComponents["default"])(Input.Input).attrs({
   displayName: "Inputs__Textarea",
-  componentId: "qkl6qy-7"
+  componentId: "qkl6qy-8"
 })(["min-height:4em;padding-top:0.7em;padding-bottom:0.7em;"]);
@@ -131,3 +136,3 @@ var InputDetail = (0, _styledComponents["default"])(_Texts.Text).attrs(function (props) {
   displayName: "Inputs__InputDetail",
-  componentId: "qkl6qy-8"
+  componentId: "qkl6qy-9"
 })(["color:", ";font-style:normal;font-weight:normal;font-size:12px;line-height:1.5em;"], function (props) {
@@ -134,0 +139,0 @@ return props.theme.colors.neutral;

package.json

 {
   "name": "@daisypayments/petals",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Reusable front end components to be used across Daisy Payments",
@@ -5,0 +5,0 @@ "main": "build/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

321968

decreased by-0.78%

Lines of code

6431

decreased by-0.29%

No dependency changes