@proximus/lavender-button-native 0.1.0-alpha.4 → 0.1.0-alpha.7

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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.7](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.6...@proximus/lavender-button-native@0.1.0-alpha.7) (2025-09-26)
+
+**Note:** Version bump only for package @proximus/lavender-button-native
+
+# [0.1.0-alpha.6](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.5...@proximus/lavender-button-native@0.1.0-alpha.6) (2025-09-25)
+
+### Bug Fixes
+
+- **BCRI-000000:** no free space on gh runner during build ([#27](https://github.com/Pxs-Corporate/react-native-lavender/issues/27)) ([a7c8604](https://github.com/Pxs-Corporate/react-native-lavender/commit/a7c86043b5cefcb10fd768d449c5718fbabe87ec))
+
+# [0.1.0-alpha.5](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.4...@proximus/lavender-button-native@0.1.0-alpha.5) (2025-09-19)
+
+### Features
+
+- **BCRI-4249550:** message card + tag components ([#22](https://github.com/Pxs-Corporate/react-native-lavender/issues/22)) ([39fb91c](https://github.com/Pxs-Corporate/react-native-lavender/commit/39fb91cc294a37d07e63fca2b4e993d90b867082))
+
 # [0.1.0-alpha.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-button-native@0.1.0-alpha.3...@proximus/lavender-button-native@0.1.0-alpha.4) (2025-09-12)
 
 **Note:** Version bump only for package @proximus/lavender-button-native

package/dist/PxButton.d.ts

@@ -15,7 +15,7 @@ export interface IProps extends AccessibilityProps {
     testID?: string;
     prefix?: ReactNode;
     suffix?: ReactNode;
-    loading?: boolean;
+    inverted?: boolean;
 }
-export declare function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner, testID, disabled, prefix, suffix, onPress, loading, type, accessibilityLabel, accessibilityHint, }: IProps): React.JSX.Element;
+export declare function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner, testID, disabled, prefix, suffix, onPress, type, accessibilityLabel, accessibilityHint, inverted, }: 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,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"}
+{"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"}

package/dist/PxButton.js

@@ -0,0 +1,142 @@
+import React from 'react';
+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';
+function getButtonColors(props, theme) {
+    const { type, inverted = false } = props;
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    switch (type) {
+        case 'secondary': {
+            return {
+                backgroundColor: theme.t(`ColorBackgroundContainerSecondary${invertedSuffix}`),
+                textColor: theme.t(`ColorTextBrand${invertedSuffix}`),
+                disabledBackgroundColor: theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`),
+                disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
+            };
+        }
+        case 'tertiary': {
+            return {
+                backgroundColor: 'transparent',
+                disabledBackgroundColor: 'transparent',
+                textColor: theme.t(`ColorTextBrand${invertedSuffix}`),
+                disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
+            };
+        }
+        default: {
+            return {
+                backgroundColor: theme.t(`ColorBackgroundContainerPrimary${invertedSuffix}`),
+                textColor: inverted
+                    ? theme.t('ColorTextBrandDefault')
+                    : theme.t('ColorTextBrandInverted'),
+                disabledBackgroundColor: theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`),
+                disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
+                borderColor: theme.t('ColorBorderNone'),
+            };
+        }
+    }
+}
+function getIconColor(props, theme) {
+    const { type, disabled, inverted } = props;
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    switch (type) {
+        case 'primary':
+            return disabled
+                ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
+                : inverted
+                    ? theme.t('ColorIconBrandDefault')
+                    : theme.t('ColorIconBrandInverted');
+        default:
+            return disabled
+                ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
+                : theme.t(`ColorIconBrand${invertedSuffix}`);
+    }
+}
+function getIconBackgroundColor(props, theme) {
+    const { type, disabled, inverted } = props;
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    switch (type) {
+        case 'tertiary':
+            return disabled
+                ? theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`)
+                : theme.t(`ColorBackgroundContainerSecondary${invertedSuffix}`);
+        default:
+            return undefined;
+    }
+}
+export function PxButton({ title, wrapperStyle, titleStyle, isRoundedBottomCorner = true, testID, disabled = false, prefix, suffix, onPress, type = 'primary', accessibilityLabel, accessibilityHint, inverted, }) {
+    const { theme } = useTheme();
+    const buttonColors = getButtonColors({ type, inverted }, theme);
+    const iconStyles = {
+        size: theme.t('SizeIconXs').number,
+        color: getIconColor({ type, disabled, inverted }, theme),
+        padding: theme.t('Padding2xsMobile').number,
+    };
+    const iconBackgroundStyles = {
+        backgroundColor: getIconBackgroundColor({ type, 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);
+    let adaptedSuffix = suffix && React.cloneElement(suffix, iconStyles);
+    adaptedSuffix =
+        suffix && type === '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,
+            accessibilityState: {
+                disabled,
+            },
+            accessibilityLabel: accessibilityLabel || title,
+            accessibilityHint,
+        }), style: wrapperStyle },
+        React.createElement(View, { style: [
+                styles.button,
+                {
+                    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.disabledBackgroundColor,
+                },
+                type === 'tertiary' && {
+                    paddingVertical: 4,
+                    paddingHorizontal: 0,
+                },
+            ] },
+            adaptedPrefix,
+            React.createElement(Header, { style: [
+                    {
+                        color: buttonColors.textColor,
+                    },
+                    disabled && {
+                        color: buttonColors.disabledText,
+                    },
+                    {
+                        lineHeight: 21,
+                    },
+                    titleStyle,
+                ] }, title),
+            adaptedSuffix)));
+}
+const styles = StyleSheet.create({
+    button: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+});

package/dist/far/away/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@proximus/lavender-button-native",
+  "version": "0.1.0-alpha.7",
+  "description": "Button component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          {
+            "from": "dist/far/away/package.json",
+            "to": "."
+          },
+          "dist/*.js",
+          "dist/*.d.ts",
+          "dist/*.d.ts.map",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
+}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './PxButton';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@proximus/lavender-button-native",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.7",
   "description": "Button component",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "clean": "rm -rf dist",
-    "prepublish": "yarn clean && yarn build",
+    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
+    "prepublish": "yarn clean && yarn transform-package-json && yarn build",
     "build": "npx tsc -p tsconfig.json"
   },
   "peerDependencies": {
@@ -16,10 +17,10 @@
     "@proximus/lavender-texts-native": "workspace:*"
   },
   "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.3",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.3",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.2",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.3"
+    "@proximus/lavender-common-native": "0.1.0-alpha.6",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.6",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.5",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.6"
   },
   "publishConfig": {
     "access": "public"
@@ -28,12 +29,18 @@
     "command": {
       "publish": {
         "assets": [
-          "dist",
+          {
+            "from": "dist/far/away/package.json",
+            "to": "."
+          },
+          "dist/*.js",
+          "dist/*.d.ts",
+          "dist/*.d.ts.map",
           "src",
           "package.json"
         ]
       }
     }
   },
-  "gitHead": "6328f584529cb675f4a2ede8ad89f31e2b3c9ffb"
+  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
 }

package/src/PxButton.tsx

@@ -26,23 +26,25 @@ export interface IProps extends AccessibilityProps {
   testID?: string;
   prefix?: ReactNode;
   suffix?: ReactNode;
-  loading?: boolean;
+  inverted?: boolean;
 }
 
 function getButtonColors(props: Partial<IProps>, theme: ITheme) {
-  const { loading, type } = props;
+  const { type, inverted = false } = props;
+
+  const invertedSuffix = inverted ? 'Inverted' : 'Default';
 
   switch (type) {
     case 'secondary': {
       return {
-        backgroundColor: loading
-          ? theme.t('ColorBackgroundStateDisabledDefault')
-          : theme.t('ColorBackgroundContainerSecondaryDefault'),
-        textColor: loading
-          ? theme.t('ColorTextBrandInverted')
-          : theme.t('ColorTextBrandDefault'),
-        disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
-        disabledText: theme.t('ColorTextStateDisabledDefault'),
+        backgroundColor: theme.t(
+          `ColorBackgroundContainerSecondary${invertedSuffix}`
+        ),
+        textColor: theme.t(`ColorTextBrand${invertedSuffix}`),
+        disabledBackgroundColor: theme.t(
+          `ColorBackgroundStateDisabled${invertedSuffix}`
+        ),
+        disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
       };
     }
 
@@ -50,21 +52,23 @@ function getButtonColors(props: Partial<IProps>, theme: ITheme) {
       return {
         backgroundColor: 'transparent',
         disabledBackgroundColor: 'transparent',
-        textColor: theme.t('ColorTextBrandDefault'),
-        disabledText: theme.t('ColorTextStateDisabledDefault'),
+        textColor: theme.t(`ColorTextBrand${invertedSuffix}`),
+        disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
       };
     }
 
     default: {
       return {
-        backgroundColor: loading
-          ? theme.t('ColorBackgroundStateDisabledDefault')
-          : theme.t('ColorBackgroundContainerPrimaryDefault'),
-        textColor: loading
+        backgroundColor: theme.t(
+          `ColorBackgroundContainerPrimary${invertedSuffix}`
+        ),
+        textColor: inverted
           ? theme.t('ColorTextBrandDefault')
           : theme.t('ColorTextBrandInverted'),
-        disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
-        disabledText: theme.t('ColorTextStateDisabledDefault'),
+        disabledBackgroundColor: theme.t(
+          `ColorBackgroundStateDisabled${invertedSuffix}`
+        ),
+        disabledText: theme.t(`ColorTextStateDisabled${invertedSuffix}`),
         borderColor: theme.t('ColorBorderNone'),
       };
     }
@@ -72,28 +76,34 @@ function getButtonColors(props: Partial<IProps>, theme: ITheme) {
 }
 
 function getIconColor(props: Partial<IProps>, theme: ITheme) {
-  const { type, disabled } = props;
+  const { type, disabled, inverted } = props;
+
+  const invertedSuffix = inverted ? 'Inverted' : 'Default';
 
   switch (type) {
     case 'primary':
       return disabled
-        ? theme.t('ColorIconStateDisabledDefault')
-        : theme.t('ColorIconBrandInverted');
+        ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
+        : inverted
+          ? theme.t('ColorIconBrandDefault')
+          : theme.t('ColorIconBrandInverted');
     default:
       return disabled
-        ? theme.t('ColorIconStateDisabledDefault')
-        : theme.t('ColorIconBrandDefault');
+        ? theme.t(`ColorIconStateDisabled${invertedSuffix}`)
+        : theme.t(`ColorIconBrand${invertedSuffix}`);
   }
 }
 
 function getIconBackgroundColor(props: Partial<IProps>, theme: ITheme) {
-  const { type, disabled } = props;
+  const { type, disabled, inverted } = props;
+
+  const invertedSuffix = inverted ? 'Inverted' : 'Default';
 
   switch (type) {
     case 'tertiary':
       return disabled
-        ? theme.t('ColorBackgroundStateDisabledDefault')
-        : theme.t('ColorBackgroundContainerSecondaryDefault');
+        ? theme.t(`ColorBackgroundStateDisabled${invertedSuffix}`)
+        : theme.t(`ColorBackgroundContainerSecondary${invertedSuffix}`);
     default:
       return undefined;
   }
@@ -109,22 +119,25 @@ export function PxButton({
   prefix,
   suffix,
   onPress,
-  loading = false,
   type = 'primary',
   accessibilityLabel,
   accessibilityHint,
+  inverted,
 }: IProps) {
   const { theme } = useTheme();
-  const buttonColors = getButtonColors({ loading, type }, theme);
+  const buttonColors = getButtonColors({ type, inverted }, theme);
 
   const iconStyles = {
     size: theme.t('SizeIconXs').number,
-    color: getIconColor({ type, disabled }, theme),
+    color: getIconColor({ type, disabled, inverted }, theme),
     padding: theme.t('Padding2xsMobile').number,
   };
 
   const iconBackgroundStyles = {
-    backgroundColor: getIconBackgroundColor({ type, disabled }, theme),
+    backgroundColor: getIconBackgroundColor(
+      { type, disabled, inverted },
+      theme
+    ),
     borderRadius: theme.t('RadiusPill').number,
     marginHorizontal: theme.t('SpacingXsMobile').number,
   };

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "../../../tsconfig.npm.json",
   "compilerOptions": {
-    "outDir": "dist",
+    "outDir": "dist"
   },
   "include": ["src","../../../lib.d.ts"],
-  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["dist", "node_modules", "src/**/*.spec.tsx", "src/**/*.spec.ts"]
 }