@useblu/ocean-react 1.28.0 → 1.29.0

package/index.js

@@ -311,9 +311,34 @@ var Alert = e__default['default'].forwardRef(function Alert(_a, ref) {
         e__default['default'].createElement("div", { className: "ods-alert__content" }, children)));
 });
 
+var IconSm = function () { return (e__default['default'].createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    e__default['default'].createElement("circle", { opacity: "0.4", cx: "8", cy: "8", r: "6", stroke: "#B8C3FF", strokeWidth: "4" }),
+    e__default['default'].createElement("path", { d: "M8 2C8.78793 2 9.56815 2.15519 10.2961 2.45672C11.0241 2.75825 11.6855 3.20021 12.2426 3.75736C12.7998 4.31451 13.2417 4.97595 13.5433 5.7039C13.8448 6.43185 14 7.21207 14 8", stroke: "#0025E0", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }))); };
+
+var IconMd = function () { return (e__default['default'].createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    e__default['default'].createElement("circle", { opacity: "0.4", cx: "12", cy: "12", r: "10", stroke: "#B8C3FF", strokeWidth: "4" }),
+    e__default['default'].createElement("path", { d: "M12 2C13.3132 2 14.6136 2.25866 15.8268 2.7612C17.0401 3.26375 18.1425 4.00035 19.0711 4.92893C19.9997 5.85752 20.7362 6.95991 21.2388 8.17317C21.7413 9.38642 22 10.6868 22 12", stroke: "#0025E0", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }))); };
+
+var IconLg = function () { return (e__default['default'].createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    e__default['default'].createElement("circle", { opacity: "0.4", cx: "16", cy: "16", r: "14", stroke: "#B8C3FF", strokeWidth: "4" }),
+    e__default['default'].createElement("path", { d: "M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2307 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16", stroke: "#0025E0", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }))); };
+
+var Progress = e__default['default'].forwardRef(function OceanProgress(_a, ref) {
+    var _b = _a.onColor, onColor = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, className = _a.className, rest = __rest(_a, ["onColor", "size", "className"]);
+    return (e__default['default'].createElement("div", __assign({ ref: ref, className: classNames('ods-progress', "ods-progress--" + size, className, {
+            'ods-progress--on-color': onColor,
+        }) }, rest),
+        size === 'sm' && e__default['default'].createElement(IconSm, null),
+        size === 'md' && e__default['default'].createElement(IconMd, null),
+        size === 'lg' && e__default['default'].createElement(IconLg, null)));
+});
+
 function ButtonBase(_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, _d = _a.blocked, blocked = _d === void 0 ? false : _d, component = _a.component, rest = __rest(_a, ["children", "className", "size", "variant", "blocked", "component"]);
-    return e__default['default'].createElement(component || 'button', __assign({ ref: ref, className: classNames('ods-btn', "ods-btn--" + size, "ods-btn--" + variant.replace(/[A-Z]/g, function (m) { return '-' + m.toLowerCase(); }), blocked && 'ods-btn--blocked', className) }, rest), children);
+    var children = _a.children, className = _a.className, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, _d = _a.blocked, blocked = _d === void 0 ? false : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, component = _a.component, rest = __rest(_a, ["children", "className", "size", "variant", "blocked", "loading", "component"]);
+    var onColor = ['primary', 'primaryCritical', 'inverse'].includes(variant);
+    return e__default['default'].createElement(component || 'button', __assign(__assign({ ref: ref, className: classNames('ods-btn', "ods-btn--" + size, "ods-btn--" + variant.replace(/[A-Z]/g, function (m) { return '-' + m.toLowerCase(); }), blocked && 'ods-btn--blocked', className, { 'ods-btn--loading': loading }) }, rest), { onClick: loading ? function () { return false; } : rest.onClick }), loading ? (e__default['default'].createElement(e__default['default'].Fragment, null,
+        e__default['default'].createElement(Progress, { size: size, onColor: onColor }),
+        e__default['default'].createElement("span", null, children))) : (children));
 }
 var Button = e__default['default'].forwardRef(ButtonBase);
 
@@ -8057,17 +8082,6 @@ function IconButtonBase(_a, ref) {
 }
 var IconButton = e__default['default'].forwardRef(IconButtonBase);
 
-var Progress = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, rest = __rest(_a, ["size"]);
-    return (e__default['default'].createElement("div", __assign({ className: "ods-progress" }, rest),
-        e__default['default'].createElement("span", { className: "ods-progress__primary ods-progress--" + size },
-            e__default['default'].createElement("svg", { className: "ods-progress-svg", viewBox: "22 22 44 44" },
-                e__default['default'].createElement("circle", { cx: "44", cy: "44", r: "18", fill: "none" }))),
-        e__default['default'].createElement("span", { className: "ods-progress__secondary ods-progress--" + size },
-            e__default['default'].createElement("svg", { viewBox: "22 22 44 44" },
-                e__default['default'].createElement("circle", { cx: "44", cy: "44", r: "18", fill: "none" })))));
-};
-
 var Search = e__default['default'].forwardRef(function Input(_a, ref) {
     var className = _a.className, blocked = _a.blocked, id = _a.id, disabled = _a.disabled, value = _a.value, defaultValue = _a.defaultValue, rest = __rest(_a, ["className", "blocked", "id", "disabled", "value", "defaultValue"]);
     var _b = e$1.useState(defaultValue || value), inputValue = _b[0], setInputValue = _b[1];
@@ -8078,7 +8092,7 @@ var Search = e__default['default'].forwardRef(function Input(_a, ref) {
             e__default['default'].createElement("input", __assign({ ref: ref, type: "text", id: id, disabled: disabled, onChange: function (_a) {
                     var target = _a.target;
                     return setInputValue(target.value);
-                }, defaultValue: defaultValue, value: inputValue }, rest)),
+                }, value: inputValue }, rest)),
             e__default['default'].createElement("div", { "data-testid": "close", onClick: function () { return setInputValue(''); }, className: "ods-search__clean" }, inputValue && e__default['default'].createElement(ha, null)))));
 });