@proximus/lavender-buttonicon-native 0.1.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# 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.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/dist/PxButtonIcon.d.ts

@@ -0,0 +1,14 @@
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+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;
+}
+export declare function PxButtonIcon({ variant, iconName, wrapperStyle, onPress, disabled, testID, accessibilityLabel, accessibilityHint, inverted, }: IButtonIconProps): React.JSX.Element;
+//# sourceMappingURL=PxButtonIcon.d.ts.map

package/dist/PxButtonIcon.d.ts.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PxButtonIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@proximus/lavender-buttonicon-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Button icon component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prepublish": "yarn clean && yarn build",
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "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.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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "dist",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "59b3436b786cc1c73b4a20a98b2a85139e75b72e"
+}

package/src/PxButtonIcon.tsx

@@ -0,0 +1,116 @@
+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/src/index.ts

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

package/tsconfig.json

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