@jobber/components 4.65.0 → 4.66.1-add-item-t.2

package/dist/DataList/DataList.types.d.ts

@@ -238,7 +238,7 @@ export interface DataListActionProps<T extends DataListObject> {
     /**
      * The label of the action
      */
-    readonly label: string;
+    readonly label: string | ((item: T) => string);
     /**
      * The icon beside the label
      */

package/dist/DataList/index.js

@@ -477,8 +477,11 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                 return null;
             if (!props.icon)
                 return null;
-            return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
-                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: props.label, onClick: () => {
+            const actionLabel = typeof props.label === "function"
+                ? props.label(activeItem)
+                : props.label;
+            return (React__default["default"].createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
+                React__default["default"].createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;
                         if (activeItem) {
                             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
@@ -1036,7 +1039,7 @@ function DataListLoadMore({ onBackToTop }) {
             React__default["default"].createElement(Button.Button, { label: "Back to top", onClick: onBackToTop, size: "small", variation: "subtle" })))));
 }
 
-var css_248z$1 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.iyg43v-S9yU-:focus,\n.iyg43v-S9yU-:focus-visible {\n  outline: none;\n}\n\n.iyg43v-S9yU-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
+var css_248z$1 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  min-height: 44px;\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border: none;\n  border-radius: 0;\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  text-align: left;\n  background: none;\n  cursor: pointer;\n  transition: background 200ms ease;\n  transition: background var(--timing-base) ease;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.iyg43v-S9yU-:hover,\n.iyg43v-S9yU-:focus {\n  background-color: rgb(244, 246, 250);\n  background-color: var(--color-surface--hover);\n}\n\n.iyg43v-S9yU-:focus,\n.iyg43v-S9yU-:focus-visible {\n  outline: none;\n}\n\n.iyg43v-S9yU-:focus-visible {\n  box-shadow: 0px 0px 0px calc(16px / 8) rgba(255, 255, 255, 1),\n    0px 0px 0px calc(16px / 4) rgb(147, 161, 169);\n  box-shadow: var(--shadow-focus);\n}\n\n.AUJNqz93ZDA- {\n  font-weight: 500;\n}\n";
 var styles$1 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
 styleInject_es.styleInject(css_248z$1);
 
@@ -1046,11 +1049,12 @@ function DataListAction({ label, icon, destructive, visible = () => true, onClic
     if (activeItem && !visible(activeItem)) {
         return null;
     }
-    const color = destructive ? "critical" : "blue";
+    const color = destructive ? "critical" : "heading";
+    const actionLabel = typeof label === "function" && activeItem ? label(activeItem) : label;
     return (React__default["default"].createElement("button", { type: "button", className: styles$1.action, onClick: handleClick },
-        icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color }),
         React__default["default"].createElement(Typography.Typography, { textColor: color },
-            React__default["default"].createElement("span", { className: styles$1.label }, label))));
+            React__default["default"].createElement("span", { className: styles$1.label }, actionLabel)),
+        icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color })));
     function handleClick() {
         if (activeItem) {
             onClick === null || onClick === void 0 ? void 0 : onClick(activeItem);

package/dist/FormatFile/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FormatFile = require('../FormatFile-484dac89.js');
+var FormatFile = require('../FormatFile-3b650d02.js');
 require('react');
 require('classnames');
 require('filesize');
@@ -28,7 +28,7 @@ require('../Text-4a2bc89f.js');
 require('../Emphasis-b2d1b3aa.js');
 require('../Glimmer-cfa92a88.js');
 require('../tslib.es6-5b8768b7.js');
-require('../ProgressBar-250e7b24.js');
+require('../ProgressBar-b68edc8f.js');
 
 
 

package/dist/{FormatFile-484dac89.js → FormatFile-3b650d02.js}

@@ -10,7 +10,7 @@ var Glimmer = require('./Glimmer-cfa92a88.js');
 var Icon = require('./Icon-405a216c.js');
 var Typography = require('./Typography-973b122e.js');
 var Text = require('./Text-4a2bc89f.js');
-var ProgressBar = require('./ProgressBar-250e7b24.js');
+var ProgressBar = require('./ProgressBar-b68edc8f.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Gallery/index.js

@@ -6,7 +6,7 @@ var React = require('react');
 var classnames = require('classnames');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var LightBox = require('../LightBox-3f4dbc33.js');
-var FormatFile = require('../FormatFile-484dac89.js');
+var FormatFile = require('../FormatFile-3b650d02.js');
 var Button = require('../Button-163a0641.js');
 require('framer-motion');
 require('react-dom');
@@ -29,7 +29,7 @@ require('../Glimmer-cfa92a88.js');
 require('../tslib.es6-5b8768b7.js');
 require('../Icon-405a216c.js');
 require('@jobber/design');
-require('../ProgressBar-250e7b24.js');
+require('../ProgressBar-b68edc8f.js');
 require('react-router-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/dist/InputAvatar/index.js

@@ -7,7 +7,7 @@ var React = require('react');
 var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
 var Avatar = require('../Avatar-76a799fa.js');
 var InputFile = require('../InputFile-540c1657.js');
-var ProgressBar = require('../ProgressBar-250e7b24.js');
+var ProgressBar = require('../ProgressBar-b68edc8f.js');
 var Button = require('../Button-163a0641.js');
 require('classnames');
 require('color');

package/dist/ProgressBar/ProgressBar.d.ts

@@ -14,6 +14,11 @@ interface ProgressBarProps {
      * @default base
      */
     readonly size?: keyof typeof sizes;
+    /**
+     * Set the variation of the progress bar
+     * @default progress
+     */
+    readonly variation?: "progress" | "stepped";
 }
-export declare function ProgressBar({ currentStep, totalSteps, size, }: ProgressBarProps): JSX.Element;
+export declare function ProgressBar({ currentStep, totalSteps, size, variation, }: ProgressBarProps): JSX.Element;
 export {};

package/dist/ProgressBar/ProgressBarStepped.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import sizes from "./Sizes.css";
+interface ProgressBarSteppedProps {
+    readonly currentStep: number;
+    readonly totalSteps: number;
+    readonly percentage: number;
+    readonly size?: keyof typeof sizes;
+}
+export declare function ProgressBarStepped({ currentStep, totalSteps, percentage, size, }: ProgressBarSteppedProps): JSX.Element;
+export {};

package/dist/ProgressBar/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ProgressBar = require('../ProgressBar-250e7b24.js');
+var ProgressBar = require('../ProgressBar-b68edc8f.js');
 require('react');
 require('classnames');
 require('../style-inject.es-9d2f5f4e.js');

package/dist/{ProgressBar-250e7b24.js → ProgressBar-b68edc8f.js}

@@ -9,17 +9,32 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var css_248z$1 = ":root {\n  --progress-bar--height: var(--space-base);\n}\n\nprogress.S1cioqW7loo-[value] {\n  width: 100%;\n  height: calc(16px * 1);\n  height: var(--progress-bar--height);\n  border: none;\n  vertical-align: baseline;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\nprogress.S1cioqW7loo-[value],\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);\n  border-radius: calc((16px * 1) / 2);\n  border-radius: calc(calc(16px * 1) / 2);\n  border-radius: calc(var(--progress-bar--height) / 2);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-value {\n  border-radius: calc((16px * 1) / 2);\n  border-radius: calc(calc(16px * 1) / 2);\n  border-radius: calc(var(--progress-bar--height) / 2);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-interactive);\n  -webkit-transition: all 300ms ease-out;\n  transition: all 300ms ease-out;\n  -webkit-transition: all var(--timing-slow) ease-out;\n  transition: all var(--timing-slow) ease-out;\n}\n\nprogress.S1cioqW7loo-[value]::-moz-progress-bar {\n  border-radius: calc((16px * 1) / 2);\n  border-radius: calc(calc(16px * 1) / 2);\n  border-radius: calc(var(--progress-bar--height) / 2);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-interactive);\n  -moz-transition: all 300ms ease-out;\n  transition: all 300ms ease-out;\n  -moz-transition: all var(--timing-slow) ease-out;\n  transition: all var(--timing-slow) ease-out;\n}\n";
-var styles = {"ProgressBar":"S1cioqW7loo-"};
+var css_248z$1 = ":root {\n  --progress-bar--height: var(--space-base);\n}\n\nprogress.S1cioqW7loo-[value] {\n  width: 100%;\n  height: calc(16px * 1);\n  height: var(--progress-bar--height);\n  border: none;\n  vertical-align: baseline;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\nprogress.S1cioqW7loo-[value],\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.05);\n  border-radius: calc((16px * 1) / 2);\n  border-radius: calc(calc(16px * 1) / 2);\n  border-radius: calc(var(--progress-bar--height) / 2);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-bar {\n  background-color: rgb(238, 240, 242);\n  background-color: var(--color-surface--background);\n}\n\nprogress.S1cioqW7loo-[value]::-webkit-progress-value {\n  border-radius: calc((16px * 1) / 2);\n  border-radius: calc(calc(16px * 1) / 2);\n  border-radius: calc(var(--progress-bar--height) / 2);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-interactive);\n  -webkit-transition: all 300ms ease-out;\n  transition: all 300ms ease-out;\n  -webkit-transition: all var(--timing-slow) ease-out;\n  transition: all var(--timing-slow) ease-out;\n}\n\nprogress.S1cioqW7loo-[value]::-moz-progress-bar {\n  border-radius: calc((16px * 1) / 2);\n  border-radius: calc(calc(16px * 1) / 2);\n  border-radius: calc(var(--progress-bar--height) / 2);\n  background-color: rgb(125, 176, 14);\n  background-color: var(--color-interactive);\n  -moz-transition: all 300ms ease-out;\n  transition: all 300ms ease-out;\n  -moz-transition: all var(--timing-slow) ease-out;\n  transition: all var(--timing-slow) ease-out;\n}\n\nprogress.nv5fejwjHzo-[value]::-webkit-progress-value {\n  -webkit-transition: all 100ms ease-out;\n  transition: all 100ms ease-out;\n  -webkit-transition: all var(--timing-quick) ease-out;\n  transition: all var(--timing-quick) ease-out;\n}\n\n.dyBDsjWCui4- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  width: 100%;\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n";
+var styles = {"ProgressBar":"S1cioqW7loo-","SteppedProgressBar":"nv5fejwjHzo-","wrapper":"dyBDsjWCui4-"};
 styleInject_es.styleInject(css_248z$1);
 
-var css_248z = ".JNSDqHqKVlE- {\n  --progress-bar--height: var(--space-smaller);\n}\n\n.nzFMJ2k4zJ0- {\n  --progress-bar--height: var(--space-base);\n}\n";
-var sizes = {"small":"JNSDqHqKVlE-","base":"nzFMJ2k4zJ0-"};
+var css_248z = ".CzIxUWYkrdo- {\n  --progress-bar--height: var(--space-smaller);\n}\n\n.JNSDqHqKVlE- {\n  --progress-bar--height: var(--space-small);\n}\n\n.nzFMJ2k4zJ0- {\n  --progress-bar--height: var(--space-base);\n}\n";
+var sizes = {"smaller":"CzIxUWYkrdo-","small":"JNSDqHqKVlE-","base":"nzFMJ2k4zJ0-"};
 styleInject_es.styleInject(css_248z);
 
-function ProgressBar({ currentStep, totalSteps, size = "base", }) {
+function ProgressBarStepped({ currentStep, totalSteps, percentage, size = "base", }) {
+    const steppedProgressBarClassName = classnames__default["default"](styles.ProgressBar, styles.SteppedProgressBar, sizes[size]);
+    const ariaLabel = `progress, ${currentStep} out of ${totalSteps}`;
+    return (React__default["default"].createElement("div", { role: "progressbar", className: styles.wrapper, "aria-valuenow": percentage, "aria-valuetext": ariaLabel }, Array.from({ length: totalSteps }).map((_, index) => {
+        const step = index + 1;
+        const value = step <= currentStep ? 100 : 0;
+        return (React__default["default"].createElement("progress", { key: step, className: steppedProgressBarClassName, value: value, "data-testid": "progress-step" },
+            value,
+            "%"));
+    })));
+}
+
+function ProgressBar({ currentStep, totalSteps, size = "base", variation = "progress", }) {
     const percentage = (currentStep / totalSteps) * 100;
     const progressBarClassName = classnames__default["default"](styles.ProgressBar, sizes[size]);
+    if (variation === "stepped") {
+        return (React__default["default"].createElement(ProgressBarStepped, { currentStep: currentStep, totalSteps: totalSteps, percentage: percentage, size: size }));
+    }
     return (React__default["default"].createElement("progress", { className: progressBarClassName, max: totalSteps, value: currentStep },
         percentage,
         "%"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.65.0",
+  "version": "4.66.1-add-item-t.2+9a264976",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.50.0",
-    "@jobber/formatters": "*",
+    "@jobber/formatters": "^0.2.2",
     "@jobber/hooks": "^2.7.2",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -83,5 +83,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "5c7fe8b079fcd86cfb39a2f4befc3c57fb6baafb"
+  "gitHead": "9a264976ee097184a5026a92d995a55bed60cc3b"
 }