@ovotech/element-native 3.8.0 → 3.8.1-canary-dff71b6-233

package/dist/components/Accordion/styles.js

@@ -31,11 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledContainer = exports.StyledAccordionHeader = exports.StyledAccordion = void 0;
+var element_core_1 = require("@ovotech/element-core");
 var react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
 var styled_native_1 = __importStar(require("../../styled.native"));
 exports.StyledAccordion = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, first = _a.first, last = _a.last, isExpanded = _a.isExpanded;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), core.borderWidth.small, semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    width: 100%;\n    border-width: ", ";\n    border-color: ", ";\n    border-bottom-width: 0;\n    background-color: ", ";\n    transition: background-color ", ";\n\n    ", "\n\n    ", "\n  "])), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated, isExpanded ? core.color.brand.white : 'transparent', core.transition.fast, first
         ? {
             borderTopLeftRadius: core.radius.small,
             borderTopRightRadius: core.radius.small,
@@ -50,10 +51,10 @@ exports.StyledAccordion = (0, styled_native_1.default)(react_native_reanimated_1
 });
 exports.StyledAccordionHeader = styled_native_1.default.TouchableOpacity(function (_a) {
     var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), core.space[5], core.space[3]);
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "], ["\n    padding-top: ", ";\n    padding-left: ", ";\n    padding-right: 18px;\n    padding-bottom: 18px;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: space-between;\n  "])), (0, element_core_1.numToPx)(core.space[5]), (0, element_core_1.numToPx)(core.space[3]));
 });
 exports.StyledContainer = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), core.space[12], core.space[6], core.space[3]);
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "], ["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    padding-top: 0;\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[12]), (0, element_core_1.numToPx)(core.space[6]), (0, element_core_1.numToPx)(core.space[3]));
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/ActionCard/ActionCard.js

@@ -39,6 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionCard = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var masked_view_1 = __importDefault(require("@react-native-masked-view/masked-view"));
 var react_1 = require("react");
 var react_native_1 = require("react-native");
@@ -51,7 +52,7 @@ var StyledCard = styled_native_1.default.Pressable(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, inline = _a.inline, inverted = _a.inverted, reducedBottomPadding = _a.reducedBottomPadding;
     var paddingVal = inline ? core.space[4] : core.space[6];
     var reducedBottomPaddingVal = inline ? core.space[3] : core.space[5];
-    return "\n      border-radius: ".concat(inline ? core.space[6] : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat(paddingVal, ";\n      padding-bottom: ").concat(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal, ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
+    return "\n      border-radius: ".concat(inline ? (0, element_core_1.numToPx)(core.space[6]) : 0, ";\n      background-color: ").concat(inverted ? semantic.inverted.surface : semantic.surface.elevated, ";\n      padding: ").concat((0, element_core_1.numToPx)(paddingVal), ";\n      padding-bottom: ").concat((0, element_core_1.numToPx)(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal), ";\n      overflow: hidden;\n      border-width: 0;\n      width: 100%;\n    ");
 });
 var StyledP = (0, styled_native_1.default)(P_1.P)(function (_a) {
     var semantic = _a.theme.semantic, inverted = _a.inverted;
@@ -66,7 +67,7 @@ var ActionCard = function (_a) {
         }
     }, []);
     var Heading = inline ? __1.Heading3 : __1.Heading2;
-    var cardPadding = parseInt(core.space[inline ? 4 : 6]);
+    var cardPadding = core.space[inline ? 4 : 6];
     var negativeMarginAdjustment = -cardPadding;
     return ((0, jsx_runtime_1.jsx)(StyledCard, __assign({ onPress: onPressIndicator, inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: "".concat(testID, "-card") }, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, __assign({ style: { flexDirection: 'row' } }, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ style: { flex: 1 } }, { children: (0, jsx_runtime_1.jsxs)(__1.Stack, __assign({ spaceBetween: 2 }, { children: [(0, jsx_runtime_1.jsx)(Heading, __assign({ style: {
                                     color: inverted
@@ -75,7 +76,7 @@ var ActionCard = function (_a) {
                                     paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
                                 }, 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, __assign({ style: {
                                             paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
-                                        } }, { children: (0, jsx_runtime_1.jsx)(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 2 }, { children: (0, jsx_runtime_1.jsx)(__1.Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button") }, { children: buttonTitle })) }))) : ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 4 }, { children: (0, jsx_runtime_1.jsx)(__1.CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, __assign({ style: {
+                                        } }, { children: (0, jsx_runtime_1.jsx)(StyledP, __assign({ inverted: inverted }, { children: body })) }))) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 2 }, { children: (0, jsx_runtime_1.jsx)(__1.Action, __assign({ inverted: inverted, inline: true, onPress: onPressActionButton, testID: "".concat(testID, "-button"), iconRight: "chevron-right-small" }, { children: buttonTitle })) }))) : ((0, jsx_runtime_1.jsx)(__1.Margin, __assign({ top: 4 }, { children: (0, jsx_runtime_1.jsx)(__1.CTAButton, __assign({ onPress: onPressActionButton, testID: "".concat(testID, "-button"), variant: ctaVariant }, { children: buttonTitle })) })))) : null] })] })) })), image ? ((0, jsx_runtime_1.jsx)(masked_view_1.default, __assign({ style: {
                         flex: 1,
                         flexDirection: 'row',
                         height: '100%',

package/dist/components/ActionList/ActionList.d.ts

@@ -17,5 +17,5 @@ declare type ActionProps = PropsWithChildren<ViewProps & {
     inList?: boolean;
 }>;
 declare const ActionList: ({ children, inverted, ...rest }: ActionListProps) => JSX.Element;
-declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "inverted" | "inList"> & import("react").RefAttributes<View>>;
+declare const Action: import("react").ForwardRefExoticComponent<Pick<ActionProps, "onPress" | "inverted" | "inline" | keyof ViewProps | "fullWidth" | "iconLeft" | "iconRight" | "inList"> & import("react").RefAttributes<View>>;
 export { ActionList, Action };

package/dist/components/ActionList/ActionList.js

@@ -32,13 +32,14 @@ var ActionList = function (_a) {
     var children = _a.children, inverted = _a.inverted, rest = __rest(_a, ["children", "inverted"]);
     var childCount = children.length;
     return ((0, jsx_runtime_1.jsx)(styled_1.StyledActionList, __assign({}, rest, { children: react_1.Children.map(children, function (child, index) {
-            var _a;
+            var _a, _b;
             return (0, react_1.cloneElement)(child, {
                 fullWidth: 'always',
                 index: index,
                 hasBorder: childCount > 1 && index !== childCount - 1,
                 inverted: (_a = child.props.inverted) !== null && _a !== void 0 ? _a : inverted,
                 inList: true,
+                iconRight: (_b = child.props.iconRight) !== null && _b !== void 0 ? _b : 'chevron-right-small',
             });
         }) })));
 };