@proximus/lavender-button-native 0.1.0-alpha.1 → 0.1.0-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.2...@proximus/lavender-button-native@0.1.0-alpha.3) (2025-09-05)
+
+### Features
+
+- **BCRI-4279213:** update token architecture and component styles ([#18](https://github.com/Pxs-Corporate/react-native-lavender/issues/18)) ([2fabf41](https://github.com/Pxs-Corporate/react-native-lavender/commit/2fabf416ce069e9756daa868c3012181db87e7f5))
+
+# [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.1...@proximus/lavender-button-native@0.1.0-alpha.2) (2025-08-13)
+
+### Bug Fixes
+
+- **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
+
 # [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.0...@proximus/lavender-button-native@0.1.0-alpha.1) (2025-08-13)
 
 ### Features

package/dist/PxButton.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { AccessibilityProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { ITheme } from '@proximus/lavender-styling-native';
-export type Variant = 'primary' | 'secondary' | 'tertiary' | 'order';
+export type Variant = 'primary' | 'secondary' | 'tertiary';
 export interface IProps extends AccessibilityProps {
     title: string;
     titleStyle?: StyleProp<TextStyle>;
@@ -15,6 +15,7 @@ export interface IProps extends AccessibilityProps {
     testID?: string;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    loading?: boolean;
 }
-export declare function PxButton(props: IProps): React.JSX.Element;
+export declare function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner, testID, disabled, prefix, suffix, onPress, loading, type, accessibilityLabel, accessibilityHint, }: 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,GAAG,OAAO,CAAC;AAErE,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;CACpB;AA4FD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,qBAuHrC"}
+{"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,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,qBAA4B,EAC5B,MAAM,EACN,QAAgB,EAChB,MAAM,EACN,MAAM,EACN,OAAO,EACP,OAAe,EACf,IAAgB,EAChB,kBAAkB,EAClB,iBAAiB,GAClB,EAAE,MAAM,qBAwGR"}

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@proximus/lavender-button-native",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "description": "Button component",
   "license": "MIT",
   "main": "src/index.ts",
-  "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rm -rf dist",
     "prepublish": "yarn clean && yarn build",
@@ -17,10 +16,10 @@
     "@proximus/lavender-texts-native": "workspace:*"
   },
   "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.0",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.0",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.0",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.0"
+    "@proximus/lavender-common-native": "0.1.0-alpha.2",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.2",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.2",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.2"
   },
   "publishConfig": {
     "access": "public"
@@ -36,5 +35,5 @@
       }
     }
   },
-  "gitHead": "59b3436b786cc1c73b4a20a98b2a85139e75b72e"
+  "gitHead": "38a67765befa2567a3f5f57976b7933cf5b85a24"
 }

package/src/PxButton.tsx

@@ -9,10 +9,10 @@ import type {
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { a11y, e2eID } from '@proximus/lavender-common-native';
 import type { ITheme } from '@proximus/lavender-styling-native';
-import { Colors, ThemeName, useTheme } from '@proximus/lavender-styling-native';
+import { useTheme } from '@proximus/lavender-styling-native';
 import { Header } from '@proximus/lavender-texts-native';
 
-export type Variant = 'primary' | 'secondary' | 'tertiary' | 'order';
+export type Variant = 'primary' | 'secondary' | 'tertiary';
 
 export interface IProps extends AccessibilityProps {
   title: string;
@@ -26,155 +26,125 @@ export interface IProps extends AccessibilityProps {
   testID?: string;
   prefix?: ReactNode;
   suffix?: ReactNode;
+  loading?: boolean;
 }
 
-function getButtonColors(props: IProps, theme: ITheme) {
-  switch (props.type) {
-    case 'order': {
-      if (theme.name === ThemeName.SCARLET) {
-        return {
-          color: Colors.status.order,
-          textColor: Colors.black,
-          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
-          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-        };
-      }
-      return {
-        color: Colors.status.order,
-        textColor: Colors.black,
-        disabledColor: Colors.v8_1.shadesOfGrey.dark4,
-        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
-      };
-    }
+function getButtonColors(props: Partial<IProps>, theme: ITheme) {
+  const { loading, type } = props;
 
+  switch (type) {
     case 'secondary': {
-      if (theme.name === ThemeName.SCARLET) {
-        return {
-          color: Colors.v7.shadesOfGrey.whiteOpacity24,
-          textColor: Colors.shadesOfGrey.white,
-          borderColor: Colors.v7.shadesOfGrey.whiteOpacity24,
-          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
-          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-        };
-      }
       return {
-        color: Colors.v7.shadesOfPurple.purple1,
-        textColor: Colors.v7.shadesOfPurple.purple2,
-        disabledColor: Colors.v7.shadesOfGrey.black0Opacity4,
-        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
+        backgroundColor: loading
+          ? theme.t('ColorBackgroundStateDisabledDefault')
+          : theme.t('ColorBackgroundContainerSecondaryDefault'),
+        textColor: loading
+          ? theme.t('ColorTextBrandInverted')
+          : theme.t('ColorTextBrandDefault'),
+        disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
+        disabledText: theme.t('ColorTextStateDisabledDefault'),
       };
     }
 
     case 'tertiary': {
       return {
-        color: 'transparent',
-        disabledColor: 'transparent',
-        textColor: Colors.v8_1.shadesOfPurple.purple,
-        disabledText: Colors.v8_1.shadesOfGrey.dark160,
+        backgroundColor: 'transparent',
+        disabledBackgroundColor: 'transparent',
+        textColor: theme.t('ColorTextBrandDefault'),
+        disabledText: theme.t('ColorTextStateDisabledDefault'),
       };
     }
+
     default: {
-      if (theme.name === ThemeName.SCARLET) {
-        return {
-          color: Colors.v7.shadesOfGrey.whiteOpacity24,
-          textColor: Colors.shadesOfGrey.white,
-          borderColor: Colors.v7.shadesOfGrey.whiteOpacity24,
-          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
-          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
-        };
-      }
       return {
-        color: theme.t('BackgroundColorActionPrimaryDefault'),
-        textColor: theme.t('TextColorActionBrandInverted'),
-        disabledColor: theme.t('BackgroundColorActionDisabledDefault'),
-        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
+        backgroundColor: loading
+          ? theme.t('ColorBackgroundStateDisabledDefault')
+          : theme.t('ColorBackgroundContainerPrimaryDefault'),
+        textColor: loading
+          ? theme.t('ColorTextBrandDefault')
+          : theme.t('ColorTextBrandInverted'),
+        disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
+        disabledText: theme.t('ColorTextStateDisabledDefault'),
+        borderColor: theme.t('ColorBorderNone'),
       };
     }
   }
 }
 
-function getIconColor(type: Variant, disabled: boolean) {
+function getIconColor(props: Partial<IProps>, theme: ITheme) {
+  const { type, disabled } = props;
+
   switch (type) {
     case 'primary':
-      return disabled ? Colors.v8_1.shadesOfGrey.dark120 : Colors.white;
+      return disabled
+        ? theme.t('ColorIconStateDisabledDefault')
+        : theme.t('ColorIconBrandInverted');
     default:
       return disabled
-        ? Colors.v8_1.shadesOfGrey.dark120
-        : Colors.v8_1.shadesOfPurple.purple;
+        ? theme.t('ColorIconStateDisabledDefault')
+        : theme.t('ColorIconBrandDefault');
   }
 }
 
-function getIconBackgroundColor(type: Variant, disabled: boolean) {
+function getIconBackgroundColor(props: Partial<IProps>, theme: ITheme) {
+  const { type, disabled } = props;
+
   switch (type) {
     case 'tertiary':
       return disabled
-        ? Colors.v8_1.shadesOfGrey.dark4
-        : Colors.v8_1.shadesOfPurple.purpleLight;
+        ? theme.t('ColorBackgroundStateDisabledDefault')
+        : theme.t('ColorBackgroundContainerSecondaryDefault');
     default:
       return undefined;
   }
 }
 
-export function PxButton(props: IProps) {
-  const {
-    title,
-    wrapperStyle,
-    titleStyle,
-    isRoundedBottomCorner = true,
-    testID,
-    disabled = false,
-    prefix,
-    suffix,
-    type = 'primary',
-    accessibilityLabel,
-    accessibilityHint,
-  } = props;
-
-  const themeContext = useTheme();
-  const theme = props.theme || themeContext.theme;
-  const buttonColors = getButtonColors(props, theme);
+export function PxButton({
+  title,
+  wrapperStyle,
+  titleStyle,
+  isRoundedBottomCorner = true,
+  testID,
+  disabled = false,
+  prefix,
+  suffix,
+  onPress,
+  loading = false,
+  type = 'primary',
+  accessibilityLabel,
+  accessibilityHint,
+}: IProps) {
+  const { theme } = useTheme();
+  const buttonColors = getButtonColors({ loading, type }, theme);
+
+  const iconStyles = {
+    size: theme.t('SizeIconXs').number,
+    color: getIconColor({ type, disabled }, theme),
+    padding: theme.t('Padding2xsMobile').number,
+  };
+
+  const iconBackgroundStyles = {
+    backgroundColor: getIconBackgroundColor({ type, disabled }, theme),
+    borderRadius: theme.t('RadiusPill').number,
+    marginHorizontal: theme.t('SpacingXsMobile').number,
+  };
 
   let adaptedPrefix =
-    prefix &&
-    React.cloneElement(prefix as ReactElement, {
-      size: 16,
-      color: getIconColor(type, disabled),
-    });
+    prefix && React.cloneElement(prefix as ReactElement, iconStyles);
 
   adaptedPrefix =
     prefix && type === 'tertiary' ? (
-      <View
-        style={[
-          styles.iconBackground,
-          { backgroundColor: getIconBackgroundColor(type, disabled) },
-        ]}
-      >
-        {adaptedPrefix}
-      </View>
+      <View style={iconBackgroundStyles}>{adaptedPrefix}</View>
     ) : (
       adaptedPrefix
     );
 
   let adaptedSuffix =
-    suffix &&
-    React.cloneElement(suffix as ReactElement, {
-      size: 16,
-      color: getIconColor(type, disabled),
-    });
+    suffix && React.cloneElement(suffix as ReactElement, iconStyles);
 
   adaptedSuffix =
     suffix && type === 'tertiary' ? (
-      <View
-        style={[
-          styles.iconBackground,
-          { backgroundColor: getIconBackgroundColor(type, disabled) },
-        ]}
-      >
-        {adaptedSuffix}
-      </View>
+      <View style={iconBackgroundStyles}>{adaptedSuffix}</View>
     ) : (
       adaptedSuffix
     );
@@ -182,7 +152,7 @@ export function PxButton(props: IProps) {
   return (
     <TouchableOpacity
       {...e2eID(testID)}
-      onPress={props.onPress}
+      onPress={onPress}
       focusable={true}
       disabled={disabled}
       {...a11y({
@@ -200,15 +170,25 @@ export function PxButton(props: IProps) {
         style={[
           styles.button,
           {
-            backgroundColor: buttonColors.color,
+            backgroundColor: buttonColors.backgroundColor,
             borderColor: buttonColors.borderColor,
+            borderRadius: theme.t('RadiusButtonSmall').number,
+            ...(isRoundedBottomCorner && {
+              borderBottomEndRadius: theme.t('RadiusButtonBig').number,
+            }),
+            paddingHorizontal:
+              type === 'tertiary' ? 0 : theme.t('PaddingMMobile').number,
+            paddingVertical:
+              type === 'tertiary'
+                ? theme.t('Padding2xsMobile').number
+                : theme.t('PaddingXsMobile').number,
+            gap: theme.t('Spacing2xsMobile').number,
+            ...(type !== 'tertiary' && {
+              minHeight: theme.t('SpacingLMobile').number,
+            }),
           },
           disabled && {
-            backgroundColor: buttonColors.disabledColor,
-            borderColor: buttonColors.disabledBorderColor,
-          },
-          isRoundedBottomCorner && {
-            borderBottomRightRadius: 22,
+            backgroundColor: buttonColors.disabledBackgroundColor,
           },
           type === 'tertiary' && {
             paddingVertical: 4,
@@ -244,15 +224,5 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'center',
-    borderRadius: 4,
-    paddingHorizontal: 24,
-    paddingVertical: 8,
-    gap: 4,
-  },
-
-  iconBackground: {
-    borderRadius: 16,
-    padding: 4,
-    marginHorizontal: 8,
   },
 });

package/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "outDir": "dist",
   },
-  "include": ["src"],
+  "include": ["src","../../../lib.d.ts"],
   "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
 }