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

package/dist/components/Notification/Notification.js

@@ -51,51 +51,54 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WarningNotification = exports.InfoNotification = exports.SuccessNotification = exports.ErrorNotification = exports.Notification = exports.NotificationTitleBox = exports.NotificationContentBox = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var react_native_1 = require("react-native");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var Icon_1 = require("../Icon");
 var NotificationBox = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, noMargin = _a.noMargin;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    border: ", " solid ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n    overflow: hidden;\n  "])), core.borderWidth.medium, core.color.brand.white, core.radius.small, noMargin ? 0 : core.space[4]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, noMargin = _a.noMargin;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "], ["\n    position: relative;\n    margin-bottom: ", ";\n    border: ", " solid\n      ", ";\n    border-radius: ", ";\n    overflow: hidden;\n  "])), noMargin ? 0 : (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.surface.elevated, (0, element_core_1.numToPx)(core.radius.max));
 });
 exports.NotificationContentBox = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), core.color.brand.white, core.space[2], core.space[3], core.space[4], core.space[4]);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      background-color: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), semantic.surface.elevated, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[3]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.space[4]));
 });
 exports.NotificationTitleBox = styled_native_1.default.View(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant, dismissible = _a.dismissible;
     var currentVariant = semantic[variant];
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), currentVariant.surface, core.space[2], core.space[2], core.space[4], dismissible ? core.space[3] : core.space[4]);
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "], ["\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    min-height: 44px;\n  "])), currentVariant.surface, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[4]), dismissible
+        ? (0, element_core_1.numToPx)(core.space[3])
+        : (0, element_core_1.numToPx)(core.space[4]));
 });
 var NotificationTitleText = styled_native_1.default.Text(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, variant = _a.variant;
     var currentVariant = semantic[variant];
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), core.fontSize.body.small, core.fontFamily.bodyBold.native, currentVariant.message);
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "], ["\n    font-size: ", ";\n    font-family: ", ";\n    color: ", ";\n  "])), (0, element_core_1.numToPx)(core.fontSize.body.small), core.fontFamily.bodyBold.native, currentVariant.message);
 });
-var DismissButton = styled_native_1.default.TouchableOpacity(function () {
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n  "], ["\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n  "])));
+var DismissButton = styled_native_1.default.TouchableOpacity(function (_a) {
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n    "], ["\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 28px;\n      height: 28px;\n      background: ", ";\n      border: ", " solid\n        ", ";\n      border-radius: ", ";\n    "])), semantic.inverted.surface, (0, element_core_1.numToPx)(core.borderWidth.small), core.color.brand.forest, (0, element_core_1.numToPx)(core.radius.max));
 });
 var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var semantic = _a.theme.semantic, variant = _a.variant;
-    var currentVariant = semantic[variant];
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), currentVariant.message);
+    var semantic = _a.theme.semantic;
+    return "\n    color: ".concat(semantic.inverted.message.base, ";\n  ");
 });
 exports.Notification = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? 'info' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
+    var _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, children = _a.children, title = _a.title, noMargin = _a.noMargin, dismissible = _a.dismissible, onDismiss = _a.onDismiss, rest = __rest(_a, ["variant", "children", "title", "noMargin", "dismissible", "onDismiss"]);
     var _c = (0, react_1.useState)(false), dismissed = _c[0], setDismissed = _c[1];
     if (dismissed || (!title && !children)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ ref: ref }, rest, { children: (0, jsx_runtime_1.jsxs)(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [(0, jsx_runtime_1.jsxs)(exports.NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [(0, jsx_runtime_1.jsx)(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? ((0, jsx_runtime_1.jsx)(DismissButton, __assign({ accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, __assign({ ref: ref }, rest, { children: (0, jsx_runtime_1.jsxs)(NotificationBox, __assign({ noMargin: noMargin, testID: "nb-notification" }, { children: [(0, jsx_runtime_1.jsxs)(exports.NotificationTitleBox, __assign({ variant: variant, dismissible: dismissible }, { children: [(0, jsx_runtime_1.jsx)(NotificationTitleText, __assign({ variant: variant }, { children: title })), dismissible ? ((0, jsx_runtime_1.jsx)(DismissButton, __assign({ accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
                                 setDismissed(true);
                                 if (onDismiss) {
                                     onDismiss();
                                 }
-                            } }, { children: (0, jsx_runtime_1.jsx)(StyledIcon, { variant: variant, name: "cross", size: "16" }) }))) : null] })), children ? ((0, jsx_runtime_1.jsx)(exports.NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: children }))) : null] })) })));
+                            } }, { children: (0, jsx_runtime_1.jsx)(StyledIcon, { name: "cross", size: "16" }) }))) : null] })), children ? ((0, jsx_runtime_1.jsx)(exports.NotificationContentBox, __assign({ "data-testid": "el-notification-box" }, { children: children }))) : null] })) })));
 });
 exports.ErrorNotification = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(exports.Notification, __assign({ ref: ref, variant: "error" }, props)); });
 exports.SuccessNotification = (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(exports.Notification, __assign({ ref: ref, variant: "success" }, props))); });
 exports.InfoNotification = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(exports.Notification, __assign({ ref: ref, variant: "info" }, props)); });
 exports.WarningNotification = (0, react_1.forwardRef)(function (props, ref) { return (0, jsx_runtime_1.jsx)(exports.Notification, __assign({ ref: ref, variant: "warning" }, props)); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/P/P.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { TextProps } from 'react-native';
 export declare const P: import("react").ForwardRefExoticComponent<TextProps & {
+    inverted?: boolean | undefined;
+} & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<unknown>>;

package/dist/components/P/P.js

@@ -40,12 +40,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.P = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var element_core_1 = require("@ovotech/element-core");
 var react_1 = require("react");
 var hooks_1 = require("../../hooks");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var StyledP = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, core.fontSize.body[smallAndUp ? 'large' : 'small'], core.lineHeight.body[smallAndUp ? 'large' : 'small'], semantic.message.base);
+    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp, inverted = _a.inverted;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(core.fontSize.body[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.lineHeight.body[smallAndUp ? 'large' : 'small']), inverted ? semantic.inverted.message.base : semantic.message.base);
 });
 exports.P = (0, react_1.forwardRef)(function (props, ref) {
     var breakpoints = (0, hooks_1.useBreakpoint)();