@campxdev/react-blueprint 1.9.4 → 1.9.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/components/Assets/Icons/IconComponents/SearchIcon.tsx

@@ -1,8 +1,14 @@
 import { useTheme } from '@mui/material';
 
-export const SearchIcon = ({ size = 16 }) => {
+export const SearchIcon = ({
+  size = 16,
+  backgroundColor,
+}: {
+  size?: number;
+  backgroundColor?: string;
+}) => {
   const theme = useTheme();
-  const color = theme.palette.primary.main;
+  const color = backgroundColor ?? theme.palette.primary.main;
   return (
     <svg
       width={size}

package/src/components/DataDisplay/SidePanel/styles.tsx

@@ -6,7 +6,6 @@ export const StyledSidePanelContainer = styled(Stack)(({ theme }) => ({
   padding: '12px',
   borderRadius: '8px',
   gap: '12px',
-  margin: '12px',
 }));
 
 export const StyledValueContainer = styled(Box)(({ theme }) => ({

package/src/components/Layout/PageContent/PageContent.tsx

@@ -1,7 +1,7 @@
 import { Box, BoxProps, styled } from '@mui/material';
 
 export type PageContentProps = {
-  variant?: 'stepper' | 'standard';
+  variant?: 'stepper' | 'standard' | 'side-panel';
 } & BoxProps;
 
 const PageContentContainer = styled(Box)(({ theme }) => ({
@@ -23,15 +23,35 @@ const PageStepperContainer = styled(Box)(({ theme }) => ({
   gap: '10px',
 }));
 
+const PageContentSidePanelContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  backgroundColor: theme.palette.surface.defaultBackground,
+  gap: '12px',
+}));
+
 export const PageContent = ({
   variant = 'standard',
   ...props
 }: PageContentProps) => {
-  return variant == 'stepper' ? (
-    <PageStepperContainer {...props}>{props.children}</PageStepperContainer>
-  ) : (
-    <PageContentContainer gap="12px" {...props}>
-      {props.children}
-    </PageContentContainer>
-  );
+  switch (variant) {
+    case 'stepper':
+      return (
+        <PageStepperContainer {...props}>{props.children}</PageStepperContainer>
+      );
+
+    case 'side-panel':
+      return (
+        <PageContentSidePanelContainer {...props}>
+          {props.children}
+        </PageContentSidePanelContainer>
+      );
+
+    case 'standard':
+    default:
+      return (
+        <PageContentContainer gap="12px" {...props}>
+          {props.children}
+        </PageContentContainer>
+      );
+  }
 };

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -8,17 +8,20 @@ import {
 import _ from 'lodash';
 import { Link } from 'react-router-dom';
 
+import { ReactNode } from 'react';
 import { getBreadcrumbsCharacter } from '../../../utils/export';
 import { Typography } from '../../export';
 
 export type BreadcrumbsProps = {
   pathTrimCount: number;
   containerProps?: SxProps;
+  actions?: ReactNode[];
 } & MuiBreadcrumbsProps;
 
 export const Breadcrumbs = ({
   pathTrimCount,
   containerProps,
+  actions = [],
   ...rest
 }: BreadcrumbsProps) => {
   const specialCharacter = getBreadcrumbsCharacter();
@@ -32,38 +35,56 @@ export const Breadcrumbs = ({
 
   return (
     <BreadcrumbContainer sx={containerProps}>
-      <MuiBreadcrumbs {...rest}>
-        {currentPathArray?.map((item, index) => {
-          basePath = basePath + `/${item}`;
-          return index === currentPathArray.length - 1 ? (
-            <Typography key={index} variant="subtitle2">
-              {_.startCase(decodeURIComponent(item).split(specialCharacter)[0])}
-            </Typography>
-          ) : (
-            <BreadcrumbLink key={index} to={basePath}>
-              {_.startCase(decodeURIComponent(item).split(specialCharacter)[0])}
-            </BreadcrumbLink>
-          );
-        })}
-      </MuiBreadcrumbs>
+      <BreadcrumbsWrapper>
+        <MuiBreadcrumbs {...rest}>
+          {currentPathArray?.map((item, index) => {
+            basePath = basePath + `/${item}`;
+            return index === currentPathArray.length - 1 ? (
+              <Typography key={index} variant="subtitle2">
+                {_.startCase(
+                  decodeURIComponent(item).split(specialCharacter)[0],
+                )}
+              </Typography>
+            ) : (
+              <BreadcrumbLink key={index} to={basePath}>
+                {_.startCase(
+                  decodeURIComponent(item).split(specialCharacter)[0],
+                )}
+              </BreadcrumbLink>
+            );
+          })}
+        </MuiBreadcrumbs>
+      </BreadcrumbsWrapper>
+      <ActionsContainer>
+        {actions.map((action, index) => action)}
+      </ActionsContainer>
     </BreadcrumbContainer>
   );
 };
 
 const BreadcrumbContainer = styled(Stack)(({ theme }) => ({
   flexDirection: 'row',
-  alignItems: 'center',
   width: '100%',
-  justifyContent: 'flex-start',
+  justifyContent: 'space-between',
   height: '52px',
   paddingLeft: '12px',
   backgroundColor: theme.palette.surface.defaultBackground,
-
   [theme.breakpoints.down('md')]: {
     paddingLeft: '0px',
   },
 }));
 
+const BreadcrumbsWrapper = styled(Stack)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+}));
+
+const ActionsContainer = styled(Stack)(({ theme }) => ({
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  gap: '12px',
+}));
+
 const BreadcrumbLink = styled(Link)(({ theme }) => ({
   textDecoration: 'none',
   transition: 'color 0.3s ease-in-out',