@galaxy-ds/core 1.1.47 → 1.1.48

package/dist/HeaderToolbar/HeaderToolbarProps.types.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 export interface HeaderToolbarProps {
     title?: string;
+    titleVisibility?: boolean;
     left?: React.ReactNode;
     right?: React.ReactNode;
     bgColor?: string;
     bgImageURL?: string;
     bgPosition?: string;
     bgSize?: string;
+    divider?: boolean;
 }

package/dist/index.esm.js

@@ -35658,7 +35658,8 @@ var Dialog = function (props) {
                 React__default.createElement(DialogActions$1, null, children)))));
 };
 
-var useStyles$a = makeStyles(function () {
+// Use theme.shape.borderRadius to detect if it's Desktop or not
+var useStyles$a = makeStyles(function (theme) {
     return createStyles({
         bgWrapper: function (props) { return ({
             background: "url(" + props.bgImageURL + ") no-repeat",
@@ -35666,18 +35667,37 @@ var useStyles$a = makeStyles(function () {
             backgroundPosition: props.bgPosition + " center",
             backgroundColor: props.bgColor ? props.bgColor + " !important" : '',
         }); },
+        titleVis: function (props) { return ({
+            display: props.titleVisibility === undefined
+                ? theme.shape.borderRadius === 0
+                    ? ''
+                    : 'none'
+                : props.titleVisibility
+                    ? ''
+                    : 'none',
+        }); },
+        containerDivider: function (props) { return ({
+            borderLeft: props.divider === undefined
+                ? theme.shape.borderRadius === 0
+                    ? "1px solid " + common.brand.utility.border
+                    : 'none'
+                : props.divider
+                    ? "1px solid " + common.brand.utility.border
+                    : 'none',
+        }); },
     });
 });
 var HeaderToolbar = function (_a) {
-    var title = _a.title, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _b = _a.bgPosition, bgPosition = _b === void 0 ? 'center' : _b, bgSize = _a.bgSize; __rest(_a, ["title", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize"]);
-    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, bgPosition: bgPosition, bgSize: bgSize });
-    return (React__default.createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper) },
-        React__default.createElement(Box$2, { display: "flex", justifyContent: "space-between", style: { width: '100%' } },
+    var _b;
+    var title = _a.title, titleVisibility = _a.titleVisibility, left = _a.left, right = _a.right, bgColor = _a.bgColor, bgImageURL = _a.bgImageURL, _c = _a.bgPosition, bgPosition = _c === void 0 ? 'center' : _c, bgSize = _a.bgSize, divider = _a.divider; __rest(_a, ["title", "titleVisibility", "left", "right", "bgColor", "bgImageURL", "bgPosition", "bgSize", "divider"]);
+    var classes = useStyles$a({ bgColor: bgColor, bgImageURL: bgImageURL, bgPosition: bgPosition, bgSize: bgSize, titleVisibility: titleVisibility, divider: divider });
+    return (React__default.createElement(Toolbar$2, { className: clsx('gds-header-toolbar', classes.bgWrapper, (_b = {}, _b['with-title'] = titleVisibility, _b)) },
+        React__default.createElement(Box$2, { display: "flex", justifyContent: "space-between", alignItems: "flex-end", style: { width: '100%' } },
             React__default.createElement(Box$2, { display: "flex", flexDirection: "column", justifyContent: "stretch" },
-                title && (React__default.createElement(Box$2, { className: "gds-header-toolbar-title", mb: 3 },
+                title && (React__default.createElement(Box$2, { className: clsx("gds-header-toolbar-title", classes.titleVis), mb: 3 },
                     React__default.createElement(Typography, { variant: "h1", color: "primary" }, title))),
                 left),
-            right && (React__default.createElement(Box$2, { className: "gds-buttons-w-divider", borderLeft: "1px solid " + common.brand.utility.border }, right)))));
+            right && (React__default.createElement(Box$2, { className: clsx("gds-buttons-w-divider", classes.containerDivider) }, right)))));
 };
 
 function LoaderIcon(props) {
@@ -47780,15 +47800,15 @@ var themeWeb = createTheme({
                     minHeight: 50,
                     paddingLeft: 16,
                     paddingRight: 16,
-                    '& .gds-header-toolbar-title': {
-                        display: 'none',
-                    },
                     '& .gds-buttons-w-divider': {
-                        borderLeft: 'none',
+                        paddingLeft: 16,
                     },
                     '& .MuiInputBase-root, & .MuiButtonBase-root': {
                         maxHeight: 32,
                     },
+                    '&.with-title': {
+                        padding: 16,
+                    }
                 },
             },
         },