@proximus/lavender-button-native 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/PxButton.d.ts

@@ -8,8 +8,12 @@ export interface IProps extends AccessibilityProps {
     titleStyle?: StyleProp<TextStyle>;
     wrapperStyle?: StyleProp<ViewStyle>;
     onPress?: () => void;
+    /** @deprecated Use `variant` instead. */
     type?: Variant;
+    variant?: Variant;
+    /** @deprecated Use `shape` instead. */
     isRoundedBottomCorner?: boolean;
+    shape?: 'default' | 'alternative';
     theme?: ITheme;
     disabled?: boolean;
     testID?: string;
@@ -17,5 +21,5 @@ export interface IProps extends AccessibilityProps {
     suffix?: ReactNode;
     inverted?: boolean;
 }
-export declare function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner, testID, disabled, prefix, suffix, onPress, type, accessibilityLabel, accessibilityHint, inverted, }: IProps): React.JSX.Element;
+export declare function PxButton(props: IProps): React.JSX.Element;
 //# sourceMappingURL=PxButton.d.ts.map

package/dist/PxButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PxButton.d.ts","sourceRoot":"","sources":["../src/PxButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAIhE,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,MAAO,SAAQ,kBAAkB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkFD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,qBAA4B,EAC5B,MAAM,EACN,QAAgB,EAChB,MAAM,EACN,MAAM,EACN,OAAO,EACP,IAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,MAAM,qBA2GR"}
+{"version":3,"file":"PxButton.d.ts","sourceRoot":"","sources":["../src/PxButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAIhE,MAAM,MAAM,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,MAAO,SAAQ,kBAAkB;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8GD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,qBA0HrC"}

package/dist/PxButton.js

@@ -3,10 +3,38 @@ import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { a11y, e2eID } from '@proximus/lavender-common-native';
 import { useTheme } from '@proximus/lavender-styling-native';
 import { Header } from '@proximus/lavender-texts-native';
+/**
+ * Keeps backward compatibility for `type` prop.
+ */
+function useVariant(props) {
+    const { variant, type } = props;
+    if (type && !variant) {
+        return type;
+    }
+    else if (!variant) {
+        return 'primary';
+    }
+    return variant;
+}
+/**
+ * Keeps backward compatibility for `isRoundedBottomCorner` prop.
+ */
+function useShape(props) {
+    const { shape, isRoundedBottomCorner } = props;
+    if (shape) {
+        return shape;
+    }
+    else {
+        if (isRoundedBottomCorner === undefined || isRoundedBottomCorner) {
+            return 'default';
+        }
+        return 'alternative';
+    }
+}
 function getButtonColors(props, theme) {
-    const { type, inverted = false } = props;
+    const { variant, inverted = false } = props;
     const invertedSuffix = inverted ? 'Inverted' : 'Default';
-    switch (type) {
+    switch (variant) {
         case 'secondary': {
             return {
                 backgroundColor: theme.t(`ColorBackgroundContainerSecondary${invertedSuffix}`),
@@ -37,9 +65,9 @@ function getButtonColors(props, theme) {
     }
 }
 function getIconColor(props, theme) {
-    const { type, disabled, inverted } = props;
+    const { variant, disabled, inverted } = props;
     const invertedSuffix = inverted ? 'Inverted' : 'Default';
-    switch (type) {
+    switch (variant) {
         case 'primary':
             return disabled
                 ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
@@ -53,9 +81,9 @@ function getIconColor(props, theme) {
     }
 }
 function getIconBackgroundColor(props, theme) {
-    const { type, disabled, inverted } = props;
+    const { variant, disabled, inverted } = props;
     const invertedSuffix = inverted ? 'Inverted' : 'Default';
-    switch (type) {
+    switch (variant) {
         case 'tertiary':
             return disabled
                 ? theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`)
@@ -64,25 +92,28 @@ function getIconBackgroundColor(props, theme) {
             return undefined;
     }
 }
-export function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner = true, testID, disabled = false, prefix, suffix, onPress, type = 'primary', accessibilityLabel, accessibilityHint, inverted, }) {
+export function PxButton(props) {
+    const { title, wrapperStyle, titleStyle, testID, disabled = false, prefix, suffix, onPress, accessibilityLabel, accessibilityHint, inverted, } = props;
     const { theme } = useTheme();
-    const buttonColors = getButtonColors({ type, inverted }, theme);
+    const variant = useVariant(props);
+    const shape = useShape(props);
+    const buttonColors = getButtonColors({ variant, inverted }, theme);
     const iconStyles = {
         size: 'Xs',
-        color: getIconColor({ type, disabled, inverted }, theme),
+        deprecatedColor: getIconColor({ variant, disabled, inverted }, theme),
         padding: theme.t('Padding2xsMobile').number,
     };
     const iconBackgroundStyles = {
-        backgroundColor: getIconBackgroundColor({ type, disabled, inverted }, theme),
+        backgroundColor: getIconBackgroundColor({ variant, disabled, inverted }, theme),
         borderRadius: theme.t('RadiusPill').number,
         marginHorizontal: theme.t('SpacingXsMobile').number,
     };
     let adaptedPrefix = prefix && React.cloneElement(prefix, iconStyles);
     adaptedPrefix =
-        prefix && type === 'tertiary' ? (React.createElement(View, { style: iconBackgroundStyles }, adaptedPrefix)) : (adaptedPrefix);
+        prefix && variant === 'tertiary' ? (React.createElement(View, { style: iconBackgroundStyles }, adaptedPrefix)) : (adaptedPrefix);
     let adaptedSuffix = suffix && React.cloneElement(suffix, iconStyles);
     adaptedSuffix =
-        suffix && type === 'tertiary' ? (React.createElement(View, { style: iconBackgroundStyles }, adaptedSuffix)) : (adaptedSuffix);
+        suffix && variant === 'tertiary' ? (React.createElement(View, { style: iconBackgroundStyles }, adaptedSuffix)) : (adaptedSuffix);
     return (React.createElement(TouchableOpacity, { ...e2eID(testID), onPress: onPress, focusable: true, disabled: disabled, ...a11y({
             accessibilityRole: 'button',
             accessible: true,
@@ -98,22 +129,22 @@ export function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorne
                     backgroundColor: buttonColors.backgroundColor,
                     borderColor: buttonColors.borderColor,
                     borderRadius: theme.t('RadiusButtonSmall').number,
-                    ...(isRoundedBottomCorner && {
+                    ...(shape === 'default' && {
                         borderBottomEndRadius: theme.t('RadiusButtonBig').number,
                     }),
-                    paddingHorizontal: type === 'tertiary' ? 0 : theme.t('PaddingMMobile').number,
-                    paddingVertical: type === 'tertiary'
+                    paddingHorizontal: variant === 'tertiary' ? 0 : theme.t('PaddingMMobile').number,
+                    paddingVertical: variant === 'tertiary'
                         ? theme.t('Padding2xsMobile').number
                         : theme.t('PaddingXsMobile').number,
                     gap: theme.t('Spacing2xsMobile').number,
-                    ...(type !== 'tertiary' && {
+                    ...(variant !== 'tertiary' && {
                         minHeight: theme.t('SpacingLMobile').number,
                     }),
                 },
                 disabled && {
                     backgroundColor: buttonColors.disabledBackgroundColor,
                 },
-                type === 'tertiary' && {
+                variant === 'tertiary' && {
                     paddingVertical: 4,
                     paddingHorizontal: 0,
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-button-native",
-  "version": "0.1.0-alpha.15",
+  "version": "0.1.0-alpha.17",
   "description": "Button component",
   "license": "MIT",
   "main": "dist/index.js",