@proximus/lavender-buttonicon-native 0.1.0-alpha.3 → 0.1.0-alpha.6

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.6](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.5...@proximus/lavender-buttonicon-native@0.1.0-alpha.6) (2025-09-26)
+
+**Note:** Version bump only for package @proximus/lavender-buttonicon-native
+
+# [0.1.0-alpha.5](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.4...@proximus/lavender-buttonicon-native@0.1.0-alpha.5) (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.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.3...@proximus/lavender-buttonicon-native@0.1.0-alpha.4) (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.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.2...@proximus/lavender-buttonicon-native@0.1.0-alpha.3) (2025-09-12)
 
 **Note:** Version bump only for package @proximus/lavender-buttonicon-native

package/dist/PxButtonIcon.d.ts

@@ -8,7 +8,8 @@ export interface IButtonIconProps extends AccessibilityProps {
     onPress?: () => void;
     disabled?: boolean;
     inverted?: boolean;
+    size?: 'small' | 'default';
     testID?: string;
 }
-export declare function PxButtonIcon({ variant, iconName, wrapperStyle, onPress, disabled, testID, accessibilityLabel, accessibilityHint, inverted, }: IButtonIconProps): React.JSX.Element;
+export declare function PxButtonIcon({ variant, iconName, wrapperStyle, onPress, disabled, testID, accessibilityLabel, accessibilityHint, inverted, size, }: IButtonIconProps): React.JSX.Element;
 //# sourceMappingURL=PxButtonIcon.d.ts.map

package/dist/PxButtonIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PxButtonIcon.d.ts","sourceRoot":"","sources":["../src/PxButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAG1E,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0CD,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,gBAAgB,qBAkClB"}
+{"version":3,"file":"PxButtonIcon.d.ts","sourceRoot":"","sources":["../src/PxButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAG1E,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0CD,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,IAAgB,GACjB,EAAE,gBAAgB,qBAmDlB"}

package/dist/PxButtonIcon.js

@@ -0,0 +1,78 @@
+import { StyleSheet, TouchableOpacity, View, } from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { PxIcon } from '@proximus/lavender-icon-native';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+function getBackgroundColor({ variant, inverted }, theme) {
+    if (!inverted) {
+        if (variant === 'primary') {
+            return theme.t('ColorBackgroundContainerPrimaryDefault');
+        }
+        if (variant === 'secondary') {
+            return theme.t('ColorBackgroundContainerSecondaryDefault');
+        }
+        return 'transparent';
+    }
+    else {
+        if (variant === 'primary') {
+            return theme.t('ColorBackgroundContainerPrimaryInverted');
+        }
+        if (variant === 'secondary') {
+            return theme.t('ColorBackgroundContainerSecondaryInverted');
+        }
+        return 'transparent';
+    }
+}
+function getColor({ variant, inverted }, theme) {
+    if (!inverted) {
+        if (variant === 'primary') {
+            return theme.t('ColorTextBrandInverted');
+        }
+        return theme.t('ColorTextBrandDefault');
+    }
+    else {
+        if (variant === 'primary') {
+            return theme.t('ColorTextBrandDefault');
+        }
+        return theme.t('ColorTextBrandInverted');
+    }
+}
+export function PxButtonIcon({ variant = 'primary', iconName, wrapperStyle, onPress, disabled, testID, accessibilityLabel, accessibilityHint, inverted, size = 'default', }) {
+    const { theme } = useTheme();
+    const backgroundColor = getBackgroundColor({ variant, inverted }, theme);
+    const color = getColor({ variant, inverted }, theme);
+    return (React.createElement(TouchableOpacity, { ...e2eID(testID), onPress: onPress, focusable: true, disabled: disabled, ...a11y({
+            accessibilityRole: 'button',
+            accessible: true,
+            accessibilityState: {
+                disabled,
+            },
+            accessibilityLabel,
+            accessibilityHint,
+        }), style: [
+            styles.container,
+            { backgroundColor, borderRadius: theme?.t('RadiusPill')?.number },
+            wrapperStyle,
+        ] },
+        React.createElement(View, { style: {
+                height: size === 'small'
+                    ? // @ts-ignore
+                        theme?.t(`SizeM`)?.number
+                    : // @ts-ignore
+                        theme?.t(`SizeL`)?.number,
+                aspectRatio: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            React.createElement(PxIcon, { name: iconName, size: size === 'small'
+                    ? theme?.t('SizeIconXs')?.number
+                    : theme?.t('SizeIconS')?.number, color: color }))));
+}
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'column',
+        flex: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/dist/far/away/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@proximus/lavender-buttonicon-native",
+  "version": "0.1.0-alpha.6",
+  "description": "Button icon 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 './PxButtonIcon';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@proximus/lavender-buttonicon-native",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.6",
   "description": "Button icon 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/PxButtonIcon.tsx

@@ -19,6 +19,7 @@ export interface IButtonIconProps extends AccessibilityProps {
   onPress?: () => void;
   disabled?: boolean;
   inverted?: boolean;
+  size?: 'small' | 'default';
   testID?: string;
 }
 
@@ -72,6 +73,7 @@ export function PxButtonIcon({
   accessibilityLabel,
   accessibilityHint,
   inverted,
+  size = 'default',
 }: IButtonIconProps) {
   const { theme } = useTheme();
   const backgroundColor = getBackgroundColor({ variant, inverted }, theme);
@@ -92,17 +94,34 @@ export function PxButtonIcon({
         accessibilityLabel,
         accessibilityHint,
       })}
-      style={[styles.container, { backgroundColor }, wrapperStyle]}
+      style={[
+        styles.container,
+        { backgroundColor, borderRadius: theme?.t('RadiusPill')?.number },
+        wrapperStyle,
+      ]}
     >
       <View
         style={{
-          height: 24,
-          width: 24,
+          height:
+            size === 'small'
+              ? // @ts-ignore
+                theme?.t(`SizeM`)?.number
+              : // @ts-ignore
+                theme?.t(`SizeL`)?.number,
+          aspectRatio: 1,
           alignItems: 'center',
           justifyContent: 'center',
         }}
       >
-        <PxIcon name={iconName} size={22} color={color} />
+        <PxIcon
+          name={iconName}
+          size={
+            size === 'small'
+              ? theme?.t('SizeIconXs')?.number
+              : theme?.t('SizeIconS')?.number
+          }
+          color={color}
+        />
       </View>
     </TouchableOpacity>
   );
@@ -111,9 +130,7 @@ export function PxButtonIcon({
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'column',
-    padding: 8,
     flex: 0,
-    borderRadius: 20,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/tsconfig.json

@@ -4,5 +4,5 @@
     "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"]
 }