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

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# 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-3651742:** patch module ([46bf85e](https://github.com/Pxs-Corporate/react-native-lavender/commit/46bf85e225088cd3d90ed84a7e54c070a421805e))
+- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
+- **BCRI-4002610:** update package versions and add new dependencies for styling and icon handling ([bd36e12](https://github.com/Pxs-Corporate/react-native-lavender/commit/bd36e120c36fd33602f441ceed5f41f15f81f0ea))
+- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
+- **BCRI-4210372:** fix bad version numbers ([bc6a8ba](https://github.com/Pxs-Corporate/react-native-lavender/commit/bc6a8ba48c15347442f2ac38dacae7ffba3d95eb))
+
+# (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-3651742:** patch module ([46bf85e](https://github.com/Pxs-Corporate/react-native-lavender/commit/46bf85e225088cd3d90ed84a7e54c070a421805e))
+- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
+- **BCRI-4002610:** update package versions and add new dependencies for styling and icon handling ([bd36e12](https://github.com/Pxs-Corporate/react-native-lavender/commit/bd36e120c36fd33602f441ceed5f41f15f81f0ea))
+- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/dist/PxPatch.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '@proximus/lavender-icon/dist/iconNames.js';
+export interface IPxPatchProps {
+    title: string;
+    testID?: string;
+    iconName?: IconName;
+    type: 'promo' | 'info' | 'blackfriday' | 'eco' | 'belfius' | 'mobile';
+    borderType?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+    clickable?: boolean;
+    isFocused?: boolean;
+    wrapperStyle?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    lightContent?: boolean;
+}
+export declare function PxPatch({ title, testID, type, iconName, borderType, clickable, isFocused, wrapperStyle, onPress, lightContent, ...accessibilityProps }: IPxPatchProps & AccessibilityProps): React.JSX.Element;
+//# sourceMappingURL=PxPatch.d.ts.map

package/dist/PxPatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxPatch.d.ts","sourceRoot":"","sources":["../src/PxPatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAElB,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAQtB,OAAO,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAErE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;IACtE,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,SAAiB,EACjB,SAAiB,EACjB,YAAY,EACZ,OAAO,EACP,YAAoB,EACpB,GAAG,kBAAkB,EACtB,EAAE,aAAa,GAAG,kBAAkB,qBAmIpC"}

package/dist/PxPatchAdvantages.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+export interface IPxBubbleAdvantagesProps {
+    title?: string;
+    testID?: string;
+    type: 'mobile' | 'belfius';
+    iconName?: string;
+    wrapperStyle?: StyleProp<ViewStyle>;
+    onPress?: () => void;
+    lightContent?: boolean;
+}
+export declare function PxPatchAdvantages({ title, testID, type, wrapperStyle, onPress, lightContent, ...accessibilityProps }: IPxBubbleAdvantagesProps & AccessibilityProps): React.JSX.Element;
+//# sourceMappingURL=PxPatchAdvantages.d.ts.map

package/dist/PxPatchAdvantages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxPatchAdvantages.d.ts","sourceRoot":"","sources":["../src/PxPatchAdvantages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAElB,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAQtB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,YAAY,EACZ,GAAG,kBAAkB,EACtB,EAAE,wBAAwB,GAAG,kBAAkB,qBAwD/C"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PxPatch';
+export * from './PxPatchAdvantages';
+//# 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,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,60 @@
+export declare const styles: {
+    bubbleLeft: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
+    bubbleRight: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomLeftRadius: number;
+    };
+    bubble: {
+        height: number;
+        alignItems: "center";
+        flexDirection: "row";
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    bubbleText: {
+        fontSize: number;
+    };
+    bubbleV7: {
+        alignItems: "center";
+        flexDirection: "row";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+    };
+    bubbleAdvantages: {
+        alignItems: "center";
+        flexDirection: "row";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+    };
+    bubbleTextV7: {
+        fontFamily: string;
+        fontWeight: "700";
+        fontSize: number;
+        textAlignVertical: "center";
+    };
+};
+export declare const colors: {
+    promo: string;
+    info: string;
+    blackfriday: string;
+    blackfridayEpic: string;
+    eco: string;
+    ecoEpic: string;
+    belfius: string;
+    mobile: string;
+    black: string;
+    white: string;
+    style1Gradient: string[];
+    style2Gradient: string[];
+    style3Gradient: string[];
+    shadowColor1: string;
+    shadowColor3: string;
+};
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCjB,CAAC;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;CAgBlB,CAAC"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@proximus/lavender-patch-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender patch component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "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": "27525289a448a6e4f3c2d36a88b9dc54d0f15fbf"
+}

package/src/PxPatch.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  AccessibilityProps,
+  TouchableOpacity,
+  StyleProp,
+  ViewStyle,
+  View,
+} from 'react-native';
+
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+
+import { colors, styles } from './styles';
+import { PxPatchAdvantages } from './PxPatchAdvantages';
+import { Header } from '@proximus/lavender-texts-native';
+import { PxIcon } from '@proximus/lavender-icon-native';
+import { IconName } from '@proximus/lavender-icon/dist/iconNames.js';
+
+export interface IPxPatchProps {
+  title: string;
+  testID?: string;
+  iconName?: IconName;
+  type: 'promo' | 'info' | 'blackfriday' | 'eco' | 'belfius' | 'mobile';
+  borderType?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+  clickable?: boolean;
+  isFocused?: boolean;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  lightContent?: boolean;
+}
+
+export function PxPatch({
+  title,
+  testID,
+  type,
+  iconName,
+  borderType,
+  clickable = false,
+  isFocused = false,
+  wrapperStyle,
+  onPress,
+  lightContent = false,
+  ...accessibilityProps
+}: IPxPatchProps & AccessibilityProps) {
+  const backgroundColor = () => {
+    if (type === 'promo') {
+      if (isFocused) {
+        return {
+          backgroundColor: colors.white,
+        };
+      }
+      return {
+        backgroundColor: colors.promo,
+      };
+    }
+    if (type === 'info') {
+      return {
+        backgroundColor: colors.info,
+      };
+    }
+    if (type === 'blackfriday') {
+      if (lightContent) {
+        return {
+          backgroundColor: colors.blackfridayEpic,
+        };
+      }
+      return {
+        backgroundColor: colors.blackfriday,
+      };
+    }
+    if (type === 'eco') {
+      return {
+        backgroundColor: colors.eco,
+      };
+    }
+    return undefined;
+  };
+  const borderStyle = () => {
+    if (borderType === 'topLeft') {
+      return {
+        borderTopLeftRadius: 0,
+      };
+    }
+    if (borderType === 'topRight') {
+      return {
+        borderTopRightRadius: 0,
+      };
+    }
+    if (borderType === 'bottomLeft') {
+      return {
+        borderBottomLeftRadius: 0,
+      };
+    }
+    if (borderType === 'bottomRight') {
+      return {
+        borderBottomRightRadius: 0,
+      };
+    }
+    return undefined;
+  };
+
+  const fontColor = () => {
+    if (type === 'blackfriday' && lightContent) {
+      return colors.black;
+    }
+    if (type === 'info') {
+      return colors.black;
+    }
+    if (type === 'promo' && isFocused) {
+      return colors.promo;
+    }
+    return colors.white;
+  };
+
+  const focusedBorderStyle = () => {
+    if (isFocused && type === 'promo') {
+      return {
+        borderWidth: 3,
+        backgroundColor: colors.white,
+        borderColor: colors.promo,
+        paddingVertical: 0,
+      };
+    }
+    return;
+  };
+
+  if (type === 'belfius' || type === 'mobile') {
+    return (
+      <PxPatchAdvantages
+        type={type}
+        title={title}
+        lightContent={lightContent}
+      />
+    );
+  }
+
+  const Wrapper = (clickable ? TouchableOpacity : View) as React.ElementType;
+
+  return (
+    <Wrapper
+      style={[
+        styles.bubbleV7,
+        borderStyle(),
+        backgroundColor(),
+        focusedBorderStyle(),
+        wrapperStyle,
+      ]}
+      accessible={false}
+      disabled={!clickable}
+      onPress={clickable ? onPress : undefined}
+      {...(clickable
+        ? a11y({
+            accessibilityRole: 'button',
+            accessible: true,
+            ...accessibilityProps,
+          })
+        : {})}
+      {...e2eID(testID + '-PxPatch')}
+    >
+      <Header style={[{ color: fontColor() }, styles.bubbleTextV7]}>
+        {title}
+      </Header>
+      {iconName && clickable && type === 'promo' && (
+        <PxIcon
+          name={iconName}
+          size={16}
+          style={{
+            marginLeft: 5,
+            color: fontColor(),
+          }}
+        />
+      )}
+    </Wrapper>
+  );
+}

package/src/PxPatchAdvantages.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  AccessibilityProps,
+  Image,
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { ThemeName, useTheme } from '@proximus/lavender-styling-native';
+import { Header } from '@proximus/lavender-texts-native';
+
+import { colors, styles } from './styles';
+
+export interface IPxBubbleAdvantagesProps {
+  title?: string;
+  testID?: string;
+  type: 'mobile' | 'belfius';
+  iconName?: string;
+  wrapperStyle?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  lightContent?: boolean;
+}
+
+export function PxPatchAdvantages({
+  title,
+  testID,
+  type,
+  wrapperStyle,
+  onPress,
+  lightContent,
+  ...accessibilityProps
+}: IPxBubbleAdvantagesProps & AccessibilityProps) {
+  const { theme } = useTheme();
+  const isScarlet = theme.name === ThemeName.SCARLET;
+
+  const fontColor = () => {
+    if (type === 'belfius') {
+      if (isScarlet || lightContent) {
+        return { color: colors.belfius };
+      }
+      return { color: colors.white };
+    }
+    return { color: colors.black };
+  };
+
+  const backgroundColor = () => {
+    if (type === 'mobile') {
+      return { backgroundColor: colors.mobile };
+    }
+    if (type === 'belfius') {
+      if (isScarlet || lightContent) {
+        return { backgroundColor: colors.white };
+      }
+      return { backgroundColor: colors.belfius };
+    }
+    return;
+  };
+  const renderIcon = () => {
+    if (type === 'belfius') {
+      if (isScarlet || lightContent) {
+        return require('./assets/belfius-epic.png');
+      }
+      return require('./assets/belfius.png');
+    }
+    return require('./assets/mobile-advantages.png');
+  };
+  return (
+    <TouchableOpacity
+      style={[styles.bubbleAdvantages, backgroundColor(), wrapperStyle]}
+      accessible={false}
+      onPress={onPress}
+      {...a11y({
+        accessibilityRole: 'button',
+        accessible: true,
+        accessibilityIgnoresInvertColors: true,
+        ...accessibilityProps,
+      })}
+      {...e2eID(testID + '-PxPatchAdvantages')}
+    >
+      <Image
+        style={CompStyles.imageIcon}
+        source={renderIcon()}
+        accessibilityIgnoresInvertColors
+      />
+      <Header style={[fontColor(), styles.bubbleText]}>{title}</Header>
+    </TouchableOpacity>
+  );
+}
+
+const CompStyles = StyleSheet.create({
+  imageIcon: {
+    width: 24,
+    height: 24,
+    marginEnd: 8,
+  },
+});

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './PxPatch';
+export * from './PxPatchAdvantages';

package/src/styles.ts

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  bubbleLeft: {
+    borderTopLeftRadius: 17,
+    borderTopRightRadius: 17,
+    borderBottomRightRadius: 17,
+  },
+  bubbleRight: {
+    borderTopLeftRadius: 17,
+    borderTopRightRadius: 17,
+    borderBottomLeftRadius: 17,
+  },
+  bubble: {
+    height: 30,
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  bubbleText: {
+    fontSize: 20,
+  },
+  bubbleV7: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 17,
+  },
+  bubbleAdvantages: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 17,
+  },
+  bubbleTextV7: {
+    fontFamily: 'ProximusRegular',
+    fontWeight: '700',
+    fontSize: 14,
+    textAlignVertical: 'center',
+  },
+});
+export const colors = {
+  promo: '#DE2A56',
+  info: '#00BCEE',
+  blackfriday: '#000000',
+  blackfridayEpic: '#ffffff',
+  eco: '#008000',
+  ecoEpic: '#2AD12A',
+  belfius: '#C30045',
+  mobile: '#C2EDEB',
+  black: '#000',
+  white: '#fff',
+  style1Gradient: ['#5C2D91', '#DE2B57'],
+  style2Gradient: ['#5C2D91', '#6393B6'],
+  style3Gradient: ['#0073CF', '#0073CF'],
+  shadowColor1: '#3A2254',
+  shadowColor3: '#001E36',
+};

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"]
+}