@hexure/ui 1.6.8 → 1.6.9

package/dist/cjs/types/components/Modal/Modal.d.ts

@@ -1,12 +1,17 @@
 import { FC, ReactNode } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
 interface ButtonProps {
-    disabled: boolean;
+    disabled?: boolean;
     children: string;
     icon?: string;
     onClick: (e?: any) => void;
     tabIndex?: number;
 }
+interface StepProps {
+    label: string;
+    complete?: boolean;
+    active?: boolean;
+}
 export interface ModalProps extends AccessibleProps {
     /** Defines a button to be displayed on the far right of the bottom button bar */
     primaryButton?: ButtonProps;
@@ -22,6 +27,8 @@ export interface ModalProps extends AccessibleProps {
     title: string;
     /**  It is used to close modal. */
     onClose: (e?: any) => void;
+    /** Display steps at the top of the modal */
+    steps?: StepProps[];
 }
 declare const Modal: FC<ModalProps>;
 export default Modal;

package/dist/esm/index.js

@@ -2205,7 +2205,7 @@ var Selected = styled.span(templateObject_4$8 || (templateObject_4$8 = __makeTem
 var Clear = styled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n  cursor: pointer;\n  padding-left: 10px;\n  margin-left: 10px;\n  border-left: 1px solid #ccc;\n"], ["\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: ", ";\n  line-height: 1;\n  cursor: pointer;\n  padding-left: 10px;\n  margin-left: 10px;\n  border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
 var Actions = styled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  column-gap: 10px;\n"])));
 var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background: rgba(", ", 0.1);\n  border-radius: 4px;\n  padding: 6px 8px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  margin-left: 30px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background: rgba(", ", 0.1);\n  border-radius: 4px;\n  padding: 6px 8px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  margin-left: 30px;\n"])), Colors.RED.Rgb);
-var ErrorMsg = styled.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n  margin-left: 8px;\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n  margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
+var ErrorMsg = styled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n  margin-left: 8px;\n"], ["\n  font-size: 14px;\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n  margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
 var BulkActionBar = function (_a) {
     var _b = _a.actions, actions = _b === void 0 ? [] : _b, errorMsg = _a.errorMsg, onClear = _a.onClear, _c = _a.selectedCount, selectedCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
     return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
@@ -2220,7 +2220,7 @@ var BulkActionBar = function (_a) {
             React.createElement(Icon, { color: Colors.RED.Hex, path: mdiInformationOutline, size: '20px' }),
             React.createElement(ErrorMsg, null, errorMsg))) : null));
 };
-var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$1;
+var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$2;
 
 var Wrapper$c = styled.label(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: flex-start;\n  font-size: ", ";\n  line-height: 1.6em;\n  box-sizing: border-box;\n"], ["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: flex-start;\n  font-size: ", ";\n  line-height: 1.6em;\n  box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
 var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  font-size: 20px;\n  margin: 5px 0px 0px 0px;\n  line-height: 1.1em;\n  box-sizing: border-box;\n"], ["\n  font-size: 20px;\n  margin: 5px 0px 0px 0px;\n  line-height: 1.1em;\n  box-sizing: border-box;\n"])));
@@ -2784,7 +2784,7 @@ var CopyWrapper = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
 });
 var IconWrapper$1 = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
 var ProgressBar = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n  width: 100px;\n  height: 14px;\n  border-radius: 4px;\n  background: #f5f5f5;\n  overflow-x: hidden;\n"], ["\n  width: 100px;\n  height: 14px;\n  border-radius: 4px;\n  background: #f5f5f5;\n  overflow-x: hidden;\n"])));
-var Progress = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: ", ";\n  height: 100%;\n  border-radius: 4px 0px 0px 4px;\n  background: ", ";\n"], ["\n  width: ", ";\n  height: 100%;\n  border-radius: 4px 0px 0px 4px;\n  background: ", ";\n"])), function (_a) {
+var Progress = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n  width: ", ";\n  height: 100%;\n  border-radius: 4px 0px 0px 4px;\n  background: ", ";\n"], ["\n  width: ", ";\n  height: 100%;\n  border-radius: 4px 0px 0px 4px;\n  background: ", ";\n"])), function (_a) {
     var $width = _a.$width;
     return "".concat($width, "%");
 }, Colors.GREEN.Hex);
@@ -2859,7 +2859,7 @@ var FileUpload = function (_a) {
                     React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
                     React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
 };
-var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
+var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8$1;
 
 var formatAsPhone = function (number) {
     var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
@@ -2995,13 +2995,17 @@ var Logo = function (_a) {
 
 var Wrapper$7 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9999;\n  background: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var Container$1 = styled.dialog(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n  max-width: ", ";\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 0px;\n  box-sizing: border-box;\n"], ["\n  max-width: ", ";\n  width: auto;\n  border-radius: 8px;\n  overflow: hidden;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  outline: none;\n  border: none;\n  position: relative;\n  padding: 0px;\n  box-sizing: border-box;\n"])), function (props) { return props.$maxWidth || '90vw'; });
-var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"])));
+var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e7e6e6;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  top: 0;\n  padding: 20px;\n  border-bottom: 1px solid #e7e6e6;\n  display: flex;\n  align-items: center;\n  background: #ffffff;\n  box-sizing: border-box;\n"])));
 var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  padding-left: 20px;\n  cursor: pointer;\n"])));
 var CloseMsg = styled.span(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"], ["\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 1em;\n  color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
-var ContentWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
-var ButtonBar = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e5e5e5;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"])));
+var Steps = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 20px;\n  border-bottom: 1px solid #e7e6e6;\n  background: #f5f5f5;\n  display: flex;\n  gap: 30px;\n  align-items: center;\n"], ["\n  padding: 20px;\n  border-bottom: 1px solid #e7e6e6;\n  background: #f5f5f5;\n  display: flex;\n  gap: 30px;\n  align-items: center;\n"])));
+var Step = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n"])));
+var StepIndicator = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 30px;\n  height: 30px;\n  border-radius: 15px;\n  background: ", ";\n  color: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n"], ["\n  width: 30px;\n  height: 30px;\n  border-radius: 15px;\n  background: ", ";\n  color: ", ";\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n"])), function (props) { return (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex); }, function (props) { return (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex); });
+var StepLabel = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: #000;\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n"], ["\n  color: #000;\n  font-family: 'Roboto', Helvetica, Arial, sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n"])));
+var ContentWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"], ["\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #ffffff;\n  max-height: calc(100vh - 260px);\n  box-sizing: border-box;\n"])));
+var ButtonBar = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e7e6e6;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"], ["\n  position: sticky;\n  bottom: 0;\n  background: #ffffff;\n  padding: 20px;\n  border-top: 1px solid #e7e6e6;\n  display: flex;\n  align-items: center;\n  justify-self: flex-end;\n  box-sizing: border-box;\n"])));
 var Modal = function (_a) {
-    var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "primaryButton", "secondaryButton", "tertiaryButton"]);
+    var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, steps = _a.steps, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
     useEffect(function () {
         document.onkeydown = function (e) {
             if (e.key === 'Escape') {
@@ -3019,6 +3023,11 @@ var Modal = function (_a) {
                 React.createElement(Close, { onClick: onClose },
                     React.createElement(CloseMsg, null, "(Esc)"),
                     React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiClose, size: '24px' }))),
+            steps ? (React.createElement(Steps, null, steps.map(function (step, i) {
+                return (React.createElement(Step, { key: i },
+                    step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
+                    React.createElement(StepLabel, null, step.label)));
+            }))) : null,
             React.createElement(ContentWrapper, null, children),
             primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
                 tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
@@ -3031,7 +3040,7 @@ var Modal = function (_a) {
                     secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
                     primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
 };
-var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
+var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
 
 var Wrapper$6 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: ", ";\n  padding: 10px;\n  width: 200px;\n"], ["\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: ", ";\n  padding: 10px;\n  width: 200px;\n"])), function (props) { return props.$maxHeight || '312px'; });
 var MenuItem = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  display: flex;\n  gap: 8px;\n  height: 38px;\n  padding: 8px;\n  &:hover {\n    background: rgba(1, 147, 215, 0.1);\n    cursor: pointer;\n  }\n"], ["\n  align-items: center;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  display: flex;\n  gap: 8px;\n  height: 38px;\n  padding: 8px;\n  &:hover {\n    background: rgba(1, 147, 215, 0.1);\n    cursor: pointer;\n  }\n"])));