@mailstep/design-system 0.6.10 → 0.6.12

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -22,7 +22,7 @@ var ChevronWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTe
 });
 export var CustomSelectButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"], ["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"])), ContentWrapper, ChevronWrapper);
 var DropdownSelect = function (_a) {
-    var label = _a.label, appearance = _a.appearance, options = _a.options, showChevron = _a.showChevron, onSelect = _a.onSelect, disabled = _a.disabled, icon = _a.icon, ButtonComponent = _a.ButtonComponent;
+    var label = _a.label, appearance = _a.appearance, variant = _a.variant, options = _a.options, showChevron = _a.showChevron, onSelect = _a.onSelect, disabled = _a.disabled, icon = _a.icon, ButtonComponent = _a.ButtonComponent;
     var _b = React.useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
     var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
     var toggleDropdownMenu = React.useCallback(function () {
@@ -41,7 +41,7 @@ var DropdownSelect = function (_a) {
     }); });
     var ComponentOfButton = ButtonComponent || Button;
     var isCustomBtn = !!ButtonComponent;
-    return (_jsxs("div", { ref: ref, children: [_jsx(ComponentOfButton, { type: "button", appearance: appearance, onClick: toggleDropdownMenu, disabled: disabled, "data-cy": "createProductDropdownMenuBtn", children: _jsxs(ContentWrapper, { children: [icon && _jsx(CustomIconWrap, { children: icon }), _jsx("span", { children: label }), showChevron && (_jsx(ChevronWrapper, { "$hasBorder": isCustomBtn, children: _jsx(ArrowIcon, { icon: "chevronDown", size: isCustomBtn ? '100%' : '80%', fixedWidth: isCustomBtn }) }))] }) }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "bottom-start", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items, "$fixedWidth": isCustomBtn }) }))] }));
+    return (_jsxs("div", { ref: ref, children: [_jsx(ComponentOfButton, { type: "button", appearance: appearance || 'secondary', variant: variant || 'default', onClick: toggleDropdownMenu, disabled: disabled, "data-cy": "createProductDropdownMenuBtn", children: _jsxs(ContentWrapper, { children: [icon && _jsx(CustomIconWrap, { children: icon }), _jsx("span", { children: label }), showChevron && (_jsx(ChevronWrapper, { "$hasBorder": isCustomBtn, children: _jsx(ArrowIcon, { icon: "chevronDown", size: isCustomBtn ? '100%' : '80%', fixedWidth: isCustomBtn }) }))] }) }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "bottom-start", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items, "$fixedWidth": isCustomBtn }) }))] }));
 };
 export default DropdownSelect;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/Select/themes/selectStyles.js

@@ -19,7 +19,7 @@ export var CustomStyles = {
         return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
                 fontWeight: theme.textWeightNormal,
                 fontFamily: theme.font,
-            }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minHeight: theme.height, minWidth: selectProps.isMulti ? 'min-content' : 'max-content', '.inputIcon': {
+            }, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minHeight: theme.height, minWidth: 'min-content', '.inputIcon': {
                 color: isDisabled ? colors.defaultControlColor : !!selectProps.value ? colors.inputTextColor : colors.defaultControlColor,
             } });
     },
@@ -89,7 +89,7 @@ export var CustomStyles = {
     },
     menu: function (styles, state) {
         var theme = state.theme;
-        return __assign(__assign({}, styles), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '-0', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', backgroundColor: theme.colors.whiteBackgroundColor });
+        return __assign(__assign({}, styles), { boxShadow: '0 2px 20px 0 rgba(0, 0, 0, 0.10);', marginTop: '4px', paddingTop: '0', borderRadius: '10px', zIndex: 3, minWidth: 'max-content', backgroundColor: theme.colors.whiteBackgroundColor });
     },
     menuList: function (styles, _a) {
         var theme = _a.theme;

package/ui/ThemeProvider/themes/default.js

@@ -45,7 +45,7 @@ var defaultTheme = {
         green30: '#b8ecb8',
         green50: '#81dd91',
         green60: '#00A445',
-        green70: '#06d6a0',
+        green70: '#198038',
         green80: '#0E6027',
         green90: '#067164',
         green: '#13CE62',