@wireapp/react-ui-kit 9.8.2 → 9.9.0

package/lib/Form/Button.d.ts

@@ -6,7 +6,8 @@ export declare enum ButtonVariant {
     SECONDARY = "secondary",
     TERTIARY = "tertiary",
     QUATERNARY = "quaternary",
-    SEND = "send"
+    SEND = "send",
+    CANCEL = "cancel"
 }
 export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
     variant?: ButtonVariant;

package/lib/Form/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Form/Button.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAEhC,OAAO,EAAC,SAAS,EAA6B,MAAM,SAAS,CAAC;AAG9D,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,IAAI,SAAS;CACd;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAsJpE,CAAC;AAEH,eAAO,MAAM,MAAM,sDAAmE,WAAW,qDAIhG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,WAAW,WAEnD,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Form/Button.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAEhC,OAAO,EAAC,SAAS,EAA6B,MAAM,SAAS,CAAC;AAG9D,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,UAAU,eAAe;IACzB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,iBAAiB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACtE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,SAsKpE,CAAC;AAEH,eAAO,MAAM,MAAM,sDAAmE,WAAW,qDAIhG,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,WAAW,WAEnD,CAAC"}

package/lib/Form/Button.js

@@ -25,10 +25,11 @@ var ButtonVariant;
     ButtonVariant["TERTIARY"] = "tertiary";
     ButtonVariant["QUATERNARY"] = "quaternary";
     ButtonVariant["SEND"] = "send";
+    ButtonVariant["CANCEL"] = "cancel";
 })(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({}, (0, Text_1.textStyle)(theme, Object.assign({ block,
+    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,
@@ -92,6 +93,16 @@ const buttonStyle = (theme, _a) => {
         '&: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,

package/package.json

@@ -70,6 +70,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.8.2",
-  "gitHead": "8e388941eab6dd435725cf1fe8d72181c20c1813"
+  "version": "9.9.0",
+  "gitHead": "77a22f1d8925f96e02290df29198c5a49d7b650f"
 }