@ovotech/element-native 4.1.9-canary-d993cf1-287 → 4.1.9

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 (53) hide show
  1. package/dist/components/Accordion/styles.d.ts +0 -240
  2. package/dist/components/ActionCard/ActionCard.js +45 -44
  3. package/dist/components/ActionList/styled.d.ts +0 -560
  4. package/dist/components/Badge/Badge.d.ts +0 -80
  5. package/dist/components/DataTable/styles.d.ts +16 -1056
  6. package/dist/components/DescriptionList/styled.d.ts +0 -80
  7. package/dist/components/Em/Em.d.ts +0 -80
  8. package/dist/components/ErrorText/ErrorText.d.ts +0 -80
  9. package/dist/components/Grid/Col.d.ts +0 -80
  10. package/dist/components/Grid/Row.d.ts +0 -80
  11. package/dist/components/HintText/HintText.d.ts +0 -80
  12. package/dist/components/LabelText/LabelText.d.ts +0 -80
  13. package/dist/components/LineThrough/LineThrough.d.ts +0 -80
  14. package/dist/components/List/styled.d.ts +0 -320
  15. package/dist/components/Margin/Margin.d.ts +0 -80
  16. package/dist/components/NavHeader/NavHeader.styles.d.ts +8 -728
  17. package/dist/components/Notification/Notification.d.ts +0 -160
  18. package/dist/components/PasswordInput/PasswordInput.styled.d.ts +0 -80
  19. package/dist/components/SelectField/Select.d.ts +0 -80
  20. package/dist/components/Small/Small.d.ts +0 -80
  21. package/dist/components/Strong/Strong.d.ts +0 -80
  22. package/dist/components/SubLabelText/SubLabelText.d.ts +0 -80
  23. package/dist/components/Toggle/styles.d.ts +0 -320
  24. package/dist/components/index.d.ts +0 -4
  25. package/dist/components/index.js +0 -4
  26. package/dist/esm/components/ActionCard/ActionCard.js +45 -44
  27. package/dist/esm/components/index.js +0 -4
  28. package/dist/styled.native.d.ts +0 -480
  29. package/package.json +3 -3
  30. package/dist/components/Display0/Display0.d.ts +0 -5
  31. package/dist/components/Display0/Display0.js +0 -73
  32. package/dist/components/Display0/index.d.ts +0 -1
  33. package/dist/components/Display0/index.js +0 -5
  34. package/dist/components/Display1/Display1.d.ts +0 -5
  35. package/dist/components/Display1/Display1.js +0 -73
  36. package/dist/components/Display1/index.d.ts +0 -1
  37. package/dist/components/Display1/index.js +0 -5
  38. package/dist/components/Display2/Display2.d.ts +0 -5
  39. package/dist/components/Display2/Display2.js +0 -73
  40. package/dist/components/Display2/index.d.ts +0 -1
  41. package/dist/components/Display2/index.js +0 -5
  42. package/dist/components/Display3/Display3.d.ts +0 -5
  43. package/dist/components/Display3/Display3.js +0 -73
  44. package/dist/components/Display3/index.d.ts +0 -1
  45. package/dist/components/Display3/index.js +0 -5
  46. package/dist/esm/components/Display0/Display0.js +0 -46
  47. package/dist/esm/components/Display0/index.js +0 -1
  48. package/dist/esm/components/Display1/Display1.js +0 -46
  49. package/dist/esm/components/Display1/index.js +0 -1
  50. package/dist/esm/components/Display2/Display2.js +0 -46
  51. package/dist/esm/components/Display2/index.js +0 -1
  52. package/dist/esm/components/Display3/Display3.js +0 -46
  53. package/dist/esm/components/Display3/index.js +0 -1
package/dist/components/Accordion/styles.d.ts CHANGED
@@ -96,22 +96,6 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
96
96
  black: number;
97
97
  };
98
98
  fontSize: {
99
- display0: {
100
- small: number;
101
- large: number;
102
- };
103
- display1: {
104
- small: number;
105
- large: number;
106
- };
107
- display2: {
108
- small: number;
109
- large: number;
110
- };
111
- display3: {
112
- small: number;
113
- large: number;
114
- };
115
99
  heading1: {
116
100
  small: number;
117
101
  large: number;
@@ -151,22 +135,6 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
151
135
  extraCompressed: number;
152
136
  };
153
137
  lineHeight: {
154
- display0: {
155
- small: number;
156
- large: number;
157
- };
158
- display1: {
159
- small: number;
160
- large: number;
161
- };
162
- display2: {
163
- small: number;
164
- large: number;
165
- };
166
- display3: {
167
- small: number;
168
- large: number;
169
- };
170
138
  heading1: {
171
139
  small: number;
172
140
  large: number;
@@ -418,54 +386,6 @@ export declare const StyledAccordion: import("styled-components").StyledComponen
418
386
  surfaceInverted: string;
419
387
  };
420
388
  };
421
- display0: {
422
- fontFamily: string;
423
- fontWeight: number;
424
- lineHeight: {
425
- small: number;
426
- large: number;
427
- };
428
- fontSize: {
429
- small: number;
430
- large: number;
431
- };
432
- };
433
- display1: {
434
- fontFamily: string;
435
- fontWeight: number;
436
- lineHeight: {
437
- small: number;
438
- large: number;
439
- };
440
- fontSize: {
441
- small: number;
442
- large: number;
443
- };
444
- };
445
- display2: {
446
- fontFamily: string;
447
- fontWeight: number;
448
- lineHeight: {
449
- small: number;
450
- large: number;
451
- };
452
- fontSize: {
453
- small: number;
454
- large: number;
455
- };
456
- };
457
- display3: {
458
- fontFamily: string;
459
- fontWeight: number;
460
- lineHeight: {
461
- small: number;
462
- large: number;
463
- };
464
- fontSize: {
465
- small: number;
466
- large: number;
467
- };
468
- };
469
389
  heading1: {
470
390
  fontFamily: string;
471
391
  fontWeight: number;
@@ -665,22 +585,6 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
665
585
  black: number;
666
586
  };
667
587
  fontSize: {
668
- display0: {
669
- small: number;
670
- large: number;
671
- };
672
- display1: {
673
- small: number;
674
- large: number;
675
- };
676
- display2: {
677
- small: number;
678
- large: number;
679
- };
680
- display3: {
681
- small: number;
682
- large: number;
683
- };
684
588
  heading1: {
685
589
  small: number;
686
590
  large: number;
@@ -720,22 +624,6 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
720
624
  extraCompressed: number;
721
625
  };
722
626
  lineHeight: {
723
- display0: {
724
- small: number;
725
- large: number;
726
- };
727
- display1: {
728
- small: number;
729
- large: number;
730
- };
731
- display2: {
732
- small: number;
733
- large: number;
734
- };
735
- display3: {
736
- small: number;
737
- large: number;
738
- };
739
627
  heading1: {
740
628
  small: number;
741
629
  large: number;
@@ -987,54 +875,6 @@ export declare const StyledAccordionHeader: import("styled-components").StyledCo
987
875
  surfaceInverted: string;
988
876
  };
989
877
  };
990
- display0: {
991
- fontFamily: string;
992
- fontWeight: number;
993
- lineHeight: {
994
- small: number;
995
- large: number;
996
- };
997
- fontSize: {
998
- small: number;
999
- large: number;
1000
- };
1001
- };
1002
- display1: {
1003
- fontFamily: string;
1004
- fontWeight: number;
1005
- lineHeight: {
1006
- small: number;
1007
- large: number;
1008
- };
1009
- fontSize: {
1010
- small: number;
1011
- large: number;
1012
- };
1013
- };
1014
- display2: {
1015
- fontFamily: string;
1016
- fontWeight: number;
1017
- lineHeight: {
1018
- small: number;
1019
- large: number;
1020
- };
1021
- fontSize: {
1022
- small: number;
1023
- large: number;
1024
- };
1025
- };
1026
- display3: {
1027
- fontFamily: string;
1028
- fontWeight: number;
1029
- lineHeight: {
1030
- small: number;
1031
- large: number;
1032
- };
1033
- fontSize: {
1034
- small: number;
1035
- large: number;
1036
- };
1037
- };
1038
878
  heading1: {
1039
879
  fontFamily: string;
1040
880
  fontWeight: number;
@@ -1230,22 +1070,6 @@ export declare const StyledContainer: import("styled-components").StyledComponen
1230
1070
  black: number;
1231
1071
  };
1232
1072
  fontSize: {
1233
- display0: {
1234
- small: number;
1235
- large: number;
1236
- };
1237
- display1: {
1238
- small: number;
1239
- large: number;
1240
- };
1241
- display2: {
1242
- small: number;
1243
- large: number;
1244
- };
1245
- display3: {
1246
- small: number;
1247
- large: number;
1248
- };
1249
1073
  heading1: {
1250
1074
  small: number;
1251
1075
  large: number;
@@ -1285,22 +1109,6 @@ export declare const StyledContainer: import("styled-components").StyledComponen
1285
1109
  extraCompressed: number;
1286
1110
  };
1287
1111
  lineHeight: {
1288
- display0: {
1289
- small: number;
1290
- large: number;
1291
- };
1292
- display1: {
1293
- small: number;
1294
- large: number;
1295
- };
1296
- display2: {
1297
- small: number;
1298
- large: number;
1299
- };
1300
- display3: {
1301
- small: number;
1302
- large: number;
1303
- };
1304
1112
  heading1: {
1305
1113
  small: number;
1306
1114
  large: number;
@@ -1552,54 +1360,6 @@ export declare const StyledContainer: import("styled-components").StyledComponen
1552
1360
  surfaceInverted: string;
1553
1361
  };
1554
1362
  };
1555
- display0: {
1556
- fontFamily: string;
1557
- fontWeight: number;
1558
- lineHeight: {
1559
- small: number;
1560
- large: number;
1561
- };
1562
- fontSize: {
1563
- small: number;
1564
- large: number;
1565
- };
1566
- };
1567
- display1: {
1568
- fontFamily: string;
1569
- fontWeight: number;
1570
- lineHeight: {
1571
- small: number;
1572
- large: number;
1573
- };
1574
- fontSize: {
1575
- small: number;
1576
- large: number;
1577
- };
1578
- };
1579
- display2: {
1580
- fontFamily: string;
1581
- fontWeight: number;
1582
- lineHeight: {
1583
- small: number;
1584
- large: number;
1585
- };
1586
- fontSize: {
1587
- small: number;
1588
- large: number;
1589
- };
1590
- };
1591
- display3: {
1592
- fontFamily: string;
1593
- fontWeight: number;
1594
- lineHeight: {
1595
- small: number;
1596
- large: number;
1597
- };
1598
- fontSize: {
1599
- small: number;
1600
- large: number;
1601
- };
1602
- };
1603
1363
  heading1: {
1604
1364
  fontFamily: string;
1605
1365
  fontWeight: number;
package/dist/components/ActionCard/ActionCard.js CHANGED
@@ -35,6 +35,7 @@ var react_native_1 = require("react-native");
35
35
  var __1 = require("../");
36
36
  var styled_native_1 = __importStar(require("../../styled.native"));
37
37
  var P_1 = require("../P");
38
+ var CloseIconShape_1 = require("./CloseIconShape");
38
39
  var IndicatorIconShape_1 = require("./IndicatorIconShape");
39
40
  var StyledCard = styled_native_1.default.Pressable(function (_a) {
40
41
  var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
@@ -46,10 +47,6 @@ var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
46
47
  var semantic = _a.theme.semantic, inverted = _a.inverted;
47
48
  return "\n color: ".concat(inverted ? semantic.inverted.message.base : semantic.message.base, ";\n");
48
49
  });
49
- var CloseIconWrapper = styled_native_1.default.View(function (_a) {
50
- var _b = _a.theme, core = _b.core, semantic = _b.semantic;
51
- return "\n padding: ".concat((0, element_core_1.numToPx)(core.space[2]), ";\n background-color: ").concat(semantic.surface.elevated, ";\n border-radius: ").concat((0, element_core_1.numToPx)(core.space[6]), ";\n");
52
- });
53
50
  var ActionCard = function (_a) {
54
51
  var _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'image' : _b, _c = _a.actionIconName, actionIconName = _c === void 0 ? 'chevron-right-small' : _c, body = _a.body, buttonTitle = _a.buttonTitle, ctaVariant = _a.ctaVariant, image = _a.image, _d = _a.inline, inline = _d === void 0 ? false : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, onMount = _a.onMount, onPressCloseButton = _a.onPressCloseButton, onPressActionButton = _a.onPressActionButton, onPressIndicator = _a.onPressIndicator, testID = _a.testID, title = _a.title;
55
52
  var _f = (0, react_1.useContext)(styled_native_1.ThemeContext), core = _f.core, semantic = _f.semantic;
@@ -66,46 +63,50 @@ var ActionCard = function (_a) {
66
63
  var Heading = inline ? __1.Heading3 : __1.Heading2;
67
64
  var cardPadding = core.space[inline ? 4 : 6];
68
65
  var negativeMarginAdjustment = -cardPadding;
69
- return ((0, jsx_runtime_1.jsxs)(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
70
- color: inverted
71
- ? semantic.inverted.message.link
72
- : semantic.message.branded,
73
- paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
74
- }, testID: "".concat(testID, "-heading"), children: title }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
75
- paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
76
- }, children: (0, jsx_runtime_1.jsx)(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(__1.Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 4, children: (0, jsx_runtime_1.jsx)(__1.CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, { style: {
77
- flex: 1,
78
- flexDirection: 'row',
79
- height: '100%',
80
- marginTop: negativeMarginAdjustment,
81
- marginRight: negativeMarginAdjustment,
82
- }, maskElement: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
83
- width: '100%',
84
- height: 165,
85
- backgroundColor: 'olive',
86
- transform: [
87
- { rotate: '-16deg' },
88
- { translateX: 40 },
89
- { translateY: 25 },
90
- ],
91
- } }), children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { resizeMode: "cover", source: image, style: {
92
- width: '100%',
93
- height: 200,
94
- position: 'absolute',
95
- top: 0,
96
- right: 0,
97
- }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: {
66
+ return ((0, jsx_runtime_1.jsx)(StyledCard, { onPress: cardAction, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card"), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: 'row' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(__1.Stack, { spaceBetween: 2, children: [(0, jsx_runtime_1.jsx)(Heading, { style: {
67
+ color: inverted
68
+ ? semantic.inverted.message.link
69
+ : semantic.message.branded,
70
+ paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
71
+ }, testID: "".concat(testID, "-heading"), children: title }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [typeof body === 'string' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
72
+ paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
73
+ }, children: (0, jsx_runtime_1.jsx)(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 2, children: (0, jsx_runtime_1.jsx)(__1.Action, { inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : ((0, jsx_runtime_1.jsx)(__1.Margin, { top: 4, children: (0, jsx_runtime_1.jsx)(__1.CTAButton, { onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, { style: {
74
+ flex: 1,
75
+ flexDirection: 'row',
76
+ height: '100%',
77
+ marginTop: negativeMarginAdjustment,
78
+ marginRight: negativeMarginAdjustment,
79
+ }, maskElement: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
80
+ width: '100%',
81
+ height: 165,
82
+ backgroundColor: 'olive',
83
+ transform: [
84
+ { rotate: '-16deg' },
85
+ { translateX: 40 },
86
+ { translateY: 25 },
87
+ ],
88
+ } }), children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { resizeMode: "cover", source: image, style: {
89
+ width: '100%',
90
+ height: 200,
98
91
  position: 'absolute',
99
- right: negativeMarginAdjustment,
100
- bottom: negativeMarginAdjustment,
101
- }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button"), children: [(0, jsx_runtime_1.jsx)(IndicatorIconShape_1.IndicatorIconShape, {}), (0, jsx_runtime_1.jsx)(__1.Icon, { size: 14, style: {
102
- position: 'absolute',
103
- right: inline ? 8 : 6,
104
- bottom: 16,
105
- }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: {
106
- position: 'absolute',
107
- right: core.space[2],
108
- top: core.space[2],
109
- }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: (0, jsx_runtime_1.jsx)(CloseIconWrapper, { inverted: inverted, children: (0, jsx_runtime_1.jsx)(__1.Icon, { name: "cross", size: "16", color: semantic.message.base }) }) })) : null] }));
92
+ top: 0,
93
+ right: 0,
94
+ }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: {
95
+ position: 'absolute',
96
+ right: negativeMarginAdjustment,
97
+ bottom: negativeMarginAdjustment,
98
+ }, onPress: onPressIndicator, testID: "".concat(testID, "-indicator-button"), children: [(0, jsx_runtime_1.jsx)(IndicatorIconShape_1.IndicatorIconShape, {}), (0, jsx_runtime_1.jsx)(__1.Icon, { size: 14, style: {
99
+ position: 'absolute',
100
+ right: inline ? 8 : 6,
101
+ bottom: 16,
102
+ }, color: semantic.surface.elevated, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null, onPressCloseButton && !onPressIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: {
103
+ position: 'absolute',
104
+ right: negativeMarginAdjustment,
105
+ top: negativeMarginAdjustment,
106
+ }, onPress: onPressCloseButton, testID: "".concat(testID, "-close-button"), children: [(0, jsx_runtime_1.jsx)(CloseIconShape_1.CloseIconShape, {}), (0, jsx_runtime_1.jsx)(__1.Icon, { size: 14, style: {
107
+ position: 'absolute',
108
+ top: inline ? 14 : 12,
109
+ right: inline ? 14 : 12,
110
+ }, color: semantic.surface.elevated, name: "cross", accessibilityLabel: "close" })] })) : null] }) }));
110
111
  };
111
112
  exports.ActionCard = ActionCard;