@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

package/dist/components/Notification/Notification.js

@@ -57,40 +57,40 @@ 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 _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));
+    var theme = _a.theme, noMargin = _a.noMargin, variant = _a.variant;
+    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)(theme.space[400]), (0, element_core_1.numToPx)(theme.border.width.sm), theme.color.alert[variant], (0, element_core_1.numToPx)(theme.border.radius['2xl']));
 });
 exports.NotificationContentBox = styled_native_1.default.View(function (_a) {
-    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]));
+    var theme = _a.theme;
+    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  "])), theme.color.surface.bright, (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[300]), (0, element_core_1.numToPx)(theme.space[400]), (0, element_core_1.numToPx)(theme.space[400]));
 });
 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    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 theme = _a.theme, variant = _a.variant, dismissible = _a.dismissible;
+    var currentVariant = theme.color.alert["".concat(variant, "Tint")];
+    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, (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[400]), dismissible
+        ? (0, element_core_1.numToPx)(theme.space[300])
+        : (0, element_core_1.numToPx)(theme.space[400]));
 });
 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  "])), (0, element_core_1.numToPx)(core.fontSize.body.small), core.fontFamily.bodyBold.native, currentVariant.message);
+    var theme = _a.theme, variant = _a.variant;
+    var currentVariant = theme.color.alert[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  "])), (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery.sm), theme.native.font.family.bold, currentVariant);
 });
 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 theme = _a.theme;
+    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    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    border-radius: ", ";\n  "])), theme.button.surface.color.bg, (0, element_core_1.numToPx)(theme.border.width.sm), theme.color.surface.link, (0, element_core_1.numToPx)(theme.border.radius['2xl']));
 });
 var StyledIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var semantic = _a.theme.semantic;
-    return "\n    color: ".concat(semantic.inverted.message.base, ";\n  ");
+    var theme = _a.theme;
+    return "\n    color: ".concat(theme.color.surface.bright, ";\n  ");
 });
 exports.Notification = (0, react_1.forwardRef)(function (_a, ref) {
-    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 _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 _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, { noMargin: noMargin, testID: "nb-notification", children: [(0, jsx_runtime_1.jsxs)(exports.NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [(0, jsx_runtime_1.jsx)(NotificationTitleText, { variant: variant, children: title }), dismissible ? ((0, jsx_runtime_1.jsx)(DismissButton, { accessible: true, 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, { variant: variant, noMargin: noMargin, testID: "nb-notification", children: [(0, jsx_runtime_1.jsxs)(exports.NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [(0, jsx_runtime_1.jsx)(NotificationTitleText, { variant: variant, children: title }), dismissible ? ((0, jsx_runtime_1.jsx)(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: function () {
                                 setDismissed(true);
                                 if (onDismiss) {
                                     onDismiss();

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

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

package/dist/components/P/P.js

@@ -45,8 +45,10 @@ 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, 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);
+    var theme = _a.theme, smallAndUp = _a.smallAndUp, inverted = _a.inverted, _b = _a.size, size = _b === void 0 ? 'md' : _b;
+    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    "])), theme.native.font.family.book, (0, element_core_1.numToPx)(theme.font.size[size].mediaQuery[smallAndUp ? 'lg' : 'sm']), (0, element_core_1.numToPx)(theme.font.lineHeight[size].mediaQuery[smallAndUp ? 'lg' : 'sm']), inverted
+        ? theme.color.surface.surface
+        : theme.color.surface.onSurface);
 });
 exports.P = (0, react_1.forwardRef)(function (props, ref) {
     var breakpoints = (0, hooks_1.useBreakpoint)();