@proximus/lavender-cards-native 2.1.1-alpha.5 → 2.1.1-alpha.51

package/dist/PxCard.d.ts.map

@@ -1 +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,qBA0D7D;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,gBAAgB,qBAyD1D"}
+{"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;IAEjB,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,qBA0D7D;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,gBAAgB,qBAyD1D"}

package/dist/PxStatusCard.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { AccessibilityProps, StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '@proximus/lavender-icon/dist/iconNames.js';
+export type PxStatusCardType = 'Information' | 'Success' | 'Warning' | 'Error' | 'Ongoing';
+export interface PxStatusCardProps extends AccessibilityProps {
+    type?: PxStatusCardType;
+    title: string;
+    body?: string;
+    ctaLabel?: string;
+    ctaIcon?: IconName;
+    onPressCTA?: () => void;
+    onPressClose?: () => void;
+    ctaAccessibilityLabel?: string;
+    ctaAccessibilityHint?: string;
+    closeAccessibilityLabel?: string;
+    closeAccessibilityHint?: string;
+    statusIconAriaLabel?: string;
+    testID?: string;
+    inverted?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+export declare function PxStatusCard(props: PxStatusCardProps): React.JSX.Element;
+//# sourceMappingURL=PxStatusCard.d.ts.map

package/dist/PxStatusCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxStatusCard.d.ts","sourceRoot":"","sources":["../src/PxStatusCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EACL,kBAAkB,EAClB,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAG1E,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC;AAmCD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAiIpD"}

package/dist/PxStatusCard.js

@@ -0,0 +1,94 @@
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { PxButton } from '@proximus/lavender-button-native';
+import { PxButtonIcon } from '@proximus/lavender-buttonicon-native';
+import { PxIcon } from '@proximus/lavender-icon-native';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { Body, Header } from '@proximus/lavender-texts-native';
+import React, { useMemo } from 'react';
+import { StyleSheet, View, } from 'react-native';
+const BORDER_LEFT_WIDTH = 5;
+const statusMap = {
+    Information: {
+        icon: 'information_fill',
+        iconColor: 'Brand',
+        borderColor: 'ColorBorderBrandDefault',
+    },
+    Success: {
+        icon: 'checkmark_fill',
+        iconColor: 'PurposeSuccess',
+        borderColor: 'ColorBorderPurposeSuccessDefault',
+    },
+    Warning: {
+        icon: 'exclamation_mark_fill',
+        iconColor: 'PurposeWarning',
+        borderColor: 'ColorBorderPurposeWarningDefault',
+    },
+    Error: {
+        icon: 'minus_fill',
+        iconColor: 'PurposeError',
+        borderColor: 'ColorBorderPurposeErrorDefault',
+    },
+    Ongoing: {
+        icon: 'clock_fill',
+        iconColor: 'PurposeWarning',
+        borderColor: 'ColorBorderPurposeWarningDefault',
+    },
+};
+export function PxStatusCard(props) {
+    const { type = 'Information', title, body, ctaLabel, ctaIcon, onPressCTA, onPressClose, ctaAccessibilityLabel, ctaAccessibilityHint, closeAccessibilityLabel, closeAccessibilityHint, statusIconAriaLabel, testID, inverted = false, containerStyle, ...accessibilityProps } = props;
+    const { theme } = useTheme();
+    const status = statusMap[type];
+    const invertedSuffix = inverted ? 'Inverted' : 'Default';
+    const iconSize = useMemo(() => theme.t('SizeIconM').number, [theme]);
+    return (React.createElement(View, { style: [
+            styles.container,
+            {
+                backgroundColor: theme.t(`ColorBackgroundContainerDefault${invertedSuffix}`),
+                borderRadius: theme.t('RadiusMain').number,
+                borderLeftWidth: BORDER_LEFT_WIDTH,
+                borderLeftColor: theme.t(status.borderColor),
+            },
+            containerStyle,
+        ], ...e2eID(testID), ...a11y(accessibilityProps) },
+        React.createElement(View, { style: [
+                styles.content,
+                {
+                    padding: theme.t('PaddingSMobile').number,
+                    gap: theme.t('SpacingSMobile').number,
+                },
+            ] },
+            React.createElement(View, { style: {
+                    width: iconSize,
+                    height: iconSize,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                } },
+                React.createElement(PxIcon, { name: status.icon, size: "M", color: status.iconColor, inverted: inverted, accessibilityLabel: statusIconAriaLabel, ...(testID && e2eID(`${testID}-icon`)) })),
+            React.createElement(View, { style: [
+                    styles.textContainer,
+                    { gap: theme.t('SpacingXsMobile').number, marginTop: 3 },
+                ] },
+                React.createElement(Header, { style: {
+                        fontSize: theme.t('TextSizeHeadingSMobile').number,
+                    }, inverted: inverted, ...(testID && e2eID(`${testID}-title`)) }, title),
+                body && (React.createElement(Body, { style: {
+                        fontSize: theme.t('TextSizeBodyMMobile').number,
+                    }, inverted: inverted, ...(testID && e2eID(`${testID}-body`)) }, body)),
+                ctaLabel && (React.createElement(PxButton, { variant: "tertiary", title: ctaLabel, onPress: onPressCTA, inverted: inverted, suffix: React.createElement(PxIcon, { name: ctaIcon ?? 'plus' }), accessibilityLabel: ctaAccessibilityLabel || ctaLabel, accessibilityHint: ctaAccessibilityHint, wrapperStyle: {
+                        marginTop: theme.t('SpacingSMobile').number,
+                        alignSelf: 'flex-start',
+                    }, ...(testID && e2eID(`${testID}-cta-button`)) }))),
+            onPressClose && (React.createElement(PxButtonIcon, { iconName: "cross", variant: "secondary", onPress: onPressClose, size: "small", inverted: inverted, accessibilityLabel: closeAccessibilityLabel || 'Close', accessibilityHint: closeAccessibilityHint, ...(testID && e2eID(`${testID}-close-button`)) })))));
+}
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    textContainer: {
+        flex: 1,
+    },
+});

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './PxCard';
 export * from './PxMessageCard';
+export * from './PxStatusCard';
 //# 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,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-cards-native",
-  "version": "2.1.1-alpha.5",
+  "version": "2.1.1-alpha.51",
   "description": "Card component",
   "license": "MIT",
   "main": "dist/index.js",
@@ -11,6 +11,7 @@
     "@proximus/lavender-button-native": "*",
     "@proximus/lavender-buttonicon-native": "*",
     "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
     "@proximus/lavender-styling-native": "*",
     "@proximus/lavender-tag-native": "*",
     "@proximus/lavender-texts-native": "*"