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

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# 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-12)
+
+### Features
+
+- **BCRI-000000:** lerna setup ([1d24b00](https://github.com/Pxs-Corporate/react-native-lavender/commit/1d24b00a9ca917d873e9c497bfebf6a0cc570d13))
+- **BCRI-000000:** lerna setup ([f7fa837](https://github.com/Pxs-Corporate/react-native-lavender/commit/f7fa837fb15e0fd1ee838f99f421ff23a52c0403))
+- **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-3651606:** mono repo creation ([d19f852](https://github.com/Pxs-Corporate/react-native-lavender/commit/d19f852a710963ff85b1a9d31d18188217aa23ab))
+- **BCRI-3689585:** icon module ([f13230d](https://github.com/Pxs-Corporate/react-native-lavender/commit/f13230d9c7643680089a0db2c69b96cd73ff246e))
+- **BCRI-3702949:** tertiary button ([4999cea](https://github.com/Pxs-Corporate/react-native-lavender/commit/4999cea4d7866084d0f8c1cba37070c6cdaa7601))
+- **BCRI-3702949:** tertiary button ([db24455](https://github.com/Pxs-Corporate/react-native-lavender/commit/db24455bd9687d80920be3e42c9e1fc14703a571))
+- **BCRI-3749589:** button icon component ([62cfd94](https://github.com/Pxs-Corporate/react-native-lavender/commit/62cfd945420c26cf6da6dfb802cc998c613e9687))
+- **BCRI-3810979:** tile components ([46fc5c7](https://github.com/Pxs-Corporate/react-native-lavender/commit/46fc5c7a0ddff6c2db43fba0de9929626092f265))

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@proximus/lavender-button-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Button component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "echo \"we publish TS so no build\" && exit 0"
+  },
+  "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": "workspace:*",
+    "@proximus/lavender-icon-native": "workspace:*",
+    "@proximus/lavender-styling-native": "workspace:*",
+    "@proximus/lavender-texts-native": "workspace:*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "src/**/*.ts",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "a4355bc543076d5914b48d76005a8686de1a5184"
+}

package/src/PxButton.tsx

@@ -0,0 +1,258 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type {
+  AccessibilityProps,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import type { ITheme } from '@proximus/lavender-styling-native';
+import { Colors, ThemeName, useTheme } from '@proximus/lavender-styling-native';
+import { Header } from '@proximus/lavender-texts-native';
+
+export type Variant = 'primary' | 'secondary' | 'tertiary' | 'order';
+
+export interface IProps extends AccessibilityProps {
+  title: string;
+  titleStyle?: StyleProp<TextStyle>;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  type?: Variant;
+  isRoundedBottomCorner?: boolean;
+  theme?: ITheme;
+  disabled?: boolean;
+  testID?: string;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+}
+
+function getButtonColors(props: IProps, theme: ITheme) {
+  switch (props.type) {
+    case 'order': {
+      if (theme.name === ThemeName.SCARLET) {
+        return {
+          color: Colors.status.order,
+          textColor: Colors.black,
+          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
+          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+        };
+      }
+      return {
+        color: Colors.status.order,
+        textColor: Colors.black,
+        disabledColor: Colors.v8_1.shadesOfGrey.dark4,
+        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
+      };
+    }
+
+    case 'secondary': {
+      if (theme.name === ThemeName.SCARLET) {
+        return {
+          color: Colors.v7.shadesOfGrey.whiteOpacity24,
+          textColor: Colors.shadesOfGrey.white,
+          borderColor: Colors.v7.shadesOfGrey.whiteOpacity24,
+          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
+          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+        };
+      }
+      return {
+        color: Colors.v7.shadesOfPurple.purple1,
+        textColor: Colors.v7.shadesOfPurple.purple2,
+        disabledColor: Colors.v7.shadesOfGrey.black0Opacity4,
+        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
+      };
+    }
+
+    case 'tertiary': {
+      return {
+        color: 'transparent',
+        disabledColor: 'transparent',
+        textColor: Colors.v8_1.shadesOfPurple.purple,
+        disabledText: Colors.v8_1.shadesOfGrey.dark160,
+      };
+    }
+    default: {
+      if (theme.name === ThemeName.SCARLET) {
+        return {
+          color: Colors.v7.shadesOfGrey.whiteOpacity24,
+          textColor: Colors.shadesOfGrey.white,
+          borderColor: Colors.v7.shadesOfGrey.whiteOpacity24,
+          disabledColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+          disabledText: Colors.v7.shadesOfGrey.whiteOpacity16,
+          disabledBorderColor: Colors.v7.shadesOfGrey.whiteOpacity8,
+        };
+      }
+      return {
+        color: theme.t('BackgroundColorActionPrimaryDefault'),
+        textColor: theme.t('TextColorActionBrandInverted'),
+        disabledColor: theme.t('BackgroundColorActionDisabledDefault'),
+        disabledText: Colors.v7.shadesOfGrey.black0Opacity12,
+      };
+    }
+  }
+}
+
+function getIconColor(type: Variant, disabled: boolean) {
+  switch (type) {
+    case 'primary':
+      return disabled ? Colors.v8_1.shadesOfGrey.dark120 : Colors.white;
+    default:
+      return disabled
+        ? Colors.v8_1.shadesOfGrey.dark120
+        : Colors.v8_1.shadesOfPurple.purple;
+  }
+}
+
+function getIconBackgroundColor(type: Variant, disabled: boolean) {
+  switch (type) {
+    case 'tertiary':
+      return disabled
+        ? Colors.v8_1.shadesOfGrey.dark4
+        : Colors.v8_1.shadesOfPurple.purpleLight;
+    default:
+      return undefined;
+  }
+}
+
+export function PxButton(props: IProps) {
+  const {
+    title,
+    wrapperStyle,
+    titleStyle,
+    isRoundedBottomCorner = true,
+    testID,
+    disabled = false,
+    prefix,
+    suffix,
+    type = 'primary',
+    accessibilityLabel,
+    accessibilityHint,
+  } = props;
+
+  const themeContext = useTheme();
+  const theme = props.theme || themeContext.theme;
+  const buttonColors = getButtonColors(props, theme);
+
+  let adaptedPrefix =
+    prefix &&
+    React.cloneElement(prefix as ReactElement, {
+      size: 16,
+      color: getIconColor(type, disabled),
+    });
+
+  adaptedPrefix =
+    prefix && type === 'tertiary' ? (
+      <View
+        style={[
+          styles.iconBackground,
+          { backgroundColor: getIconBackgroundColor(type, disabled) },
+        ]}
+      >
+        {adaptedPrefix}
+      </View>
+    ) : (
+      adaptedPrefix
+    );
+
+  let adaptedSuffix =
+    suffix &&
+    React.cloneElement(suffix as ReactElement, {
+      size: 16,
+      color: getIconColor(type, disabled),
+    });
+
+  adaptedSuffix =
+    suffix && type === 'tertiary' ? (
+      <View
+        style={[
+          styles.iconBackground,
+          { backgroundColor: getIconBackgroundColor(type, disabled) },
+        ]}
+      >
+        {adaptedSuffix}
+      </View>
+    ) : (
+      adaptedSuffix
+    );
+
+  return (
+    <TouchableOpacity
+      {...e2eID(testID)}
+      onPress={props.onPress}
+      focusable={true}
+      disabled={disabled}
+      {...a11y({
+        accessibilityRole: 'button',
+        accessible: true,
+        accessibilityState: {
+          disabled,
+        },
+        accessibilityLabel: accessibilityLabel || title,
+        accessibilityHint,
+      })}
+      style={wrapperStyle}
+    >
+      <View
+        style={[
+          styles.button,
+          {
+            backgroundColor: buttonColors.color,
+            borderColor: buttonColors.borderColor,
+          },
+          disabled && {
+            backgroundColor: buttonColors.disabledColor,
+            borderColor: buttonColors.disabledBorderColor,
+          },
+          isRoundedBottomCorner && {
+            borderBottomRightRadius: 22,
+          },
+          type === 'tertiary' && {
+            paddingVertical: 4,
+            paddingHorizontal: 0,
+          },
+        ]}
+      >
+        {adaptedPrefix}
+        <Header
+          style={[
+            {
+              color: buttonColors.textColor,
+            },
+            disabled && {
+              color: buttonColors.disabledText,
+            },
+            {
+              lineHeight: 21,
+            },
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Header>
+        {adaptedSuffix}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderRadius: 4,
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    gap: 4,
+  },
+
+  iconBackground: {
+    borderRadius: 16,
+    padding: 4,
+    marginHorizontal: 8,
+  },
+});

package/src/index.ts

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

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../tsconfig.json"
+}