From 713c37eeaab4349c6d427335a32a6453ecdbc736 Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Wed, 7 Feb 2024 13:09:44 +0100 Subject: [PATCH 1/2] fix(ScoreFrontStage): refactor styles and colors --- .../src/feedback/ScoreFronstage/Item/Item.js | 2 +- .../src/feedback/ScoreFronstage/Item/Item.styles.js | 6 +++--- .../src/feedback/ScoreFronstage/ScoreFronstage.js | 2 ++ .../feedback/ScoreFronstage/ScoreFronstage.styles.js | 6 ++++-- .../src/informative/Avatar/Avatar.constants.js | 2 ++ packages/components/src/informative/Avatar/Avatar.js | 10 +++++++++- .../components/src/informative/Avatar/Avatar.styles.js | 6 +++--- 7 files changed, 24 insertions(+), 10 deletions(-) diff --git a/packages/components/src/feedback/ScoreFronstage/Item/Item.js b/packages/components/src/feedback/ScoreFronstage/Item/Item.js index 698c6f105..c737e05da 100644 --- 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 index 147303af8..d9945e6ae 100644 --- 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 index b536bc4d1..2e8d2e7b7 100644 --- 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 ? : null} showIconAndImage + subjectColor={subjectColor} /> diff --git a/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.styles.js b/packages/components/src/feedback/ScoreFronstage/ScoreFronstage.styles.js index 99ef3ce87..37d49ed89 100644 --- 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 index c83639463..c81ca56a9 100644 --- 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 index e2972a9ee..88ab90c11 100644 --- 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 ( diff --git a/packages/components/src/informative/Avatar/Avatar.styles.js b/packages/components/src/informative/Avatar/Avatar.styles.js index de03a3e0f..e865c9d38 100644 --- 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( }, }, }; - } + }, ); From 82e1fa86c8b96922604aaa738bea323203344cc8 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Wed, 7 Feb 2024 12:20:55 +0000 Subject: [PATCH 2/2] chore: version bump --- packages/calendars/CHANGELOG.md | 9 +++++++++ packages/calendars/package.json | 6 +++--- packages/components/CHANGELOG.md | 8 ++++++++ packages/components/package.json | 4 ++-- packages/editors/CHANGELOG.md | 9 +++++++++ packages/editors/package.json | 6 +++--- packages/extras/CHANGELOG.md | 9 +++++++++ packages/extras/package.json | 6 +++--- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- packages/leemons/CHANGELOG.md | 11 +++++++++++ packages/leemons/package.json | 10 +++++----- packages/notifications/CHANGELOG.md | 9 +++++++++ packages/notifications/package.json | 6 +++--- 14 files changed, 81 insertions(+), 20 deletions(-) diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md index 8574ac284..3626806d1 100644 --- 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 index dd7563525..91805d8bf 100644 --- 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 index e23721fc0..2620a0821 100644 --- 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 index bb31ae9c4..8f33c337d 100644 --- 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/editors/CHANGELOG.md b/packages/editors/CHANGELOG.md index 04c59e788..60deb6b76 100644 --- 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 index d3fc85f92..f2c6c58a3 100644 --- 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 index c974bb71c..a9e8dfef6 100644 --- 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 index 915b28eb2..b2aee4fc8 100644 --- 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 index 19b49d3e7..cafda2060 100644 --- 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 index 8bb9a4819..22ca3d576 100644 --- 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 index 57bdce444..763ef7245 100644 --- 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 index 55874c141..751e74e3c 100644 --- 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 index ac9c6b5fa..16899b81f 100644 --- 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 index 981429db6..8a2894416 100644 --- 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",