@proximus/lavender-topnavigation-native 0.1.0-alpha.5 → 0.1.0-beta.0

package/dist/PxTopNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PxTopNavigation.d.ts","sourceRoot":"","sources":["../src/PxTopNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyBnD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AA8HD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqB1D"}
+{"version":3,"file":"PxTopNavigation.d.ts","sourceRoot":"","sources":["../src/PxTopNavigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAA8B,MAAM,OAAO,CAAC;AAyBnD,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAiID,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAqB1D"}

package/dist/PxTopNavigation.js

@@ -1,7 +1,7 @@
 import { ScrollView, StyleSheet, View, } from 'react-native';
 import React, { useEffect, useState } from 'react';
 import LinearGradient from 'react-native-linear-gradient';
-import { a11y } from '@proximus/lavender-common-native';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
 import { Body, Header as TextHeader } from '@proximus/lavender-texts-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { PxIcon } from '@proximus/lavender-icon-native';
@@ -21,7 +21,7 @@ function isWhiteColor(color) {
         return true;
     return false;
 }
-function LeftComponent({ title, titleColor, description, prefix, descriptionContent, centerTitle = false, }) {
+function LeftComponent({ title, titleColor, description, prefix, descriptionContent, centerTitle = false, testId, }) {
     const { theme } = useTheme();
     return (React.createElement(View, { style: styles.leftComponent },
         prefix,
@@ -34,7 +34,7 @@ function LeftComponent({ title, titleColor, description, prefix, descriptionCont
                     },
                 ], ...a11y({
                     accessibilityRole: 'header',
-                }) }, [title]),
+                }), ...(testId && e2eID(`${testId}-topnav-title`)) }, [title]),
             (descriptionContent && (React.createElement(View, { style: {
                     alignItems: 'flex-start',
                 } }, descriptionContent))) ||
@@ -44,7 +44,7 @@ function LeftComponent({ title, titleColor, description, prefix, descriptionCont
                             color: titleColor || theme.t('ColorTextBrandInverted'),
                             textAlign: centerTitle ? 'center' : 'left',
                         },
-                    ] }, description))))));
+                    ], ...(testId && e2eID(`${testId}-topnav-description`)) }, description))))));
 }
 function RightComponent({ suffix }) {
     return React.createElement(View, { style: styles.rightComponent }, suffix);
@@ -72,7 +72,7 @@ function Search({ searchElement, colors }) {
                     }),
             },
         ] },
-        React.createElement(PxIcon, { name: 'search', size: 24, color: isWhiteBackground || !colors?.[0]
+        React.createElement(PxIcon, { name: 'search', size: 'M', deprecatedColor: isWhiteBackground || !colors?.[0]
                 ? theme.t('ColorIconBrandDefault')
                 : colors?.[0], accessible: false, accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants' }),
         React.createElement(View, { style: { flex: 1, marginLeft: 8 } }, searchElement)));

package/package.json

@@ -1,48 +1,21 @@
 {
   "name": "@proximus/lavender-topnavigation-native",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-beta.0",
   "description": "Lavender react native top navigation component",
   "license": "MIT",
-  "main": "src/index.ts",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "type": "module",
-  "scripts": {
-    "clean": "rm -rf dist",
-    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
-    "prepublish": "yarn clean && yarn transform-package-json && 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:*",
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*",
     "react-native-gesture-handler": "*"
   },
-  "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.6",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.6",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.5",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.6"
-  },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          {
-            "from": "dist/far/away/package.json",
-            "to": "."
-          },
-          "dist/*.js",
-          "dist/*.d.ts",
-          "dist/*.d.ts.map",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
+  }
 }

package/CHANGELOG.md

@@ -1,14 +0,0 @@
-# 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.5](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.4...@proximus/lavender-topnavigation-native@0.1.0-alpha.5) (2025-09-26)
-
-**Note:** Version bump only for package @proximus/lavender-topnavigation-native
-
-# [0.1.0-alpha.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-topnavigation-native@0.1.0-alpha.3...@proximus/lavender-topnavigation-native@0.1.0-alpha.4) (2025-09-25)
-
-### Bug Fixes
-
-- **BCRI-000000:** no free space on gh runner during build ([#27](https://github.com/Pxs-Corporate/react-native-lavender/issues/27)) ([a7c8604](https://github.com/Pxs-Corporate/react-native-lavender/commit/a7c86043b5cefcb10fd768d449c5718fbabe87ec))

package/dist/far/away/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "@proximus/lavender-topnavigation-native",
-  "version": "0.1.0-alpha.5",
-  "description": "Lavender react native top navigation component",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "type": "module",
-  "peerDependencies": {
-    "@proximus/lavender-common-native": "*",
-    "@proximus/lavender-icon-native": "*",
-    "@proximus/lavender-styling-native": "*",
-    "@proximus/lavender-texts-native": "*",
-    "react-native-gesture-handler": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          {
-            "from": "dist/far/away/package.json",
-            "to": "."
-          },
-          "dist/*.js",
-          "dist/*.d.ts",
-          "dist/*.d.ts.map",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
-}

package/src/PxTopNavigation.tsx

@@ -1,243 +0,0 @@
-import {
-  ScrollView,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-import React, { useEffect, useState } from 'react';
-import LinearGradient from 'react-native-linear-gradient';
-import { a11y } from '@proximus/lavender-common-native';
-import { Body, Header as TextHeader } from '@proximus/lavender-texts-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { PxIcon } from '@proximus/lavender-icon-native';
-import { useTheme } from '@proximus/lavender-styling-native';
-
-function isWhiteColor(color: string | number | undefined): boolean {
-  if (!color) return false;
-  const str = color.toString().trim();
-  // Hex: #fff, #ffffff, fff, ffffff (case-insensitive)
-  if (/^#?fff(f)?(f)?$/i.test(str.replace(/^#/, ''))) return true;
-  // RGB: rgb(255,255,255) or with spaces
-  if (/^rgb\(\s*255\s*,\s*255\s*,\s*255\s*\)$/i.test(str)) return true;
-  // RGBA: rgba(255,255,255,1) or with spaces, alpha 1 or 1.0 or 100%
-  if (
-    /^rgba\(\s*255\s*,\s*255\s*,\s*255\s*,\s*(1(\.0+)?|100%|1\.0+)\s*\)$/i.test(
-      str
-    )
-  )
-    return true;
-  return false;
-}
-
-export interface PxTopNavigationProps {
-  title: string;
-  titleColor?: string;
-  centerTitle?: boolean;
-  colors?: (string | number)[];
-  description?: string;
-  testId?: string;
-  wrapperStyle?: StyleProp<ViewStyle>;
-  menuElement?: React.ReactNode;
-  searchElement?: React.ReactNode;
-  accessibilityLabel?: string;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  descriptionContent?: React.ReactNode;
-}
-
-function LeftComponent({
-  title,
-  titleColor,
-  description,
-  prefix,
-  descriptionContent,
-  centerTitle = false,
-}: PxTopNavigationProps) {
-  const { theme } = useTheme();
-
-  return (
-    <View style={styles.leftComponent}>
-      {prefix}
-      <View style={[styles.title, { flex: 1 }]}>
-        <TextHeader
-          ellipsizeMode={'tail'}
-          numberOfLines={1}
-          style={[
-            styles.textHeader,
-            {
-              color: titleColor || theme.t('ColorTextBrandInverted'),
-              textAlign: centerTitle ? 'center' : 'left',
-            },
-          ]}
-          {...a11y({
-            accessibilityRole: 'header',
-          })}
-        >
-          {[title]}
-        </TextHeader>
-        {(descriptionContent && (
-          <View
-            style={{
-              alignItems: 'flex-start',
-            }}
-          >
-            {descriptionContent}
-          </View>
-        )) ||
-          (description && (
-            <Body
-              ellipsizeMode={'tail'}
-              numberOfLines={1}
-              style={[
-                styles.description,
-                {
-                  color: titleColor || theme.t('ColorTextBrandInverted'),
-                  textAlign: centerTitle ? 'center' : 'left',
-                },
-              ]}
-            >
-              {description}
-            </Body>
-          ))}
-      </View>
-    </View>
-  );
-}
-
-function RightComponent({ suffix }: PxTopNavigationProps) {
-  return <View style={styles.rightComponent}>{suffix}</View>;
-}
-
-function Menu({ menuElement }: PxTopNavigationProps) {
-  return (
-    <ScrollView
-      horizontal={true}
-      contentContainerStyle={styles.menu}
-      showsHorizontalScrollIndicator={false}
-      showsVerticalScrollIndicator={false}
-    >
-      {menuElement}
-    </ScrollView>
-  );
-}
-
-function Search({ searchElement, colors }: PxTopNavigationProps) {
-  const [isWhiteBackground, setIsWhiteBackground] = useState(false);
-
-  const { theme } = useTheme();
-
-  useEffect(() => {
-    setIsWhiteBackground(
-      isWhiteColor(colors?.[0]) && isWhiteColor(colors?.[1])
-    );
-  }, [colors]);
-  return (
-    <View
-      style={[
-        styles.search,
-        {
-          ...(isWhiteBackground
-            ? {
-                backgroundColor: theme.t(
-                  'ColorBackgroundContainerDefaultDefault'
-                ),
-                borderColor: theme.t('ColorBorderNeutralDefault'),
-                borderWidth: theme.t('SizeBorderS').number,
-              }
-            : {
-                backgroundColor: theme.t(
-                  'ColorBackgroundContainerLightDefault'
-                ),
-              }),
-        },
-      ]}
-    >
-      <PxIcon
-        name={'search'}
-        size={24}
-        color={
-          isWhiteBackground || !colors?.[0]
-            ? theme.t('ColorIconBrandDefault')
-            : (colors?.[0] as string)
-        }
-        accessible={false}
-        accessibilityElementsHidden={true}
-        importantForAccessibility={'no-hide-descendants'}
-      />
-      <View style={{ flex: 1, marginLeft: 8 }}>{searchElement}</View>
-    </View>
-  );
-}
-
-export function PxTopNavigation(props: PxTopNavigationProps) {
-  const insets = useSafeAreaInsets();
-
-  return (
-    <LinearGradient
-      colors={props.colors || ['#5C2D91', '#9F3ACE']}
-      start={{ x: 0, y: 1.0 }}
-      end={{ x: 1.0, y: 1.0 }}
-      style={props.wrapperStyle as any}
-    >
-      <View
-        style={[
-          { paddingBottom: 8, paddingTop: insets.top }, // Horizontal padding is added in the children
-        ]}
-      >
-        <Header {...props} />
-        {props.menuElement && <Menu {...props} />}
-        {props.searchElement && <Search {...props} />}
-      </View>
-    </LinearGradient>
-  );
-}
-
-function Header(props: PxTopNavigationProps) {
-  return (
-    <View style={[styles.container]}>
-      <LeftComponent {...props} />
-      <RightComponent {...props} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    paddingHorizontal: 8,
-  },
-  title: {
-    margin: 8,
-  },
-  textHeader: {
-    fontSize: 16,
-  },
-  description: {
-    fontSize: 12,
-  },
-  leftComponent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-  },
-  rightComponent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  menu: {
-    paddingBottom: 8,
-    paddingTop: 16,
-    paddingHorizontal: 16,
-    gap: 8,
-  },
-  search: {
-    padding: 11,
-    borderRadius: 12,
-    marginVertical: 8,
-    marginHorizontal: 16,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-});

package/src/index.ts

@@ -1 +0,0 @@
-export { PxTopNavigation } from './PxTopNavigation';

package/tsconfig.json

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