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

package/dist/components/NavHeader/NavHeader.styles.js

@@ -30,43 +30,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionWrapper = exports.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavContainer = void 0;
+exports.ActionWrapper = exports.StyledIconButtonL = exports.StyledIconButtonS = exports.IconButtonWrapper = exports.CollapsedTitle = exports.CollapsedTitleWrapper = exports.ExpandedTitle = exports.NavContainer = exports.NavWrapper = 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.NavContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+var Z_INDEX = 1000;
+exports.NavWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
     var _b = _a.theme, semantic = _b.semantic, core = _b.core, collapsed = _a.collapsed;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    ", "\n  "], ["\n    width: 100%;\n    background-color: ", ";\n    padding: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    ", "\n  "])), semantic.surface.base, core.space[2], collapsed
-        ? (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: 1px;\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), semantic.border.differentiated) : '');
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    position: absolute;\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n\n    background-color: ", ";\n\n    ", "\n  "], ["\n    width: 100%;\n    position: absolute;\n    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */\n    z-index: ", ";\n\n    background-color: ", ";\n\n    ", "\n  "])), Z_INDEX, semantic.surface.base, collapsed
+        ? (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "], ["\n          border-bottom-width: ", ";\n          border-bottom-style: solid;\n          border-bottom-color: ", ";\n        "])), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated) : '');
+});
+exports.NavContainer = styled_native_1.default.View(function (_a) {
+    var core = _a.theme.core, topOffset = _a.topOffset;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n\n    padding: ", " ", ";\n    padding-top: ", ";\n  "], ["\n    position: absolute;\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n\n    padding: ", " ", ";\n    padding-top: ", ";\n  "])), Z_INDEX + 1, (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(topOffset ? topOffset : core.space[2]));
 });
 exports.ExpandedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic, hasBackButton = _a.hasBackButton, fullWidth = _a.fullWidth;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, core.fontSize.heading1[hasBackButton ? 'small' : 'large'], hasBackButton
-        ? core.lineHeight.heading1.small
-        : core.space[13], hasBackButton ? core.lineHeight.heading1.small : core.space[13], semantic.message.branded);
-});
-exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"], ["\n  align-items: center;\n  justify-content: center;\n  width: 33.3%;\n  height: ", ";\n"])), function (_a) {
-    var core = _a.theme.core;
-    return core.lineHeight.heading4.small;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n  "])), fullWidth ? '100%' : '65%', core.fontFamily.heading.native, (0, element_core_1.numToPx)(core.fontSize.heading1[hasBackButton ? 'small' : 'large']), (0, element_core_1.numToPx)(hasBackButton ? core.lineHeight.heading1.small : core.space[13]), semantic.message.branded);
 });
+exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 33.3%;\n  align-items: center;\n  justify-content: center;\n"])));
 exports.CollapsedTitle = (0, styled_native_1.default)(react_native_reanimated_1.default.Text)(function (_a) {
     var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __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.heading.native, core.fontSize.heading4.small, core.lineHeight.heading4.small, semantic.message.branded);
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __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.heading.native, (0, element_core_1.numToPx)(core.fontSize.heading4.small), (0, element_core_1.numToPx)(core.lineHeight.heading4.small), semantic.message.branded);
 });
-exports.IconButtonWrapper = styled_native_1.default.View(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
+exports.IconButtonWrapper = styled_native_1.default.View(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"], ["\n  width: 33.3%;\n  flex-direction: row;\n  justify-content: flex-end;\n"])));
 var iconButtonSharedStyles = (0, styled_native_1.css)(function (_a) {
     var semantic = _a.theme.semantic;
     return "\n    border-radius: 100px;\n    background-color: ".concat(semantic.inverted.surface, ";\n    align-items: center;\n    justify-content: center;\n");
 });
-exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+exports.StyledIconButtonS = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 28px;\n  height: 28px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
-exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
+exports.StyledIconButtonL = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"], ["\n  width: 36px;\n  height: 36px;\n  opacity: ", ";\n  ", ";\n"])), function (_a) {
     var $pressed = _a.$pressed;
     return ($pressed ? 0.8 : 1);
 }, iconButtonSharedStyles);
 exports.ActionWrapper = styled_native_1.default.View(function (_a) {
     var core = _a.theme.core, collapsed = _a.collapsed;
-    return (0, styled_native_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : core.space[2]);
+    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), collapsed ? '0' : (0, element_core_1.numToPx)(core.space[2]));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;