feat(Alert): Rebranding to new colors

leemonade · Jan 12, 2024 · 2b26462 · 2b26462
1 parent 921cc0d
commit 2b26462
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 104 deletions.
diff --git a/packages/components/src/feedback/Alert/Alert.styles.js b/packages/components/src/feedback/Alert/Alert.styles.js
@@ -6,26 +6,34 @@ const getColor = (theme, severity) =>
     success: {
       background: `#E4F4E6 !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: '#368442',
+        color: '#5CBC6A',
       },
+      borderColor: `#90D19A !important`,
+      borderLeftColor: `#5CBC6A !important`,
     },
     warning: {
       background: `#FEF3E1 !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: '#BA7609',
+        color: '#F39C13',
       },
+      borderColor: `#FBDAA6 !important`,
+      borderLeftColor: `#F39C13 !important`,
     },
     info: {
-      background: `#F1FFBD !important`,
+      background: `#E8F0FC !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: '#98C200',
+        color: '#317AE7',
       },
+      borderColor: `#B1CDF6 !important`,
+      borderLeftColor: `#317AE7 !important`,
     },
     error: {
       background: `#F7DEDE !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
         color: '#B52A2A',
       },
+      borderColor: `#DF7878 !important`,
+      borderLeftColor: `#B52A2A !important`,
     },
   })[severity];
 
@@ -37,8 +45,9 @@ const AlertStyles = createStyles((theme, { variant, severity }) => {
       ...getColor(theme, severity),
       display: 'flex',
       alignItems: 'center',
-      borderRadius: variant === 'block' ? pxToRem(2) : pxToRem(0),
+      borderRadius: 4,
       padding: `${pxToRem(8)} ${pxToRem(16)} ${pxToRem(12)} ${pxToRem(24)}`,
+      borderLeftWidth: 4,
     },
     message: {},
     wrapper: {

diff --git a/packages/components/src/form/BooleanInput/Switch/Switch.js b/packages/components/src/form/BooleanInput/Switch/Switch.js
@@ -5,8 +5,11 @@ import { Switch as MantineSwitch } from '@mantine/core';
 import { SwitchStyles } from './Switch.styles';
 
 const Switch = forwardRef(
-  ({ labelPosition, size, disabled, useAria, classNames, ...props }, ref) => {
-    const { classes } = SwitchStyles({ size, labelPosition, disabled }, { name: 'Switch' });
+  ({ labelPosition, size, disabled, useAria, classNames, borderColor, bgColor, ...props }, ref) => {
+    const { classes } = SwitchStyles(
+      { size, labelPosition, disabled, borderColor, bgColor },
+      { name: 'Switch' },
+    );
 
     const mergedClasses = mergeWith({ ...classes }, { ...classNames }, (obj, src) => {
       if (obj) return `${obj} ${src}`;
@@ -33,6 +36,8 @@ Switch.propTypes = {
   useAria: PropTypes.bool,
   classNames: PropTypes.any,
   disabled: PropTypes.bool,
+  borderColor: PropTypes.string,
+  bgColor: PropTypes.string,
 };
 
 export { Switch };
diff --git a/packages/components/src/form/BooleanInput/Switch/Switch.styles.js b/packages/components/src/form/BooleanInput/Switch/Switch.styles.js
@@ -21,74 +21,80 @@ const getThumbLeft = (theme) => {
   return 'calc(100% - 16px - 2px)';
 };
 
-const SwitchStyles = createStyles((theme, { size, labelPosition, disabled }) => {
-  const switchTheme = theme.other.toggle;
-  const labelTheme = theme.other.label;
+const SwitchStyles = createStyles(
+  (theme, { size, labelPosition, disabled, borderColor, bgColor }) => {
+    const switchTheme = theme.other.toggle;
+    const labelTheme = theme.other.label;
 
-  return {
-    root: {
-      justifyContent: 'left',
-    },
-    labelWrapper: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      'label[data-disabled]': {
-        color: theme.other.global.content.color.disabled,
+    return {
+      root: {
+        justifyContent: 'left',
       },
-    },
-    label: {
-      color: labelTheme.content.color.default,
-      ...labelTheme.content.typo['02'],
-      paddingLeft: 0,
-      '&:hover': {
-        cursor: disabled ? 'not-allowed' : 'pointer',
+      labelWrapper: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        'label[data-disabled]': {
+          color: theme.other.global.content.color.disabled,
+        },
       },
-    },
-    body: {
-      flexDirection: labelPosition === 'end' ? 'row' : 'row-reverse',
-      gap: switchTheme.spacing.gap,
-      '&:hover': {
-        cursor: disabled ? 'not-allowed' : 'pointer',
+      label: {
+        color: labelTheme.content.color.default,
+        ...labelTheme.content.typo['02'],
+        paddingLeft: 0,
+        '&:hover': {
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        },
       },
-    },
-    input: { display: 'none' },
-    track: {
-      ...getSizes(size, switchTheme),
-      cursor: 'pointer',
-      borderRadius: switchTheme.border.radius,
-      borderColor: switchTheme.border.color.default,
-      backgroundColor: switchTheme.background.color.default,
-      '&:hover': {
-        ...getBoxShadowFromToken(switchTheme.shadow.hover),
+      body: {
+        flexDirection: labelPosition === 'end' ? 'row' : 'row-reverse',
+        gap: switchTheme.spacing.gap,
+        '&:hover': {
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        },
       },
-      'input:checked + &': {
+      input: { display: 'none' },
+      track: {
+        ...getSizes(size, switchTheme),
+        cursor: 'pointer',
+        borderRadius: switchTheme.border.radius,
+        borderColor: switchTheme.border.color.default,
         backgroundColor: switchTheme.background.color.default,
-        borderColor: switchTheme.border.color.select,
-        transition: `all 150ms ${theme.transitionTimingFunction}`,
         '&:hover': {
           ...getBoxShadowFromToken(switchTheme.shadow.hover),
+          borderColor: borderColor ?? switchTheme.border.color.select,
+        },
+        'input:checked + &': {
+          backgroundColor: switchTheme.background.color.default,
+          borderColor: borderColor ?? switchTheme.border.color.select,
+          transition: `all 150ms ${theme.transitionTimingFunction}`,
+          '&:hover': {
+            ...getBoxShadowFromToken(switchTheme.shadow.hover),
+          },
+        },
+        'input:disabled + &': {
+          backgroundColor: theme.other.global.background.color.disabled,
+          borderColor: theme.other.global.border.color.disabled.default,
         },
       },
-      'input:disabled + &': {
-        backgroundColor: theme.other.global.background.color.disabled,
-        borderColor: theme.other.global.border.color.disabled.default,
-      },
-    },
-    thumb: {
-      ...getThumbSizes(size, switchTheme),
-      backgroundColor: switchTheme.content.color.default,
-      borderRadius: switchTheme.border.radius,
-      left: 4,
-      'input:checked + * > &': {
-        left: getThumbLeft(switchTheme),
-        backgroundColor: switchTheme.content.color.selected,
-      },
-      'input:disabled + * > &': {
-        backgroundColor: theme.other.global.content.color.disabled,
+      thumb: {
+        ...getThumbSizes(size, switchTheme),
+        backgroundColor: switchTheme.content.color.default,
+        borderRadius: switchTheme.border.radius,
+        left: 4,
+        '&:hover': {
+          backgroundColor: bgColor ?? switchTheme.content.color.selected,
+        },
+        'input:checked + * > &': {
+          left: getThumbLeft(switchTheme),
+          backgroundColor: bgColor ?? switchTheme.content.color.selected,
+        },
+        'input:disabled + * > &': {
+          backgroundColor: theme.other.global.content.color.disabled,
+        },
       },
-    },
-  };
-});
+    };
+  },
+);
 
 export { SwitchStyles };
diff --git a/packages/components/src/form/Switch/Switch.js b/packages/components/src/form/Switch/Switch.js
@@ -8,10 +8,11 @@ import {
 export const SWITCH_DEFAULT_PROPS = BOOLEAN_INPUT_DEFAULT_PROPS;
 export const SWITCH_PROP_TYPES = BOOLEAN_INPUT_PROP_TYPES;
 
-const Switch = forwardRef(({ display, useAria, isPro, ...props }, ref) => {
-  return <BooleanInput {...props} display="switch" useAria={useAria} ref={ref} isPro={isPro} />;
-});
+const Switch = forwardRef(({ display, useAria, isPro, ...props }, ref) => (
+  <BooleanInput {...props} display="switch" useAria={useAria} ref={ref} isPro={isPro} />
+));
 
+Switch.displayName = 'Switch';
 Switch.defaultProps = SWITCH_DEFAULT_PROPS;
 Switch.propTypes = SWITCH_PROP_TYPES;
 

diff --git a/packages/leemons/src/calendar/CalendarSubNavFilters/CalendarSubNavFilters.js b/packages/leemons/src/calendar/CalendarSubNavFilters/CalendarSubNavFilters.js
@@ -1,8 +1,7 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Select, Switch, Text, Stack, ScrollArea } from '@bubbles-ui/components';
-import { SubNav } from '@bubbles-ui/extras';
-import { forEach } from 'lodash';
+import { Box, Select, Switch, Text, Stack } from '@bubbles-ui/components';
+import { forEach, noop } from 'lodash';
 import { CalendarSubNavFiltersStyles } from './CalendarSubNavFilters.styles';
 
 export const CALENDAR_SUB_NAV_FILTERS_DEFAULT_PROPS = {
@@ -16,25 +15,31 @@ export const CALENDAR_SUB_NAV_FILTERS_DEFAULT_PROPS = {
     { label: 'Schedule', value: 'schedule' },
   ],
   centers: [],
-  onChange: () => {},
-  centerOnChange: () => {},
-  pageOnChange: () => {},
-  onClose: () => {},
-  showPageControl: false,
-  mainColor: '#ffffff',
-  drawerColor: '#ffffff',
-  lightMode: false,
+  onChange: noop,
+  centerOnChange: noop,
+  pageOnChange: noop,
+  topZone: <></>,
 };
 export const CALENDAR_SUB_NAV_FILTERS_PROP_TYPES = {
   showPageControl: PropTypes.bool,
-  mainColor: PropTypes.string,
-  drawerColor: PropTypes.string,
-  lightMode: PropTypes.bool,
+  messages: PropTypes.shape({
+    title: PropTypes.string,
+    centers: PropTypes.string,
+    closeTooltip: PropTypes.string,
+  }),
+  pages: PropTypes.array,
+  pageValue: PropTypes.string,
+  pageOnChange: PropTypes.func,
+  centers: PropTypes.array,
+  centerValue: PropTypes.string,
+  centerOnChange: PropTypes.func,
+  value: PropTypes.array,
+  onChange: PropTypes.func,
+  topZone: PropTypes.node,
 };
 
 const CalendarSubNavFilters = ({
   messages,
-  onClose,
   value,
   onChange,
   pages,
@@ -44,13 +49,9 @@ const CalendarSubNavFilters = ({
   centerValue,
   centerOnChange,
   showPageControl,
-  mainColor,
-  drawerColor,
-  lightMode,
-  style,
+  topZone,
 }) => {
-  const { classes, cx } = CalendarSubNavFiltersStyles({},{ name: 'SubnavFilters' });
-
+  const { classes } = CalendarSubNavFiltersStyles({}, { name: 'SubnavFilters' });
   const [, setR] = useState();
   const ref = useRef({});
 
@@ -87,37 +88,33 @@ const CalendarSubNavFilters = ({
   }, [JSON.stringify(value)]);
 
   return (
-    <Stack className={classes.root} direction="column" spacing={5}>
+    <Stack className={classes.root} direction="column" spacing={5} fullWidth>
+      {topZone}
       {showPageControl ? (
-        <Select
-          data={pages}
-          value={pageValue || pages[0].value}
-          onChange={pageOnChange}
-        />
+        <Select data={pages} value={pageValue || pages[0].value} onChange={pageOnChange} />
       ) : null}
-
       {centers && centers.length > 1 ? (
         <Stack direction="column" spacing={2}>
-          <Text className={classes.subtitle}>
-            {messages.centers}
-          </Text>
+          <Text className={classes.subtitle}>{messages.centers}</Text>
           <Box>
             <Select data={centers} value={centerValue} onChange={centerOnChange} />
           </Box>
         </Stack>
       ) : null}
-
       {value.map(({ calendars, sectionName }, sectionIndex) => (
         <Box key={`${sectionName}-${sectionIndex}`}>
-          <Text className={classes.subtitle}>
-            {sectionName}
-          </Text>
+          <Text className={classes.subtitle}>{sectionName}</Text>
           <Box>
             {calendars.map((calendar, calendarIndex) => (
-              <Box key={calendarIndex} className={classes.switchWrapper}>
+              <Box
+                key={calendar.id ?? calendar._id ?? calendarIndex}
+                className={classes.switchWrapper}
+              >
                 <Switch
                   label={calendar.name}
                   checked={calendar.showEvents}
+                  bgColor={calendar.bgColor}
+                  borderColor={calendar.borderColor}
                   onChange={(event) => _onChange(sectionIndex, calendarIndex, event)}
                 />
               </Box>