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

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

@@ -30,49 +30,39 @@ 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 = exports.NavWrapper = void 0;
+exports.BackActionWrapper = exports.HeaderGap = 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"));
 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    position: absolute;\n\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    background-color: ", ";\n\n    ", "\n  "], ["\n    width: 100%;\n    position: absolute;\n\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    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) : '');
+    var theme = _a.theme, collapsed = _a.collapsed;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: 100%;\n    position: absolute;\n\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    background-color: ", ";\n\n    ", "\n  "], ["\n    width: 100%;\n    position: absolute;\n\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    background-color: ", ";\n\n    ", "\n  "])), Z_INDEX, theme.color.surface.surface, 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)(theme.border.width.sm), theme.color.input.borderDim) : '');
 });
 exports.NavContainer = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, topOffset = _a.topOffset, titleVisible = _a.titleVisible;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: ", ";\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, titleVisible ? '100%' : '50%', topOffset
+    var theme = _a.theme, topOffset = _a.topOffset, hasTitle = _a.hasTitle;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "], ["\n    position: absolute;\n\n    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */\n    z-index: ", ";\n    width: 100%;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n  "])), Z_INDEX + 1, topOffset
         ? topOffset
-        : (0, element_core_1.numToPx)(core.space[titleVisible ? 2 : 4]), (0, element_core_1.numToPx)(core.space[titleVisible ? 2 : 4]), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.space[4]));
+        : (0, element_core_1.numToPx)(theme.space[hasTitle ? 200 : 400]), (0, element_core_1.numToPx)(theme.space[hasTitle ? 200 : 400]), (0, element_core_1.numToPx)(theme.space[400]), (0, element_core_1.numToPx)(theme.space[400]));
 });
 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, titleVisible = _a.titleVisible;
-    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  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\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, !titleVisible && 'height: 0;');
+    var theme = _a.theme, hasBackButton = _a.hasBackButton, hasRightAction = _a.hasRightAction, hasTitle = _a.hasTitle;
+    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  "], ["\n    width: ", ";\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    ", ";\n  "])), hasRightAction ? '100%' : '65%', theme.native.font.family.bold, (0, element_core_1.numToPx)(theme.font.size['4xl'].mediaQuery[hasBackButton ? 'sm' : 'lg']), (0, element_core_1.numToPx)(hasBackButton
+        ? theme.font.lineHeight['4xl'].mediaQuery.sm
+        : theme.space[1300]), theme.color.brand.brand, !hasTitle && 'height: 0;');
 });
-exports.CollapsedTitleWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
-    var titleVisible = _a.titleVisible;
-    return "\n  width: ".concat(titleVisible ? '33.3%' : '0', ";\n  align-items: center;\n  justify-content: center;\n");
+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"], ["\n  width: 33.3%;\n  align-items: center;\n"])));
+exports.CollapsedTitle = styled_native_1.default.Text(function (_a) {
+    var theme = _a.theme;
+    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  "])), theme.native.font.family.bold, (0, element_core_1.numToPx)(theme.font.size.xl.mediaQuery.sm), (0, element_core_1.numToPx)(theme.font.lineHeight.xl.mediaQuery.sm), theme.color.brand.brand);
 });
-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, (0, element_core_1.numToPx)(core.fontSize.heading4.small), (0, element_core_1.numToPx)(core.lineHeight.heading4.small), semantic.message.branded);
+exports.HeaderGap = styled_native_1.default.View(function (_a) {
+    var hasRightAction = _a.hasRightAction;
+    return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), hasRightAction ? '20%' : '33.3%');
 });
-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"])));
-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.BackActionWrapper = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(function (_a) {
+    var theme = _a.theme, collapsed = _a.collapsed, hasBackButton = _a.hasBackButton;
+    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    margin-bottom: ", ";\n    width: ", ";\n\n    /* Important for maintaining white space above the title on main app screens */\n    height: ", ";\n  "], ["\n    margin-bottom: ", ";\n    width: ", ";\n\n    /* Important for maintaining white space above the title on main app screens */\n    height: ", ";\n  "])), collapsed ? '0' : (0, element_core_1.numToPx)(theme.space[400]), collapsed ? '33.3%' : '100%', hasBackButton ? (0, element_core_1.numToPx)(theme.space[1000]) : undefined);
 });
-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) {
-    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) {
-    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' : (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;