@mailstep/design-system 0.7.73 → 0.7.74-beta.2

package/package.json

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

package/ui/Elements/Button/Button.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Spinner } from '../Spinner';
 import { StyledButton, LoadingIconWrapper, StyledIcon, StyledWrapper } from './styles';
 var Button = function (_a) {
-    var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, height = _a.height, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "variant", "appearance", "disabled", "fullWidth", "height", "buttonRef", "onClick"]);
-    return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, height: height, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft }) : iconLeft), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : props.children ? (props.children) : (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight }) : iconRight)] }) })));
+    var isLoading = _a.isLoading, loadingText = _a.loadingText, icon = _a.icon, iconLeft = _a.iconLeft, iconRight = _a.iconRight, iconFillColor = _a.iconFillColor, iconStrokeColor = _a.iconStrokeColor, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.appearance, appearance = _c === void 0 ? 'primary' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.fullWidth, fullWidth = _e === void 0 ? false : _e, height = _a.height, buttonRef = _a.buttonRef, onClick = _a.onClick, props = __rest(_a, ["isLoading", "loadingText", "icon", "iconLeft", "iconRight", "iconFillColor", "iconStrokeColor", "variant", "appearance", "disabled", "fullWidth", "height", "buttonRef", "onClick"]);
+    return (_jsx(StyledButton, __assign({}, props, { onClick: !disabled && !isLoading ? onClick : undefined, "data-variant": variant, "data-appearance": appearance, disabled: disabled, iconPadding: !!icon && !props.children, ref: buttonRef, fullWidth: fullWidth, height: height, children: _jsxs(StyledWrapper, { children: [iconLeft && (typeof iconLeft === 'string' ? _jsx(StyledIcon, { "$addMarginRight": !!iconLeft, icon: iconLeft, fill: iconFillColor, stroke: iconStrokeColor }) : iconLeft), isLoading ? (_jsxs(_Fragment, { children: [_jsx(LoadingIconWrapper, { "$addMarginRight": !!loadingText || !!props.children, children: _jsx(Spinner, { variant: "sm" }) }), loadingText || loadingText === '' ? loadingText : 'Loading'] })) : props.children ? (props.children) : (icon && (typeof icon === 'string' ? _jsx(StyledIcon, { icon: icon, fill: iconFillColor, stroke: iconStrokeColor }) : icon)), iconRight && (typeof iconRight === 'string' ? _jsx(StyledIcon, { "$addMarginLeft": !!iconRight, icon: iconRight, fill: iconFillColor, stroke: iconStrokeColor }) : iconRight)] }) })));
 };
 export default Button;

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

@@ -25,4 +25,5 @@ export declare const GhostSecondary: Story;
 export declare const LinkPrimary: Story;
 export declare const LinkSecondary: Story;
 export declare const Icon: Story;
+export declare const IconCustom: Story;
 export declare const Floating: Story;

package/ui/Elements/Button/stories/Button.stories.js

@@ -100,6 +100,16 @@ export var Icon = {
         disabled: false,
     },
 };
+export var IconCustom = {
+    args: {
+        variant: 'icon',
+        appearance: 'primary',
+        icon: 'Print',
+        iconFillColor: 'none',
+        iconStrokeColor: 'white',
+        disabled: false,
+    },
+};
 export var Floating = {
     args: {
         variant: 'floating',

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

@@ -16,6 +16,8 @@ export type Props = React.HTMLProps<HTMLButtonElement> & {
     icon?: string | ReactNode;
     iconLeft?: string | ReactNode;
     iconRight?: string | ReactNode;
+    iconFillColor?: string;
+    iconStrokeColor?: string;
     buttonRef?: any;
     type?: 'button' | 'submit' | 'reset';
 };

package/ui/Elements/Icon/Icon.js

@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { useMemo } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
 import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
@@ -117,6 +117,7 @@ import { faWineGlassCrack } from '@fortawesome/pro-solid-svg-icons/faWineGlassCr
 import { faXmark as fasXmark } from '@fortawesome/pro-solid-svg-icons/faXmark';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import styled, { useTheme, th } from '@xstyled/styled-components';
+import * as icons from './icons';
 export var iconDictionary = {
     greaterThan: faAngleRight,
     startsWith: faAnglesRight,
@@ -250,18 +251,23 @@ var FaIconSizing = styled.div(templateObject_1 || (templateObject_1 = __makeTemp
     return ($fixedWidth ? 'contents' : 'block');
 });
 var Icon = function (_a) {
-    var icon = _a.icon, fill = _a.fill, _b = _a.style, style = _b === void 0 ? 'normal' : _b, size = _a.size, className = _a.className, secondaryColor = _a.secondaryColor, _c = _a.fixedWidth, fixedWidth = _c === void 0 ? true : _c, spinning = _a.spinning;
+    var icon = _a.icon, fill = _a.fill, stroke = _a.stroke, _b = _a.style, style = _b === void 0 ? 'normal' : _b, size = _a.size, className = _a.className, secondaryColor = _a.secondaryColor, _c = _a.fixedWidth, fixedWidth = _c === void 0 ? true : _c, spinning = _a.spinning;
     var theme = useTheme();
-    var colorFill = fill && th.color(fill)({ theme: theme }); // React.Text wont return number here
+    var colorFill = fill && th.color(fill)({ theme: theme });
+    var colorStroke = stroke && th.color(stroke)({ theme: theme });
     var colorSecondary = secondaryColor && th.color(secondaryColor)({ theme: theme });
     var namedIcon = (typeof icon === 'string' && (iconDictionary === null || iconDictionary === void 0 ? void 0 : iconDictionary[icon])) || false;
-    var iconProp = React.useMemo(function () {
+    var iconProp = useMemo(function () {
         if (namedIcon) {
             return Array.isArray(namedIcon) ? namedIcon[0] : namedIcon;
         }
         return [iconPrefixMap[style], icon];
     }, [icon, style, namedIcon]);
     var flipProp = (namedIcon && Array.isArray(namedIcon) && namedIcon[1]) || undefined;
+    if (icons[icon]) {
+        var IconComponent = icons[icon];
+        return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: _jsx(IconComponent, { fill: colorFill, stroke: colorStroke }) }));
+    }
     return (_jsx(FaIconSizing, { size: size, className: className !== null && className !== void 0 ? className : '', "$colorSecondary": colorSecondary, "$fixedWidth": fixedWidth, children: _jsx(FontAwesomeIcon, { color: colorFill, flip: flipProp, icon: iconProp, className: "faIcon ".concat(fixedWidth ? 'fa-fw' : '', " ").concat(spinning ? 'fa-spin' : '') }) }));
 };
 export default Icon;

package/ui/Elements/Icon/stories/BadgeIcon.stories.d.ts

@@ -10,6 +10,7 @@ declare const meta: {
         icon: string;
         style?: "normal" | "light" | "solid" | undefined;
         fill?: string | undefined;
+        stroke?: string | undefined;
         size?: number | string | undefined;
         className?: string | undefined;
         fixedWidth?: boolean | undefined;

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

@@ -4,6 +4,7 @@ export type IconProps = {
     icon: string;
     style?: 'normal' | 'light' | 'solid';
     fill?: string;
+    stroke?: string;
     size?: number | string;
     className?: string;
     fixedWidth?: boolean;