@mackin.com/styleguide 10.1.5 → 10.2.0

package/index.d.ts

@@ -667,17 +667,22 @@ interface PopoverProps {
 declare const Popover: (p: PopoverProps) => React.JSX.Element;
 
 interface ProgressBarProps {
+    /** The value in whole pct - 55 NOT 0.55. */
     pct: number;
+    /** If `true`, the bar will be rounded at the corners. */
     round?: boolean;
+    /** If `true`, the current percent will be shown as a label. */
     showPct?: boolean;
+    /** Where to place the pct label from `showPct`.  Defaults to `bottom`.  Ignored if `showPct` is false. */
+    showPctPosition?: 'bottom' | 'right';
+    /** This will be applied to the bar. */
     className?: string;
+    /** This will be applied to the bar fill.  Override this to change the transitions or remove them. */
+    barFillClassName?: string;
+    /** Applied to the percent label element.  Ignored if `showPct` is false. */
+    pctLabelClassName?: string;
 }
-declare const ProgressBar: (props: {
-    pct: number;
-    round?: boolean;
-    showPct?: boolean;
-    className?: string;
-}) => React.JSX.Element;
+declare const ProgressBar: (props: ProgressBarProps) => React.JSX.Element;
 
 type BaseProps$1 = Omit<TextInputProps, 'rightControl' | 'wrapperClassName' | 'type' | 'className'> & InputOnFocusProps;
 interface SearchBoxProps extends BaseProps$1 {

package/index.esm.js

@@ -3665,6 +3665,7 @@ class ItemPager {
 }
 
 const ProgressBar = (props) => {
+    var _a;
     const bar = React.useRef(null);
     React.useEffect(() => {
         const pct = cleanPct(props.pct);
@@ -3690,12 +3691,23 @@ const ProgressBar = (props) => {
 			border-radius: 1rem;
 		`}
 	`;
-    return (React.createElement("div", { className: "progressBar" },
+    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
+    const wrapStyles = css({
+        label: 'ProgressBar',
+        display: 'flex',
+        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
+        alignItems: showPctPosition === 'right' ? 'center' : undefined,
+        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
+    });
+    const pctLabelStyles = (props.showPct && props.showPctPosition === 'right') ? css({
+        width: '3rem'
+    }) : undefined;
+    return (React.createElement("div", { className: cx(wrapStyles, "progressBar") },
         React.createElement("div", { className: cx(barStyles, props.className) },
-            React.createElement("div", { ref: bar, className: fillStyles })),
-        props.showPct && React.createElement(Text, { align: "center", tag: "div", spacedOut: true },
-            props.pct,
-            "\u00A0%")));
+            React.createElement("div", { ref: bar, className: cx(fillStyles, props.barFillClassName) })),
+        props.showPct && (React.createElement(Text, { align: "center", tag: "div", spacedOut: true, className: cx(pctLabelStyles, props.pctLabelClassName) },
+            cleanPct(props.pct),
+            "%"))));
 };
 const cleanPct = (value) => {
     if (value) {

package/index.js

@@ -3683,6 +3683,7 @@ class ItemPager {
 }
 
 const ProgressBar = (props) => {
+    var _a;
     const bar = React__namespace.useRef(null);
     React__namespace.useEffect(() => {
         const pct = cleanPct(props.pct);
@@ -3708,12 +3709,23 @@ const ProgressBar = (props) => {
 			border-radius: 1rem;
 		`}
 	`;
-    return (React__namespace.createElement("div", { className: "progressBar" },
+    const showPctPosition = (_a = props.showPctPosition) !== null && _a !== void 0 ? _a : 'bottom';
+    const wrapStyles = css.css({
+        label: 'ProgressBar',
+        display: 'flex',
+        flexDirection: showPctPosition === 'bottom' ? 'column' : 'row',
+        alignItems: showPctPosition === 'right' ? 'center' : undefined,
+        gap: showPctPosition === 'right' ? '0.5rem' : undefined,
+    });
+    const pctLabelStyles = (props.showPct && props.showPctPosition === 'right') ? css.css({
+        width: '3rem'
+    }) : undefined;
+    return (React__namespace.createElement("div", { className: css.cx(wrapStyles, "progressBar") },
         React__namespace.createElement("div", { className: css.cx(barStyles, props.className) },
-            React__namespace.createElement("div", { ref: bar, className: fillStyles })),
-        props.showPct && React__namespace.createElement(Text, { align: "center", tag: "div", spacedOut: true },
-            props.pct,
-            "\u00A0%")));
+            React__namespace.createElement("div", { ref: bar, className: css.cx(fillStyles, props.barFillClassName) })),
+        props.showPct && (React__namespace.createElement(Text, { align: "center", tag: "div", spacedOut: true, className: css.cx(pctLabelStyles, props.pctLabelClassName) },
+            cleanPct(props.pct),
+            "%"))));
 };
 const cleanPct = (value) => {
     if (value) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mackin.com/styleguide",
-    "version": "10.1.5",
+    "version": "10.2.0",
     "description": "",
     "main": "./index.js",
     "module": "./index.esm.js",