@wireapp/react-ui-kit 8.17.8 → 8.17.10

package/package.json

@@ -21,6 +21,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.5",
     "@types/react": "18.0.21",
     "@types/webpack-env": "1.18.0",
     "babel-jest": "29.2.1",
@@ -68,6 +69,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "8.17.8",
-  "gitHead": "f913e6da0a972c99125d570f857ea467c26f2895"
+  "version": "8.17.10",
+  "gitHead": "af33af823fb4ec62c3fc0ba2c6d4ec9456d7ae3c"
 }

package/src/Form/Button.js

@@ -101,20 +101,20 @@ var buttonStyle = function buttonStyle(theme, _ref) {
       color: _Identity.COLOR.WHITE
     }
   })), variant === ButtonVariant.SECONDARY && _objectSpread({
-    backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE),
-    border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
-    color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK
+    backgroundColor: backgroundColor || (disabled ? theme.IconButton.primaryDisabledBgColor : theme.IconButton.primaryBgColor),
+    border: "1px solid ".concat(theme.IconButton.primaryBorderColor),
+    color: disabled ? theme.Input.placeholderColor : theme.general.color
   }, !disabled && {
     '&:hover, &:focus': {
-      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE)
+      border: "1px solid ".concat(theme.Button.secondaryHoverBorder)
     },
     '&:focus': {
-      color: _Identity.COLOR_V2.BLUE
+      color: theme.IconButton.primaryActiveFillColor
     },
     '&:active': {
-      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_50,
-      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE),
-      color: _Identity.COLOR_V2.BLUE
+      backgroundColor: theme.Button.secondaryActiveBg,
+      border: "1px solid ".concat(theme.Button.secondaryActiveBorder),
+      color: theme.general.primaryColor
     }
   })), variant === ButtonVariant.TERTIARY && _objectSpread({
     backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),

package/src/Form/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","textStyle","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","Button","primaryDisabledBg","primaryBg","primaryDisabledText","general","contrastColor","primaryHoverBg","primaryFocusBorder","primaryActiveBg","primaryActiveBorder","SECONDARY","COLOR_V2","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE","BLUE_LIGHT_50","tertiarydisabledBg","tertiaryBg","tertiaryDisabledBorder","tertiaryBorder","Input","placeholderColor","fontWeight","fill","tertiaryHoverBg","tertiaryHoverBorder","focusColor","tertiaryActiveBg","IconButton","primaryActiveFillColor","QUATERNARY","GRAY_50","GREEN","GRAY_80","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_600","BLUE_LIGHT_800","BLUE_LIGHT_700","showLoading","children","loadingColor","filterButtonProps","margin","filterProps","filterTextProps"],"sources":["Button.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  QUATERNARY = 'quaternary',\n  SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: ButtonVariant;\n  backgroundColor?: string;\n  loadingColor?: string;\n  noCapital?: boolean;\n  showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n  theme,\n  {\n    variant = ButtonVariant.PRIMARY,\n    backgroundColor,\n    block = false,\n    disabled = false,\n    noCapital = false,\n    bold = true,\n    center = true,\n    color = COLOR.WHITE,\n    fontSize = '16px',\n    noWrap = true,\n    textTransform = 'none',\n    truncate = true,\n    ...props\n  },\n) => ({\n  ...textStyle(theme, {\n    block,\n    bold,\n    center,\n    disabled,\n    fontSize,\n    noWrap,\n    textTransform,\n    truncate,\n    ...props,\n  }),\n  border: 0,\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: block ? '100%' : 'auto',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant !== ButtonVariant.TERTIARY && {\n    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n    height: variant === ButtonVariant.SEND ? '40px' : '48px',\n    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n    ...(variant !== ButtonVariant.SEND && {\n      maxWidth: '100%',\n      minWidth: '125px',\n      padding: '0 16px',\n    }),\n  }),\n  ...(variant === ButtonVariant.PRIMARY && {\n    backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),\n    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.primaryHoverBg,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.Button.primaryFocusBorder}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.primaryActiveBg,\n        border: `1px solid ${theme.Button.primaryActiveBorder}`,\n        color: COLOR.WHITE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SECONDARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE),\n    border: `1px solid ${COLOR_V2.GRAY_40}`,\n    color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        border: `1px solid ${COLOR_V2.BLUE}`,\n      },\n      '&:focus': {\n        color: COLOR_V2.BLUE,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n        border: `1px solid ${COLOR_V2.BLUE}`,\n        color: COLOR_V2.BLUE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.TERTIARY && {\n    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),\n    border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,\n    borderRadius: '12px',\n    color: disabled ? theme.Input.placeholderColor : theme.general.color,\n    fontSize: '14px',\n    fontWeight: 700,\n    lineHeight: '24px',\n    padding: '4px 8px',\n    '& > svg > path': {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.tertiaryHoverBg,\n        border: `1px solid ${theme.Button.tertiaryHoverBorder}`,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.general.focusColor}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.tertiaryActiveBg,\n        color: theme.IconButton.primaryActiveFillColor,\n        '& > svg > path': {\n          fill: theme.IconButton.primaryActiveFillColor,\n        },\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.QUATERNARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_700,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SEND && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE),\n    width: '40px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n      },\n    }),\n  }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n  <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n  return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","textStyle","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","Button","primaryDisabledBg","primaryBg","primaryDisabledText","general","contrastColor","primaryHoverBg","primaryFocusBorder","primaryActiveBg","primaryActiveBorder","SECONDARY","IconButton","primaryDisabledBgColor","primaryBgColor","primaryBorderColor","Input","placeholderColor","secondaryHoverBorder","primaryActiveFillColor","secondaryActiveBg","secondaryActiveBorder","primaryColor","tertiarydisabledBg","tertiaryBg","tertiaryDisabledBorder","tertiaryBorder","fontWeight","fill","tertiaryHoverBg","tertiaryHoverBorder","focusColor","tertiaryActiveBg","QUATERNARY","COLOR_V2","GRAY_50","GREEN","GRAY_80","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE","BLUE_LIGHT_600","BLUE_LIGHT_800","BLUE_LIGHT_700","showLoading","children","loadingColor","filterButtonProps","margin","filterProps","filterTextProps"],"sources":["Button.tsx"],"sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  QUATERNARY = 'quaternary',\n  SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: ButtonVariant;\n  backgroundColor?: string;\n  loadingColor?: string;\n  noCapital?: boolean;\n  showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n  theme,\n  {\n    variant = ButtonVariant.PRIMARY,\n    backgroundColor,\n    block = false,\n    disabled = false,\n    noCapital = false,\n    bold = true,\n    center = true,\n    color = COLOR.WHITE,\n    fontSize = '16px',\n    noWrap = true,\n    textTransform = 'none',\n    truncate = true,\n    ...props\n  },\n) => ({\n  ...textStyle(theme, {\n    block,\n    bold,\n    center,\n    disabled,\n    fontSize,\n    noWrap,\n    textTransform,\n    truncate,\n    ...props,\n  }),\n  border: 0,\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: block ? '100%' : 'auto',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant !== ButtonVariant.TERTIARY && {\n    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n    height: variant === ButtonVariant.SEND ? '40px' : '48px',\n    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n    ...(variant !== ButtonVariant.SEND && {\n      maxWidth: '100%',\n      minWidth: '125px',\n      padding: '0 16px',\n    }),\n  }),\n  ...(variant === ButtonVariant.PRIMARY && {\n    backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),\n    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.primaryHoverBg,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.Button.primaryFocusBorder}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.primaryActiveBg,\n        border: `1px solid ${theme.Button.primaryActiveBorder}`,\n        color: COLOR.WHITE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SECONDARY && {\n    backgroundColor:\n      backgroundColor || (disabled ? theme.IconButton.primaryDisabledBgColor : theme.IconButton.primaryBgColor),\n    border: `1px solid ${theme.IconButton.primaryBorderColor}`,\n    color: disabled ? theme.Input.placeholderColor : theme.general.color,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        border: `1px solid ${theme.Button.secondaryHoverBorder}`,\n      },\n      '&:focus': {\n        color: theme.IconButton.primaryActiveFillColor,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.secondaryActiveBg,\n        border: `1px solid ${theme.Button.secondaryActiveBorder}`,\n        color: theme.general.primaryColor,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.TERTIARY && {\n    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),\n    border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,\n    borderRadius: '12px',\n    color: disabled ? theme.Input.placeholderColor : theme.general.color,\n    fontSize: '14px',\n    fontWeight: 700,\n    lineHeight: '24px',\n    padding: '4px 8px',\n    '& > svg > path': {\n      fill: disabled ? theme.Input.placeholderColor : theme.general.color,\n    },\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.tertiaryHoverBg,\n        border: `1px solid ${theme.Button.tertiaryHoverBorder}`,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.general.focusColor}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.tertiaryActiveBg,\n        color: theme.IconButton.primaryActiveFillColor,\n        '& > svg > path': {\n          fill: theme.IconButton.primaryActiveFillColor,\n        },\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.QUATERNARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_700,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SEND && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE),\n    width: '40px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n      },\n    }),\n  }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n  <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n  return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"mappings":"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"}