quicksnack 3.21.0 → 3.22.1

package/dist/components/AnimatedCheckmark/AnimatedCheckmark.js

@@ -35,15 +35,15 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var Mask = styled_components_1.default.g(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    fill: none; \n    stroke: ", ";    \n    stroke-width: 10;\n"], ["\n    fill: none; \n    stroke: ", ";    \n    stroke-width: 10;\n"])), function (props) { return props.theme.palette.colors.green; });
 var polyLineAnimation = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["    \n    0% {\n        stroke-dashoffset: 100px\n    }\n    100% {\n        stroke-dashoffset: 0px\n    }\n"], ["    \n    0% {\n        stroke-dashoffset: 100px\n    }\n    100% {\n        stroke-dashoffset: 0px\n    }\n"])));
-var Polyline = styled_components_1.default.polyline(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    stroke-dasharray: 100px, 100px;\n    stroke-dashoffset: 200px;\n    animation: ", " 0.21s ease-in-out 0.7s backwards;\n    stroke: ", "; \n    stroke-width: 10;     \n"], ["\n    stroke-dasharray: 100px, 100px;\n    stroke-dashoffset: 200px;\n    animation: ", " 0.21s ease-in-out 0.7s backwards;\n    stroke: ", "; \n    stroke-width: 10;     \n"])), polyLineAnimation, function (props) { return props.theme.palette.colors.green; });
+var Polyline = styled_components_1.default.polyline(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    stroke-dasharray: 100px, 100px;\n    stroke-dashoffset: 200px;\n    animation: ", " 0.21s ease-in-out 0.4s backwards;\n    stroke: ", "; \n    stroke-width: 10;     \n"], ["\n    stroke-dasharray: 100px, 100px;\n    stroke-dashoffset: 200px;\n    animation: ", " 0.21s ease-in-out 0.4s backwards;\n    stroke: ", "; \n    stroke-width: 10;     \n"])), polyLineAnimation, function (props) { return props.theme.palette.colors.green; });
 var circleAnimation = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    0% {\n        stroke-dashoffset: 480px \n    }\n    100% {\n        stroke-dashoffset: 960px\n    }\n"], ["\n    0% {\n        stroke-dashoffset: 480px \n    }\n    100% {\n        stroke-dashoffset: 960px\n    }\n"])));
-var Circle = styled_components_1.default.circle(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    stroke-dasharray: 480px, 480px; \n    stroke-dashoffset: 960px;\n    animation: ", " 0.6s ease-in-out backwards;\n    cx: 77;\n    cy: 77;\n    r: 72;\n"], ["\n    stroke-dasharray: 480px, 480px; \n    stroke-dashoffset: 960px;\n    animation: ", " 0.6s ease-in-out backwards;\n    cx: 77;\n    cy: 77;\n    r: 72;\n"])), circleAnimation);
+var Circle = styled_components_1.default.circle(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    stroke-dasharray: 480px, 480px; \n    stroke-dashoffset: 960px;\n    animation: ", " 0.3s ease-in-out backwards;\n    stroke: ", "; \n    stroke-width: 10;    \n"], ["\n    stroke-dasharray: 480px, 480px; \n    stroke-dashoffset: 960px;\n    animation: ", " 0.3s ease-in-out backwards;\n    stroke: ", "; \n    stroke-width: 10;    \n"])), circleAnimation, function (props) { return props.theme.palette.colors.green; });
 var circleColoredAnimation = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    0% { \n        opacity:0; \n    }\n    100% { \n        opacity:100; \n    }\n"], ["\n    0% { \n        opacity:0; \n    }\n    100% { \n        opacity:100; \n    }\n"])));
-var CircleColored = styled_components_1.default.circle(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    stroke-dasharray: 480px, 480px; \n    stroke-dashoffset: 960px;\n    animation: ", " 0.6s ease-in-out 0.7s backwards;\n    fill: ", ";\n    cx: 77;\n    cy: 77;\n    r: 72;\n"], ["\n    stroke-dasharray: 480px, 480px; \n    stroke-dashoffset: 960px;\n    animation: ", " 0.6s ease-in-out 0.7s backwards;\n    fill: ", ";\n    cx: 77;\n    cy: 77;\n    r: 72;\n"])), circleColoredAnimation, function (props) { return props.theme.palette.common.white; });
+var CircleColored = styled_components_1.default.circle(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    stroke-dasharray: 480px, 480px; \n    stroke-dashoffset: 960px;\n    animation: ", " 0.6s ease-in-out 0.7s backwards;\n    fill: #effaf8;    \n"], ["\n    stroke-dasharray: 480px, 480px; \n    stroke-dashoffset: 960px;\n    animation: ", " 0.6s ease-in-out 0.7s backwards;\n    fill: #effaf8;    \n"])), circleColoredAnimation);
 var AnimatedCheckmark = function () { return (react_1.default.createElement("svg", { viewBox: "0 0 154 154" },
     react_1.default.createElement(Mask, null,
-        react_1.default.createElement(Circle, null),
-        react_1.default.createElement(CircleColored, null),
+        react_1.default.createElement(Circle, { cx: '77', cy: '77', r: '72' }),
+        react_1.default.createElement(CircleColored, { cx: '77', cy: '77', r: '72' }),
         react_1.default.createElement(Polyline, { points: "43.5,77.8 63.7,97.9 112.2,49.4" })))); };
 exports.AnimatedCheckmark = AnimatedCheckmark;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Feedback/Feedback.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    onConfirm: () => void;
+    buttonLabel: string | JSX.Element;
+    buttonIcon?: JSX.Element;
+    title: string | JSX.Element;
+}
+export declare const Feedback: React.FC<Props>;
+export {};

package/dist/components/Feedback/Feedback.js

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Feedback = void 0;
+var react_1 = __importDefault(require("react"));
+var Box_1 = require("../Box/Box");
+var Header_1 = require("../../typography/Header/Header");
+var AnimatedCheckmark_1 = require("../AnimatedCheckmark/AnimatedCheckmark");
+var Button_1 = require("../../form/Button/Button");
+var Modal_1 = require("../Modal/Modal");
+var styled_components_1 = __importDefault(require("styled-components"));
+var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 300px;  \n"], ["\n  width: 300px;  \n"])));
+var Feedback = function (_a) {
+    var onConfirm = _a.onConfirm, buttonLabel = _a.buttonLabel, buttonIcon = _a.buttonIcon, title = _a.title;
+    return (react_1.default.createElement(Modal_1.Modal, { handleClickOverlay: onConfirm, buttons: react_1.default.createElement(Button_1.Button, { stretch: true, icon: buttonIcon, variant: 'secondary', onClick: onConfirm }, buttonLabel) },
+        react_1.default.createElement(StyledBox, { pt: 3, pb: 3, pl: 7, pr: 7 },
+            react_1.default.createElement(Box_1.Box, { pb: 7, textAlign: "center" },
+                react_1.default.createElement(Header_1.Header, null, title)),
+            react_1.default.createElement(AnimatedCheckmark_1.AnimatedCheckmark, null))));
+};
+exports.Feedback = Feedback;
+var templateObject_1;

package/dist/form/Button/Button.js

@@ -57,7 +57,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var theme_1 = require("../../theme");
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
-var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "      \n"], ["\n  ", "\n  ", "      \n"])), function (props) { return props.stretch && "width: 100%;"; }, function (props) { return props.actionButton
+var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "      \n"], ["\n  ", "\n  ", "      \n"])), function (props) { return props.stretch && "width: 100%;"; }, function (props) { return props.actionButton || props.stretch
     ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["margin: 0;"], ["margin: 0;"]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), function (props) { return props.theme.spacing(0, 2, 0, 0); }); });
 var StyledButton = styled_components_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;  \n  outline: 0;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  transition: background-color .1s ease, color .1s ease;      \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  user-select: none;\n  min-height: 38px;   \n  \n  ", "\n  \n  ", "\n  \n   \n  ", " \n    \n  &:disabled {\n    opacity: .5;\n    cursor: default;\n  }  \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"], ["\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;  \n  outline: 0;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  transition: background-color .1s ease, color .1s ease;      \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  user-select: none;\n  min-height: 38px;   \n  \n  ", "\n  \n  ", "\n  \n   \n  ", " \n    \n  &:disabled {\n    opacity: .5;\n    cursor: default;\n  }  \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"])), function (props) { return props.stretch && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: 100%;\n      display: block;\n  "], ["\n      width: 100%;\n      display: block;\n  "]))); }, function (props) { return props.actionButton && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: 100%;      \n      ", "\n  "], ["\n      width: 100%;      \n      ", "\n  "])), (0, responsiveProps_1.mq)('laptop', "width: auto")); }, function (props) { return props.variant !== 'text'
     ? !props.icon

package/dist/form/FileField/FileField.js

@@ -60,17 +60,26 @@ var TextField_1 = require("../TextField/TextField");
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;    \n"], ["\n  position: relative;\n  display: flex;    \n"])));
 var HiddenInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;    \n  width: 100%;\n  opacity:0;\n"], ["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;    \n  width: 100%;\n  opacity:0;\n"])));
 var StyledButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["    \n  height: 40px;\n  \n  .has-error & {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"], ["    \n  height: 40px;\n  \n  .has-error & {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"])));
-var StyledTextField = (0, styled_components_1.default)(TextField_1.TextField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;  \n"], ["\n  flex: 1;  \n"])));
+var StyledTextField = (0, styled_components_1.default)(TextField_1.TextField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;  \n  padding-right: ", "\n"], ["\n  flex: 1;  \n  padding-right: ", "\n"])), function (props) { return props.theme.spacing(8); });
+var DeleteButton = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["    \n    background-color: transparent;\n    border: 0;\n    outline: 0;    \n    padding: 0;\n   \n    position: absolute;    \n    right: 0;\n    height: 100%;\n   \n   cursor: pointer;\n                   \n    &:after {\n        box-sizing: border-box;\n        \n        color: rgba(0, 0, 0, .3);\n        content: \"\u00D7\";\n        \n        text-align: center;\n        vertical-align: middle;\n        display: table-cell;\n        \n        font-size: 20px;\n        height: 38px;\n        width: 38px;\n        line-height: 38px;\n        padding: 0 8px;\n    }\n"], ["    \n    background-color: transparent;\n    border: 0;\n    outline: 0;    \n    padding: 0;\n   \n    position: absolute;    \n    right: 0;\n    height: 100%;\n   \n   cursor: pointer;\n                   \n    &:after {\n        box-sizing: border-box;\n        \n        color: rgba(0, 0, 0, .3);\n        content: \"\u00D7\";\n        \n        text-align: center;\n        vertical-align: middle;\n        display: table-cell;\n        \n        font-size: 20px;\n        height: 38px;\n        width: 38px;\n        line-height: 38px;\n        padding: 0 8px;\n    }\n"])));
 exports.FileField = react_1.default.forwardRef(function (_a, ref) {
     var className = _a.className, placeholder = _a.placeholder, _b = _a.chooseFileLabel, chooseFileLabel = _b === void 0 ? "Choose file" : _b, _c = _a.changeFileLabel, changeFileLabel = _c === void 0 ? "Change file" : _c, props = __rest(_a, ["className", "placeholder", "chooseFileLabel", "changeFileLabel"]);
-    var _d = (0, react_1.useState)(""), fileName = _d[0], setFilename = _d[1];
+    var _d = (0, react_1.useState)(), originalRef = _d[0], setOriginalRef = _d[1];
+    var _e = (0, react_1.useState)(""), fileName = _e[0], setFilename = _e[1];
     var handleChange = react_1.default.useCallback(function (e) {
         var _a;
         var files = (e === null || e === void 0 ? void 0 : e.target).files;
         setFilename(((_a = files === null || files === void 0 ? void 0 : files[0]) === null || _a === void 0 ? void 0 : _a.name) || "");
     }, []);
+    var handleRemove = (0, react_1.useCallback)(function () {
+        if (originalRef) {
+            originalRef.value = '';
+            originalRef.dispatchEvent(new Event('change'));
+        }
+    }, [originalRef]);
     var extendedRef = react_1.default.useMemo(function () { return function (el) {
         el === null || el === void 0 ? void 0 : el.addEventListener('change', handleChange);
+        setOriginalRef(el);
         if (typeof ref === 'function') {
             ref === null || ref === void 0 ? void 0 : ref(el);
         }
@@ -78,6 +87,7 @@ exports.FileField = react_1.default.forwardRef(function (_a, ref) {
     return (react_1.default.createElement(Wrapper, null,
         react_1.default.createElement(HiddenInput, __assign({ type: 'file', ref: extendedRef }, props)),
         react_1.default.createElement(StyledButton, { variant: 'basic' }, !!fileName ? changeFileLabel : chooseFileLabel),
-        react_1.default.createElement(StyledTextField, { placeholder: placeholder, className: className, disabled: true, value: fileName })));
+        react_1.default.createElement(StyledTextField, { placeholder: placeholder, className: className, disabled: true, value: fileName }),
+        !!fileName && react_1.default.createElement(DeleteButton, { onClick: handleRemove })));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './UiProvider';
 export * from './UiWrapper';
 export * from './animation/SlideInFromTop/SlideInFromTop';
 export * from './components/Alert/Alert';
+export * from './components/AnimatedCheckmark/AnimatedCheckmark';
 export * from './components/Box/Box';
 export * from './components/BreadCrumbs/BreadCrumbs';
 export * from './components/CollapsiblePanel/CollapsiblePanel';
@@ -10,6 +11,7 @@ export * from './components/ConfirmModal/ConfirmModal';
 export * from './components/Details/Details';
 export * from './components/Dropdown/Dropdown';
 export * from './components/Dropzone/Dropzone';
+export * from './components/Feedback/Feedback';
 export * from './components/Floater/Floater';
 export * from './components/Footer/Footer';
 export * from './components/Menu/HamburgerButton';

package/dist/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./UiProvider"), exports);
 __exportStar(require("./UiWrapper"), exports);
 __exportStar(require("./animation/SlideInFromTop/SlideInFromTop"), exports);
 __exportStar(require("./components/Alert/Alert"), exports);
+__exportStar(require("./components/AnimatedCheckmark/AnimatedCheckmark"), exports);
 __exportStar(require("./components/Box/Box"), exports);
 __exportStar(require("./components/BreadCrumbs/BreadCrumbs"), exports);
 __exportStar(require("./components/CollapsiblePanel/CollapsiblePanel"), exports);
@@ -26,6 +27,7 @@ __exportStar(require("./components/ConfirmModal/ConfirmModal"), exports);
 __exportStar(require("./components/Details/Details"), exports);
 __exportStar(require("./components/Dropdown/Dropdown"), exports);
 __exportStar(require("./components/Dropzone/Dropzone"), exports);
+__exportStar(require("./components/Feedback/Feedback"), exports);
 __exportStar(require("./components/Floater/Floater"), exports);
 __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Menu/HamburgerButton"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "3.21.0",
+  "version": "3.22.1",
   "private": false,
   "files": [
     "dist/**"