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

…evelop * 'develop' of https://github.com/leemonade/bubbles: chore: version bump feat: Changes for dashboard.
leemonade · Jan 5, 2024 · 80ff04a · 80ff04a
2 parents d8faaf5 + 5e2212e
commit 80ff04a
Show file tree

Hide file tree

Showing 46 changed files with 489 additions and 282 deletions.
diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @bubbles-ui/calendars
 
+## 1.2.97
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.97
+  - @bubbles-ui/icons@1.2.97
+
 ## 1.2.96
 
 ### 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.96",
+  "version": "1.2.97",
   "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.96",
-    "@bubbles-ui/icons": "^1.2.96",
+    "@bubbles-ui/components": "^1.2.97",
+    "@bubbles-ui/icons": "^1.2.97",
     "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.97
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/icons@1.2.97
+
 ## 1.2.96
 
 ### 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.96",
+  "version": "1.2.97",
   "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.96",
+    "@bubbles-ui/icons": "^1.2.97",
     "@emotion/react": "^11.10.0",
     "@heroicons/react": "^1.0.5",
     "@hookform/resolvers": "^3.3.2",

diff --git a/packages/components/src/informative/Kanban/Kanban.styles.js b/packages/components/src/informative/Kanban/Kanban.styles.js
@@ -1,5 +1,4 @@
 import { createStyles } from '@mantine/styles';
-import { getFontProductive } from '../../theme.mixins';
 
 export const KanbanStyles = createStyles((theme, {}) => {
   return {
@@ -9,9 +8,9 @@ export const KanbanStyles = createStyles((theme, {}) => {
       height: '100%',
       maxHeight: '100%',
       padding: theme.spacing[2],
-      backgroundColor: '#EDEFF5',
+      backgroundColor: '#F8F9FB',
       gap: theme.spacing[2],
-      display: 'flex'
+      display: 'flex',
     },
     column: {
       height: '100%',
@@ -20,38 +19,40 @@ export const KanbanStyles = createStyles((theme, {}) => {
       width: '300px',
       minWidth: '300px',
       flexDirection: 'column',
-      backgroundColor: 'rgba(255, 255, 255, 0.3)',
-      borderRadius: theme.spacing[1]
+      backgroundColor: '#F2F4F8',
+      borderRadius: theme.spacing[1],
     },
     columnHeader: {
       paddingLeft: theme.spacing[4],
       paddingRight: theme.spacing[4],
       paddingTop: theme.spacing[3],
-      marginBottom: theme.spacing[4],
-      color: theme.colors.text05,
-      ...getFontProductive(theme.fontSizes['2'], 500),
+      color: '#4D5358',
+      fontSize: '16px',
+      fontWeight: 600,
+      lineHeight: '24px',
+      fontFamily: 'Albert Sans',
       display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
+      gap: theme.spacing[2],
+      alignItems: 'center',
     },
     scroll: {
-      padding: theme.spacing[2]
+      padding: theme.spacing[2],
     },
     listDraggingOver: {
       backgroundColor: '#EDEFF5',
-      borderRadius: 4
+      borderRadius: 4,
     },
     list: {
-      minHeight: '100px'
+      minHeight: '100px',
     },
     iconBig: {
       position: 'absolute',
       bottom: 20,
       left: 20,
       zIndex: 0,
       img: {
-        filter: 'brightness(0) invert(1)'
-      }
-    }
+        filter: 'brightness(0) invert(1)',
+      },
+    },
   };
 });
diff --git a/packages/components/src/informative/Kanban/components/Column.js b/packages/components/src/informative/Kanban/components/Column.js
@@ -3,7 +3,6 @@ import { Box } from '../../../layout/Box';
 import { KanbanStyles } from '../Kanban.styles';
 import { Draggable } from 'react-beautiful-dnd';
 import { QuoteList } from './QuoteList';
-import { Text } from '../../../typography';
 import { ImageLoader } from '../../../misc';
 import { ScrollArea } from '@mantine/core';
 
@@ -28,11 +27,9 @@ const Column = ({ value, index, isScrollable, isCombineEnabled, itemRender, icon
           ) : null}
           <Box className={classes.columnHeader}>
             <Box {...provided.dragHandleProps}>
-              <Text role="productive" strong>
-                {value.title}
-              </Text>
+              <Box>{value.title}</Box>
             </Box>
-            <Text color="primary">{value.cards.length}</Text>
+            <Box>{value.cards.length}</Box>
           </Box>
           <ScrollArea className={classes.scroll} style={{ width: '100%', height: '100%' }}>
             <QuoteList

diff --git a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js b/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js
@@ -19,8 +19,14 @@ const ProgressColorBar = ({
   labelLeft,
   labelRight,
 }) => {
-  const { classes } = ProgressColorBarStyles();
-
+  const { classes, theme } = ProgressColorBarStyles();
+  if (value < 25) {
+    color = theme.other.progress.content.color.phatic.negative;
+  } else if (value < 75) {
+    color = theme.other.progress.content.color.phatic.attention;
+  } else {
+    color = theme.other.progress.content.color.phatic.positive;
+  }
   return (
     <Box>
       {labelLeft && labelRight && (

diff --git a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.styles.js b/packages/components/src/informative/ProgressColorBar/ProgressColorBar.styles.js
@@ -1,16 +1,18 @@
 import { createStyles } from '@mantine/styles';
 import { pxToRem } from '../../theme.mixins';
 
-export const ProgressColorBarStyles = createStyles((theme) => ({
-  topLabelsContainer: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginBottom: pxToRem(8),
-  },
-  labels: {
-    color: theme.other.progress.content.color.text,
-    ...theme.other.progress.content.typo,
-  },
-}));
+export const ProgressColorBarStyles = createStyles((theme) => {
+  return {
+    topLabelsContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      marginBottom: pxToRem(8),
+    },
+    labels: {
+      color: theme.other.progress.content.color.text,
+      ...theme.other.progress.content.typo,
+    },
+  };
+});
 
 export default ProgressColorBarStyles;
diff --git a/packages/editors/CHANGELOG.md b/packages/editors/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @bubbles-ui/editors
 
+## 1.2.97
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.97
+  - @bubbles-ui/icons@1.2.97
+
 ## 1.2.96
 
 ### 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.96",
+  "version": "1.2.97",
   "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.96",
-    "@bubbles-ui/icons": "^1.2.96",
+    "@bubbles-ui/components": "^1.2.97",
+    "@bubbles-ui/icons": "^1.2.97",
     "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.97
+
+### Patch Changes
+
+- Versions bump
+- Updated dependencies
+  - @bubbles-ui/components@1.2.97
+  - @bubbles-ui/icons@1.2.97
+
 ## 1.2.96
 
 ### 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.96",
+  "version": "1.2.97",
   "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.96",
-    "@bubbles-ui/icons": "^1.2.96",
+    "@bubbles-ui/components": "^1.2.97",
+    "@bubbles-ui/icons": "^1.2.97",
     "@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.97
+
+### Patch Changes
+
+- Versions bump
+
 ## 1.2.96
 
 ### Patch Changes

diff --git a/packages/icons/optimized/outline/meeting-camera.svg b/packages/icons/optimized/outline/meeting-camera.svg
diff --git a/packages/icons/optimized/outline/plugin-comunica.svg b/packages/icons/optimized/outline/plugin-comunica.svg
diff --git a/packages/icons/optimized/outline/time-clock-circle.svg b/packages/icons/optimized/outline/time-clock-circle.svg
diff --git a/packages/icons/outline/MeetingCameraIcon.js b/packages/icons/outline/MeetingCameraIcon.js
@@ -2,16 +2,16 @@ const React = require("react");
 function MeetingCameraIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 23 15",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
     height: "1em"
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M8.5 3.507h-6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2ZM12.5 10.007l2.277 1.138a.5.5 0 0 0 .723-.447V5.316a.499.499 0 0 0-.723-.447L12.5 6.007"
+    strokeWidth: 1.3,
+    d: "M3.837 1h8.513s2.838 0 2.838 2.837v7.094s0 2.838-2.838 2.838H3.838S1 13.769 1 10.93V3.838S1 1 3.837 1ZM18.025 10.222l3.23 1.614a.71.71 0 0 0 1.026-.634V3.566a.708.708 0 0 0-1.026-.634l-3.23 1.615"
   }));
 }
 module.exports = MeetingCameraIcon;
diff --git a/packages/icons/outline/PluginComunicaIcon.js b/packages/icons/outline/PluginComunicaIcon.js
@@ -2,16 +2,19 @@ const React = require("react");
 function PluginComunicaIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 27 27",
+    viewBox: "0 0 23 23",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
     height: "1em"
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M13.5 1.5A12 12 0 0 0 3.267 19.77l-1.714 4.573a.857.857 0 0 0 .957 1.143l5.988-1.09a11.828 11.828 0 0 0 5 1.104 12 12 0 0 0 0-24v0ZM9.213 13.59a1.714 1.714 0 0 1-1.715 1.624h-.09a1.714 1.714 0 1 1 1.805-1.625v0Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.09a1.713 1.713 0 0 1-1.624-1.807 1.714 1.714 0 0 1 2.986-1.054 1.697 1.697 0 0 1 .443 1.236Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.092a1.713 1.713 0 0 1-1.051-2.987 1.73 1.73 0 0 1 1.234-.441 1.713 1.713 0 0 1 1.624 1.803Z"
+    strokeWidth: 1.3,
+    d: "M12.34 1a9.901 9.901 0 0 0-8.672 5.095 9.924 9.924 0 0 0 .245 10.062L1 22.281l6.118-2.917a9.918 9.918 0 0 0 14.784-5.714 9.94 9.94 0 0 0-1.63-8.71A9.925 9.925 0 0 0 12.34 1Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeWidth: 1.3,
+    d: "M12.35 11.286a.355.355 0 1 1 0-.71M12.35 11.286a.355.355 0 1 0 0-.71M8.094 11.286a.355.355 0 0 1 0-.71M8.094 11.286a.355.355 0 0 0 0-.71M16.606 11.286a.355.355 0 0 1 0-.71M16.606 11.286a.355.355 0 1 0 0-.71"
   }));
 }
 module.exports = PluginComunicaIcon;
diff --git a/packages/icons/outline/TimeClockCircleIcon.js b/packages/icons/outline/TimeClockCircleIcon.js
@@ -2,16 +2,16 @@ const React = require("react");
 function TimeClockCircleIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 24 24",
+    viewBox: "0 0 22 22",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
     height: "1em"
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M1.5 12a10.5 10.5 0 1 0 21 0 10.5 10.5 0 0 0-21 0v0ZM12 12V8.25M12 12l4.687 4.688"
+    strokeWidth: 1.3,
+    d: "M1 10.931a9.931 9.931 0 1 0 19.862 0 9.931 9.931 0 0 0-19.862 0ZM10.931 10.931V7.384M10.931 10.931l4.433 4.434"
   }));
 }
 module.exports = TimeClockCircleIcon;
diff --git a/packages/icons/outline/esm/MeetingCameraIcon.js b/packages/icons/outline/esm/MeetingCameraIcon.js
@@ -2,16 +2,16 @@ import * as React from "react";
 function MeetingCameraIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 23 15",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
     height: "1em"
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M8.5 3.507h-6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2ZM12.5 10.007l2.277 1.138a.5.5 0 0 0 .723-.447V5.316a.499.499 0 0 0-.723-.447L12.5 6.007"
+    strokeWidth: 1.3,
+    d: "M3.837 1h8.513s2.838 0 2.838 2.837v7.094s0 2.838-2.838 2.838H3.838S1 13.769 1 10.93V3.838S1 1 3.837 1ZM18.025 10.222l3.23 1.614a.71.71 0 0 0 1.026-.634V3.566a.708.708 0 0 0-1.026-.634l-3.23 1.615"
   }));
 }
 export default MeetingCameraIcon;