@purple/phoenix-components - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/bundle.cjs.js

@@ -239,2 +239,69 @@ 'use strict';
 
+var getBorder$1 = function (error, border) {
+    if (error) {
+        return "1px solid red";
+    }
+    if (border) {
+        return "1px solid #dedede";
+    }
+    return "none";
+};
+var getBottomBorder$1 = function (error, background, withBorder) {
+    if (background) {
+        return "none";
+    }
+    if (withBorder) {
+        return "none";
+    }
+    if (error) {
+        return "red";
+    }
+    return "black";
+};
+var TextAreaWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), function (_a) {
+    var withBorder = _a.withBorder;
+    return (withBorder ? "#fff" : "transparent");
+}, function (_a) {
+    var withBorder = _a.withBorder;
+    return (withBorder ? "8px 10px 4px" : "");
+}, function (_a) {
+    var withBorder = _a.withBorder, error = _a.error;
+    return getBorder$1(error, withBorder);
+}, function (_a) {
+    var withBorder = _a.withBorder;
+    return (withBorder ? "3px" : "0px");
+});
+var ContentRight$1 = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"], ["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"])));
+var Wrapper$1 = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  font-family: \"Roboto\", sans-serif;\n"], ["\n  font-family: \"Roboto\", sans-serif;\n"])));
+var StyledFloatingLabel$1 = styled(FloatingLabel)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 15px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  textarea {\n    width: 100%;\n    border: none;\n    border-bottom: 1px solid\n      ", ";\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  textarea:focus {\n    border-color: ", ";\n  }\n\n  textarea:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  textarea:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 15px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  textarea {\n    width: 100%;\n    border: none;\n    border-bottom: 1px solid\n      ",
+    ";\n    background: ",
+    ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  textarea:focus {\n    border-color: ", ";\n  }\n\n  textarea:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ",
+    ";\n  }\n\n  textarea:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
+    var error = _a.error, background = _a.background, withBorder = _a.withBorder;
+    return getBottomBorder$1(error, background, withBorder);
+}, function (_a) {
+    var background = _a.background;
+    return background ? background : "transparent";
+}, function (_a) {
+    var error = _a.error;
+    return (error ? "red" : "#562878");
+}, function (_a) {
+    var error = _a.error;
+    return error ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.6)";
+});
+var Error$2 = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3;
+
+var TextArea = function (_a) {
+    var onChange = _a.onChange, onBlur = _a.onBlur, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, withBorder = _a.withBorder, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, rows = _a.rows;
+    return (React.createElement(Wrapper$1, null,
+        React.createElement(TextAreaWrap, { background: background, withBorder: withBorder, error: error },
+            React.createElement(StyledFloatingLabel$1, { id: name, component: "textarea", rows: rows, withBorder: withBorder, name: name, placeholder: label, error: error, type: type || "text", onBlur: onBlur, onChange: onChange, value: value }),
+            contentRight && React.createElement(ContentRight$1, null, contentRight)),
+        error && !disableErrorText && React.createElement(Error$2, null, error)));
+};
+TextArea.defaultProps = {
+    rows: 3
+};
+
 exports.Checkbox = CheckBox;
@@ -244,1 +311,2 @@ exports.Input = Input;
 exports.SelectPicker = SelectPicker;
+exports.TextArea = TextArea;

dist/bundle.esm.js

@@ -231,2 +231,69 @@ import React__default, { createElement, useState, useEffect } from 'react';
 
-export { CheckBox as Checkbox, Input, SelectBox, SelectPicker };
+var getBorder$1 = function (error, border) {
+    if (error) {
+        return "1px solid red";
+    }
+    if (border) {
+        return "1px solid #dedede";
+    }
+    return "none";
+};
+var getBottomBorder$1 = function (error, background, withBorder) {
+    if (background) {
+        return "none";
+    }
+    if (withBorder) {
+        return "none";
+    }
+    if (error) {
+        return "red";
+    }
+    return "black";
+};
+var TextAreaWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), function (_a) {
+    var withBorder = _a.withBorder;
+    return (withBorder ? "#fff" : "transparent");
+}, function (_a) {
+    var withBorder = _a.withBorder;
+    return (withBorder ? "8px 10px 4px" : "");
+}, function (_a) {
+    var withBorder = _a.withBorder, error = _a.error;
+    return getBorder$1(error, withBorder);
+}, function (_a) {
+    var withBorder = _a.withBorder;
+    return (withBorder ? "3px" : "0px");
+});
+var ContentRight$1 = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"], ["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"])));
+var Wrapper$1 = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  font-family: \"Roboto\", sans-serif;\n"], ["\n  font-family: \"Roboto\", sans-serif;\n"])));
+var StyledFloatingLabel$1 = styled(FloatingLabel)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 15px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  textarea {\n    width: 100%;\n    border: none;\n    border-bottom: 1px solid\n      ", ";\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  textarea:focus {\n    border-color: ", ";\n  }\n\n  textarea:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  textarea:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 15px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  textarea {\n    width: 100%;\n    border: none;\n    border-bottom: 1px solid\n      ",
+    ";\n    background: ",
+    ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  textarea:focus {\n    border-color: ", ";\n  }\n\n  textarea:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ",
+    ";\n  }\n\n  textarea:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
+    var error = _a.error, background = _a.background, withBorder = _a.withBorder;
+    return getBottomBorder$1(error, background, withBorder);
+}, function (_a) {
+    var background = _a.background;
+    return background ? background : "transparent";
+}, function (_a) {
+    var error = _a.error;
+    return (error ? "red" : "#562878");
+}, function (_a) {
+    var error = _a.error;
+    return error ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.6)";
+});
+var Error$2 = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3;
+
+var TextArea = function (_a) {
+    var onChange = _a.onChange, onBlur = _a.onBlur, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, withBorder = _a.withBorder, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, rows = _a.rows;
+    return (createElement(Wrapper$1, null,
+        createElement(TextAreaWrap, { background: background, withBorder: withBorder, error: error },
+            createElement(StyledFloatingLabel$1, { id: name, component: "textarea", rows: rows, withBorder: withBorder, name: name, placeholder: label, error: error, type: type || "text", onBlur: onBlur, onChange: onChange, value: value }),
+            contentRight && createElement(ContentRight$1, null, contentRight)),
+        error && !disableErrorText && createElement(Error$2, null, error)));
+};
+TextArea.defaultProps = {
+    rows: 3
+};
+
+export { CheckBox as Checkbox, Input, SelectBox, SelectPicker, TextArea };

dist/bundle.umd.js

@@ -236,2 +236,69 @@ (function (global, factory) {
 
+    var getBorder$1 = function (error, border) {
+        if (error) {
+            return "1px solid red";
+        }
+        if (border) {
+            return "1px solid #dedede";
+        }
+        return "none";
+    };
+    var getBottomBorder$1 = function (error, background, withBorder) {
+        if (background) {
+            return "none";
+        }
+        if (withBorder) {
+            return "none";
+        }
+        if (error) {
+            return "red";
+        }
+        return "black";
+    };
+    var TextAreaWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"], ["\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  border: ", ";\n  border-radius: ", ";\n"])), function (_a) {
+        var withBorder = _a.withBorder;
+        return (withBorder ? "#fff" : "transparent");
+    }, function (_a) {
+        var withBorder = _a.withBorder;
+        return (withBorder ? "8px 10px 4px" : "");
+    }, function (_a) {
+        var withBorder = _a.withBorder, error = _a.error;
+        return getBorder$1(error, withBorder);
+    }, function (_a) {
+        var withBorder = _a.withBorder;
+        return (withBorder ? "3px" : "0px");
+    });
+    var ContentRight$1 = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"], ["\n  position: absolute;\n  right: 15px;\n  top: 23px;\n"])));
+    var Wrapper$1 = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  font-family: \"Roboto\", sans-serif;\n"], ["\n  font-family: \"Roboto\", sans-serif;\n"])));
+    var StyledFloatingLabel$1 = styled(FloatingLabel)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 15px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  textarea {\n    width: 100%;\n    border: none;\n    border-bottom: 1px solid\n      ", ";\n    background: ", ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  textarea:focus {\n    border-color: ", ";\n  }\n\n  textarea:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ", ";\n  }\n\n  textarea:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"], ["\n  font-size: 14px;\n  width: 100%;\n  box-sizing: border-box;\n  display: block;\n  width: 100%;\n  padding-top: 15px;\n  position: relative;\n\n  & + .floating-label {\n    margin-top: 0.5em;\n    position: relative;\n  }\n\n  textarea {\n    width: 100%;\n    border: none;\n    border-bottom: 1px solid\n      ",
+        ";\n    background: ",
+        ";\n    box-sizing: border-box;\n    font-size: 15px;\n    padding: 16px 0 8px 0;\n    outline: none;\n  }\n\n  textarea:focus {\n    border-color: ", ";\n  }\n\n  textarea:focus + span,\n  &.floating span {\n    font-size: 12px;\n    padding: 0;\n    color: ",
+        ";\n  }\n\n  textarea:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  span {\n    box-sizing: border-box;\n    font-size: 1rem;\n    left: 0;\n    padding: 14px 0 13px 0;\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    transition: font-size 200ms, padding 200ms;\n    z-index: 1;\n  }\n"])), function (_a) {
+        var error = _a.error, background = _a.background, withBorder = _a.withBorder;
+        return getBottomBorder$1(error, background, withBorder);
+    }, function (_a) {
+        var background = _a.background;
+        return background ? background : "transparent";
+    }, function (_a) {
+        var error = _a.error;
+        return (error ? "red" : "#562878");
+    }, function (_a) {
+        var error = _a.error;
+        return error ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.6)";
+    });
+    var Error$2 = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"], ["\n  color: rgba(204, 0, 0, 0.82);\n  padding: 5px 0;\n  font-size: 13px;\n  margin-top: 2px;\n"])));
+    var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$3;
+
+    var TextArea = function (_a) {
+        var onChange = _a.onChange, onBlur = _a.onBlur, value = _a.value, error = _a.error, label = _a.label, type = _a.type, name = _a.name, background = _a.background, withBorder = _a.withBorder, contentRight = _a.contentRight, disableErrorText = _a.disableErrorText, rows = _a.rows;
+        return (React.createElement(Wrapper$1, null,
+            React.createElement(TextAreaWrap, { background: background, withBorder: withBorder, error: error },
+                React.createElement(StyledFloatingLabel$1, { id: name, component: "textarea", rows: rows, withBorder: withBorder, name: name, placeholder: label, error: error, type: type || "text", onBlur: onBlur, onChange: onChange, value: value }),
+                contentRight && React.createElement(ContentRight$1, null, contentRight)),
+            error && !disableErrorText && React.createElement(Error$2, null, error)));
+    };
+    TextArea.defaultProps = {
+        rows: 3
+    };
+
     exports.Checkbox = CheckBox;
@@ -241,2 +308,3 @@ exports.Input = Input;
     exports.SelectPicker = SelectPicker;
+    exports.TextArea = TextArea;
 
@@ -243,0 +311,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/index.d.ts

@@ -5,2 +5,3 @@ import Input from './Input';
 import Checkbox from './Checkbox';
-export { Input, SelectBox, SelectPicker, Checkbox };
+import TextArea from "./TextArea";
+export { Input, SelectBox, SelectPicker, Checkbox, TextArea };

package.json

 {
   "name": "@purple/phoenix-components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

91747

increased by24.04%

Number of package files

17

increased by13.33%

Lines of code

1066

increased by29.68%

No dependency changes