AppBar: Add support for custom branding

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- AppBar: Add support for custom branding [#792](https://github.com/CartoDB/carto-react/pull/792)
+
 ## 2.2
 
 ### 2.2.13 (2023-10-16)

packages/react-ui/src/components/organisms/AppBar/AppBar.d.ts

@@ -9,6 +9,8 @@ export type AppBarTypeMap<D extends React.ElementType<any> = 'header'> = MuiAppB
     secondaryText?: React.ReactNode;
     onClickMenu?: (event: React.MouseEvent) => void;
     showBurgerMenu?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
   },
   D
 >;

packages/react-ui/src/components/organisms/AppBar/AppBar.js

@@ -3,11 +3,24 @@ import PropTypes from 'prop-types';
 import { AppBar as MuiAppBar, Toolbar } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-import BurguerMenu from './BurguerMenu';
+import BurgerMenu from './BurgerMenu';
 import BrandLogo from './BrandLogo';
 import BrandText from './BrandText';
 import SecondaryText from './SecondaryText';
 
+const Root = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => !['backgroundColor', 'textColor'].includes(prop)
+})(({ backgroundColor, textColor, theme }) => ({
+  backgroundColor: backgroundColor || theme.palette.brand.navyBlue,
+
+  '& .MuiTypography-root': {
+    color: textColor || theme.palette.common.white
+  },
+  '& .MuiIconButton-root path': {
+    fill: textColor || theme.palette.common.white
+  }
+}));
+
 const BrandElements = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
@@ -34,21 +47,25 @@ const AppBar = ({
   secondaryText,
   showBurgerMenu,
   onClickMenu,
+  backgroundColor,
+  textColor,
   ...otherProps
 }) => {
   return (
-    <MuiAppBar {...otherProps}>
+    <Root backgroundColor={backgroundColor} textColor={textColor} {...otherProps}>
       <Toolbar>
         <BrandElements>
-          {showBurgerMenu && <BurguerMenu onClickMenu={onClickMenu} />}
+          {showBurgerMenu && (
+            <BurgerMenu onClickMenu={onClickMenu} iconColor={textColor} />
+          )}
           {brandLogo && <BrandLogo logo={brandLogo} />}
-          {brandText && <BrandText text={brandText} />}
-          {secondaryText && <SecondaryText text={secondaryText} />}
+          {brandText && <BrandText text={brandText} textColor={textColor} />}
+          {secondaryText && <SecondaryText text={secondaryText} textColor={textColor} />}
         </BrandElements>
 
         <Content>{children}</Content>
       </Toolbar>
-    </MuiAppBar>
+    </Root>
   );
 };
 
@@ -61,7 +78,9 @@ AppBar.propTypes = {
   brandText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   secondaryText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   onClickMenu: PropTypes.func,
-  showBurgerMenu: PropTypes.bool
+  showBurgerMenu: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  textColor: PropTypes.string
 };
 
 export default AppBar;

packages/react-ui/src/components/organisms/AppBar/BrandText.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 
 import Typography from '../../atoms/Typography';
 
@@ -9,9 +9,15 @@ const Text = styled(Typography)({
   whiteSpace: 'nowrap'
 });
 
-export default function BrandText({ text }) {
+export default function BrandText({ text, textColor }) {
+  const theme = useTheme();
+
   return (
-    <Text component='span' variant='subtitle1'>
+    <Text
+      component='span'
+      variant='subtitle1'
+      textColor={textColor || theme.palette.common.white}
+    >
       {text}
     </Text>
   );

packages/react-ui/src/components/organisms/AppBar/BurgerMenu.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Divider, Hidden, IconButton } from '@mui/material';
+import { alpha, styled } from '@mui/material/styles';
+import { MenuOutlined } from '@mui/icons-material';
+
+import { APPBAR_SIZE } from '../../../theme/themeConstants';
+
+const Menu = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  height: APPBAR_SIZE,
+  marginRight: theme.spacing(1.5)
+}));
+
+const MenuButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== 'iconColor'
+})(({ iconColor, theme }) => ({
+  marginRight: theme.spacing(1),
+
+  '&.MuiButtonBase-root svg path': {
+    fill: iconColor || theme.palette.background.paper
+  }
+}));
+
+const MenuDivider = styled(Divider, {
+  shouldForwardProp: (prop) => prop !== 'color'
+})(({ color, theme }) => ({
+  ...(color && {
+    borderColor: alpha(color, 0.12)
+  })
+}));
+
+export default function BurgerMenu({ onClickMenu, iconColor }) {
+  return (
+    <Hidden mdUp>
+      <Menu>
+        <MenuButton onClick={onClickMenu} iconColor={iconColor}>
+          <MenuOutlined />
+        </MenuButton>
+        <MenuDivider orientation='vertical' flexItem light color={iconColor} />
+      </Menu>
+    </Hidden>
+  );
+}

packages/react-ui/src/components/organisms/AppBar/SecondaryText.js

@@ -1,21 +1,32 @@
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 
 import Typography from '../../atoms/Typography';
 
-const Text = styled(Typography)(({ theme }) => ({
+const Text = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'textColor'
+})(({ textColor, theme }) => ({
   display: 'flex',
   alignItems: 'center',
+
   '&::before': {
     content: '"/"',
     margin: theme.spacing(0, 1),
-    color: theme.palette.white[60]
+    opacity: 0.6,
+    color: textColor || theme.palette.common.white
   }
 }));
 
-export default function SecondaryText({ text }) {
+export default function SecondaryText({ text, textColor }) {
+  const theme = useTheme();
+
   return (
-    <Text component='span' variant='body2' weight='strong'>
+    <Text
+      component='span'
+      variant='body2'
+      weight='strong'
+      textColor={textColor || theme.palette.common.white}
+    >
       {text}
     </Text>
   );

packages/react-ui/src/theme/sections/components/surfaces.js

@@ -21,12 +21,6 @@ export const surfacesOverrides = {
           padding: theme.spacing(0, 1),
           minHeight: APPBAR_SIZE
         },
-        '& .MuiTypography-root': {
-          color: theme.palette.common.white
-        },
-        '& .MuiIconButton-root path': {
-          fill: theme.palette.common.white
-        },
         '& .MuiAvatar-root': {
           width: theme.spacing(4),
           height: theme.spacing(4)