@proximus/lavender-patch-native 0.1.0-alpha.1 → 0.1.0-alpha.2

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-patch-native@0.1.0-alpha.1...@proximus/lavender-patch-native@0.1.0-alpha.2) (2025-09-05)
+
+### Features
+
+- **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))
+
 # [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-patch-native@0.1.0-alpha.0...@proximus/lavender-patch-native@0.1.0-alpha.1) (2025-08-13)
 
 ### Bug Fixes

package/dist/PxPatch.d.ts

@@ -5,13 +5,11 @@ export interface IPxPatchProps {
     title: string;
     testID?: string;
     iconName?: IconName;
-    type: 'promo' | 'info' | 'blackfriday' | 'eco' | 'belfius' | 'mobile';
-    borderType?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-    clickable?: boolean;
+    type: 'promo' | 'info' | 'blackfriday' | 'eco';
+    borderType?: 'bottomLeft' | 'bottomRight';
     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;
+export declare function PxPatch({ title, testID, type, iconName, borderType, wrapperStyle, onPress, ...accessibilityProps }: IPxPatchProps & AccessibilityProps): React.JSX.Element;
 //# sourceMappingURL=PxPatch.d.ts.map

package/dist/PxPatch.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"PxPatch.d.ts","sourceRoot":"","sources":["../src/PxPatch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAClB,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAGrE,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,CAAC;IAC/C,UAAU,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,OAAO,EACP,GAAG,kBAAkB,EACtB,EAAE,aAAa,GAAG,kBAAkB,qBA+FpC"}

package/dist/index.d.ts

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

package/dist/index.d.ts.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-patch-native",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "Lavender patch component",
   "license": "MIT",
   "main": "src/index.ts",
@@ -17,10 +17,10 @@
     "@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": "0.1.0-alpha.2",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.2",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.2",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.2"
   },
   "publishConfig": {
     "access": "public"
@@ -36,5 +36,5 @@
       }
     }
   },
-  "gitHead": "d422a1d369000e1e249afb26de2cef08930c2407"
+  "gitHead": "38a67765befa2567a3f5f57976b7933cf5b85a24"
 }

package/src/PxPatch.tsx

@@ -1,31 +1,27 @@
 import React from 'react';
 import {
   AccessibilityProps,
-  TouchableOpacity,
   StyleProp,
-  ViewStyle,
+  TouchableOpacity,
   View,
+  ViewStyle,
 } 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';
+import { useTheme } from '@proximus/lavender-styling-native';
 
 export interface IPxPatchProps {
   title: string;
   testID?: string;
   iconName?: IconName;
-  type: 'promo' | 'info' | 'blackfriday' | 'eco' | 'belfius' | 'mobile';
-  borderType?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-  clickable?: boolean;
+  type: 'promo' | 'info' | 'blackfriday' | 'eco';
+  borderType?: 'bottomLeft' | 'bottomRight';
   isFocused?: boolean;
   wrapperStyle?: StyleProp<ViewStyle>;
   onPress?: () => void;
-  lightContent?: boolean;
 }
 
 export function PxPatch({
@@ -34,57 +30,35 @@ export function PxPatch({
   type,
   iconName,
   borderType,
-  clickable = false,
-  isFocused = false,
   wrapperStyle,
   onPress,
-  lightContent = false,
   ...accessibilityProps
 }: IPxPatchProps & AccessibilityProps) {
+  const { theme } = useTheme();
+
   const backgroundColor = () => {
-    if (type === 'promo') {
-      if (isFocused) {
+    switch (type) {
+      case 'promo':
         return {
-          backgroundColor: colors.white,
+          backgroundColor: theme.t('ColorBackgroundPurposePromoDefault'),
         };
-      }
-      return {
-        backgroundColor: colors.promo,
-      };
-    }
-    if (type === 'info') {
-      return {
-        backgroundColor: colors.info,
-      };
-    }
-    if (type === 'blackfriday') {
-      if (lightContent) {
+      case 'info':
         return {
-          backgroundColor: colors.blackfridayEpic,
+          backgroundColor: theme.t('ColorBackgroundPurposeInfoDefault'),
         };
-      }
-      return {
-        backgroundColor: colors.blackfriday,
-      };
-    }
-    if (type === 'eco') {
-      return {
-        backgroundColor: colors.eco,
-      };
+      case 'blackfriday':
+        return {
+          backgroundColor: theme.t('ColorBackgroundSurfaceDark'),
+        };
+      case 'eco':
+        return {
+          backgroundColor: theme.t('ColorBackgroundPurposeEcoDefault'),
+        };
+      default:
+        return undefined;
     }
-    return undefined;
   };
   const borderStyle = () => {
-    if (borderType === 'topLeft') {
-      return {
-        borderTopLeftRadius: 0,
-      };
-    }
-    if (borderType === 'topRight') {
-      return {
-        borderTopRightRadius: 0,
-      };
-    }
     if (borderType === 'bottomLeft') {
       return {
         borderBottomLeftRadius: 0,
@@ -99,55 +73,33 @@ export function PxPatch({
   };
 
   const fontColor = () => {
-    if (type === 'blackfriday' && lightContent) {
-      return colors.black;
-    }
-    if (type === 'info') {
-      return colors.black;
-    }
-    if (type === 'promo' && isFocused) {
-      return colors.promo;
+    if (type !== 'info') {
+      return theme.t('ColorTextNeutralInverted');
     }
-    return colors.white;
+    return theme.t('ColorTextNeutralInverted');
   };
 
-  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;
+  const Wrapper = (onPress ? TouchableOpacity : View) as React.ElementType;
 
   return (
     <Wrapper
       style={[
-        styles.bubbleV7,
+        {
+          alignItems: 'center',
+          flexDirection: 'row',
+          height: 26,
+          fontSize: theme.t('TextSizeLabelMMobile').number,
+          paddingHorizontal: theme.t('PaddingSMobile').number,
+          borderRadius: theme.t('RadiusPatchBig').number,
+        },
         borderStyle(),
         backgroundColor(),
-        focusedBorderStyle(),
         wrapperStyle,
       ]}
       accessible={false}
-      disabled={!clickable}
-      onPress={clickable ? onPress : undefined}
-      {...(clickable
+      disabled={!onPress}
+      onPress={onPress}
+      {...(onPress
         ? a11y({
             accessibilityRole: 'button',
             accessible: true,
@@ -156,10 +108,15 @@ export function PxPatch({
         : {})}
       {...e2eID(testID + '-PxPatch')}
     >
-      <Header style={[{ color: fontColor() }, styles.bubbleTextV7]}>
+      <Header
+        style={{
+          color: fontColor(),
+          lineHeight: theme.t('TextSizeLabelMMobile').number * 1.5,
+        }}
+      >
         {title}
       </Header>
-      {iconName && clickable && type === 'promo' && (
+      {iconName && onPress && type === 'promo' && (
         <PxIcon
           name={iconName}
           size={16}

package/src/index.ts

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

package/dist/PxPatchAdvantages.d.ts

@@ -1,13 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/styles.d.ts

@@ -1,60 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/src/PxPatchAdvantages.tsx

@@ -1,99 +0,0 @@
-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/styles.ts

@@ -1,61 +0,0 @@
-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',
-};