feat(TotalLayout): TotalLayoutHeader new props.

fix(Colors): Loader and Notifications buttons colors.
leemonade · Dec 16, 2023 · 4629e79 · 4629e79
1 parent 75401ae
commit 4629e79
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 91 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,8 +9,8 @@
     },
     "[javascript]": {
         "editor.codeActionsOnSave": {
-        "source.organizeImports": false,
-        "source.fixAll": true,
+            "source.organizeImports": "never",
+            "source.fixAll": "explicit"
         },
         "editor.formatOnSave": true,
         "editor.defaultFormatter": "esbenp.prettier-vscode"

diff --git a/packages/components/src/feedback/Alert/Alert.styles.js b/packages/components/src/feedback/Alert/Alert.styles.js
@@ -1,47 +1,44 @@
 import { createStyles } from '@mantine/styles';
 import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
 
-const getColor = (theme, severity) => {
-  return {
+const getColor = (theme, severity) =>
+  ({
     success: {
-      background: `${theme.colors.fatic02v0} !important`,
+      background: `#E4F4E6 !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: theme.colors.fatic02,
+        color: '#368442',
       },
     },
     warning: {
-      background: `${theme.colors.fatic03v0} !important`,
+      background: `#FEF3E1 !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: theme.colors.fatic03,
+        color: '#BA7609',
       },
     },
     info: {
-      background: `${theme.colors.fatic04v0} !important`,
+      background: `#F1FFBD !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: theme.colors.fatic04,
+        color: '#98C200',
       },
     },
     error: {
-      background: `${theme.colors.fatic01v0} !important`,
+      background: `#F7DEDE !important`,
       '.mantine-Alert-icon, .mantine-Alert-action': {
-        color: theme.colors.fatic01,
+        color: '#B52A2A',
       },
     },
-  }[severity];
-};
+  })[severity];
 
-export const AlertStyles = createStyles((theme, { variant, severity }) => {
+const AlertStyles = createStyles((theme, { variant, severity }) => {
+  const alertTheme = theme;
   return {
     root: {
       ...getFontExpressive(theme.fontSizes['2']),
       ...getColor(theme, severity),
       display: 'flex',
       alignItems: 'center',
       borderRadius: variant === 'block' ? pxToRem(2) : pxToRem(0),
-      padding:
-        variant === 'block'
-          ? `${pxToRem(8)} ${pxToRem(16)} ${pxToRem(12)} ${pxToRem(24)}`
-          : `${pxToRem(8)} ${pxToRem(16)} ${pxToRem(12)} ${pxToRem(24)}`,
+      padding: `${pxToRem(8)} ${pxToRem(16)} ${pxToRem(12)} ${pxToRem(24)}`,
     },
     message: {},
     wrapper: {
@@ -60,14 +57,15 @@ export const AlertStyles = createStyles((theme, { variant, severity }) => {
       gap: theme.spacing['2'],
     },
     title: {
-      ...getFontExpressive(theme.fontSizes['2'], 600),
+      ...getFontExpressive(theme.fontSizes['2'], 500),
+      color: '#4D5358',
       marginRight: pxToRem(15),
       lineHeight: 1.2,
       paddingTop: theme.spacing[2],
       paddingBottom: theme.spacing[2],
     },
     content: {
-      ...getFontProductive(theme.fontSizes['2'], 400),
+      ...getFontProductive(theme.fontSizes['2'], 500),
       flex: '1 1 100%',
       marginRight: variant === 'block' ? pxToRem(24) : pxToRem(28),
       lineHeight: 1.2,
@@ -93,3 +91,5 @@ export const AlertStyles = createStyles((theme, { variant, severity }) => {
     },
   };
 });
+
+export { AlertStyles };
diff --git a/packages/components/src/feedback/Loader/Loader.js b/packages/components/src/feedback/Loader/Loader.js
@@ -4,6 +4,7 @@ import { isString } from 'lodash';
 import { Loader as MantineLoader } from '@mantine/core';
 import { ContextContainer, CONTEXT_CONTAINER_PROP_TYPES } from '../../layout';
 import { Text } from '../../typography';
+import { LoaderStyles } from './Loader.styles';
 
 export const LOADER_LABEL_POSITIONS = ['right', 'bottom'];
 
@@ -22,20 +23,23 @@ export const LOADER_PROP_TYPES = {
   labelPosition: PropTypes.oneOf(LOADER_LABEL_POSITIONS),
   /** Controls if Loader uses aria role */
   useAria: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 const Loader = ({ padded, label, labelPosition, useAria, ...props }) => {
   const direction = useMemo(() => (labelPosition === 'right' ? 'row' : 'column'), [labelPosition]);
+  const { classes, cx } = LoaderStyles({}, { name: 'Loader' });
 
   return (
     <ContextContainer
+      {...props}
+      className={cx(props.className, classes.root)}
       direction={direction}
       padded={padded}
       alignItems="center"
       justifyContent="center"
-      role={useAria ? 'progressbar' : undefined}
+      role={useAria ? 'progress' : undefined}
       aria-label={useAria ? 'BubblesLoader' : undefined}
-      {...props}
     >
       <MantineLoader />
       {isString(label) && <Text>{label}</Text>}

diff --git a/packages/components/src/feedback/Loader/Loader.styles.js b/packages/components/src/feedback/Loader/Loader.styles.js
@@ -1,10 +1,17 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins';
+import { getFontExpressive } from '../../theme.mixins';
+
+const LoaderStyles = createStyles((theme) => {
+  const loaderTheme = theme.other.core;
 
-export const LoaderStyles = createStyles((theme, {}) => {
   return {
     root: {
       ...getFontExpressive(theme.fontSizes['2']),
+      svg: {
+        stroke: loaderTheme.color.primary['300'],
+      },
     },
   };
 });
+
+export { LoaderStyles };
diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js
@@ -20,8 +20,8 @@ export const IMAGE_PREVIEW_INPUT_PROP_TYPES = {
     uploadButton: PropTypes.string,
     changeImage: PropTypes.string,
   }),
-  value: PropTypes.instanceOf(File),
-  previewURL: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(File)]),
+  value: PropTypes.any,
+  previewURL: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
   previewStyle: PropTypes.object,
   control: PropTypes.element,
   onChange: PropTypes.func,

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -43,6 +43,7 @@ export {
   getPaddings,
   getHtmlStyles,
   getBoxShadowFromToken,
+  getFocusDefaultBorder,
 } from './theme.mixins';
 export { PALETTE } from './theme.constants';
 export { COLORS } from './theme.tokens';

diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.constants.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.constants.js
@@ -7,11 +7,17 @@ export const TOTAL_LAYOUT_HEADER_PROP_TYPES = {
   formTitlePlaceholder: PropTypes.string,
   compact: PropTypes.bool,
   icon: PropTypes.element,
+  onCancel: PropTypes.func,
+  children: PropTypes.node,
+  cancelable: PropTypes.bool,
+  direction: PropTypes.oneOf(['row', 'column']),
 };
 
 export const TOTAL_LAYOUT_HEADER_DEFAULT_PROPS = {
   title: '',
   icon: <Icon />,
   formTitlePlaceholder: '',
   compact: false,
+  cancelable: true,
+  direction: 'column',
 };
diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.js
@@ -18,10 +18,12 @@ const TotalLayoutHeader = ({
   children,
   onCancel,
   compact = false,
+  direction = 'column',
+  cancelable = true,
 }) => {
   const { watch } = useFormContext();
   const formValues = watch();
-  const { classes } = TotalLayoutHeaderStyles({ compact, children });
+  const { classes } = TotalLayoutHeaderStyles({ compact, direction, children });
 
   return (
     <Stack fullWidth fullHeight className={classes.headerContainer} direction="column">
@@ -54,14 +56,18 @@ const TotalLayoutHeader = ({
         </Stack>
         {/* CANCEL BUTTON */}
         <Stack alingItems="center">
-          <Button variant="link" type="button" leftIcon={<CrossIcon />} onClick={onCancel}>
-            Cancelar
-          </Button>
+          {/* CHILDREN */}
+          {!!children && direction === 'row' && children}
+          {cancelable && (
+            <Button variant="link" type="button" leftIcon={<CrossIcon />} onClick={onCancel}>
+              Cancelar
+            </Button>
+          )}
         </Stack>
       </Stack>
 
       {/* CHILDREN */}
-      {children && (
+      {!!children && direction === 'column' && (
         <Stack style={{ maxHeight: '40px', minHeight: '40px', marginTop: '12px' }}>
           {children}
         </Stack>

diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.stories.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.stories.js
@@ -5,6 +5,8 @@ import { TotalLayoutHeader } from './TotalLayoutHeader';
 import { TOTAL_LAYOUT_HEADER_DEFAULT_PROPS } from './TotalLayoutHeader.constants';
 import mdx from './TotalLayoutHeader.mdx';
 import { ContextContainer } from '../../ContextContainer';
+import { Stack } from '../../Stack';
+import { Button } from '../../../form/Button';
 
 export default {
   title: 'Atoms/Layout/TotalLayout/TotalLayoutHeader',
@@ -18,12 +20,25 @@ export default {
       // url: 'https://www.figma.com/file/kcSXz3QZFByFDTumNgzPpV/?node-id=2962%3A31342',
     },
   },
-  argTypes: {},
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['row', 'column'],
+    },
+  },
 };
 
 const MockComponent = () => (
   <div>MOCK COMPONENT CHILD OF TOTAL LAYOUT HEADER - RESPECTS PADDING</div>
 );
+
+const OtherMockComponent = () => (
+  <Stack>
+    <Button variant="link">Button A</Button>
+    <Button variant="link">Button B</Button>
+    <Button variant="link">Button C</Button>
+  </Stack>
+);
 const Template = (props) => {
   const formMethods = useForm();
 
@@ -32,12 +47,18 @@ const Template = (props) => {
       <ContextContainer
         id="container-for-storybook"
         divided
+        padded
         style={{ height: '100vh', width: '100wh', margin: '-16px', backgroundColor: '#f8f9fb' }}
       >
         <TotalLayoutHeader {...props} />
+
         <TotalLayoutHeader {...props}>
           <MockComponent />
         </TotalLayoutHeader>
+
+        <TotalLayoutHeader {...props} direction="row">
+          <OtherMockComponent />
+        </TotalLayoutHeader>
       </ContextContainer>
     </FormProvider>
   );

diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutHeader/TotalLayoutHeader.styles.js
@@ -1,32 +1,35 @@
 import { createStyles } from '@mantine/styles';
 
-const TotalLayoutHeaderStyles = createStyles((theme, { children, compact }) => ({
-  root: {},
-  headerContainer: {
-    padding: `${!children ? '16px' : '12px'} 24px`,
-    minHeight: !children ? '72px' : '120px',
-    maxHeight: !children ? '72px' : '120px',
-    backgroundColor: 'white',
-  },
-  header: { height: '40px', maxHeight: '40px' },
-  headerTools: { maxHeight: '40px', minHeight: '40px', marginTop: '12px' },
-  iconContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '1.4rem',
-    width: '32px',
-    height: '32px',
-    textAlign: 'center',
-    marginRight: '8px',
-  },
-  headerTitle: { fontSize: '18px', fontWeight: 600, lineHeight: '24px' },
-  headerSubtitle: {
-    fontSize: '18px',
-    fontWeight: 400,
-    lineHeight: '24px',
-    marginLeft: !compact && '40px',
-  },
-}));
+const TotalLayoutHeaderStyles = createStyles((theme, { children, direction, compact }) => {
+  const expandedHeader = direction === 'column' && children;
+  return {
+    root: {},
+    headerContainer: {
+      padding: `${!expandedHeader ? '16px' : '12px'} 24px`,
+      minHeight: !expandedHeader ? '72px' : '120px',
+      maxHeight: !expandedHeader ? '72px' : '120px',
+      backgroundColor: 'white',
+    },
+    header: { height: '40px', maxHeight: '40px' },
+    headerTools: { maxHeight: '40px', minHeight: '40px', marginTop: '12px' },
+    iconContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '1.4rem',
+      width: '32px',
+      height: '32px',
+      textAlign: 'center',
+      marginRight: '8px',
+    },
+    headerTitle: { fontSize: '18px', fontWeight: 600, lineHeight: '24px' },
+    headerSubtitle: {
+      fontSize: '18px',
+      fontWeight: 400,
+      lineHeight: '24px',
+      marginLeft: !compact && '40px',
+    },
+  };
+});
 
 export { TotalLayoutHeaderStyles };
diff --git a/packages/components/src/navigation/Anchor/Anchor.styles.js b/packages/components/src/navigation/Anchor/Anchor.styles.js
@@ -1,11 +1,20 @@
 import { createStyles } from '@mantine/styles';
 
-export const AnchorStyles = createStyles((theme, {}) => {
+const AnchorStyles = createStyles((theme) => {
+  const buttonTheme = theme.other.button;
   return {
     root: {
-      textDecoration: 'underline',
-      color: theme.colors.interactive01,
+      textDecoration: buttonTheme.textDecoration.underLine,
+      color: buttonTheme.content.color.secondary.default,
       cursor: 'pointer',
+      '&:hover': {
+        color: buttonTheme.content.color.primary.default,
+      },
+      '&:active': {
+        color: buttonTheme.content.color.secondary.pressed,
+      },
     },
   };
 });
+
+export { AnchorStyles };