@proximus/lavender-cards-native 0.1.0-alpha.5 → 0.1.0-alpha.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/Content.d.ts +2 -1
  2. package/dist/Content.d.ts.map +1 -1
  3. package/dist/Content.js +2 -2
  4. package/dist/PxCard.d.ts.map +1 -1
  5. package/dist/PxCard.js +4 -4
  6. package/dist/PxMessageCard.d.ts.map +1 -1
  7. package/dist/PxMessageCard.js +5 -5
  8. package/dist/Title.d.ts +2 -1
  9. package/dist/Title.d.ts.map +1 -1
  10. package/dist/Title.js +3 -2
  11. package/package.json +1 -1
package/dist/Content.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- export declare function Content({ content, size, inverted, }: {
2
+ export declare function Content({ content, size, inverted, testID, }: {
3
3
  content: string;
4
4
  size?: 'M' | 'L';
5
5
  inverted?: boolean;
6
+ testID?: string;
6
7
  }): React.JSX.Element;
7
8
  //# sourceMappingURL=Content.d.ts.map
package/dist/Content.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,EAChB,MAAM,GACP,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,qBAkBA"}
package/dist/Content.js CHANGED
@@ -1,12 +1,12 @@
1
1
  import { Body } from '@proximus/lavender-texts-native';
2
2
  import React from 'react';
3
3
  import { useTheme } from '@proximus/lavender-styling-native';
4
- export function Content({ content, size = 'M', inverted = false, }) {
4
+ export function Content({ content, size = 'M', inverted = false, testID, }) {
5
5
  const { theme } = useTheme();
6
6
  return (React.createElement(Body, { style: {
7
7
  color: inverted
8
8
  ? theme.t(`ColorTextDimmedInverted`)
9
9
  : theme.t(`ColorTextNeutralDefault`),
10
10
  fontSize: theme.t(`TextSizeBody${size}Mobile`).number,
11
- }, ellipsizeMode: 'tail', numberOfLines: 3 }, content));
11
+ }, ellipsizeMode: 'tail', numberOfLines: 3, ...(testID && { testID: `${testID}-card-content` }) }, content));
12
12
  }
package/dist/PxCard.d.ts.map CHANGED
@@ -1 +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,qBAwD7D;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,gBAAgB,qBAyD1D"}
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"}
package/dist/PxCard.js CHANGED
@@ -7,7 +7,7 @@ import { Title } from './Title';
7
7
  import { Content } from './Content';
8
8
  export function MediaPart(props) {
9
9
  const { theme } = useTheme();
10
- const { src, backgroundSize = 'cover', mediaPosition = 'top', alternativeText, } = props;
10
+ const { src, backgroundSize = 'cover', mediaPosition = 'top', alternativeText, testID, } = props;
11
11
  const aspectRatio = useImageAspectRatio(src);
12
12
  const [wrapperHeight, setWrapperHeight] = React.useState(undefined);
13
13
  /*
@@ -39,7 +39,7 @@ export function MediaPart(props) {
39
39
  borderBottomLeftRadius: theme.t('RadiusMain').number,
40
40
  borderTopLeftRadius: theme.t('RadiusMain').number,
41
41
  }),
42
- }, source: src, resizeMode: backgroundSize })));
42
+ }, source: src, resizeMode: backgroundSize, ...(testID && e2eID(`${testID}-card-image`)) })));
43
43
  }
44
44
  export function PxCard(props) {
45
45
  const { title, content, children, mediaPosition, containerStyle, accessibilityLabel, accessibilityHint, testID, onPress, src, } = props;
@@ -64,7 +64,7 @@ export function PxCard(props) {
64
64
  padding: theme.t(`PaddingMMobile`).number,
65
65
  gap: theme.t(`PaddingSMobile`).number,
66
66
  } },
67
- React.createElement(Title, { title: title }),
68
- content && React.createElement(Content, { content: content }),
67
+ React.createElement(Title, { title: title, testID: testID }),
68
+ content && React.createElement(Content, { content: content, testID: testID }),
69
69
  children)))));
70
70
  }
package/dist/PxMessageCard.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,qBA0FtD"}
package/dist/PxMessageCard.js CHANGED
@@ -33,12 +33,12 @@ export function PxMessageCard(props) {
33
33
  height && React.createElement(PxSpacer, null),
34
34
  React.createElement(TitleSection, { ...props }),
35
35
  children,
36
- React.createElement(PxButton, { title: ctaLabel, onPress: onPress, type: "secondary", accessibilityLabel: ctaAccessibilityLabel || ctaLabel, accessibilityHint: ctaAccessibilityHint, testID: `${testID ? testID : 'message-card'}-cta-button`, inverted: inverted }),
36
+ React.createElement(PxButton, { title: ctaLabel, onPress: onPress, type: "secondary", accessibilityLabel: ctaAccessibilityLabel || ctaLabel, accessibilityHint: ctaAccessibilityHint, ...(testID && { testID: `${testID}-card-cta-button` }), inverted: inverted }),
37
37
  React.createElement(PxButtonIcon, { size: closeButtonSize, iconName: 'cross', variant: 'secondary', onPress: onClose, wrapperStyle: {
38
38
  position: 'absolute',
39
39
  top: theme.t('SpacingSMobile').number,
40
40
  right: theme.t('SpacingSMobile').number,
41
- }, inverted: inverted, ...e2eID(testID ? `${testID}-close-button` : 'message-card-close-button'), ...a11y({
41
+ }, inverted: inverted, ...(testID && { testID: `${testID}-card-close-button` }), ...a11y({
42
42
  accessibilityLabel: `${closeButtonAccessibilityLabel || 'Close'}`,
43
43
  accessibilityHint: closeButtonAccessibilityHint,
44
44
  }) })))));
@@ -58,8 +58,8 @@ function TitleSection(props) {
58
58
  gap: theme.t('SpacingXsMobile').number,
59
59
  flexDirection: 'column',
60
60
  } },
61
- React.createElement(Title, { inverted: inverted, title: title, color: 'Neutral', size: 'L' }),
62
- content && (React.createElement(Content, { inverted: inverted, content: content, size: 'M' })))));
61
+ React.createElement(Title, { inverted: inverted, title: title, color: 'Neutral', size: 'L', testID: props.testID }),
62
+ content && (React.createElement(Content, { inverted: inverted, content: content, size: 'M', testID: props.testID })))));
63
63
  }
64
64
  function TagSection(props) {
65
65
  const { theme } = useTheme();
@@ -68,5 +68,5 @@ function TagSection(props) {
68
68
  gap: theme.t('PaddingMMobile').number,
69
69
  alignItems: 'flex-start',
70
70
  } },
71
- React.createElement(PxTag, { label: tag, inverted: inverted })));
71
+ React.createElement(PxTag, { label: tag, inverted: inverted, ...(props.testID && { testID: `${props.testID}-card` }) })));
72
72
  }
package/dist/Title.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
- export declare function Title({ title, size, color, inverted, }: {
2
+ export declare function Title({ title, size, color, inverted, testID, }: {
3
3
  title: string;
4
4
  size?: 'L' | 'Xl' | '2xl';
5
5
  color?: 'Brand' | 'Neutral';
6
6
  inverted?: boolean;
7
+ testID?: string;
7
8
  }): React.JSX.Element;
8
9
  //# sourceMappingURL=Title.d.ts.map
package/dist/Title.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../src/Title.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAY,EACZ,KAAe,EACf,QAAgB,EAChB,MAAM,GACP,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;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,qBAkBA"}
package/dist/Title.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import { Header } from '@proximus/lavender-texts-native';
2
2
  import React from 'react';
3
3
  import { useTheme } from '@proximus/lavender-styling-native';
4
- export function Title({ title, size = '2xl', color = 'Brand', inverted = false, }) {
4
+ import { e2eID } from '@proximus/lavender-common-native';
5
+ export function Title({ title, size = '2xl', color = 'Brand', inverted = false, testID, }) {
5
6
  const { theme } = useTheme();
6
7
  const invertedSuffix = inverted ? 'Inverted' : 'Default';
7
8
  return (React.createElement(Header, { ellipsizeMode: 'tail', numberOfLines: 1, style: {
8
9
  fontSize: theme.t(`TextSizeHeading${size}Mobile`).number,
9
10
  color: theme.t(`ColorText${color}${invertedSuffix}`),
10
- } }, title));
11
+ }, ...(testID && e2eID(`${testID}-card-title`)) }, title));
11
12
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-cards-native",
3
- "version": "0.1.0-alpha.5",
3
+ "version": "0.1.0-alpha.7",
4
4
  "description": "Card component",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",