Merge branch 'develop' of https://github.com/leemonade/bubbles into d…

…evelop
leemonade · Jan 18, 2024 · d5c41eb · d5c41eb
2 parents 61d0d3b + d54700d
commit d5c41eb
Show file tree

Hide file tree

Showing 62 changed files with 1,069 additions and 160 deletions.
diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md
@@ -1,5 +1,68 @@
 # @bubbles-ui/calendars
 
+## 1.2.125
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.125
+  - @bubbles-ui/icons@1.2.125
+
+## 1.2.124
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.124
+  - @bubbles-ui/icons@1.2.124
+
+## 1.2.123
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.123
+  - @bubbles-ui/icons@1.2.123
+
+## 1.2.122
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.122
+  - @bubbles-ui/icons@1.2.122
+
+## 1.2.121
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.121
+  - @bubbles-ui/icons@1.2.121
+
+## 1.2.120
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.120
+  - @bubbles-ui/icons@1.2.120
+
+## 1.2.119
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.119
+  - @bubbles-ui/icons@1.2.119
+
 ## 1.2.118
 
 ### Patch Changes

diff --git a/packages/calendars/package.json b/packages/calendars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bubbles-ui/calendars",
-  "version": "1.2.118",
+  "version": "1.2.125",
   "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -59,8 +59,8 @@
     "rrule": "^2.6.8"
   },
   "peerDependencies": {
-    "@bubbles-ui/components": "^1.2.118",
-    "@bubbles-ui/icons": "^1.2.118",
+    "@bubbles-ui/components": "^1.2.125",
+    "@bubbles-ui/icons": "^1.2.125",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "webpack": "*"

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,61 @@
 # @bubbles-ui/components
 
+## 1.2.125
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.125
+
+## 1.2.124
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.124
+
+## 1.2.123
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.123
+
+## 1.2.122
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.122
+
+## 1.2.121
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.121
+
+## 1.2.120
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.120
+
+## 1.2.119
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.119
+
 ## 1.2.118
 
 ### Patch Changes

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bubbles-ui/components",
-  "version": "1.2.118",
+  "version": "1.2.125",
   "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -61,7 +61,7 @@
     "chromatic": "npx chromatic --project-token=7b10302a7b6b --build-script-name=build:storybook:raw"
   },
   "dependencies": {
-    "@bubbles-ui/icons": "^1.2.118",
+    "@bubbles-ui/icons": "^1.2.125",
     "@emotion/react": "^11.10.0",
     "@heroicons/react": "^1.0.5",
     "@hookform/resolvers": "^3.3.2",

diff --git a/packages/components/src/form/FileUpload/FileUpload.js b/packages/components/src/form/FileUpload/FileUpload.js
@@ -1,15 +1,21 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Group, Text } from '@mantine/core';
 import { Dropzone as MantineDropzone } from '@mantine/dropzone';
-import { DeleteBinIcon, SynchronizeArrowIcon } from '@bubbles-ui/icons/outline/';
+import {
+  DeleteBinIcon,
+  SynchronizeArrowIcon,
+  RemoveCircleIcon,
+  CheckCircleIcon,
+} from '@bubbles-ui/icons/outline/';
 import { isEmpty, isFunction, isString } from 'lodash';
 import { FileUploadStyles } from './FileUpload.styles';
 import { Stack, Box } from '../../layout';
 import { FileItemDisplay } from '../../informative/FileItemDisplay';
 import { Alert } from '../../feedback/Alert';
 import { InputWrapper, INPUT_WRAPPER_PROP_TYPES } from '../InputWrapper';
 import { Button } from '../Button';
+import { Loader } from '../../../lib/feedback/Loader/Loader';
 
 export const FILE_UPLOAD_DEFAULT_PROPS = {
   disabled: false,
@@ -94,7 +100,7 @@ const FileUpload = ({
     }
   }, [initialFiles]);
 
-  const { classes, cx } = FileUploadStyles(
+  const { classes, theme } = FileUploadStyles(
     { disabled, single, files, hasError },
     { name: 'FileUpload' },
   );
@@ -151,10 +157,55 @@ const FileUpload = ({
         </Alert>
       )}
       {files.length > 0 && (
-        <Stack className={classes.fileList} direction={'column'}>
+        <Stack spacing={4} className={classes.fileList} direction={'column'}>
           {files.map((file, index) => (
-            <Stack key={index} alignItems="center" spacing={8} className={classes.droppedFile}>
-              <FileItemDisplay iconSize={30} filename={file.name} thumbnailUrl={getFileUrl(file)} />
+            <Stack key={index} alignItems="center" spacing={4} className={classes.droppedFile}>
+              <Stack
+                className={classes.fileItemDisplay}
+                spacing={4}
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <FileItemDisplay
+                  iconSize={20}
+                  filename={file.name}
+                  thumbnailUrl={getFileUrl(file)}
+                />
+                {file.status === 'loading' && (
+                  <Box sx={{ position: 'relative', width: 20, height: 20, minWidth: 20 }}>
+                    <Box
+                      sx={{
+                        position: 'absolute',
+                        left: -1,
+                        top: -7.5,
+                        width: 45,
+
+                        height: 40,
+                      }}
+                    >
+                      <Loader />
+                    </Box>
+                  </Box>
+                )}
+                {file.status === 'success' && (
+                  <Box sx={{ width: 20, height: 20 }}>
+                    <CheckCircleIcon
+                      color={theme.other.core.color.success['500']}
+                      width={20}
+                      height={20}
+                    />
+                  </Box>
+                )}
+                {file.status === 'error' && (
+                  <Box sx={{ width: 20, height: 20 }}>
+                    <RemoveCircleIcon
+                      color={theme.other.core.color.danger['500']}
+                      width={20}
+                      height={20}
+                    />
+                  </Box>
+                )}
+              </Stack>
               <Box noFlex>
                 <Button
                   onClick={() => removeFile(index)}

diff --git a/packages/components/src/form/FileUpload/FileUpload.stories.js b/packages/components/src/form/FileUpload/FileUpload.stories.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { Box } from '@mantine/core';
-import { FileUpload, FILE_UPLOAD_DEFAULT_PROPS } from './FileUpload';
-import mdx from './FileUpload.mdx';
 import { MIME_TYPES } from '@mantine/dropzone';
 import { CloudUploadIcon } from '@bubbles-ui/icons/outline';
+import { FileUpload, FILE_UPLOAD_DEFAULT_PROPS } from './FileUpload';
+import mdx from './FileUpload.mdx';
 
 export default {
   title: 'Molecules/Form/FileUpload',
@@ -20,12 +20,11 @@ export default {
   argTypes: {
     onChange: { action: 'File dropped' },
     accept: { options: MIME_TYPES, control: { type: 'multi-select' } },
+    status: { options: ['error', 'loading', 'success'], control: { type: 'select' } },
   },
 };
 
-const Template = ({ children, ...props }) => {
-  return <FileUpload {...props}>{children}</FileUpload>;
-};
+const Template = ({ children, ...props }) => <FileUpload {...props}>{children}</FileUpload>;
 
 export const Playground = Template.bind({});
 
@@ -36,3 +35,27 @@ Playground.args = {
   subtitle: 'or drop here a file from your computer',
   errorMessage: { title: 'Error', message: 'File was rejected' },
 };
+
+export const WithLoaders = Template.bind({});
+
+WithLoaders.args = {
+  ...FILE_UPLOAD_DEFAULT_PROPS,
+  initialFiles: [
+    {
+      name: 'My document.docx',
+      status: 'success',
+    },
+    {
+      name: 'My awesome image.svg',
+      status: 'loading',
+    },
+    {
+      name: 'My boring pdf.pdf',
+      status: 'error',
+    },
+  ],
+  icon: <CloudUploadIcon height={32} width={32} />,
+  title: 'Click to browse your file',
+  subtitle: 'or drop here a file from your computer',
+  errorMessage: { title: 'Error', message: 'File was rejected' },
+};
diff --git a/packages/components/src/form/FileUpload/FileUpload.styles.js b/packages/components/src/form/FileUpload/FileUpload.styles.js
@@ -72,6 +72,7 @@ const FileUploadStyles = createStyles((theme, { disabled, single, files, hasErro
       color: dropzoneTheme.content.color['default--subtle'],
     },
     droppedFile: {
+      minWidth: 500,
       // padding: `${pxToRem(28)} ${pxToRem(16)} ${pxToRem(28)} ${pxToRem(28)}`,
     },
     fileList: {
@@ -85,6 +86,15 @@ const FileUploadStyles = createStyles((theme, { disabled, single, files, hasErro
     uploadButton: {
       marginTop: pxToRem(theme.spacing[4]),
     },
+    fileItemDisplay: {
+      ...theme.other.global.content.typo.body['sm--semiBold'],
+      padding: '18px 8px',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: theme.other.global.border.color.line.muted,
+      borderRadius: 4,
+      minWidth: '100%',
+    },
   };
 });
 

diff --git a/packages/components/src/form/Input/Input.js b/packages/components/src/form/Input/Input.js
@@ -22,7 +22,10 @@ const Input = forwardRef(
   ) => {
     const hasIcon = !!icon;
     const size = INPUT_SIZES.includes(sizeProp) ? sizeProp : 'md';
-    const { classes, cx } = InputStyles({ size, disabled, hasIcon });
+    const { classes, cx } = InputStyles(
+      { size, disabled, hasIcon, hasRightSection: !!rightSection },
+      { name: 'Input' },
+    );
 
     return (
       <MantineInput

diff --git a/packages/components/src/form/Input/Input.styles.js b/packages/components/src/form/Input/Input.styles.js
@@ -1,13 +1,19 @@
 import { createStyles } from '@mantine/styles';
 import { getInputStyle, getInputSizes } from '../mixins/fieldStyles.mixins';
 
-const InputStyles = createStyles((theme, { size, disabled, hasIcon }) => {
+const InputStyles = createStyles((theme, { size, disabled, hasIcon, hasRightSection }) => {
   const inputTheme = theme.other.input;
+  const inputSizes = getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon);
+
+  if (hasRightSection) {
+    inputSizes.paddingRight = 40;
+  }
+
   return {
     root: {},
     input: {
-      ...getInputSizes(size || 'md', inputTheme.spacing.padding, hasIcon),
       ...getInputStyle(inputTheme, theme.other.global, disabled),
+      ...inputSizes,
       height: 'auto',
       minHeight: 40,
     },

diff --git a/packages/components/src/form/PasswordInput/PasswordInput.styles.js b/packages/components/src/form/PasswordInput/PasswordInput.styles.js
@@ -10,6 +10,7 @@ const PasswordInputStyles = createStyles((theme, { size, hasIcon, disabled }) =>
     input: {
       ...inputSizes,
       ...inputStyles,
+      paddingRight: 40,
       minHeight: 40,
       display: 'flex',
       alignItems: 'center',