@proximus/lavender-buttonicon-native 0.1.0-alpha.1 → 0.1.0-alpha.11

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;AAE1B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAE1E,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;AAuCD,wBAAgB,YAAY,CAAC,EAC3B,OAAmB,EACnB,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,GACT,EAAE,gBAAgB,qBAiClB"}
+{"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/package.json

@@ -1,39 +1,19 @@
 {
   "name": "@proximus/lavender-buttonicon-native",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.11",
   "description": "Button icon component",
   "license": "MIT",
-  "main": "src/index.ts",
-  "scripts": {
-    "clean": "rm -rf dist",
-    "prepublish": "yarn clean && yarn build",
-    "build": "npx tsc -p tsconfig.json"
-  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "peerDependencies": {
-    "@proximus/lavender-common-native": "workspace:*",
-    "@proximus/lavender-icon-native": "workspace:*",
-    "@proximus/lavender-styling-native": "workspace:*",
-    "@proximus/lavender-texts-native": "workspace:*"
-  },
-  "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.1",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.1",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.1",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.1"
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "dist",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "d422a1d369000e1e249afb26de2cef08930c2407"
+  }
 }

package/CHANGELOG.md

@@ -1,20 +0,0 @@
-# Change Log
-
-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.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.0...@proximus/lavender-buttonicon-native@0.1.0-alpha.1) (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.0 (2025-08-13)
-
-### Features
-
-- **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
-- **BCRI-3619796:** top navigation bar ([0b2bcae](https://github.com/Pxs-Corporate/react-native-lavender/commit/0b2bcaee7243b9f00f88e2b2fb97d86cf0cf5b77))
-- **BCRI-3749589:** button icon component ([62cfd94](https://github.com/Pxs-Corporate/react-native-lavender/commit/62cfd945420c26cf6da6dfb802cc998c613e9687))
-- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
-- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/src/PxButtonIcon.tsx

@@ -1,116 +0,0 @@
-import {
-  AccessibilityProps,
-  StyleProp,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
-import { a11y, e2eID } from '@proximus/lavender-common-native';
-import { PxIcon } from '@proximus/lavender-icon-native';
-import React from 'react';
-import { Colors } from '@proximus/lavender-styling-native';
-import type { IconName } from '@proximus/lavender-icon/dist/iconNames.js';
-
-export interface IButtonIconProps extends AccessibilityProps {
-  iconName: IconName;
-  variant: 'primary' | 'secondary' | 'naked';
-  wrapperStyle?: StyleProp<ViewStyle>;
-  onPress?: () => void;
-  disabled?: boolean;
-  inverted?: boolean;
-  testID?: string;
-}
-
-function getBackgroundColor({ variant, inverted }: Partial<IButtonIconProps>) {
-  if (!inverted) {
-    if (variant === 'primary') {
-      return Colors.v8_1.shadesOfPurple.purple;
-    }
-    if (variant === 'secondary') {
-      return Colors.v8_1.shadesOfPurple.purpleLight;
-    }
-    return 'transparent';
-  } else {
-    if (variant === 'primary') {
-      return Colors.v8_1.white;
-    }
-    if (variant === 'secondary') {
-      return Colors.v8_1.shadesOfGrey.dark320;
-    }
-    return 'transparent';
-  }
-}
-
-function getColor({ variant, inverted }: Partial<IButtonIconProps>) {
-  if (!inverted) {
-    if (variant === 'primary') {
-      return Colors.v8_1.white;
-    }
-    if (variant === 'secondary') {
-      return Colors.v8_1.shadesOfPurple.purple;
-    }
-    return Colors.v8_1.shadesOfPurple.purple;
-  } else {
-    if (variant === 'primary') {
-      return Colors.v8_1.shadesOfPurple.purple;
-    }
-    return Colors.v8_1.white;
-  }
-}
-
-export function PxButtonIcon({
-  variant = 'primary',
-  iconName,
-  wrapperStyle,
-  onPress,
-  disabled,
-  testID,
-  accessibilityLabel,
-  accessibilityHint,
-  inverted,
-}: IButtonIconProps) {
-  const backgroundColor = getBackgroundColor({ variant, inverted });
-  const color = getColor({ variant, inverted });
-
-  return (
-    <TouchableOpacity
-      {...e2eID(testID)}
-      onPress={onPress}
-      focusable={true}
-      disabled={disabled}
-      {...a11y({
-        accessibilityRole: 'button',
-        accessible: true,
-        accessibilityState: {
-          disabled,
-        },
-        accessibilityLabel,
-        accessibilityHint,
-      })}
-      style={[styles.container, { backgroundColor }, wrapperStyle]}
-    >
-      <View
-        style={{
-          height: 24,
-          width: 24,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <PxIcon name={iconName} size={22} color={color} />
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'column',
-    padding: 8,
-    flex: 0,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package/tsconfig.json

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