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

@@ -8,6 +8,19 @@ 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,34 +47,40 @@ const AppBar = ({
   secondaryText,
   showBurgerMenu,
   onClickMenu,
+  backgroundColor,
+  textColor,
   ...otherProps
 }) => {
   return (
-    <MuiAppBar {...otherProps}>
+    <Root backgroundColor={backgroundColor} textColor={textColor} {...otherProps}>
       <Toolbar>
         <BrandElements>
-          {showBurgerMenu && <BurguerMenu onClickMenu={onClickMenu} />}
+          {showBurgerMenu && (
+            <BurguerMenu 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>
   );
 };
 
-AppBar.defaultProps = {
-  showBurgerMenu: false
-};
-
 AppBar.propTypes = {
   brandLogo: PropTypes.element,
   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
+};
+
+AppBar.defaultProps = {
+  showBurgerMenu: false
 };
 
 export default AppBar;

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

@@ -1,17 +1,25 @@
 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)({
+const Text = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== 'textColor'
+})(({ textColor, theme }) => ({
   display: 'flex',
   alignItems: 'center',
   whiteSpace: 'nowrap'
-});
+}));
+
+export default function BrandText({ text, textColor }) {
+  const theme = useTheme();
 
-export default function BrandText({ text }) {
   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/BurguerMenu.js

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

packages/react-ui/storybook/stories/molecules/Table.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Box,
   Chip,
@@ -11,7 +11,9 @@ import {
   TableBody,
   Table,
   IconButton,
-  MenuItem
+  MenuItem,
+  TableFooter,
+  TablePagination
 } from '@mui/material';
 import SelectField from '../../../src/components/atoms/SelectField';
 import { MoreVertOutlined } from '@mui/icons-material';
@@ -52,7 +54,15 @@ const rows = [
 const options = {
   title: 'Molecules/Table',
   component: Table,
-  argTypes: {},
+  argTypes: {
+    size: {
+      defaultValue: 'medium',
+      control: {
+        type: 'select',
+        options: ['medium', 'small']
+      }
+    }
+  },
   parameters: {
     design: {
       type: 'figma',
@@ -69,7 +79,7 @@ export default options;
 const PlaygroundTemplate = (args) => {
   return (
     <TableContainer>
-      <Table aria-label='simple table'>
+      <Table {...args} aria-label='simple table'>
         <TableHead>
           <TableRow>
             <TableCell>#</TableCell>
@@ -145,7 +155,7 @@ const PlaygroundTemplate = (args) => {
 const ScrollTemplate = (args) => (
   <Box sx={{ width: '100%', overflow: 'hidden' }}>
     <TableContainer sx={{ maxWidth: 440, maxHeight: 300 }}>
-      <Table aria-label='simple table'>
+      <Table {...args} aria-label='simple table'>
         <TableHead>
           <TableRow>
             <TableCell>#</TableCell>
@@ -218,8 +228,110 @@ const ScrollTemplate = (args) => (
   </Box>
 );
 
+const PaginationTemplate = (args) => {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  return (
+    <TableContainer>
+      <Table {...args} aria-label='simple table'>
+        <TableHead>
+          <TableRow>
+            <TableCell>#</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Type</TableCell>
+            <TableCell>Mode</TableCell>
+            <TableCell>Description</TableCell>
+            <TableCell>Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row, index) => (
+            <TableRow hover key={index}>
+              <TableCell component='th' scope='row'>
+                {index + 1}
+              </TableCell>
+              <TableCell sx={{ maxWidth: 160 }}>
+                {index === 1 ? (
+                  <Tooltip title={row.name}>
+                    <Typography variant='inherit' noWrap>
+                      {row.name}
+                    </Typography>
+                  </Tooltip>
+                ) : (
+                  row.name
+                )}
+              </TableCell>
+              <TableCell>
+                <Chip size='small' color='default' label={row.type} />
+              </TableCell>
+              <TableCell>
+                <SelectField
+                  size='small'
+                  placeholder='Placeholder'
+                  onChange={() => void 0}
+                  value={[]}
+                >
+                  {[...Array(3)].map((item, index) => {
+                    const itemText = `${index + 1}`;
+
+                    return (
+                      <MenuItem key={index} value={itemText}>
+                        {itemText}
+                      </MenuItem>
+                    );
+                  })}
+                </SelectField>
+              </TableCell>
+              <TableCell sx={{ maxWidth: 160 }}>
+                {index === 3 ? (
+                  <Tooltip title={row.description}>
+                    <Typography variant='inherit' noWrap>
+                      {row.description}
+                    </Typography>
+                  </Tooltip>
+                ) : (
+                  row.description
+                )}
+              </TableCell>
+              <TableCell padding='checkbox'>
+                <IconButton size='small'>
+                  <MoreVertOutlined />
+                </IconButton>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              count={100}
+              page={page}
+              onPageChange={handleChangePage}
+              rowsPerPage={rowsPerPage}
+              onRowsPerPageChange={handleChangeRowsPerPage}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </TableContainer>
+  );
+};
+
 export const Playground = PlaygroundTemplate.bind({});
 Playground.args = {};
 
 export const Scroll = ScrollTemplate.bind({});
 ScrollTemplate.args = {};
+
+export const WithPagination = PaginationTemplate.bind({});
+PaginationTemplate.args = {};