@onepercentio/one-ui 0.19.1 → 0.19.3

package/dist/components/FileInput/View/BigFactory/BigFactory.module.scss

@@ -0,0 +1,20 @@
+@import "../../../../assets/styles/index.scss";
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: $fileInputBackgroundColor;
+  padding: 72px;
+  border: 1px solid;
+  border-color: $fileInputBorderColor;
+  position: relative;
+  margin-bottom: 28px;
+}
+
+.footer {
+  position: absolute;
+  bottom: -24px;
+  left: 0px;
+}

package/dist/components/FileInput/View/BigFactory/index.d.ts

@@ -0,0 +1 @@
+export { default } from './BigFactory';

package/dist/components/FileInput/View/BigFactory/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _BigFactory.default;
+  }
+});
+var _BigFactory = _interopRequireDefault(require("./BigFactory"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/FileInput/View/Compact/Compact.d.ts

@@ -0,0 +1,5 @@
+import { FileInputViewProps } from "../View.types";
+/**
+ * Shows the file submission input in a more compact form
+ **/
+export default function Compact({ states, file, footer, inputEl, onAction, progress, className, }: FileInputViewProps): JSX.Element;

package/dist/components/FileInput/View/Compact/Compact.js

@@ -0,0 +1,88 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Compact;
+var _react = _interopRequireWildcard(require("react"));
+var _CompactModule = _interopRequireDefault(require("./Compact.module.scss"));
+var _UncontrolledTransition = _interopRequireDefault(require("../../../UncontrolledTransition/UncontrolledTransition"));
+var _Transition = require("../../../Transition");
+var _Button = _interopRequireDefault(require("../../../Button/Button"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Shows the file submission input in a more compact form
+ **/
+function Compact(_ref) {
+  let states = _ref.states,
+    file = _ref.file,
+    footer = _ref.footer,
+    inputEl = _ref.inputEl,
+    onAction = _ref.onAction,
+    progress = _ref.progress,
+    className = _ref.className;
+  const state = states[file ? "fileProvided" : "waitingFile"];
+  const statusClass = progress !== undefined && progress < 100 ? "loading" : file ? "completed" : "waiting";
+  const progressDashArray = (0, _react.useMemo)(function () {
+    if (progress !== undefined) {
+      const strokePercent = progress * 300 / 100;
+      return "".concat(strokePercent, "% ").concat(300 - strokePercent, "%");
+    }
+  }, [progress]);
+  const polylines = (0, _react.useMemo)(function () {
+    switch (statusClass) {
+      case "completed":
+        return ["rotate(45, 23, 23.5)", "14 23.9, 23 23.9, 32 23.9", "23 14.8 23 33"];
+      case "loading":
+        return ["", "18 23.9, 23 18.8, 28 23.9", "23 18.8 23 29"];
+      default:
+        return ["", "18 23.9, 23 23.9, 28 23.9", "23 18.8 23 29"];
+    }
+  }, [statusClass]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_CompactModule.default.root, " ").concat(className),
+    style: {
+      "--progress-stroke-dasharray": progressDashArray
+    }
+  }, /*#__PURE__*/_react.default.createElement(_UncontrolledTransition.default, {
+    transitionType: _Transition.TransitionAnimationTypes.COIN_FLIP
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "transparent",
+    key: statusClass,
+    onClick: onAction
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 46 47",
+    className: _CompactModule.default[statusClass],
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "23",
+    cy: "23.859",
+    r: "22",
+    style: {
+      stroke: "var(--svg-color, #000)"
+    },
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    transform: polylines[0]
+  }, /*#__PURE__*/_react.default.createElement("polyline", {
+    points: polylines[1],
+    "stroke-width": "2.8",
+    style: {
+      stroke: "var(--svg-color, #000)"
+    },
+    "stroke-linecap": "round"
+  }), /*#__PURE__*/_react.default.createElement("polyline", {
+    points: polylines[2],
+    "stroke-width": "2.8",
+    style: {
+      stroke: "var(--svg-color, #000)"
+    },
+    "stroke-linecap": "round"
+  }))))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, state.title), state.description && /*#__PURE__*/_react.default.createElement("p", null, state.description), /*#__PURE__*/_react.default.createElement("p", null, footer)), inputEl);
+}

package/dist/components/FileInput/View/Compact/Compact.module.scss

@@ -0,0 +1,59 @@
+@import "../../../../assets/styles/index.scss";
+
+.root {
+  padding: 14px 22px;
+  background-color: $fileInputBackgroundColor;
+  display: flex;
+  align-items: center;
+  button {
+    padding: 0px;
+    min-width: initial;
+    margin-right: 24px;
+  }
+  > :first-child svg {
+    height: 46px;
+  }
+  > div {
+    p {
+      margin: 0px;
+    }
+    p:nth-child(1) {
+      font-weight: bold;
+      font-size: 14px;
+      font-family: $mainFontFamily;
+    }
+    p:nth-child(2) {
+      font-size: 12px;
+      font-family: $mainFontFamily;
+    }
+    p:nth-child(3) {
+      margin-top: 8px;
+      font-size: 16px;
+      font-family: $mainFontFamily;
+    }
+  }
+  svg {
+    --svg-color: #{$digitalBlue};
+    &.loading {
+      circle {
+        transition: stroke-dasharray 250ms ease-out;
+        stroke-dasharray: var(--progress-stroke-dasharray);
+      }
+    }
+    &.completed {
+      --svg-color: #{$successDark};
+      circle {
+        fill: #{$success};
+        stroke: #{$successDark};
+      }
+      polyline {
+        stroke-width: 3;
+      }
+    }
+    &.waiting {
+      circle {
+        stroke-dasharray: 10%;
+      }
+    }
+  }
+}

package/dist/components/FileInput/View/Compact/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Compact';

package/dist/components/FileInput/View/Compact/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Compact.default;
+  }
+});
+var _Compact = _interopRequireDefault(require("./Compact"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/FileInput/View/View.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { FileInputProps } from "../FileInput";
+export declare type FileInputViewProps = {
+    inputEl: ReactNode;
+    onAction: () => void;
+    /** A range from 0-100 to indicate some file upload progress */
+    progress?: number;
+} & Pick<FileInputProps, "states" | "file" | "footer" | "className">;

package/dist/components/FileInput/View/View.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/components/FileInput/index.js

@@ -1,9 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var FileInput_1 = require("./FileInput");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FileInput_1).default; } });
-//# sourceMappingURL=index.js.map
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _FileInput.default;
+  }
+});
+var _FileInput = _interopRequireDefault(require("./FileInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/FlowController/FlowController.js

@@ -1,34 +1,65 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeadingImage = void 0;
-const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("../Button"));
-const HeaderCloseBtn_1 = __importDefault(require("../HeaderCloseBtn"));
-const Transition_1 = __importDefault(require("../Transition"));
-const FlowController_module_scss_1 = __importDefault(require("./FlowController.module.scss"));
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeadingImage = HeadingImage;
+exports.default = FlowController;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _HeaderCloseBtn = _interopRequireDefault(require("../HeaderCloseBtn"));
+var _Transition = _interopRequireDefault(require("../Transition"));
+var _FlowControllerModule = _interopRequireDefault(require("./FlowController.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Container for a flow, managing the go back and close controller
  **/
-function FlowController({ children, buttons, step, onClose, onBack, fullPage, firstStep = 0, style, wrapper: Wrapper = "div", }) {
-    function _handleBackPress() {
-        if (isAtFirstStep)
-            onClose && onClose();
-        else if (onBack)
-            onBack();
-    }
-    const isAtFirstStep = step === firstStep;
-    const shouldDisplayHeaderButton = (isAtFirstStep && onClose) || (!isAtFirstStep && onBack);
-    return (react_1.default.createElement(Wrapper, { onClick: (e) => e.stopPropagation(), className: FlowController_module_scss_1.default.container, style: style },
-        react_1.default.createElement("header", null, shouldDisplayHeaderButton && (react_1.default.createElement(HeaderCloseBtn_1.default, { mode: isAtFirstStep ? "close" : "back", hidden: !onBack, onClick: _handleBackPress }))),
-        react_1.default.createElement(Transition_1.default, { step: step, className: FlowController_module_scss_1.default.transition, contentClassName: `${fullPage ? FlowController_module_scss_1.default.fullHeight : ""} ${FlowController_module_scss_1.default.content}` }, children),
-        react_1.default.createElement("footer", { className: buttons.find((b) => b.state === "hidden") ? FlowController_module_scss_1.default.hidden : undefined }, buttons.map((b) => (react_1.default.createElement(Button_1.default, { onClick: b.onClick, disabled: b.state === "hidden" || b.state === "disabled" }, b.label))))));
+function FlowController(_ref) {
+  let children = _ref.children,
+    buttons = _ref.buttons,
+    step = _ref.step,
+    onClose = _ref.onClose,
+    onBack = _ref.onBack,
+    fullPage = _ref.fullPage,
+    _ref$firstStep = _ref.firstStep,
+    firstStep = _ref$firstStep === void 0 ? 0 : _ref$firstStep,
+    style = _ref.style,
+    _ref$wrapper = _ref.wrapper,
+    Wrapper = _ref$wrapper === void 0 ? "div" : _ref$wrapper;
+  function _handleBackPress() {
+    if (isAtFirstStep) onClose && onClose();else if (onBack) onBack();
+  }
+  const isAtFirstStep = step === firstStep;
+  const shouldDisplayHeaderButton = isAtFirstStep && onClose || !isAtFirstStep && onBack;
+  return /*#__PURE__*/_react.default.createElement(Wrapper, {
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    className: _FlowControllerModule.default.container,
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("header", null, shouldDisplayHeaderButton && /*#__PURE__*/_react.default.createElement(_HeaderCloseBtn.default, {
+    mode: isAtFirstStep ? "close" : "back",
+    hidden: !onBack,
+    onClick: _handleBackPress
+  })), /*#__PURE__*/_react.default.createElement(_Transition.default, {
+    step: step,
+    className: _FlowControllerModule.default.transition,
+    contentClassName: "".concat(fullPage ? _FlowControllerModule.default.fullHeight : "", " ").concat(_FlowControllerModule.default.content)
+  }, children), /*#__PURE__*/_react.default.createElement("footer", {
+    className: buttons.find(function (b) {
+      return b.state === "hidden";
+    }) ? _FlowControllerModule.default.hidden : undefined
+  }, buttons.map(function (b) {
+    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: b.onClick,
+      disabled: b.state === "hidden" || b.state === "disabled"
+    }, b.label);
+  })));
 }
-exports.default = FlowController;
-function HeadingImage({ src }) {
-    return react_1.default.createElement("img", { src: src, className: FlowController_module_scss_1.default.headingImg });
-}
-exports.HeadingImage = HeadingImage;
-//# sourceMappingURL=FlowController.js.map
+function HeadingImage(_ref2) {
+  let src = _ref2.src;
+  return /*#__PURE__*/_react.default.createElement("img", {
+    src: src,
+    className: _FlowControllerModule.default.headingImg
+  });
+}

package/dist/components/FlowController/README.md

@@ -0,0 +1,13 @@
+# FlowController
+
+## Description
+
+Container for a flow, managing the go back and close controller
+
+## Business rules
+
+- Should call onClose when clicking goBack and step 0
+- Should call onGoBack when clicking the goBack button and step > 0
+- Should call onNext when clicking the footer button
+- Should display the selected text on the button
+- Should be able to enable point of no return, where the goBack action is not displayed anymore

package/dist/components/FlowController/index.js

@@ -1,9 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var FlowController_1 = require("./FlowController");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FlowController_1).default; } });
-//# sourceMappingURL=index.js.map
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _FlowController.default;
+  }
+});
+var _FlowController = _interopRequireDefault(require("./FlowController"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }