@wireapp/react-ui-kit - npm Package Compare versions

Comparing version 9.16.5 to 9.17.0

lib/Form/Button.d.ts

@@ -1,3 +0,1 @@
-import { CSSObject } from '@emotion/react';
-import { Theme } from '../Layout';
 import { TextProps } from '../Text';
@@ -18,6 +16,6 @@ export declare enum ButtonVariant {
     showLoading?: boolean;
+    isActive?: boolean;
 }
-export declare const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject;
 export declare const Button: ({ showLoading, children, loadingColor, ...props }: ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const filterButtonProps: (props: ButtonProps) => Object;
 //# sourceMappingURL=Button.d.ts.map

lib/Form/Button.js

@@ -14,6 +14,24 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterButtonProps = exports.Button = exports.buttonStyle = exports.ButtonVariant = void 0;
+exports.filterButtonProps = exports.Button = exports.ButtonVariant = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2018 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const Button_styles_1 = require("./Button.styles");
 const Identity_1 = require("../Identity");
-const motions_1 = require("../Identity/motions");
 const Misc_1 = require("../Misc");
@@ -31,94 +49,5 @@ const Text_1 = require("../Text");
 })(ButtonVariant || (exports.ButtonVariant = ButtonVariant = {}));
-const buttonStyle = (theme, _a) => {
-    var { variant = ButtonVariant.PRIMARY, backgroundColor, block = false, disabled = false, noCapital = false, bold = true, center = true, color = Identity_1.COLOR.WHITE, fontSize = theme.fontSizes.base, noWrap = true, textTransform = 'none', truncate = true } = _a, props = __rest(_a, ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"]);
-    return (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, Text_1.textStyle)(theme, Object.assign({ block,
-        bold,
-        center,
-        disabled,
-        fontSize,
-        noWrap,
-        textTransform,
-        truncate }, props))), { border: 0, cursor: disabled ? 'default' : 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '16px', padding: 0, outline: 'none', textDecoration: 'none', touchAction: 'manipulation', transition: motions_1.defaultTransition, width: block ? '100%' : 'auto', '&:hover, &:focus': {
-            textDecoration: 'none',
-        } }), (variant !== ButtonVariant.TERTIARY && Object.assign({ borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px', height: variant === ButtonVariant.SEND ? '40px' : '48px', lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px' }, (variant !== ButtonVariant.SEND && {
-        maxWidth: '100%',
-        minWidth: '125px',
-        padding: '0 16px',
-    })))), (variant === ButtonVariant.PRIMARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg), color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: theme.Button.primaryHoverBg,
-        },
-        '&:focus': {
-            border: `1px solid ${theme.Button.primaryFocusBorder}`,
-        },
-        '&:active': {
-            backgroundColor: theme.Button.primaryActiveBg,
-            border: `1px solid ${theme.Button.primaryActiveBorder}`,
-            color: Identity_1.COLOR.WHITE,
-        },
-    })))), (variant === ButtonVariant.SECONDARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.IconButton.primaryDisabledBgColor : theme.IconButton.primaryBgColor), border: `1px solid ${theme.IconButton.primaryBorderColor}`, color: disabled ? theme.Input.placeholderColor : theme.general.color }, (!disabled && {
-        '&:hover, &:focus': {
-            border: `1px solid ${theme.Button.secondaryHoverBorder}`,
-        },
-        '&:focus': {
-            color: theme.IconButton.primaryActiveFillColor,
-        },
-        '&:active': {
-            backgroundColor: theme.Button.secondaryActiveBg,
-            border: `1px solid ${theme.Button.secondaryActiveBorder}`,
-            color: theme.general.primaryColor,
-        },
-    })))), (variant === ButtonVariant.TERTIARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg), border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`, borderRadius: '12px', color: disabled ? theme.Input.placeholderColor : theme.general.color, fontSize: theme.fontSizes.medium, fontWeight: 700, lineHeight: '1.5rem', padding: '4px 8px', '& > svg > path': {
-            fill: disabled ? theme.Input.placeholderColor : theme.general.color,
-        } }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: theme.Button.tertiaryHoverBg,
-            border: `1px solid ${theme.Button.tertiaryHoverBorder}`,
-        },
-        '&:focus': {
-            border: `1px solid ${theme.general.focusColor}`,
-        },
-        '&:active': {
-            backgroundColor: theme.Button.tertiaryActiveBg,
-            color: theme.IconButton.primaryActiveFillColor,
-            '& > svg > path': {
-                fill: theme.IconButton.primaryActiveFillColor,
-            },
-        },
-    })))), (variant === ButtonVariant.QUATERNARY && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.GREEN), color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE, lineHeight: '1.5rem' }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_600,
-        },
-        '&:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.GREEN_LIGHT_700}`,
-        },
-        '&:active': {
-            backgroundColor: Identity_1.COLOR_V2.GREEN_LIGHT_700,
-        },
-    })))), (variant === ButtonVariant.CANCEL && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_50 : Identity_1.COLOR_V2.RED), color: disabled ? Identity_1.COLOR_V2.GRAY_80 : Identity_1.COLOR_V2.WHITE, lineHeight: '1.5rem' }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.RED_LIGHT_600,
-        },
-        '&:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.RED_LIGHT_700}`,
-        },
-        '&:active': {
-            backgroundColor: Identity_1.COLOR_V2.RED_LIGHT_700,
-        },
-    })))), (variant === ButtonVariant.SEND && Object.assign({ backgroundColor: backgroundColor || (disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLUE), width: '40px' }, (!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_600,
-        },
-        '&:focus': {
-            border: `1px solid ${Identity_1.COLOR_V2.BLUE_LIGHT_800}`,
-        },
-        '&:active': {
-            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_700,
-        },
-    })))));
-};
-exports.buttonStyle = buttonStyle;
 const Button = (_a) => {
     var { showLoading, children, loadingColor = Identity_1.COLOR.WHITE } = _a, props = __rest(_a, ["showLoading", "children", "loadingColor"]);
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ css: (theme) => (0, exports.buttonStyle)(theme, props) }, (0, exports.filterButtonProps)(props), { children: showLoading ? (0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children })));
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ css: (theme) => (0, Button_styles_1.buttonStyle)(theme, props) }, (0, exports.filterButtonProps)(props), { children: showLoading ? (0, jsx_runtime_1.jsx)(Misc_1.Loading, { size: 30, color: loadingColor, style: { display: 'flex', margin: 'auto' } }) : children })));
 };
@@ -125,0 +54,0 @@ exports.Button = Button;

lib/Form/ButtonLink.js

@@ -16,3 +16,3 @@ "use strict";
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const Button_1 = require("./Button");
+const Button_styles_1 = require("./Button.styles");
 const Identity_1 = require("../Identity");
@@ -22,3 +22,3 @@ const Misc_1 = require("../Misc");
 const util_1 = require("../util");
-const buttonLinkStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_1.buttonStyle)(theme, props)), { display: 'inline-flex !important' }));
+const buttonLinkStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_styles_1.buttonStyle)(theme, props)), { display: 'inline-flex !important' }));
 exports.buttonLinkStyle = buttonLinkStyle;
@@ -25,0 +25,0 @@ const filterButtonLinkProps = (props) => {

lib/Form/RoundIconButton.js

@@ -17,5 +17,6 @@ "use strict";
 const Button_1 = require("./Button");
+const Button_styles_1 = require("./Button.styles");
 const Identity_1 = require("../Identity");
 const Misc_1 = require("../Misc/");
-const roundIconButtonStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_1.buttonStyle)(theme, props)), { alignItems: 'center', borderRadius: '50%', display: 'flex', height: `${props.size}px`, justifyContent: 'center', lineHeight: 'initial', margin: '0 auto', minWidth: `${props.size}px`, padding: 0, width: `${props.size}px` }));
+const roundIconButtonStyle = (theme, props) => (Object.assign(Object.assign({}, (0, Button_styles_1.buttonStyle)(theme, props)), { alignItems: 'center', borderRadius: '50%', display: 'flex', height: `${props.size}px`, justifyContent: 'center', lineHeight: 'initial', margin: '0 auto', minWidth: `${props.size}px`, padding: 0, width: `${props.size}px` }));
 exports.roundIconButtonStyle = roundIconButtonStyle;
@@ -22,0 +23,0 @@ const RoundIconButton = (_a) => {

package.json

@@ -73,4 +73,4 @@ {
   },
-  "version": "9.16.5",
-  "gitHead": "1808629ce30eb35fe541bf346bd8563faaea9256"
+  "version": "9.17.0",
+  "gitHead": "f8042b528feb53335f428367c9c540274024c51c"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

713281

increased by0.58%

Number of package files

516

increased by0.58%

Lines of code

10130

increased by1.1%

No dependency changes