@onepercentio/one-ui 0.19.3 → 0.19.5

package/dist/components/CheckBox/CheckBox.module.scss

@@ -7,6 +7,9 @@
   input {
     max-width: 0px;
     max-height: 0px;
+    width: 0;
+    height: 0;
+    opacity: 0;
   }
 
   > span:first-child {
@@ -19,6 +22,8 @@
     transition: background-color 250ms, border 250ms, box-shadow 250ms;
     border: 1px solid rgb(40, 43, 53);
     box-shadow: 0px 0px 0px -4px $digitalBlue;
+    flex-shrink: 0;
+
     &.wContent {
       margin-right: 0.45em;
     }

package/dist/components/PingPongText/PingPongText.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from "react";
+import Text from "../Text/Text";
+/**
+ * A component that keeps an overflow piece of text visible by continously scrolling it back and forward
+ **/
+export default function PingPongText({ ...props }: ComponentProps<typeof Text>): JSX.Element;

package/dist/components/PingPongText/PingPongText.js

@@ -0,0 +1,69 @@
+"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 = PingPongText;
+var _react = _interopRequireWildcard(require("react"));
+var _Text = _interopRequireDefault(require("../Text/Text"));
+var _PingPongTextModule = _interopRequireDefault(require("./PingPongText.module.scss"));
+var _useMouseHover2 = _interopRequireDefault(require("../../hooks/ui/useMouseHover"));
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+const HOW_MUCH_PIXELS_TO_SCROLL_PER_SECOND = 50;
+const RIGHT_TEXT_MULTIPLIER = 5;
+
+/**
+ * A component that keeps an overflow piece of text visible by continously scrolling it back and forward
+ **/
+function PingPongText(_ref) {
+  let props = _extends({}, _ref);
+  const textRef = (0, _react.useRef)(null);
+  const _useMouseHover = (0, _useMouseHover2.default)(),
+    uiEvents = _useMouseHover.uiEvents,
+    hovering = _useMouseHover.hovering;
+  (0, _react.useEffect)(function () {
+    if (!hovering) {
+      let scrollingInterval;
+      let scrollStartTimeout;
+      scrollStartTimeout = setTimeout(function () {
+        const textEl = textRef.current;
+        const overflowWidth = textEl.scrollWidth;
+        const viewWidth = textEl.clientWidth;
+        const secondsPerFrame = 1000 / 60;
+        const howMuchToMove = secondsPerFrame * HOW_MUCH_PIXELS_TO_SCROLL_PER_SECOND / 1000;
+        if (overflowWidth > viewWidth) {
+          let scrollText = function scrollText() {
+            let direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "r";
+            return setInterval(function () {
+              const reachedEnd = direction === "r" ? textEl.scrollLeft >= overflowWidth - viewWidth : textEl.scrollLeft === 0;
+              if (reachedEnd) {
+                clearInterval(scrollingInterval);
+                scrollStartTimeout = setTimeout(function () {
+                  scrollingInterval = scrollText(direction === "r" ? "l" : "r");
+                }, direction === "r" ? 2000 : 1000);
+              } else {
+                if (direction === "r") textEl.scrollTo(textEl.scrollLeft + howMuchToMove, 0);else {
+                  textEl.scrollTo(textEl.scrollLeft - howMuchToMove * RIGHT_TEXT_MULTIPLIER, 0);
+                }
+              }
+            }, secondsPerFrame);
+          };
+          scrollingInterval = scrollText();
+        }
+      }, 1000);
+      return function () {
+        clearTimeout(scrollStartTimeout);
+        clearInterval(scrollingInterval);
+      };
+    }
+  }, [hovering]);
+  return /*#__PURE__*/_react.default.createElement(_Text.default, _extends({
+    ref: textRef
+  }, uiEvents, props, {
+    className: "".concat(_PingPongTextModule.default.pingPong, " ").concat(props.className || "")
+  }));
+}

package/dist/components/PingPongText/PingPongText.module.scss

@@ -0,0 +1,4 @@
+.pingPong {
+    width: 100%;
+    overflow: hidden;
+}

package/dist/components/PingPongText/index.d.ts

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

package/dist/components/PingPongText/index.js

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

package/dist/components/ProgressBar/ProgressBar.js

@@ -20,7 +20,7 @@ function ProgressBar(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? "guide" : _ref$style;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_ProgressBarModule.default.container, " ").concat(_ProgressBarModule.default[style]),
+    className: "".concat(_ProgressBarModule.default.container, " ").concat(_ProgressBarModule.default[style], " ").concat(progress === 100 ? _ProgressBarModule.default.completed : ""),
     style: {
       fontSize: size
     }

package/dist/components/ProgressBar/ProgressBar.module.scss

@@ -24,6 +24,10 @@
     background: var(--progress-bar-bar, var(--digital-blue));
     transition: width var(--animation-speed-transition, $fast) ease-out;
   }
+  &.completed > :first-child {
+    border-top-right-radius: math.div(0.25em, 2);
+    border-bottom-right-radius: math.div(0.25em, 2);
+  }
   &.guide > :last-child {
     position: absolute;
     margin-top: math.div(-0.5em, 1.25);

package/dist/components/Radio/Radio.module.scss

@@ -8,21 +8,24 @@
 
   input {
     max-width: 0px;
-    max-height: 0px;
+    max-height: 0px;width: 0;
+    height: 0;
+    opacity: 0;
   }
 
   > span:first-child {
     visibility: visible;
     width: 1.5em;
     height: 1.5em;
-    border-radius: 0.80em;
+    border-radius: 0.8em;
     background-image: url("../../assets/img/svg/checkbox.svg");
     background-color: transparent;
     transition: background-color 250ms, border 250ms, box-shadow 250ms;
     border: 1px solid rgb(40, 43, 53);
     box-shadow: 0px 0px 0px -4px $digitalBlue;
+    flex-shrink: 0;
     &.wContent {
-      margin-right: 0.80em;
+      margin-right: 0.8em;
     }
   }
   > span:first-child.checked {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.19.3",
+  "version": "0.19.5",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",
@@ -42,7 +42,7 @@
     "cpy-cli": "^3.1.1",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^5",
-    "cypress": "^12.12.0",
+    "cypress": "^12.17.2",
     "firebase": "^9.8.1",
     "firebase-admin": "^10.2.0",
     "https-browserify": "^1.0.0",