@proximus/lavender-buttonicon-native 0.1.0-alpha.4 → 0.1.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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,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"}
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,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,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,qBA+ClB"}
@@ -0,0 +1,61 @@
1
+ import { StyleSheet, TouchableOpacity, View, } from 'react-native';
2
+ import { a11y, e2eID } from '@proximus/lavender-common-native';
3
+ import { PxIcon } from '@proximus/lavender-icon-native';
4
+ import React from 'react';
5
+ import { useTheme } from '@proximus/lavender-styling-native';
6
+ function getBackgroundColor({ variant, inverted }, theme) {
7
+ if (!inverted) {
8
+ if (variant === 'primary') {
9
+ return theme.t('ColorBackgroundContainerPrimaryDefault');
10
+ }
11
+ if (variant === 'secondary') {
12
+ return theme.t('ColorBackgroundContainerSecondaryDefault');
13
+ }
14
+ return 'transparent';
15
+ }
16
+ else {
17
+ if (variant === 'primary') {
18
+ return theme.t('ColorBackgroundContainerPrimaryInverted');
19
+ }
20
+ if (variant === 'secondary') {
21
+ return theme.t('ColorBackgroundContainerSecondaryInverted');
22
+ }
23
+ return 'transparent';
24
+ }
25
+ }
26
+ export function PxButtonIcon({ variant = 'primary', iconName, wrapperStyle, onPress, disabled, testID, accessibilityLabel, accessibilityHint, inverted, size = 'default', }) {
27
+ const { theme } = useTheme();
28
+ const backgroundColor = getBackgroundColor({ variant, inverted }, theme);
29
+ return (React.createElement(TouchableOpacity, { ...e2eID(testID), onPress: onPress, focusable: true, disabled: disabled, ...a11y({
30
+ accessibilityRole: 'button',
31
+ accessible: true,
32
+ accessibilityState: {
33
+ disabled,
34
+ },
35
+ accessibilityLabel,
36
+ accessibilityHint,
37
+ }), style: [
38
+ styles.container,
39
+ { backgroundColor, borderRadius: theme?.t('RadiusPill')?.number },
40
+ wrapperStyle,
41
+ ] },
42
+ React.createElement(View, { style: {
43
+ height: size === 'small'
44
+ ? // @ts-ignore
45
+ theme?.t(`SizeM`)?.number
46
+ : // @ts-ignore
47
+ theme?.t(`SizeL`)?.number,
48
+ aspectRatio: 1,
49
+ alignItems: 'center',
50
+ justifyContent: 'center',
51
+ } },
52
+ React.createElement(PxIcon, { inverted: variant === 'primary' ? !inverted : inverted, name: iconName, size: size === 'small' ? 'Xs' : 'S', color: 'Brand' }))));
53
+ }
54
+ const styles = StyleSheet.create({
55
+ container: {
56
+ flexDirection: 'column',
57
+ flex: 0,
58
+ alignItems: 'center',
59
+ justifyContent: 'center',
60
+ },
61
+ });
package/package.json CHANGED
@@ -1,39 +1,19 @@
1
1
  {
2
2
  "name": "@proximus/lavender-buttonicon-native",
3
- "version": "0.1.0-alpha.4",
3
+ "version": "0.1.0-beta.0",
4
4
  "description": "Button icon component",
5
5
  "license": "MIT",
6
- "main": "src/index.ts",
7
- "scripts": {
8
- "clean": "rm -rf dist",
9
- "prepublish": "yarn clean && yarn build",
10
- "build": "npx tsc -p tsconfig.json"
11
- },
6
+ "main": "dist/index.js",
7
+ "files": [
8
+ "dist"
9
+ ],
12
10
  "peerDependencies": {
13
- "@proximus/lavender-common-native": "workspace:*",
14
- "@proximus/lavender-icon-native": "workspace:*",
15
- "@proximus/lavender-styling-native": "workspace:*",
16
- "@proximus/lavender-texts-native": "workspace:*"
17
- },
18
- "devDependencies": {
19
- "@proximus/lavender-common-native": "0.1.0-alpha.4",
20
- "@proximus/lavender-icon-native": "0.1.0-alpha.4",
21
- "@proximus/lavender-styling-native": "0.1.0-alpha.3",
22
- "@proximus/lavender-texts-native": "0.1.0-alpha.4"
11
+ "@proximus/lavender-common-native": "*",
12
+ "@proximus/lavender-icon-native": "*",
13
+ "@proximus/lavender-styling-native": "*",
14
+ "@proximus/lavender-texts-native": "*"
23
15
  },
24
16
  "publishConfig": {
25
17
  "access": "public"
26
- },
27
- "lerna": {
28
- "command": {
29
- "publish": {
30
- "assets": [
31
- "dist",
32
- "src",
33
- "package.json"
34
- ]
35
- }
36
- }
37
- },
38
- "gitHead": "6e9252a716a08ededdfbfd6f5b1db70ab21e026e"
18
+ }
39
19
  }
package/CHANGELOG.md DELETED
@@ -1,36 +0,0 @@
1
- # Change Log
2
-
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
-
6
- # [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)
7
-
8
- ### Features
9
-
10
- - **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))
11
-
12
- # [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)
13
-
14
- **Note:** Version bump only for package @proximus/lavender-buttonicon-native
15
-
16
- # [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-buttonicon-native@0.1.0-alpha.1...@proximus/lavender-buttonicon-native@0.1.0-alpha.2) (2025-09-05)
17
-
18
- ### Features
19
-
20
- - **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))
21
-
22
- # [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)
23
-
24
- ### Bug Fixes
25
-
26
- - **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
27
-
28
- # 0.1.0-alpha.0 (2025-08-13)
29
-
30
- ### Features
31
-
32
- - **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
33
- - **BCRI-3619796:** top navigation bar ([0b2bcae](https://github.com/Pxs-Corporate/react-native-lavender/commit/0b2bcaee7243b9f00f88e2b2fb97d86cf0cf5b77))
34
- - **BCRI-3749589:** button icon component ([62cfd94](https://github.com/Pxs-Corporate/react-native-lavender/commit/62cfd945420c26cf6da6dfb802cc998c613e9687))
35
- - **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
36
- - **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
@@ -1,137 +0,0 @@
1
- import {
2
- AccessibilityProps,
3
- StyleProp,
4
- StyleSheet,
5
- TouchableOpacity,
6
- View,
7
- ViewStyle,
8
- } from 'react-native';
9
- import { a11y, e2eID } from '@proximus/lavender-common-native';
10
- import { PxIcon } from '@proximus/lavender-icon-native';
11
- import React from 'react';
12
- import type { IconName } from '@proximus/lavender-icon/dist/iconNames.js';
13
- import { ITheme, useTheme } from '@proximus/lavender-styling-native';
14
-
15
- export interface IButtonIconProps extends AccessibilityProps {
16
- iconName: IconName;
17
- variant: 'primary' | 'secondary' | 'naked';
18
- wrapperStyle?: StyleProp<ViewStyle>;
19
- onPress?: () => void;
20
- disabled?: boolean;
21
- inverted?: boolean;
22
- size?: 'small' | 'default';
23
- testID?: string;
24
- }
25
-
26
- function getBackgroundColor(
27
- { variant, inverted }: Partial<IButtonIconProps>,
28
- theme: ITheme
29
- ) {
30
- if (!inverted) {
31
- if (variant === 'primary') {
32
- return theme.t('ColorBackgroundContainerPrimaryDefault');
33
- }
34
- if (variant === 'secondary') {
35
- return theme.t('ColorBackgroundContainerSecondaryDefault');
36
- }
37
- return 'transparent';
38
- } else {
39
- if (variant === 'primary') {
40
- return theme.t('ColorBackgroundContainerPrimaryInverted');
41
- }
42
- if (variant === 'secondary') {
43
- return theme.t('ColorBackgroundContainerSecondaryInverted');
44
- }
45
- return 'transparent';
46
- }
47
- }
48
-
49
- function getColor(
50
- { variant, inverted }: Partial<IButtonIconProps>,
51
- theme: ITheme
52
- ) {
53
- if (!inverted) {
54
- if (variant === 'primary') {
55
- return theme.t('ColorTextBrandInverted');
56
- }
57
- return theme.t('ColorTextBrandDefault');
58
- } else {
59
- if (variant === 'primary') {
60
- return theme.t('ColorTextBrandDefault');
61
- }
62
- return theme.t('ColorTextBrandInverted');
63
- }
64
- }
65
-
66
- export function PxButtonIcon({
67
- variant = 'primary',
68
- iconName,
69
- wrapperStyle,
70
- onPress,
71
- disabled,
72
- testID,
73
- accessibilityLabel,
74
- accessibilityHint,
75
- inverted,
76
- size = 'default',
77
- }: IButtonIconProps) {
78
- const { theme } = useTheme();
79
- const backgroundColor = getBackgroundColor({ variant, inverted }, theme);
80
- const color = getColor({ variant, inverted }, theme);
81
-
82
- return (
83
- <TouchableOpacity
84
- {...e2eID(testID)}
85
- onPress={onPress}
86
- focusable={true}
87
- disabled={disabled}
88
- {...a11y({
89
- accessibilityRole: 'button',
90
- accessible: true,
91
- accessibilityState: {
92
- disabled,
93
- },
94
- accessibilityLabel,
95
- accessibilityHint,
96
- })}
97
- style={[
98
- styles.container,
99
- { backgroundColor, borderRadius: theme?.t('RadiusPill')?.number },
100
- wrapperStyle,
101
- ]}
102
- >
103
- <View
104
- style={{
105
- height:
106
- size === 'small'
107
- ? // @ts-ignore
108
- theme?.t(`SizeM`)?.number
109
- : // @ts-ignore
110
- theme?.t(`SizeL`)?.number,
111
- aspectRatio: 1,
112
- alignItems: 'center',
113
- justifyContent: 'center',
114
- }}
115
- >
116
- <PxIcon
117
- name={iconName}
118
- size={
119
- size === 'small'
120
- ? theme?.t('SizeIconXs')?.number
121
- : theme?.t('SizeIconS')?.number
122
- }
123
- color={color}
124
- />
125
- </View>
126
- </TouchableOpacity>
127
- );
128
- }
129
-
130
- const styles = StyleSheet.create({
131
- container: {
132
- flexDirection: 'column',
133
- flex: 0,
134
- alignItems: 'center',
135
- justifyContent: 'center',
136
- },
137
- });
package/tsconfig.json DELETED
@@ -1,8 +0,0 @@
1
- {
2
- "extends": "../../../tsconfig.npm.json",
3
- "compilerOptions": {
4
- "outDir": "dist",
5
- },
6
- "include": ["src","../../../lib.d.ts"],
7
- "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
8
- }
File without changes