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

…evelop * 'develop' of https://github.com/leemonade/bubbles: chore: version bump fix(ScoreFrontStage): refactor styles and colors
leemonade · Feb 7, 2024 · f685eb0 · f685eb0
2 parents 465cc65 + 82e1fa8
commit f685eb0
Show file tree

Hide file tree

Showing 21 changed files with 105 additions and 30 deletions.
diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @bubbles-ui/calendars
 
+## 1.2.153
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.153
+  - @bubbles-ui/icons@1.2.153
+
 ## 1.2.152
 
 ### 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.152",
+  "version": "1.2.153",
   "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.152",
-    "@bubbles-ui/icons": "^1.2.152",
+    "@bubbles-ui/components": "^1.2.153",
+    "@bubbles-ui/icons": "^1.2.153",
     "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,13 @@
 # @bubbles-ui/components
 
+## 1.2.153
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.153
+
 ## 1.2.152
 
 ### 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.152",
+  "version": "1.2.153",
   "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.152",
+    "@bubbles-ui/icons": "^1.2.153",
     "@emotion/react": "^11.10.0",
     "@heroicons/react": "^1.0.5",
     "@hookform/resolvers": "^3.3.2",

diff --git a/packages/components/src/feedback/ScoreFronstage/Item/Item.js b/packages/components/src/feedback/ScoreFronstage/Item/Item.js
@@ -1,8 +1,8 @@
 import React from 'react';
+import { isDate, isFunction } from 'lodash';
 import { ItemStyles } from './Item.styles';
 import { ITEM_DEFAULT_PROPS, ITEM_PROP_TYPES } from './Item.constants';
 import { Box } from '../../../layout';
-import { isDate, isFunction } from 'lodash';
 import { Badge } from '../Badge';
 
 const Item = ({

diff --git a/packages/components/src/feedback/ScoreFronstage/Item/Item.styles.js b/packages/components/src/feedback/ScoreFronstage/Item/Item.styles.js
@@ -1,12 +1,10 @@
 import { createStyles } from '@mantine/styles';
-import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../../theme.mixins';
 
-export const ItemStyles = createStyles((theme, {}) => {
+const ItemStyles = createStyles((theme, {}) => {
   const scoreTheme = theme.other.score;
   return {
     root: {
       borderTop: `${scoreTheme.border.width} solid ${scoreTheme.border.color.neutral.emphasis}`,
-      backgroundColor: scoreTheme.background.color.neutral.subtle,
       padding: scoreTheme.spacing.padding.md,
       '&:hover': {
         backgroundColor: scoreTheme.background.color.neutral.hover,
@@ -41,3 +39,5 @@ export const ItemStyles = createStyles((theme, {}) => {
     },
   };
 });
+
+export { ItemStyles };
diff --git a/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.js b/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.js
@@ -22,6 +22,7 @@ const ScoreFronstage = ({
   maxGrade,
   values,
   locale,
+  subjectColor,
   ...props
 }) => {
   const { classes } = ScoreFronstageStyles({}, { name: 'ScoreFronstage' });
@@ -34,6 +35,7 @@ const ScoreFronstage = ({
           size="lg"
           icon={icon ? <ImageLoader src={icon} height={'100%'} forceImage /> : null}
           showIconAndImage
+          subjectColor={subjectColor}
         />
       </Box>
       <Box className={classes.header}>

diff --git a/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.styles.js b/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.styles.js
@@ -1,6 +1,6 @@
 import { createStyles } from '@mantine/styles';
 
-export const ScoreFronstageStyles = createStyles((theme, {}) => {
+const ScoreFronstageStyles = createStyles((theme, {}) => {
   const scoreTheme = theme.other.score;
   const paddingLg = scoreTheme.spacing.padding.lg;
   return {
@@ -18,7 +18,7 @@ export const ScoreFronstageStyles = createStyles((theme, {}) => {
     },
     header: {
       padding: `56px ${paddingLg} ${paddingLg} ${paddingLg}`,
-      backgroundColor: scoreTheme.background.color.neutral.subtle,
+      // backgroundColor: scoreTheme.background.color.neutral.subtle,
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
@@ -42,3 +42,5 @@ export const ScoreFronstageStyles = createStyles((theme, {}) => {
     },
   };
 });
+
+export { ScoreFronstageStyles };
diff --git a/packages/components/src/informative/Avatar/Avatar.constants.js b/packages/components/src/informative/Avatar/Avatar.constants.js
@@ -20,6 +20,7 @@ export const AVATAR_DEFAULT_PROPS = {
   size: 'md',
   state: 'normal',
   showIconAndImage: false,
+  subjectColor: '#96D47F',
 };
 export const AVATAR_PROP_TYPES = {
   image: PropTypes.string,
@@ -32,4 +33,5 @@ export const AVATAR_PROP_TYPES = {
   fullName: PropTypes.string,
   icon: PropTypes.any,
   alt: PropTypes.string,
+  subjectColor: PropTypes.string,
 };
diff --git a/packages/components/src/informative/Avatar/Avatar.js b/packages/components/src/informative/Avatar/Avatar.js
@@ -16,6 +16,7 @@ const Avatar = forwardRef(
       image,
       icon,
       color,
+      subjectColor,
       initials,
       fullName,
       radius = true,
@@ -43,7 +44,14 @@ const Avatar = forwardRef(
       }
     }
 
-    const { classes, theme } = AvatarStyles({ radius, color, size, state, activityStatus });
+    const { classes, theme } = AvatarStyles({
+      radius,
+      color,
+      size,
+      state,
+      activityStatus,
+      subjectColor,
+    });
 
     return (
       <Box className={classes.avatarWrapper}>

diff --git a/packages/components/src/informative/Avatar/Avatar.styles.js b/packages/components/src/informative/Avatar/Avatar.styles.js
@@ -64,7 +64,7 @@ const getIconWrapperStyles = (size, theme, badgeTheme) => {
 };
 
 export const AvatarStyles = createStyles(
-  (theme, { size, radius, color, state, activityStatus }) => {
+  (theme, { size, radius, color, state, activityStatus, subjectColor }) => {
     const avatarTheme = theme.other.avatar;
     const badgeTheme = theme.other.badge;
 
@@ -89,7 +89,7 @@ export const AvatarStyles = createStyles(
       iconWrapper: {
         display: size === 'sm' && 'none',
         boxSizing: 'content-box',
-        backgroundColor: badgeTheme.background.color.primary.default,
+        backgroundColor: subjectColor,
         borderRadius: radius ? badgeTheme.border.radius : 0,
         position: 'absolute',
         ...getIconWrapperStyles(size, theme, badgeTheme),
@@ -100,5 +100,5 @@ export const AvatarStyles = createStyles(
         },
       },
     };
-  }
+  },
 );
diff --git a/packages/editors/CHANGELOG.md b/packages/editors/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @bubbles-ui/editors
 
+## 1.2.153
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.153
+  - @bubbles-ui/icons@1.2.153
+
 ## 1.2.152
 
 ### Patch Changes

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

diff --git a/packages/extras/CHANGELOG.md b/packages/extras/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @bubbles-ui/extras
 
+## 1.2.153
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.153
+  - @bubbles-ui/icons@1.2.153
+
 ## 1.2.152
 
 ### Patch Changes

diff --git a/packages/extras/package.json b/packages/extras/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bubbles-ui/extras",
-  "version": "1.2.152",
+  "version": "1.2.153",
   "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -53,8 +53,8 @@
     "swiper": "^8.1.4"
   },
   "peerDependencies": {
-    "@bubbles-ui/components": "^1.2.152",
-    "@bubbles-ui/icons": "^1.2.152",
+    "@bubbles-ui/components": "^1.2.153",
+    "@bubbles-ui/icons": "^1.2.153",
     "@mantine/core": "5.2.4",
     "@mantine/hooks": "5.2.4",
     "react": "^17.0.1",

diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @bubbles-ui/icons
 
+## 1.2.153
+
+### Patch Changes
+
+- Versions bump
+
 ## 1.2.152
 
 ### Patch Changes

diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bubbles-ui/icons",
-  "version": "1.2.152",
+  "version": "1.2.153",
   "description": "The Bubbles Design System icons library.",
   "license": "MIT",
   "repository": {

diff --git a/packages/leemons/CHANGELOG.md b/packages/leemons/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @bubbles-ui/leemons
 
+## 1.2.153
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.153
+  - @bubbles-ui/calendars@1.2.153
+  - @bubbles-ui/editors@1.2.153
+  - @bubbles-ui/icons@1.2.153
+
 ## 1.2.152
 
 ### Patch Changes

diff --git a/packages/leemons/package.json b/packages/leemons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bubbles-ui/leemons",
-  "version": "1.2.152",
+  "version": "1.2.153",
   "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -72,10 +72,10 @@
     "ajv": "6.12.6"
   },
   "peerDependencies": {
-    "@bubbles-ui/calendars": "^1.2.152",
-    "@bubbles-ui/components": "^1.2.152",
-    "@bubbles-ui/editors": "^1.2.152",
-    "@bubbles-ui/icons": "^1.2.152",
+    "@bubbles-ui/calendars": "^1.2.153",
+    "@bubbles-ui/components": "^1.2.153",
+    "@bubbles-ui/editors": "^1.2.153",
+    "@bubbles-ui/icons": "^1.2.153",
     "dayjs": "^1.10.7",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

diff --git a/packages/notifications/CHANGELOG.md b/packages/notifications/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @bubbles-ui/notifications
 
+## 1.2.153
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.153
+  - @bubbles-ui/icons@1.2.153
+
 ## 1.2.152
 
 ### Patch Changes

diff --git a/packages/notifications/package.json b/packages/notifications/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bubbles-ui/notifications",
-  "version": "1.2.152",
+  "version": "1.2.153",
   "description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,8 +52,8 @@
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "@bubbles-ui/components": "^1.2.152",
-    "@bubbles-ui/icons": "^1.2.152",
+    "@bubbles-ui/components": "^1.2.153",
+    "@bubbles-ui/icons": "^1.2.153",
     "@mantine/core": "5.2.4",
     "@mantine/hooks": "5.2.4",
     "react": "^17.0.1",