@mailstep/design-system 0.7.75 → 0.7.76-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.75",
+  "version": "0.7.76-beta.1",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js

@@ -20,7 +20,7 @@ import styled, { x } from '@xstyled/styled-components';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"], ["\n  display: flex;\n  & > * {\n    margin-right: 12px;\n  }\n  z-index: 2;\n"])));
 var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"], ["\n  display: none;\n\n  @media (min-width: 1024px) {\n    display: block;\n  }\n"])));
 var ControlButton = function (_a) {
-    var hide = _a.hide, node = _a.node, label = _a.label, appearance = _a.appearance, variant = _a.variant, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron, iconLeft = _a.iconLeft, buttonProps = _a.buttonProps;
+    var hide = _a.hide, node = _a.node, label = _a.label, appearance = _a.appearance, variant = _a.variant, disabled = _a.disabled, onClick = _a.onClick, onSelect = _a.onSelect, options = _a.options, hideChevron = _a.hideChevron, iconLeft = _a.iconLeft;
     if (hide) {
         return null;
     }
@@ -30,7 +30,7 @@ var ControlButton = function (_a) {
         return (_jsx(DropdownSelect, { label: label || '', appearance: appearance || 'secondary', variant: variant || 'default', options: options, showChevron: !hideChevron, onSelect: onSelect, disabled: disabled }));
     }
     else {
-        return (_jsx(StyledButton, __assign({ type: "button", onClick: onClick, disabled: disabled, variant: variant || 'default', appearance: appearance || 'primary', iconLeft: iconLeft }, buttonProps, { children: label })));
+        return (_jsx(StyledButton, { type: "button", onClick: onClick, disabled: disabled, variant: variant || 'default', appearance: appearance || 'primary', iconLeft: iconLeft, children: label }));
     }
 };
 var ExtraControlButtons = function (_a) {

package/ui/Blocks/CommonGrid/types.d.ts

@@ -1,4 +1,4 @@
-import { Props as ButtonProps, AppearanceValue, VariantValue } from '../../Elements/Button/types';
+import { AppearanceValue, VariantValue } from '../../Elements/Button/types';
 
 export declare const rowClassSymbol: unique symbol;
 type Option = {
@@ -288,7 +288,6 @@ export type ExtraControlButton = {
     hideChevron?: boolean;
     disabled?: boolean;
     iconLeft?: string | React.ReactNode;
-    buttonProps?: Omit<ButtonProps, 'children' | 'onClick' | 'disabled' | 'appearance' | 'variant' | 'iconLeft' | 'as'>;
 };
 export type Group = {
     name?: string;

package/ui/Blocks/CornerDialog/CornerDialog.js

@@ -14,5 +14,5 @@ export var CornerDialog = function (_a) {
     var _d = statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;
     if (!isOpen)
         return null;
-    return (_jsx(Portal, { children: _jsxs(Container, { "$mounted": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, "data-testid": "corner-dialog-close-btn", children: _jsx(Icon, { icon: "close", size: "25px" }) }), _jsx(Wrapper, { children: children })] }) }));
+    return (_jsx(Portal, { children: _jsxs(Container, { "$mounted": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: "close", size: "25px" }) }), _jsx(Wrapper, { children: children })] }) }));
 };

package/ui/Blocks/Tabs/Tabs.js

@@ -9,7 +9,7 @@ var Tab = function (_a) {
     var handleOnClick = useCallback(function () {
         onTabSwitch(value);
     }, [onTabSwitch, value]);
-    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, "data-testid": "tab-".concat(value), children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 ||
+    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 ||
                     (badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) })))] }) }));
 };
 export var Tabs = function (_a) {

package/ui/Elements/Button/types.d.ts

@@ -20,6 +20,4 @@ export type Props = React.HTMLProps<HTMLButtonElement> & {
     iconStrokeColor?: string;
     buttonRef?: any;
     type?: 'button' | 'submit' | 'reset';
-} & {
-    [key: `data-${string}`]: string | undefined;
 };

package/ui/Elements/Logo/Logo.js

@@ -35,6 +35,7 @@ import logoMailstock from './assets/mailstock/mailstock.svg';
 import logoMailwise from './assets/mailwise/mailwiseLogo.svg';
 import logoMailwiseSmall from './assets/mailwise/mailwiseLogoSmall.svg';
 import logoMailwrap from './assets/mailwrap/mailwrapLogo.svg';
+import logoMailwrapSmall from './assets/mailwrap/mailwrapLogoSmall.svg';
 import warehouseManager2 from './assets/warehouse/manager2.svg';
 import warehouseManager3 from './assets/warehouse/manager3.svg';
 import warehouseManager from './assets/warehouse/manager.svg';
@@ -63,7 +64,8 @@ var variantMap = {
         white: logoMailstepWhite
     },
     mailwrap: {
-        black: logoMailwrap
+        black: logoMailwrap,
+        s: logoMailwrapSmall
     },
     warehouse: {
         black: warehouseManager,

package/ui/Elements/Logo/assets/mailwrap/mailwrapLogoSmall.svg

@@ -0,0 +1,4 @@
+<svg width="33" height="41" viewBox="0 0 33 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.0764 23.9464V10.9448C24.0764 10.0414 23.9761 8.43501 22.7223 8.43501C20.9157 8.43501 20.7151 10.7942 20.7151 12.1004V23.9464H12.0376V11.0452C12.0376 9.99109 11.9875 8.63465 10.6345 8.63465C8.62731 8.63465 8.67748 10.8444 8.67748 12.3001V23.9464H0V0.501969H8.67748V1.7078C8.67748 2.61131 8.62731 3.51482 8.57714 4.41832C9.93124 1.85836 11.437 0 14.5452 0C17.8576 0 19.5628 2.05917 20.7653 4.87008C21.7683 2.00896 23.323 0 26.584 0C28.0886 0 29.5932 0.552137 30.6977 1.55603C32.5533 3.26388 32.7539 5.52264 32.7539 7.88179V23.9464H24.0764Z" fill="#E4001B"/>
+<path d="M3.60835 31.6587L4.42254 27.9763H6.49503L7.36473 31.7327L8.21593 27.9763H10.825L8.36397 37.0435H6.4025L5.49579 33.3796L4.57057 37.0435H2.62762L0.185043 27.9763H2.64612L3.60835 31.6587ZM11.5072 37.0435V27.9763H14.2829V28.7905C14.7085 28.2724 15.4857 27.7543 16.3924 27.7543V31.1406C15.3006 31.1406 14.2829 31.5107 14.2829 32.769V37.0435H11.5072ZM21.5605 32.3989C21.5605 31.5292 21.2459 30.678 20.6352 30.678C20.0061 30.678 19.71 31.5292 19.71 32.3989C19.71 33.2686 19.9876 34.1198 20.6352 34.1198C21.2459 34.1198 21.5605 33.2686 21.5605 32.3989ZM24.3176 27.9763V37.0435H21.616V36.0072C21.4124 36.5253 21.0053 37.2285 19.9506 37.2285C18.1001 37.2285 17.1934 34.897 17.1934 32.5654C17.1934 30.2154 18.1001 27.8838 19.9506 27.8838C20.8943 27.8838 21.3384 28.3279 21.616 28.9571V27.9763H24.3176ZM25.6768 40.7998V27.9763H28.434V29.0681C28.7485 28.4574 29.1556 27.8468 30.0993 27.8468C31.8758 27.8468 32.764 30.1968 32.764 32.5654C32.764 34.9155 31.8758 37.2655 30.0993 37.2655C28.9891 37.2655 28.6745 36.6549 28.434 36.1923V40.7998H25.6768ZM28.3599 32.6024C28.3599 33.4166 28.6745 34.2308 29.2666 34.2308C29.8588 34.2308 30.1549 33.4166 30.1549 32.6024C30.1549 31.7882 29.8588 30.974 29.2666 30.974C28.6745 30.974 28.3599 31.7882 28.3599 32.6024Z" fill="white"/>
+</svg>

package/ui/Elements/Logo/stories/Logo.stories.d.ts

@@ -25,6 +25,7 @@ export declare const MailwiseBlack: Story;
 export declare const MailwiseS: Story;
 export declare const MailstockBlack: Story;
 export declare const MailwrapBlack: Story;
+export declare const MailwrapS: Story;
 export declare const MailstepBlack: Story;
 export declare const MailstepWhite: Story;
 export declare const WarehouseManagerBlack: Story;

package/ui/Elements/Logo/stories/Logo.stories.js

@@ -63,6 +63,12 @@ export var MailwrapBlack = {
         variant: 'black'
     }
 };
+export var MailwrapS = {
+    args: {
+        brand: 'mailwrap',
+        variant: 's'
+    }
+};
 export var MailstepBlack = {
     args: {
         brand: 'mailstep',