@useblu/ocean-react 1.28.0 → 1.29.0

package/Badge/Badge.d.ts

@@ -5,8 +5,8 @@ export declare type BadgeProps = {
     count?: number;
 } & React.ComponentPropsWithoutRef<'div'>;
 declare const Badge: React.ForwardRefExoticComponent<{
-    variation?: "tiny" | "small" | "medium" | undefined;
-    color?: "brand" | "complementary" | "alert" | "neutral" | undefined;
+    variation?: "small" | "tiny" | "medium" | undefined;
+    color?: "alert" | "complementary" | "brand" | "neutral" | undefined;
     count?: number | undefined;
 } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 export default Badge;

package/Button/Button.d.ts

@@ -6,8 +6,9 @@ export declare type ButtonProps<P extends React.ElementType = 'button'> = {
     variant?: 'primary' | 'primaryCritical' | 'secondary' | 'text' | 'textCritical' | 'inverse';
     size?: 'sm' | 'md' | 'lg';
     blocked?: boolean;
+    loading?: boolean;
 }>;
-declare function ButtonBase<T extends React.ElementType = 'button'>({ children, className, size, variant, blocked, component, ...rest }: ButtonProps<T>, ref: React.Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare function ButtonBase<T extends React.ElementType = 'button'>({ children, className, size, variant, blocked, loading, component, ...rest }: ButtonProps<T>, ref: React.Ref<HTMLButtonElement>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 declare const Button: typeof ButtonBase;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

package/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,oBAAY,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAKhE,SAAS,CAAC,EAAE,CAAC,CAAC;CACf,GAAG,iBAAiB,CACnB,CAAC,EACD;IAKE,OAAO,CAAC,EACJ,SAAS,GACT,iBAAiB,GACjB,WAAW,GACX,MAAM,GACN,cAAc,GACd,SAAS,CAAC;IAKd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAK1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF,iBAAS,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACxD,EACE,QAAQ,EACR,SAAS,EACT,IAAW,EACX,OAAmB,EACnB,OAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,CAAC,CAAC,CAAC,EACjB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,sEAiBlC;AAED,QAAA,MAAM,MAAM,mBAA+D,CAAC;AAE5E,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGlD,oBAAY,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IAKhE,SAAS,CAAC,EAAE,CAAC,CAAC;CACf,GAAG,iBAAiB,CACnB,CAAC,EACD;IAKE,OAAO,CAAC,EACJ,SAAS,GACT,iBAAiB,GACjB,WAAW,GACX,MAAM,GACN,cAAc,GACd,SAAS,CAAC;IAKd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAK1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CACF,CAAC;AAEF,iBAAS,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EACxD,EACE,QAAQ,EACR,SAAS,EACT,IAAW,EACX,OAAmB,EACnB,OAAe,EACf,OAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,CAAC,CAAC,CAAC,EACjB,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,sEA4BlC;AAED,QAAA,MAAM,MAAM,mBAA+D,CAAC;AAE5E,eAAe,MAAM,CAAC"}

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.29.0](https://github.com/ocean-ds/ocean-web/compare/v1.28.0...v1.29.0) (2022-02-24)
+
+### Features
+
+- **progress:** add progress and other fixes ([#922](https://github.com/ocean-ds/ocean-web/issues/922)) ([5888456](https://github.com/ocean-ds/ocean-web/commit/5888456c5618d73ca891005b743fdfacd0ab1c30))
+
 # [1.28.0](https://github.com/ocean-ds/ocean-web/compare/v1.27.3...v1.28.0) (2022-02-23)
 
 ### Features

package/Progress/Progress.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 export declare type ProgressProps = {
     size?: 'md' | 'lg' | 'sm';
-};
-declare const Progress: React.FC<ProgressProps>;
+    onColor?: boolean;
+} & React.ComponentPropsWithoutRef<'div'>;
+declare const Progress: React.ForwardRefExoticComponent<{
+    size?: "md" | "lg" | "sm" | undefined;
+    onColor?: boolean | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 export default Progress;
 //# sourceMappingURL=Progress.d.ts.map

package/Progress/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,aAAa,GAAG;IAK1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAerC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,oBAAY,aAAa,GAAG;IAK1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAM1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,MAAM,QAAQ;;;kLAwBb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/Progress/img/IconLg.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const IconLg: React.FunctionComponent;
+export default IconLg;
+//# sourceMappingURL=IconLg.d.ts.map

package/Progress/img/IconLg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconLg.d.ts","sourceRoot":"","sources":["../../../src/Progress/img/IconLg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,iBAwBnB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/Progress/img/IconMd.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const IconMd: React.FunctionComponent;
+export default IconMd;
+//# sourceMappingURL=IconMd.d.ts.map

package/Progress/img/IconMd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconMd.d.ts","sourceRoot":"","sources":["../../../src/Progress/img/IconMd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,iBAwBnB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/Progress/img/IconSm.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const IconSm: React.FunctionComponent;
+export default IconSm;
+//# sourceMappingURL=IconSm.d.ts.map

package/Progress/img/IconSm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconSm.d.ts","sourceRoot":"","sources":["../../../src/Progress/img/IconSm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,iBAwBnB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/Search/Search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../src/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,oBAAY,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GACzD,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC;AAE1C,QAAA,MAAM,MAAM,uQAyCV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../src/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,oBAAY,UAAU,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GACzD,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC;AAE1C,QAAA,MAAM,MAAM,uQAwCV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/index.es.js

@@ -302,9 +302,34 @@ var Alert = e$1.forwardRef(function Alert(_a, ref) {
         e$1.createElement("div", { className: "ods-alert__content" }, children)));
 });
 
+var IconSm = function () { return (e$1.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    e$1.createElement("circle", { opacity: "0.4", cx: "8", cy: "8", r: "6", stroke: "#B8C3FF", strokeWidth: "4" }),
+    e$1.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$1.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    e$1.createElement("circle", { opacity: "0.4", cx: "12", cy: "12", r: "10", stroke: "#B8C3FF", strokeWidth: "4" }),
+    e$1.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$1.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    e$1.createElement("circle", { opacity: "0.4", cx: "16", cy: "16", r: "14", stroke: "#B8C3FF", strokeWidth: "4" }),
+    e$1.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$1.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$1.createElement("div", __assign({ ref: ref, className: classNames('ods-progress', "ods-progress--" + size, className, {
+            'ods-progress--on-color': onColor,
+        }) }, rest),
+        size === 'sm' && e$1.createElement(IconSm, null),
+        size === 'md' && e$1.createElement(IconMd, null),
+        size === 'lg' && e$1.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$1.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$1.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$1.createElement(e$1.Fragment, null,
+        e$1.createElement(Progress, { size: size, onColor: onColor }),
+        e$1.createElement("span", null, children))) : (children));
 }
 var Button = e$1.forwardRef(ButtonBase);
 
@@ -8048,17 +8073,6 @@ function IconButtonBase(_a, ref) {
 }
 var IconButton = e$1.forwardRef(IconButtonBase);
 
-var Progress = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, rest = __rest(_a, ["size"]);
-    return (e$1.createElement("div", __assign({ className: "ods-progress" }, rest),
-        e$1.createElement("span", { className: "ods-progress__primary ods-progress--" + size },
-            e$1.createElement("svg", { className: "ods-progress-svg", viewBox: "22 22 44 44" },
-                e$1.createElement("circle", { cx: "44", cy: "44", r: "18", fill: "none" }))),
-        e$1.createElement("span", { className: "ods-progress__secondary ods-progress--" + size },
-            e$1.createElement("svg", { viewBox: "22 22 44 44" },
-                e$1.createElement("circle", { cx: "44", cy: "44", r: "18", fill: "none" })))));
-};
-
 var Search = e$1.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 = useState(defaultValue || value), inputValue = _b[0], setInputValue = _b[1];
@@ -8069,7 +8083,7 @@ var Search = e$1.forwardRef(function Input(_a, ref) {
             e$1.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$1.createElement("div", { "data-testid": "close", onClick: function () { return setInputValue(''); }, className: "ods-search__clean" }, inputValue && e$1.createElement(ha, null)))));
 });