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

package/dist/BackgroundImageLinearGradientContainer.d.ts

@@ -0,0 +1,13 @@
+import { ImageSourcePropType } from 'react-native';
+import React from 'react';
+export interface BackgroundImageLinearGradientContainerProps {
+    src?: ImageSourcePropType;
+    alternativeText?: string;
+    contrastHelper?: 'overlay' | 'gradient';
+    children?: React.ReactNode;
+    backgroundColor?: 'Default' | 'Light';
+    inverted?: boolean;
+    gradientDirection?: 'horizontal' | 'vertical';
+}
+export declare function BackgroundImageLinearGradientContainer(props: BackgroundImageLinearGradientContainerProps): React.JSX.Element;
+//# sourceMappingURL=BackgroundImageLinearGradientContainer.d.ts.map

package/dist/BackgroundImageLinearGradientContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundImageLinearGradientContainer.d.ts","sourceRoot":"","sources":["../src/BackgroundImageLinearGradientContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAmB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,2CAA2C;IAC1D,GAAG,CAAC,EAAE,mBAAmB,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CAC/C;AAkBD,wBAAgB,sCAAsC,CACpD,KAAK,EAAE,2CAA2C,qBA+CnD"}

package/dist/Content.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function Content({ content, size, inverted, }: {
+    content: string;
+    size?: 'M' | 'L';
+    inverted?: boolean;
+}): React.JSX.Element;
+//# sourceMappingURL=Content.d.ts.map

package/dist/Content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../src/Content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,IAAU,EACV,QAAgB,GACjB,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAiBA"}

package/dist/PxCard.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AccessibilityProps, ImageResizeMode, StyleProp, ViewStyle } from 'react-native';
+import { BackgroundImageLinearGradientContainerProps } from './BackgroundImageLinearGradientContainer';
+export interface PxCardMediaProps {
+    mediaPosition?: 'top' | 'left' | 'background';
+}
+export interface ICardProps extends Pick<AccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'>, BackgroundImageLinearGradientContainerProps {
+    title: string;
+    content?: string;
+    backgroundColor?: 'Default' | 'Light';
+    backgroundSize?: ImageResizeMode;
+    testID?: string;
+    children?: React.ReactNode;
+    onPress?: () => void;
+    containerStyle?: StyleProp<ViewStyle>;
+    inverted?: boolean;
+}
+export declare function MediaPart(props: ICardProps & PxCardMediaProps): React.JSX.Element;
+export declare function PxCard(props: ICardProps & PxCardMediaProps): React.JSX.Element;
+//# sourceMappingURL=PxCard.d.ts.map

package/dist/PxCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxCard.d.ts","sourceRoot":"","sources":["../src/PxCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,kBAAkB,EAElB,eAAe,EACf,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,OAAO,EAEL,2CAA2C,EAC5C,MAAM,0CAA0C,CAAC;AAIlD,MAAM,WAAW,gBAAgB;IAC/B,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,YAAY,CAAC;CAC/C;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,oBAAoB,GAAG,mBAAmB,CAAC,EAC1E,2CAA2C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IACtC,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,gBAAgB,qBAwD7D;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,gBAAgB,qBAyD1D"}

package/dist/PxMessageCard.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ICardProps } from './PxCard';
+import { ImageURISource } from 'react-native';
+export interface PxMessageCardProps extends ICardProps {
+    ctaLabel: string;
+    ctaAccessibilityLabel?: string;
+    ctaAccessibilityHint?: string;
+    imageLayout?: 'leading' | 'background';
+    src?: ImageURISource;
+    closeButtonSize?: 'small' | 'default';
+    closeButtonAccessibilityLabel?: string;
+    closeButtonAccessibilityHint?: string;
+    onClose: () => void;
+    tag?: string;
+    height?: number;
+}
+export declare function PxMessageCard(props: PxMessageCardProps): React.JSX.Element;
+//# sourceMappingURL=PxMessageCard.d.ts.map

package/dist/PxMessageCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxMessageCard.d.ts","sourceRoot":"","sources":["../src/PxMessageCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAS,cAAc,EAAQ,MAAM,cAAc,CAAC;AAM3D,MAAM,WAAW,kBAAmB,SAAQ,UAAU;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IAEvC,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBA4FtD"}

package/dist/Title.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function Title({ title, size, color, inverted, }: {
+    title: string;
+    size?: 'L' | 'Xl' | '2xl';
+    color?: 'Brand' | 'Neutral';
+    inverted?: boolean;
+}): React.JSX.Element;
+//# sourceMappingURL=Title.d.ts.map

package/dist/Title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../src/Title.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAY,EACZ,KAAe,EACf,QAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAiBA"}

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

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

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

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

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

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

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

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './PxCard';
+export * from './PxMessageCard';
+//# 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,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@proximus/lavender-cards-native",
+  "version": "0.0.1-alpha.0",
+  "description": "Card component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prepublish": "yarn clean && yarn build",
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@proximus/lavender-button-native": "workspace:*",
+    "@proximus/lavender-buttonicon-native": "workspace:*",
+    "@proximus/lavender-common-native": "workspace:*",
+    "@proximus/lavender-styling-native": "workspace:*",
+    "@proximus/lavender-tag-native": "workspace:*",
+    "@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"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "dist",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "8794f25d197ead361646d6e655ce64ba1c7f60c0"
+}

package/src/BackgroundImageLinearGradientContainer.tsx

@@ -0,0 +1,80 @@
+import LinearGradient from 'react-native-linear-gradient';
+import { ImageBackground, ImageSourcePropType } from 'react-native';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+
+export interface BackgroundImageLinearGradientContainerProps {
+  src?: ImageSourcePropType;
+  alternativeText?: string;
+  contrastHelper?: 'overlay' | 'gradient';
+  children?: React.ReactNode;
+  backgroundColor?: 'Default' | 'Light';
+  inverted?: boolean;
+  gradientDirection?: 'horizontal' | 'vertical';
+}
+
+function useStyles(props: BackgroundImageLinearGradientContainerProps) {
+  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: BackgroundImageLinearGradientContainerProps
+) {
+  const { theme } = useTheme();
+  const styles = useStyles(props);
+
+  const {
+    src,
+    alternativeText = 'Image',
+    contrastHelper = 'none',
+    children,
+    gradientDirection = 'diagonal',
+  } = props;
+
+  return (
+    <ImageBackground
+      alt={alternativeText}
+      imageStyle={{
+        borderRadius: theme.t('RadiusMain').number,
+      }}
+      style={{
+        flex: 1,
+      }}
+      resizeMode={'cover'}
+      source={src}
+    >
+      <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}
+      </LinearGradient>
+    </ImageBackground>
+  );
+}

package/src/Content.tsx

@@ -0,0 +1,30 @@
+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,
+}: {
+  content: string;
+  size?: 'M' | 'L';
+  inverted?: boolean;
+}) {
+  const { theme } = useTheme();
+
+  return (
+    <Body
+      style={{
+        color: inverted
+          ? theme.t(`ColorTextDimmedInverted`)
+          : theme.t(`ColorTextNeutralDefault`),
+        fontSize: theme.t(`TextSizeBody${size}Mobile`).number,
+      }}
+      ellipsizeMode={'tail'}
+      numberOfLines={3}
+    >
+      {content}
+    </Body>
+  );
+}

package/src/PxCard.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import {
+  AccessibilityProps,
+  Image,
+  ImageResizeMode,
+  StyleProp,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import {
+  a11y,
+  e2eID,
+  useImageAspectRatio,
+} from '@proximus/lavender-common-native';
+import {
+  BackgroundImageLinearGradientContainer,
+  BackgroundImageLinearGradientContainerProps,
+} from './BackgroundImageLinearGradientContainer';
+import { Title } from './Title';
+import { Content } from './Content';
+
+export interface PxCardMediaProps {
+  mediaPosition?: 'top' | 'left' | 'background';
+}
+
+export interface ICardProps
+  extends Pick<AccessibilityProps, 'accessibilityLabel' | 'accessibilityHint'>,
+    BackgroundImageLinearGradientContainerProps {
+  title: string;
+  content?: string;
+  backgroundColor?: 'Default' | 'Light';
+  backgroundSize?: ImageResizeMode;
+  testID?: string;
+  children?: React.ReactNode;
+  onPress?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  inverted?: boolean;
+}
+
+export function MediaPart(props: ICardProps & PxCardMediaProps) {
+  const { theme } = useTheme();
+
+  const {
+    src,
+    backgroundSize = 'cover',
+    mediaPosition = 'top',
+    alternativeText,
+  } = props;
+
+  const aspectRatio = useImageAspectRatio(src);
+  const [wrapperHeight, setWrapperHeight] = React.useState<number | undefined>(
+    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 (
+    <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);
+      }}
+    >
+      <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}
+      />
+    </View>
+  );
+}
+
+export function PxCard(props: ICardProps & PxCardMediaProps) {
+  const {
+    title,
+    content,
+    children,
+    mediaPosition,
+    containerStyle,
+    accessibilityLabel,
+    accessibilityHint,
+    testID,
+    onPress,
+    src,
+  } = props;
+
+  const flexDirection = mediaPosition === 'left' ? 'row' : 'column';
+
+  const { theme } = useTheme();
+
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <View
+        style={[
+          containerStyle,
+          {
+            overflow: 'hidden',
+            flexDirection,
+            borderRadius: theme.t('RadiusMain').number,
+          },
+        ]}
+        {...e2eID(testID)}
+        {...a11y({
+          accessibilityLabel,
+          accessibilityHint,
+          role: 'button',
+        })}
+      >
+        {mediaPosition !== 'background' && <MediaPart {...props} />}
+
+        <BackgroundImageLinearGradientContainer
+          {...props}
+          src={mediaPosition !== 'background' ? undefined : src}
+        >
+          {/*wrapping linear gradient with content is needed as styling directly it is buggy*/}
+          <View
+            style={{
+              padding: theme.t(`PaddingMMobile`).number,
+              gap: theme.t(`PaddingSMobile`).number,
+            }}
+          >
+            <Title title={title} />
+            {content && <Content content={content} />}
+            {children}
+          </View>
+        </BackgroundImageLinearGradientContainer>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/src/PxMessageCard.tsx

@@ -0,0 +1,174 @@
+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 { ICardProps } from './PxCard';
+import { Image, ImageURISource, 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 interface PxMessageCardProps extends ICardProps {
+  ctaLabel: string;
+  ctaAccessibilityLabel?: string;
+  ctaAccessibilityHint?: string;
+
+  imageLayout?: 'leading' | 'background';
+
+  src?: ImageURISource;
+
+  closeButtonSize?: 'small' | 'default';
+  closeButtonAccessibilityLabel?: string;
+  closeButtonAccessibilityHint?: string;
+  onClose: () => void;
+
+  tag?: string;
+  height?: number;
+}
+
+export function PxMessageCard(props: PxMessageCardProps) {
+  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 (
+    <View
+      style={[
+        containerStyle,
+        {
+          overflow: 'hidden',
+          borderRadius: theme.t('RadiusMain').number,
+          height,
+        },
+      ]}
+      {...e2eID(testID)}
+      {...a11y({
+        accessibilityLabel,
+        accessibilityHint,
+        role: 'button',
+      })}
+    >
+      <BackgroundImageLinearGradientContainer
+        {...props}
+        backgroundColor={backgroundColor}
+        src={imageLayout === 'background' ? src : undefined}
+        gradientDirection={gradientDirection}
+      >
+        <View
+          style={{
+            gap: theme.t('SpacingDefaultMobile').number,
+            padding: theme.t('PaddingSMobile').number,
+            height: '100%',
+          }}
+        >
+          {tag && <TagSection {...props} />}
+          {height && <PxSpacer />}
+          <TitleSection {...props} />
+          {children}
+          <PxButton
+            title={ctaLabel}
+            onPress={onPress}
+            type="secondary"
+            accessibilityLabel={ctaAccessibilityLabel || ctaLabel}
+            accessibilityHint={ctaAccessibilityHint}
+            testID={`${testID ? testID : 'message-card'}-cta-button`}
+            inverted={inverted}
+          />
+          <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,
+            })}
+          />
+        </View>
+      </BackgroundImageLinearGradientContainer>
+    </View>
+  );
+}
+
+function TitleSection(props: PxMessageCardProps) {
+  const { theme } = useTheme();
+  const { imageLayout, src, inverted, content, title } = props;
+
+  return (
+    <View
+      style={{
+        gap: theme.t('SpacingDefaultMobile').number,
+        flexDirection: 'row',
+      }}
+    >
+      {imageLayout === 'leading' && (
+        <Image
+          source={src}
+          style={{
+            width: theme.t('SizeAssetsM').number,
+            aspectRatio: 1,
+          }}
+        />
+      )}
+      <View
+        style={{
+          gap: theme.t('SpacingXsMobile').number,
+          flexDirection: 'column',
+        }}
+      >
+        <Title inverted={inverted} title={title} color={'Neutral'} size={'L'} />
+        {content && (
+          <Content inverted={inverted} content={content} size={'M'} />
+        )}
+      </View>
+    </View>
+  );
+}
+
+function TagSection(props: PxMessageCardProps) {
+  const { theme } = useTheme();
+  const { tag, inverted } = props;
+
+  return (
+    <View
+      style={{
+        gap: theme.t('PaddingMMobile').number,
+        alignItems: 'flex-start',
+      }}
+    >
+      <PxTag label={tag!} inverted={inverted} />
+    </View>
+  );
+}

package/src/Title.tsx

@@ -0,0 +1,32 @@
+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,
+}: {
+  title: string;
+  size?: 'L' | 'Xl' | '2xl';
+  color?: 'Brand' | 'Neutral';
+  inverted?: boolean;
+}) {
+  const { theme } = useTheme();
+
+  const invertedSuffix = inverted ? 'Inverted' : 'Default';
+
+  return (
+    <Header
+      ellipsizeMode={'tail'}
+      numberOfLines={1}
+      style={{
+        fontSize: theme.t(`TextSizeHeading${size}Mobile`).number,
+        color: theme.t(`ColorText${color}${invertedSuffix}`),
+      }}
+    >
+      {title}
+    </Header>
+  );
+}

package/src/__tests__/PxCard.spec.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { Image, TouchableOpacity } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+import { ICardProps, PxCard, PxCardMediaProps } from '..';
+import { type RenderResult } from '@testing-library/react-native/build/render';
+import { LaunchArguments } from 'react-native-launch-arguments';
+import LinearGradient from 'react-native-linear-gradient';
+
+describe('PxCard', () => {
+  let component: RenderResult;
+  const onPress = jest.fn();
+
+  beforeEach(() => {
+    (LaunchArguments.value as jest.Mock).mockReturnValue({ e2e: false });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders title and (optional) content', () => {
+    givenComponent();
+    thenItMustDisplayTheTitleAndContent();
+  });
+
+  it('fires onPress when the card is pressed', () => {
+    givenComponent();
+    whenClickingCard();
+    thenOnPressIsCalled();
+  });
+
+  it('computes aspectRatio for mediaPosition="top" from Image.getSize', () => {
+    givenImageSize(1200, 600); // aspectRatio = 2
+    givenComponent();
+    thenMediaHasAspectRatio(2);
+  });
+
+  it('sets width-based layout for mediaPosition="left"', () => {
+    givenImageSize(600, 1200);
+    givenComponent({
+      mediaPosition: 'left',
+    });
+    thenMediaHasWidth(120);
+  });
+
+  it('shows gradient colors when contrastHelperGradient is true', () => {
+    givenComponent({
+      contrastHelper: 'gradient',
+      gradientDirection: 'horizontal',
+    });
+    thenHelperGradientIsDisplayed();
+  });
+
+  it('shows overlay colors when contrastHelperOverlay is true', () => {
+    givenComponent({
+      contrastHelper: 'overlay',
+    });
+    thenHelperOverlayIsDisplayed();
+  });
+  //
+  it('does not render MediaPart when mediaPosition="background"', () => {
+    givenComponent({
+      mediaPosition: 'background',
+    });
+    thenMediaIsDisplayedBackground();
+  });
+
+  function givenComponent(props?: Partial<ICardProps & PxCardMediaProps>) {
+    component = render(
+      <PxCard
+        {...props}
+        content={'Short description'}
+        alternativeText={'Nice Image'}
+        src={{
+          uri: 'https://example.com/img.jpg',
+        }}
+        onPress={onPress}
+        title={'Promo title'}
+      />
+    );
+  }
+
+  function givenImageSize(width: number, height: number) {
+    jest.spyOn(Image, 'getSize').mockImplementation((_, success) => {
+      success(width, height);
+    });
+  }
+
+  function thenItMustDisplayTheTitleAndContent() {
+    const { getByText } = component!;
+    const title = getByText('Promo title');
+    expect(title).toBeOnTheScreen();
+    expect(getByText('Short description')).toBeOnTheScreen();
+  }
+
+  function whenClickingCard() {
+    const { UNSAFE_getByType } = component;
+    fireEvent.press(UNSAFE_getByType(TouchableOpacity));
+  }
+
+  function thenOnPressIsCalled() {
+    expect(onPress).toHaveBeenCalled();
+  }
+
+  function thenMediaHasAspectRatio(aspectRatio: number) {
+    const { UNSAFE_queryAllByType } = component!;
+    const media = UNSAFE_queryAllByType(Image)?.[0];
+    expect(media?.props?.style.aspectRatio).toEqual(aspectRatio);
+  }
+
+  async function thenMediaHasWidth(width: number) {
+    const { UNSAFE_getAllByType } = component!;
+    const media = UNSAFE_getAllByType(Image)?.[0];
+    expect(media?.props?.style.width).toEqual(width);
+  }
+
+  function thenMediaIsDisplayedBackground() {
+    const { UNSAFE_getAllByType } = component!;
+    const media = UNSAFE_getAllByType(Image);
+    expect(media.length).toEqual(1);
+  }
+
+  function thenHelperOverlayIsDisplayed() {
+    const { UNSAFE_getAllByType } = component!;
+    const overlay = UNSAFE_getAllByType(LinearGradient)?.[0];
+    expect(overlay?.props?.colors).toEqual([
+      'rgba(255,255,255,0.7)',
+      'rgba(255,255,255,0.7)',
+    ]);
+  }
+
+  function thenHelperGradientIsDisplayed() {
+    const { UNSAFE_getAllByType } = component!;
+    const gradient = UNSAFE_getAllByType(LinearGradient)?.[0];
+    expect(gradient.props.colors).toEqual([
+      '#FFFFFF',
+      '#FFFFFFDD',
+      '#FFFFFF00',
+    ]);
+    expect(gradient.props.start).toEqual({ x: 0, y: 1.0 });
+    expect(gradient.props.end).toEqual({ x: 1.0, y: 1.0 });
+  }
+});

package/src/__tests__/PxMessageCard.spec.tsx

@@ -0,0 +1,80 @@
+import type { RenderResult } from '@testing-library/react-native/build/render';
+import { LaunchArguments } from 'react-native-launch-arguments';
+import { render } from '@testing-library/react-native';
+import React from 'react';
+import { PxMessageCard, PxMessageCardProps } from '../PxMessageCard';
+
+describe('PxCard', () => {
+  let component: RenderResult;
+  const onPress = jest.fn();
+
+  beforeEach(() => {
+    (LaunchArguments.value as jest.Mock).mockReturnValue({ e2e: false });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders title and (optional) content', () => {
+    (LaunchArguments.value as jest.Mock).mockReturnValue({ e2e: true });
+    givenComponent();
+    thenItMustDisplayTitleContentCTACloseButton();
+  });
+
+  it('should be accessible', () => {
+    givenComponent({
+      accessibilityLabel: 'accessibilityLabel',
+      accessibilityHint: 'accessibilityHint',
+      closeButtonAccessibilityLabel: 'closeButtonAccessibilityLabel',
+      closeButtonAccessibilityHint: 'closeButtonAccessibilityHint',
+    });
+    thenItMustBeAccessible();
+  });
+
+  it('should display label properly', () => {
+    givenComponent({
+      tag: 'Tag label',
+    });
+    thenItMustDisplayTagLabel();
+  });
+
+  function givenComponent(props?: Partial<PxMessageCardProps>) {
+    component = render(
+      <PxMessageCard
+        {...props}
+        testID={'testID'}
+        content={'Short description'}
+        alternativeText={'Nice Image'}
+        src={{
+          uri: 'https://example.com/img.jpg',
+        }}
+        onPress={onPress}
+        title={'Promo title'}
+        ctaLabel={'Call to action'}
+        onClose={() => {}}
+      />
+    );
+  }
+
+  function thenItMustDisplayTitleContentCTACloseButton() {
+    const { getByText, getByTestId } = component!;
+    expect(getByText('Promo title')).toBeOnTheScreen();
+    expect(getByText('Short description')).toBeOnTheScreen();
+    expect(getByText('Call to action')).toBeOnTheScreen();
+    expect(getByTestId('testID-close-button')).toBeOnTheScreen();
+  }
+
+  function thenItMustBeAccessible() {
+    const { getByLabelText, getByA11yHint } = component!;
+    expect(getByLabelText('accessibilityLabel')).toBeOnTheScreen();
+    expect(getByA11yHint('accessibilityHint')).toBeOnTheScreen();
+    expect(getByLabelText('closeButtonAccessibilityLabel')).toBeOnTheScreen();
+    expect(getByA11yHint('closeButtonAccessibilityHint')).toBeOnTheScreen();
+  }
+
+  function thenItMustDisplayTagLabel() {
+    const { getByText } = component!;
+    expect(getByText('Tag label')).toBeOnTheScreen();
+  }
+});

package/src/index.ts

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

package/tsconfig.json

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