feat: Calendar and switch changes.

leemonade · Dec 27, 2023 · a1fb148 · a1fb148
1 parent 9e7e356
commit a1fb148
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 86 deletions.
diff --git a/packages/calendars/src/BigCalendar/components/Toolbar/Toolbar.js b/packages/calendars/src/BigCalendar/components/Toolbar/Toolbar.js
@@ -5,7 +5,6 @@ import {
   Box,
   Button,
   Group,
-  IconButton,
   InputWrapper,
   Select,
   Switch,
@@ -109,16 +108,9 @@ const ToolBar = ({
         ) : null}
 
         {showToolbarAddButton ? (
-          <IconButton
-            color="primary"
-            size="lg"
-            rounded
-            onClick={addEventClick}
-            data-testid="add-event"
-            aria-label="add-event"
-          >
-            <PlusIcon />
-          </IconButton>
+          <Button leftIcon={<PlusIcon />} onClick={addEventClick}>
+            {messages.new}
+          </Button>
         ) : null}
         {toolbarRightNode}
       </Group>

diff --git a/packages/components/src/form/BooleanInput/BooleanInput.js b/packages/components/src/form/BooleanInput/BooleanInput.js
@@ -80,7 +80,7 @@ const BooleanInput = forwardRef(
       isPro,
       ...props
     },
-    ref
+    ref,
   ) => {
     const [isChecked, setIsChecked] = useState(checked);
 
@@ -97,7 +97,7 @@ const BooleanInput = forwardRef(
 
     const { classes, cx } = BooleanInputStyles(
       { help, helpPosition, variant, isChecked, isPro, display, size },
-      { name: 'BooleanInput' }
+      { name: 'BooleanInput' },
     );
 
     return (
@@ -122,6 +122,12 @@ const BooleanInput = forwardRef(
           ) : (
             <Switch
               {...props}
+              classNames={{
+                input: classes.switchInput,
+                thumb: isChecked ? classes.switchThumbChecked : classes.switchThumb,
+                track: isChecked ? classes.switchTrackChecked : classes.switchTrack,
+                label: isChecked ? classes.switchLabelChecked : classes.switchLabel,
+              }}
               ref={ref}
               size={size}
               label={required ? `${label} *` : label}
@@ -140,7 +146,7 @@ const BooleanInput = forwardRef(
         </Box>
       </InputWrapper>
     );
-  }
+  },
 );
 
 BooleanInput.defaultProps = BOOLEAN_INPUT_DEFAULT_PROPS;

diff --git a/packages/components/src/form/BooleanInput/BooleanInput.styles.js b/packages/components/src/form/BooleanInput/BooleanInput.styles.js
@@ -1,5 +1,5 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getFontProductive } from '../../theme.mixins';
+import { pxToRem } from '../../theme.mixins';
 
 export const BooleanInputStyles = createStyles(
   (theme, { help, helpPosition, variant, isChecked, isPro, display, size }) => {
@@ -40,6 +40,40 @@ export const BooleanInputStyles = createStyles(
         marginLeft: isRight ? theme.spacing[4] : isSwitch ? getHelpMargin() : theme.spacing[6],
         marginTop: isBottom ? theme.spacing[1] : 2,
       },
+      switchInput: {
+        '&:checked+*>.mantine-Switch-thumb': {
+          left: 'calc(100% - 8px - 4px)!important',
+        },
+      },
+      switchThumb: {
+        backgroundColor: '#878D96!important',
+        width: '8px!important',
+        height: '8px!important',
+        left: '4px!important',
+      },
+      switchThumbChecked: {
+        backgroundColor: '#2F463F!important',
+        width: '8px!important',
+        height: '8px!important',
+      },
+      switchTrack: {
+        backgroundColor: 'transparent!important',
+        border: '1px solid #878D96!important',
+      },
+      switchTrackChecked: {
+        backgroundColor: 'transparent!important',
+        border: '1px solid #2F463F!important',
+      },
+      switchLabel: {
+        color: '#4D5358', // lightMode ? theme.colors.text01 : theme.colors.text07,
+        fontWeight: 400,
+        fontSize: '14px',
+      },
+      switchLabelChecked: {
+        color: '#2F463F', // lightMode ? theme.colors.text01 : theme.colors.text07,
+        fontWeight: 400,
+        fontSize: '14px',
+      },
     };
-  }
+  },
 );
diff --git a/packages/extras/src/navigation/SubNav/SubNav.js b/packages/extras/src/navigation/SubNav/SubNav.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import SimpleBar from 'simplebar-react';
 import { isNil } from 'lodash';
 import { ComputerKeyboardPreviousIcon, PluginKimIcon } from '@bubbles-ui/icons/outline';
-import { Box, Stack, ActionButton, PALETTE, List } from '@bubbles-ui/components';
+import { ActionButton, Box, List, PALETTE, Stack } from '@bubbles-ui/components';
 import { SubNavItem } from './SubNavItem/SubNavItem';
 import { SubNavStyles } from './SubNav.styles';
 
@@ -54,6 +54,7 @@ export const SubNav = forwardRef(
       className,
       useRouter,
       children,
+      hideHeader,
       hideHeaderActions,
       style,
       lightMode,
@@ -74,30 +75,32 @@ export const SubNav = forwardRef(
         className={cx(classes.root, className, { [classes.open]: open })}
       >
         {/* Header */}
-        <Box className={classes.navHeader}>
-          {/* Close button */}
-          {!hideHeaderActions ? (
-            <Stack className={classes.navHeaderAction} justifyContent="end">
-              <ActionButton
-                icon={<PluginKimIcon />}
-                rounded
-                color={!lightMode && 'negative'}
-                active={pinned}
-                onClick={onPin}
-                tooltip={messages?.pinTooltip || null}
-              />
-              <ActionButton
-                icon={<ComputerKeyboardPreviousIcon />}
-                rounded
-                color={!lightMode && 'negative'}
-                onClick={onClose}
-                tooltip={messages?.closeTooltip || null}
-              />
-            </Stack>
-          ) : null}
+        {!hideHeader ? (
+          <Box className={classes.navHeader}>
+            {/* Close button */}
+            {!hideHeaderActions ? (
+              <Stack className={classes.navHeaderAction} justifyContent="end">
+                <ActionButton
+                  icon={<PluginKimIcon />}
+                  rounded
+                  color={!lightMode && 'negative'}
+                  active={pinned}
+                  onClick={onPin}
+                  tooltip={messages?.pinTooltip || null}
+                />
+                <ActionButton
+                  icon={<ComputerKeyboardPreviousIcon />}
+                  rounded
+                  color={!lightMode && 'negative'}
+                  onClick={onClose}
+                  tooltip={messages?.closeTooltip || null}
+                />
+              </Stack>
+            ) : null}
 
-          <Box className={classes.navHeaderLabel}>{item.label}</Box>
-        </Box>
+            <Box className={classes.navHeaderLabel}>{item.label}</Box>
+          </Box>
+        ) : null}
 
         {/* SubNav Items */}
         <SimpleBar className={classes.navBar}>

diff --git a/packages/leemons/src/calendar/CalendarSubNavFilters/CalendarSubNavFilters.js b/packages/leemons/src/calendar/CalendarSubNavFilters/CalendarSubNavFilters.js
@@ -1,13 +1,6 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import {
-  Box,
-  ImageLoader,
-  ProSwitch,
-  SegmentedControl,
-  Select,
-  Text,
-} from '@bubbles-ui/components';
+import { Box, Select, Switch, Text } from '@bubbles-ui/components';
 import { SubNav } from '@bubbles-ui/extras';
 import { forEach } from 'lodash';
 import { CalendarSubNavFiltersStyles } from './CalendarSubNavFilters.styles';
@@ -28,8 +21,8 @@ export const CALENDAR_SUB_NAV_FILTERS_DEFAULT_PROPS = {
   pageOnChange: () => {},
   onClose: () => {},
   showPageControl: false,
-  mainColor: '#212B3D',
-  drawerColor: '#333F56',
+  mainColor: '#ffffff',
+  drawerColor: '#ffffff',
   lightMode: false,
 };
 export const CALENDAR_SUB_NAV_FILTERS_PROP_TYPES = {
@@ -100,8 +93,9 @@ const CalendarSubNavFilters = ({
     <>
       <SubNav
         hideHeaderActions={true}
+        hideHeader={true}
         item={{ label: messages.title }}
-        style={{ position: 'static' }}
+        style={{ position: 'static', borderRight: '1px solid #EDEFF5' }}
         className={classes.subNav}
         subItems={[]}
         width={'100%'}
@@ -118,10 +112,12 @@ const CalendarSubNavFilters = ({
           })}
         >
           {showPageControl ? (
-            <SegmentedControl
+            <Select
               data={pages}
-              value={pageValue}
+              value={pageValue || pages[0].value}
               onChange={pageOnChange}
+
+              /*
               orientation={pages.length > 2 ? 'vertical' : 'horizontal'}
               classNames={{
                 root: pages.length > 2 ? classes.segmentRoot2 : classes.segmentRoot,
@@ -130,24 +126,28 @@ const CalendarSubNavFilters = ({
                 labelActive: classes.segmentLabelActive,
                 control: classes.segmentControl,
               }}
+
+               */
             />
           ) : null}
           {centers && centers.length > 1 ? (
             <Box
               sx={(theme) => ({
-                marginTop: theme.spacing[6],
+                marginTop: theme.spacing[4],
               })}
             >
               <Text
                 strong
-                size="xs"
-                sx={(theme) => ({ color: lightMode ? theme.colors.text05 : theme.colors.text08 })}
+                size="sm"
+                sx={(theme) => ({
+                  color: '#0D2023' /* lightMode ? theme.colors.text05 : theme.colors.text08*/,
+                })}
               >
                 {messages.centers}
               </Text>
               <Box
                 sx={(theme) => ({
-                  marginTop: theme.spacing[5],
+                  marginTop: theme.spacing[2],
                 })}
               >
                 <Select data={centers} value={centerValue} onChange={centerOnChange} />
@@ -157,39 +157,40 @@ const CalendarSubNavFilters = ({
           {value.map(({ calendars, sectionName }, sectionIndex) => (
             <Box
               sx={(theme) => ({
-                marginTop: theme.spacing[6],
+                marginTop: theme.spacing[4],
               })}
               key={`${sectionName}-${sectionIndex}`}
             >
               <Box>
                 <Text
                   strong
-                  size="xs"
-                  sx={(theme) => ({ color: lightMode ? theme.colors.text05 : theme.colors.text08 })}
+                  size="sm"
+                  sx={(theme) => ({
+                    color:
+                      '#0D2023' /*color: lightMode ? theme.colors.text05 : theme.colors.text08*/,
+                  })}
                 >
                   {sectionName}
                 </Text>
               </Box>
               <Box
                 sx={(theme) => ({
-                  marginTop: theme.spacing[5],
+                  marginTop: theme.spacing[2],
                 })}
               >
                 {calendars.map((calendar, calendarIndex) => (
                   <Box
                     sx={(theme) => ({
-                      marginTop: theme.spacing[4],
-                      marginBottom: theme.spacing[4],
+                      // marginTop: theme.spacing[4],
+                      // marginBottom: theme.spacing[4],
                     })}
                     key={calendarIndex}
                   >
-                    <ProSwitch
-                      classNames={{
-                        label: classes.switchLabel,
-                      }}
+                    <Switch
                       label={calendar.name}
-                      color={calendar.bgColor}
+                      // color={calendar.bgColor}
                       checked={calendar.showEvents}
+                      /*
                       icon={
                         calendar.icon && ref.current[calendar.icon] ? (
                           <Box className={classes.icon}>
@@ -204,6 +205,8 @@ const CalendarSubNavFilters = ({
                           </Box>
                         ) : null
                       }
+
+                       */
                       onChange={(event) => _onChange(sectionIndex, calendarIndex, event)}
                     />
                   </Box>

diff --git a/packages/leemons/src/calendar/CalendarSubNavFilters/CalendarSubNavFilters.stories.js b/packages/leemons/src/calendar/CalendarSubNavFilters/CalendarSubNavFilters.stories.js
@@ -5,6 +5,7 @@ import {
 } from './CalendarSubNavFilters';
 import mdx from './CalendarSubNavFilters.mdx';
 import { mock } from './mock/mock';
+import { Box } from '@mantine/core';
 
 export default {
   title: 'Leemons/Calendar/CalendarSubNavFilters',
@@ -27,18 +28,21 @@ export default {
 const Template = ({ children, ...props }) => {
   const [state, setState] = React.useState(mock);
   return (
-    <CalendarSubNavFilters
-      {...props}
-      value={state}
-      onChange={setState}
-      centers={[
-        { label: 'Center 1', value: '1' },
-        { label: 'Center 2', value: '2' },
-      ]}
-      centerValue={1}
-    >
-      {children}
-    </CalendarSubNavFilters>
+    <Box style={{ width: '300px' }}>
+      <CalendarSubNavFilters
+        {...props}
+        value={state}
+        onChange={setState}
+        showPageControl={true}
+        centers={[
+          { label: 'Center 1', value: '1' },
+          { label: 'Center 2', value: '2' },
+        ]}
+        centerValue={1}
+      >
+        {children}
+      </CalendarSubNavFilters>
+    </Box>
   );
 };