@proximus/lavender-cards-native 0.0.1-alpha.0 → 0.0.1-alpha.2

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.1-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-cards-native@0.0.1-alpha.1...@proximus/lavender-cards-native@0.0.1-alpha.2) (2025-09-26)
+
+**Note:** Version bump only for package @proximus/lavender-cards-native
+
+## 0.0.1-alpha.1 (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/BackgroundImageLinearGradientContainer.js

@@ -0,0 +1,43 @@
+import LinearGradient from 'react-native-linear-gradient';
+import { ImageBackground } from 'react-native';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+function useStyles(props) {
+    const { theme } = useTheme();
+    const { inverted = false, backgroundColor = 'Default' } = props;
+    return {
+        gradientColors: inverted
+            ? ['#252525FF', '#252525DD', '#25252500']
+            : ['#FFFFFF', '#FFFFFFDD', '#FFFFFF00'],
+        backgroundColor: inverted
+            ? theme.t(`ColorBackgroundContainer${backgroundColor}Inverted`)
+            : theme.t(`ColorBackgroundContainer${backgroundColor}Default`),
+        contrastColors: inverted
+            ? ['rgba(0,0,0,0.6)', 'rgba(0,0,0,0.6)']
+            : ['rgba(255,255,255,0.7)', 'rgba(255,255,255,0.7)'],
+    };
+}
+export function BackgroundImageLinearGradientContainer(props) {
+    const { theme } = useTheme();
+    const styles = useStyles(props);
+    const { src, alternativeText = 'Image', contrastHelper = 'none', children, gradientDirection = 'diagonal', } = props;
+    return (React.createElement(ImageBackground, { alt: alternativeText, imageStyle: {
+            borderRadius: theme.t('RadiusMain').number,
+        }, style: {
+            flex: 1,
+        }, resizeMode: 'cover', source: src },
+        React.createElement(LinearGradient, { colors: [styles.backgroundColor, styles.backgroundColor], ...(contrastHelper === 'gradient' && {
+                colors: styles.gradientColors,
+                ...(gradientDirection === 'horizontal'
+                    ? {
+                        start: { x: 0, y: 1.0 },
+                        end: { x: 1.0, y: 1.0 },
+                    }
+                    : {
+                        start: { x: 0.0, y: 1.0 },
+                        end: { x: 0.0, y: 0.0 },
+                    }),
+            }), ...(contrastHelper === 'overlay' && {
+                colors: styles.contrastColors,
+            }) }, children)));
+}

package/dist/Content.js

@@ -0,0 +1,12 @@
+import { Body } from '@proximus/lavender-texts-native';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+export function Content({ content, size = 'M', inverted = false, }) {
+    const { theme } = useTheme();
+    return (React.createElement(Body, { style: {
+            color: inverted
+                ? theme.t(`ColorTextDimmedInverted`)
+                : theme.t(`ColorTextNeutralDefault`),
+            fontSize: theme.t(`TextSizeBody${size}Mobile`).number,
+        }, ellipsizeMode: 'tail', numberOfLines: 3 }, content));
+}

package/dist/PxCard.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Image, TouchableOpacity, View, } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { a11y, e2eID, useImageAspectRatio, } from '@proximus/lavender-common-native';
+import { BackgroundImageLinearGradientContainer, } from './BackgroundImageLinearGradientContainer';
+import { Title } from './Title';
+import { Content } from './Content';
+export function MediaPart(props) {
+    const { theme } = useTheme();
+    const { src, backgroundSize = 'cover', mediaPosition = 'top', alternativeText, } = props;
+    const aspectRatio = useImageAspectRatio(src);
+    const [wrapperHeight, setWrapperHeight] = React.useState(undefined);
+    /*
+      If we don’t set width (or height), RN needs one concrete dimension for image. Local assets
+      have an intrinsic size, so they render at that size (can be wider than the parent).
+      Remote images often don’t have an intrinsic size at first and end up constrained by
+      the parent, so they look correct.
+  
+      We then wrap the image in a View to be able to set the aspect ratio and
+      make sure Image takes the full width of the card when mediaPosition is 'top'.
+     */
+    return (React.createElement(View, { style: mediaPosition === 'top' && { width: '100%', aspectRatio }, onLayout: (event) => {
+            // when media position is left, we need to set the height of the image to match the height of the wrapper
+            // which itself have the height of the taller's neighbor element
+            const { height } = event.nativeEvent.layout;
+            setWrapperHeight(height);
+        } },
+        React.createElement(Image, { alt: alternativeText, style: {
+                ...(mediaPosition === 'top' && {
+                    width: '100%',
+                    height: '100%',
+                    aspectRatio,
+                    borderTopRightRadius: theme.t('RadiusMain').number,
+                    borderTopLeftRadius: theme.t('RadiusMain').number,
+                }),
+                ...(mediaPosition === 'left' && {
+                    width: 120,
+                    height: wrapperHeight,
+                    borderBottomLeftRadius: theme.t('RadiusMain').number,
+                    borderTopLeftRadius: theme.t('RadiusMain').number,
+                }),
+            }, source: src, resizeMode: backgroundSize })));
+}
+export function PxCard(props) {
+    const { title, content, children, mediaPosition, containerStyle, accessibilityLabel, accessibilityHint, testID, onPress, src, } = props;
+    const flexDirection = mediaPosition === 'left' ? 'row' : 'column';
+    const { theme } = useTheme();
+    return (React.createElement(TouchableOpacity, { onPress: onPress },
+        React.createElement(View, { style: [
+                containerStyle,
+                {
+                    overflow: 'hidden',
+                    flexDirection,
+                    borderRadius: theme.t('RadiusMain').number,
+                },
+            ], ...e2eID(testID), ...a11y({
+                accessibilityLabel,
+                accessibilityHint,
+                role: 'button',
+            }) },
+            mediaPosition !== 'background' && React.createElement(MediaPart, { ...props }),
+            React.createElement(BackgroundImageLinearGradientContainer, { ...props, src: mediaPosition !== 'background' ? undefined : src },
+                React.createElement(View, { style: {
+                        padding: theme.t(`PaddingMMobile`).number,
+                        gap: theme.t(`PaddingSMobile`).number,
+                    } },
+                    React.createElement(Title, { title: title }),
+                    content && React.createElement(Content, { content: content }),
+                    children)))));
+}

package/dist/PxMessageCard.js

@@ -0,0 +1,72 @@
+import { a11y, e2eID, PxSpacer } from '@proximus/lavender-common-native';
+import { Title } from './Title';
+import { Content } from './Content';
+import { BackgroundImageLinearGradientContainer } from './BackgroundImageLinearGradientContainer';
+import React from 'react';
+import { Image, View } from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { PxButton } from '@proximus/lavender-button-native';
+import { PxButtonIcon } from '@proximus/lavender-buttonicon-native';
+import { PxTag } from '@proximus/lavender-tag-native';
+export function PxMessageCard(props) {
+    const { children, containerStyle, accessibilityLabel, accessibilityHint, testID, ctaLabel, ctaAccessibilityLabel, ctaAccessibilityHint, onPress, imageLayout = 'leading', src, onClose, closeButtonSize = 'small', closeButtonAccessibilityHint, closeButtonAccessibilityLabel, inverted, tag, backgroundColor = 'Light', gradientDirection = 'vertical', height, } = props;
+    const { theme } = useTheme();
+    return (React.createElement(View, { style: [
+            containerStyle,
+            {
+                overflow: 'hidden',
+                borderRadius: theme.t('RadiusMain').number,
+                height,
+            },
+        ], ...e2eID(testID), ...a11y({
+            accessibilityLabel,
+            accessibilityHint,
+            role: 'button',
+        }) },
+        React.createElement(BackgroundImageLinearGradientContainer, { ...props, backgroundColor: backgroundColor, src: imageLayout === 'background' ? src : undefined, gradientDirection: gradientDirection },
+            React.createElement(View, { style: {
+                    gap: theme.t('SpacingDefaultMobile').number,
+                    padding: theme.t('PaddingSMobile').number,
+                    height: '100%',
+                } },
+                tag && React.createElement(TagSection, { ...props }),
+                height && React.createElement(PxSpacer, null),
+                React.createElement(TitleSection, { ...props }),
+                children,
+                React.createElement(PxButton, { title: ctaLabel, onPress: onPress, type: "secondary", accessibilityLabel: ctaAccessibilityLabel || ctaLabel, accessibilityHint: ctaAccessibilityHint, testID: `${testID ? testID : 'message-card'}-cta-button`, inverted: inverted }),
+                React.createElement(PxButtonIcon, { size: closeButtonSize, iconName: 'cross', variant: 'secondary', onPress: onClose, wrapperStyle: {
+                        position: 'absolute',
+                        top: theme.t('SpacingSMobile').number,
+                        right: theme.t('SpacingSMobile').number,
+                    }, inverted: inverted, ...e2eID(testID ? `${testID}-close-button` : 'message-card-close-button'), ...a11y({
+                        accessibilityLabel: `${closeButtonAccessibilityLabel || 'Close'}`,
+                        accessibilityHint: closeButtonAccessibilityHint,
+                    }) })))));
+}
+function TitleSection(props) {
+    const { theme } = useTheme();
+    const { imageLayout, src, inverted, content, title } = props;
+    return (React.createElement(View, { style: {
+            gap: theme.t('SpacingDefaultMobile').number,
+            flexDirection: 'row',
+        } },
+        imageLayout === 'leading' && (React.createElement(Image, { source: src, style: {
+                width: theme.t('SizeAssetsM').number,
+                aspectRatio: 1,
+            } })),
+        React.createElement(View, { style: {
+                gap: theme.t('SpacingXsMobile').number,
+                flexDirection: 'column',
+            } },
+            React.createElement(Title, { inverted: inverted, title: title, color: 'Neutral', size: 'L' }),
+            content && (React.createElement(Content, { inverted: inverted, content: content, size: 'M' })))));
+}
+function TagSection(props) {
+    const { theme } = useTheme();
+    const { tag, inverted } = props;
+    return (React.createElement(View, { style: {
+            gap: theme.t('PaddingMMobile').number,
+            alignItems: 'flex-start',
+        } },
+        React.createElement(PxTag, { label: tag, inverted: inverted })));
+}

package/dist/Title.js

@@ -0,0 +1,11 @@
+import { Header } from '@proximus/lavender-texts-native';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+export function Title({ title, size = '2xl', color = 'Brand', inverted = false, }) {
+    const { theme } = useTheme();
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    return (React.createElement(Header, { ellipsizeMode: 'tail', numberOfLines: 1, style: {
+            fontSize: theme.t(`TextSizeHeading${size}Mobile`).number,
+            color: theme.t(`ColorText${color}${invertedSuffix}`),
+        } }, title));
+}

package/dist/far/away/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@proximus/lavender-cards-native",
+  "version": "0.0.1-alpha.2",
+  "description": "Card component",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "@proximus/lavender-button-native": "*",
+    "@proximus/lavender-buttonicon-native": "*",
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-tag-native": "*",
+    "@proximus/lavender-texts-native": "*"
+  },
+  "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/dist/index.js

@@ -0,0 +1,2 @@
+export * from './PxCard';
+export * from './PxMessageCard';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@proximus/lavender-cards-native",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.2",
   "description": "Card component",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "clean": "rm -rf dist",
-    "prepublish": "yarn clean && yarn build",
+    "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": {
@@ -18,12 +19,12 @@
     "@proximus/lavender-texts-native": "workspace:*"
   },
   "devDependencies": {
-    "@proximus/lavender-button-native": "0.1.0-alpha.5",
-    "@proximus/lavender-buttonicon-native": "0.1.0-alpha.4",
-    "@proximus/lavender-common-native": "0.1.0-alpha.4",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.3",
-    "@proximus/lavender-tag-native": "0.1.0-alpha.1",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.4"
+    "@proximus/lavender-button-native": "0.1.0-alpha.7",
+    "@proximus/lavender-buttonicon-native": "0.1.0-alpha.6",
+    "@proximus/lavender-common-native": "0.1.0-alpha.6",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.5",
+    "@proximus/lavender-tag-native": "0.1.0-alpha.3",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.6"
   },
   "publishConfig": {
     "access": "public"
@@ -32,12 +33,18 @@
     "command": {
       "publish": {
         "assets": [
-          "dist",
+          {
+            "from": "dist/far/away/package.json",
+            "to": "."
+          },
+          "dist/*.js",
+          "dist/*.d.ts",
+          "dist/*.d.ts.map",
           "src",
           "package.json"
         ]
       }
     }
   },
-  "gitHead": "8794f25d197ead361646d6e655ce64ba1c7f60c0"
+  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
 }

package/tsconfig.json

@@ -4,5 +4,5 @@
     "outDir": "dist",
   },
   "include": ["src","../../../lib.d.ts"],
-  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["dist", "node_modules", "src/**/*.spec.tsx", "src/**/*.spec.ts"]
 }

package/dist/__tests__/PxCard.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=PxCard.spec.d.ts.map

package/dist/__tests__/PxCard.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PxCard.spec.d.ts","sourceRoot":"","sources":["../../src/__tests__/PxCard.spec.tsx"],"names":[],"mappings":""}

package/dist/__tests__/PxMessageCard.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=PxMessageCard.spec.d.ts.map

package/dist/__tests__/PxMessageCard.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PxMessageCard.spec.d.ts","sourceRoot":"","sources":["../../src/__tests__/PxMessageCard.spec.tsx"],"names":[],"mappings":""}