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

…evelop
leemonade · Jan 22, 2024 · 8e63a77 · 8e63a77
2 parents d4fb705 + d774516
commit 8e63a77
Show file tree

Hide file tree

Showing 83 changed files with 931 additions and 2,808 deletions.
diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md
@@ -1,5 +1,95 @@
 # @bubbles-ui/calendars
 
+## 1.2.135
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.135
+  - @bubbles-ui/icons@1.2.135
+
+## 1.2.134
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.134
+  - @bubbles-ui/icons@1.2.134
+
+## 1.2.133
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.133
+  - @bubbles-ui/icons@1.2.133
+
+## 1.2.132
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.132
+  - @bubbles-ui/icons@1.2.132
+
+## 1.2.131
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.131
+  - @bubbles-ui/icons@1.2.131
+
+## 1.2.130
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.130
+  - @bubbles-ui/icons@1.2.130
+
+## 1.2.129
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.129
+  - @bubbles-ui/icons@1.2.129
+
+## 1.2.128
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.128
+  - @bubbles-ui/icons@1.2.128
+
+## 1.2.127
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.127
+  - @bubbles-ui/icons@1.2.127
+
+## 1.2.126
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.126
+  - @bubbles-ui/icons@1.2.126
+
 ## 1.2.125
 
 ### 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.125",
+  "version": "1.2.135",
   "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.125",
-    "@bubbles-ui/icons": "^1.2.125",
+    "@bubbles-ui/components": "^1.2.135",
+    "@bubbles-ui/icons": "^1.2.135",
     "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,85 @@
 # @bubbles-ui/components
 
+## 1.2.135
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.135
+
+## 1.2.134
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.134
+
+## 1.2.133
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.133
+
+## 1.2.132
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.132
+
+## 1.2.131
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.131
+
+## 1.2.130
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.130
+
+## 1.2.129
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.129
+
+## 1.2.128
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.128
+
+## 1.2.127
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.127
+
+## 1.2.126
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.126
+
 ## 1.2.125
 
 ### 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.125",
+  "version": "1.2.135",
   "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.125",
+    "@bubbles-ui/icons": "^1.2.135",
     "@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,14 +1,10 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { 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,
-  RemoveCircleIcon,
-  CheckCircleIcon,
-} from '@bubbles-ui/icons/outline/';
-import { isEmpty, isFunction, isString } from 'lodash';
+import { SynchronizeArrowIcon, RemoveCircleIcon, CheckCircleIcon } from '@bubbles-ui/icons/outline';
+import { DeleteBinIcon } from '@bubbles-ui/icons/solid';
+import { isEmpty, isFunction } from 'lodash';
 import { FileUploadStyles } from './FileUpload.styles';
 import { Stack, Box } from '../../layout';
 import { FileItemDisplay } from '../../informative/FileItemDisplay';
@@ -17,6 +13,16 @@ import { InputWrapper, INPUT_WRAPPER_PROP_TYPES } from '../InputWrapper';
 import { Button } from '../Button';
 import { Loader } from '../../../lib/feedback/Loader/Loader';
 
+function getRemoveButtonLabel(label) {
+  // return label or "Remove" in brower language
+  return label || navigator.language === 'es' ? 'Borrar' : 'Remove';
+}
+
+function getUploadButtonLabel(label) {
+  // return label or "Upload" in brower language
+  return label || navigator.language === 'es' ? 'Subir' : 'Upload';
+}
+
 export const FILE_UPLOAD_DEFAULT_PROPS = {
   disabled: false,
   loading: false,
@@ -27,6 +33,8 @@ export const FILE_UPLOAD_DEFAULT_PROPS = {
   initialFiles: [],
   inputWrapperProps: {},
   useAria: true,
+  fullWidth: false,
+  labels: {},
 };
 
 export const FILE_UPLOAD_PROP_TYPES = {
@@ -42,12 +50,17 @@ export const FILE_UPLOAD_PROP_TYPES = {
     title: PropTypes.string,
     message: PropTypes.string,
   }),
+  labels: PropTypes.shape({
+    removeButton: PropTypes.string,
+    uploadButton: PropTypes.string,
+  }),
   hideUploadButton: PropTypes.bool,
   single: PropTypes.bool,
   inputWrapperProps: PropTypes.shape(INPUT_WRAPPER_PROP_TYPES),
   initialFiles: PropTypes.arrayOf(PropTypes.object),
   accept: PropTypes.arrayOf(PropTypes.string),
   useAria: PropTypes.bool,
+  fullWidth: PropTypes.bool,
 };
 
 const FileUpload = ({
@@ -66,6 +79,8 @@ const FileUpload = ({
   initialFiles,
   accept,
   useAria,
+  labels,
+  fullWidth,
   ...props
 }) => {
   const openRef = useRef();
@@ -101,7 +116,7 @@ const FileUpload = ({
   }, [initialFiles]);
 
   const { classes, theme } = FileUploadStyles(
-    { disabled, single, files, hasError },
+    { disabled, single, files, hasError, fullWidth },
     { name: 'FileUpload' },
   );
 
@@ -123,6 +138,7 @@ const FileUpload = ({
           {...props}
           accept={accept}
           loading={loading}
+          disabled={disabled || loading}
           multiple={multipleUpload}
           onDrop={onDropHandler}
           classNames={classes}
@@ -159,7 +175,12 @@ const FileUpload = ({
       {files.length > 0 && (
         <Stack spacing={4} className={classes.fileList} direction={'column'}>
           {files.map((file, index) => (
-            <Stack key={index} alignItems="center" spacing={4} className={classes.droppedFile}>
+            <Stack
+              key={`${file.name}-${index}`}
+              alignItems="center"
+              spacing={4}
+              className={classes.droppedFile}
+            >
               <Stack
                 className={classes.fileItemDisplay}
                 spacing={4}
@@ -206,22 +227,27 @@ const FileUpload = ({
                   </Box>
                 )}
               </Stack>
-              <Box noFlex>
-                <Button
-                  onClick={() => removeFile(index)}
-                  variant="link"
-                  leftIcon={<DeleteBinIcon height={16} width={16} />}
-                >
-                  Borrar
-                </Button>
-              </Box>
+              {!disabled && (
+                <Box noFlex>
+                  <Button
+                    disabled={disabled}
+                    onClick={() => removeFile(index)}
+                    variant="link"
+                    leftIcon={<DeleteBinIcon height={18} width={18} />}
+                  >
+                    {getRemoveButtonLabel(labels?.removeButton)}
+                  </Button>
+                </Box>
+              )}
             </Stack>
           ))}
         </Stack>
       )}
       {!hideUploadButton && (
         <Box className={classes.uploadButton}>
-          <Button onClick={() => openRef.current()}>Upload</Button>
+          <Button onClick={() => openRef.current()} disabled={disabled || loading}>
+            {getUploadButtonLabel(labels?.uploadButton)}
+          </Button>
         </Box>
       )}
     </Box>

diff --git a/packages/components/src/form/FileUpload/FileUpload.styles.js b/packages/components/src/form/FileUpload/FileUpload.styles.js
@@ -29,7 +29,7 @@ const getDisabledStyles = (disabled, theme) => {
   };
 };
 
-const FileUploadStyles = createStyles((theme, { disabled, single, files, hasError }) => {
+const FileUploadStyles = createStyles((theme, { disabled, single, files, hasError, fullWidth }) => {
   const hideDropzone = single && files.length > 0;
   const dropzoneTheme = theme.other.dropzone;
 
@@ -72,13 +72,12 @@ const FileUploadStyles = createStyles((theme, { disabled, single, files, hasErro
       color: dropzoneTheme.content.color['default--subtle'],
     },
     droppedFile: {
-      minWidth: 500,
+      // minWidth: 500,
       // padding: `${pxToRem(28)} ${pxToRem(16)} ${pxToRem(28)} ${pxToRem(28)}`,
     },
     fileList: {
       marginTop: !hideDropzone && pxToRem(theme.spacing[4]),
-      // border: `1px solid ${theme.colors.interactive01h}`,
-      // borderRadius: pxToRem(2),
+      width: 'min-content',
     },
     errorAlert: {
       marginTop: pxToRem(theme.spacing[4]),

diff --git a/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js b/packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js
@@ -115,6 +115,7 @@ const ImagePreviewInput = ({
             style={{ ...previewStyle }}
             useAria={useAria}
             bordered
+            forceImage
           />
           {!readonly && !disabled ? (
             <Box noFlex>