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

package/package.json

@@ -1,50 +1,21 @@
 {
   "name": "@proximus/lavender-cards-native",
-  "version": "0.0.1-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "Card component",
   "license": "MIT",
-  "main": "src/index.ts",
-  "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"
-  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "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.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"
+    "@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/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.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/far/away/package.json

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

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

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

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

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

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

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

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

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

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