Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/leemonade/bubbles into d…
Browse files Browse the repository at this point in the history
…evelop
  • Loading branch information
MIGUELez11 committed Jan 19, 2024
2 parents 9933b53 + b8711c3 commit a35036c
Show file tree
Hide file tree
Showing 58 changed files with 1,096 additions and 147 deletions.
45 changes: 45 additions & 0 deletions packages/calendars/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,50 @@
# @bubbles-ui/calendars

## 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

- 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
Expand Down
6 changes: 3 additions & 3 deletions packages/calendars/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bubbles-ui/calendars",
"version": "1.2.121",
"version": "1.2.126",
"description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
"main": "lib/index.js",
"module": "es/index.js",
Expand Down Expand Up @@ -59,8 +59,8 @@
"rrule": "^2.6.8"
},
"peerDependencies": {
"@bubbles-ui/components": "^1.2.121",
"@bubbles-ui/icons": "^1.2.121",
"@bubbles-ui/components": "^1.2.126",
"@bubbles-ui/icons": "^1.2.126",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "*"
Expand Down
40 changes: 40 additions & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,45 @@
# @bubbles-ui/components

## 1.2.126

### Patch Changes

- Versions bump
- Updated dependencies
- @bubbles-ui/icons@1.2.126

## 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
Expand Down
4 changes: 2 additions & 2 deletions packages/components/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bubbles-ui/components",
"version": "1.2.121",
"version": "1.2.126",
"description": "The Bubbles Design System is Leemonade's open-source design system for products and experiences.",
"main": "lib/index.js",
"module": "es/index.js",
Expand Down Expand Up @@ -61,7 +61,7 @@
"chromatic": "npx chromatic --project-token=7b10302a7b6b --build-script-name=build:storybook:raw"
},
"dependencies": {
"@bubbles-ui/icons": "^1.2.121",
"@bubbles-ui/icons": "^1.2.126",
"@emotion/react": "^11.10.0",
"@heroicons/react": "^1.0.5",
"@hookform/resolvers": "^3.3.2",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,28 @@ import {
ACTIVITY_ACCORDION_PROP_TYPES,
} from './ActivityAccordion.constants';

function AccordionLabel({ label, icon, rightSection, compact, classes }) {
function AccordionLabel({ label, title, icon, hideIcon, rightSection, compact, classes }) {
return (
<Stack fullWidth alignItems="center">
<Stack fullWidth justifyContent="start" alignItems="center" spacing={4}>
<Box className={classes.iconWrapper}>
{icon
? React.cloneElement(icon, {
width: compact ? 16 : 22,
height: compact ? 16 : 22,
className: classes.labelIcon,
})
: null}
</Box>
<Text size="md" strong color="primary" role="productive" className={classes.label}>
{label}
</Text>
{!hideIcon ? (
<Box className={classes.iconWrapper}>
{icon
? React.cloneElement(icon, {
width: compact ? 16 : 22,
height: compact ? 16 : 22,
className: classes.labelIcon,
})
: null}
</Box>
) : null}

{label ? (
<Text size="md" strong color="primary" role="productive" className={classes.label}>
{label}
</Text>
) : null}
{title || null}
</Stack>
<Box skipFlex>{rightSection || null}</Box>
</Stack>
Expand All @@ -35,6 +41,8 @@ function AccordionLabel({ label, icon, rightSection, compact, classes }) {
AccordionLabel.propTypes = {
label: PropTypes.string,
icon: PropTypes.node,
title: PropTypes.node,
hideIcon: PropTypes.bool,
rightSection: PropTypes.any,
compact: PropTypes.bool,
classes: PropTypes.any,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const ActivityAccordionStyles = createStyles((theme, { compact }) => {
border: 'none',
},
content: {
background: PANEL_COLORS.default,
// background: PANEL_COLORS.default,
borderBottomRightRadius: BORDER_RADIUS,
borderBottomLeftRadius: BORDER_RADIUS,
wordBreak: 'normal',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { CustomLegendStyles } from './CustomLegend.styles';
import { CUSTOM_LEGEND_DEFAULT_PROPS, CUSTOM_LEGEND_PROP_TYPES } from './CustomLegend.constants';
import { CheckIcon, RemoveBoldIcon } from '@bubbles-ui/icons/solid';
import { CheckBoldIcon, RemoveBoldIcon, SlashIcon } from '@bubbles-ui/icons/solid';

const CustomLegend = ({ id }) => {
const { classes, cx } = CustomLegendStyles({}, { name: 'CustomLegend' });
Expand All @@ -11,28 +11,13 @@ const CustomLegend = ({ id }) => {

const getLegendIcon = () => {
if (isOK)
return <CheckIcon x={4} y={4} height={12} width={12} className={classes.legendIcon} />;
return <CheckBoldIcon x={4} y={4} height={12} width={12} className={classes.legendIconOK} />;
if (isKO)
return <RemoveBoldIcon x={4} y={4} height={12} width={12} className={classes.legendIcon} />;
return (
<text x={7.5} y={15.5} className={classes.legendSlash}>
/
</text>
);
return <RemoveBoldIcon x={4} y={4} height={12} width={12} className={classes.legendIconKO} />;
return <SlashIcon x={4} y={4} height={10} width={10} className={classes.legendIconSlash} />;
};

const getLegendFill = () => {
if (isOK) return '#4BA773';
if (isKO) return '#C9516C';
return '#8E97A3';
};

return (
<g>
<rect fill={getLegendFill()} height={20} width={20} rx="2" ry="2"></rect>
{getLegendIcon()}
</g>
);
return <g>{getLegendIcon()}</g>;
};

CustomLegend.defaultProps = CUSTOM_LEGEND_DEFAULT_PROPS;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { createStyles } from '@mantine/styles';
import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../../theme.mixins';

export const CustomLegendStyles = createStyles((theme, {}) => {
return {
root: {},
legendIcon: { color: theme.colors.mainWhite },
legendSlash: { fill: theme.colors.mainWhite, fontWeight: 600, fontSize: pxToRem(17) },
legendIconOK: { color: '#5CBC6A' },
legendIconKO: { color: '#D13B3B' },
legendIconSlash: { color: '#4D5358' },
};
});
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { createStyles } from '@mantine/styles';

export const SortableListStyles = createStyles((theme, {}) => {
return {
sortableIcon: {
height: theme.spacing[3],
color: theme.colors.text02,
},
};
});
const SortableListStyles = createStyles((theme, {}) => ({
sortableIcon: {
height: 16,
color: theme.other.buttonAction.content.color.primary.default,
},
}));

export { SortableListStyles };
2 changes: 1 addition & 1 deletion packages/components/src/informative/Table/Table.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const Table = ({
ref={draggableProvided.innerRef}
>
{!!sortable && (
<td>
<td style={{ verticalAlign: 'middle' }}>
<Box
className={classes.sortIcon}
style={{ paddingLeft: snapshot.isDragging ? 10 : 0 }}
Expand Down
3 changes: 1 addition & 2 deletions packages/components/src/informative/Table/Table.styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,8 @@ const TableStyles = createStyles((theme, { disabled, canAdd, headerStyles = {} }
// display: 'inline-flex',
},
sortIcon: {
color: theme.colors.ui01,
color: theme.other.buttonAction.content.color.primary.default,
cursor: 'grab',
paddingTop: theme.spacing[3],
},
};
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ const TotalLayoutFooterContainer = ({
rightZone,
children,
fullWidth,
showFooterBorder: _showFooterBorder,
}) => {
const [showFooterBorder, setShowFooterBorder] = React.useState(false);
const { classes } = TotalLayoutFooterContainerStyles(
{ showFooterBorder, leftOffset, fixed, fullWidth },
{ showFooterBorder: showFooterBorder || _showFooterBorder, leftOffset, fixed, fullWidth },
{ name: 'TotalLayoutFooterContainer' },
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,22 @@ import { Title } from '../../../typography';
import { Stack } from '../../Stack';
import { Box } from '../../Box';
import {
TOTAL_LAYOUT_STEP_CONTAINER_PROP_TYPES,
TOTAL_LAYOUT_STEP_CONTAINER_DEFAULT_PROPS,
TOTAL_LAYOUT_STEP_CONTAINER_PROP_TYPES,
} from './TotalLayoutStepContainer.constants';
import { TotalLayoutStepContainerStyles } from './TotalLayoutStepContainer.styles';

const TotalLayoutStepContainer = ({ stepName, fullWidth, noMargin, children, Footer, clean }) => {
const TotalLayoutStepContainer = ({
stepName,
fullWidth,
noMargin,
children,
footerPadding,
Footer,
clean,
}) => {
const { classes } = TotalLayoutStepContainerStyles(
{ hasFooter: !!Footer, clean, fullWidth, noMargin },
{ hasFooter: !!Footer, clean, fullWidth, noMargin, footerPadding },
{ name: 'TotalLayoutStepContainer' },
);

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createStyles } from '@mantine/styles';

const TotalLayoutStepContainerStyles = createStyles(
(theme, { hasFooter, clean, fullWidth, noMargin }) => ({
(theme, { hasFooter, clean, fullWidth, noMargin, footerPadding }) => ({
root: {},
stepContainer: {
padding: '30px 0 0 0 ',
Expand All @@ -16,7 +16,7 @@ const TotalLayoutStepContainerStyles = createStyles(
formContainer: {
backgroundColor: !clean && 'white',
padding: !clean && 24,
paddingBottom: hasFooter ? 70 : 24,
paddingBottom: footerPadding || hasFooter ? 70 : 24,
},
stepName: {
marginBottom: 12,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import PropTypes from 'prop-types';

export const VERTICAL_CONTAINER_DEFAULT_PROPS = {
disableContentPadding: false,
navWidth: 276,
stickyAt: 0,
legible: true,
};
export const VERTICAL_CONTAINER_PROP_TYPES = {
padding: PropTypes.number,
disableContentPadding: PropTypes.bool,
navWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
stickyAt: PropTypes.number,
legible: PropTypes.bool,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, { forwardRef } from 'react';
import { VerticalContainerStyles } from './VerticalContainer.styles';
import { Box } from '../Box';
import { Stack } from '../Stack';
import {
VERTICAL_CONTAINER_DEFAULT_PROPS,
VERTICAL_CONTAINER_PROP_TYPES,
} from './VerticalContainer.constants';

const VerticalContainer = forwardRef(({ children, scrollRef, leftZone, ...props }, ref) => {
const { classes } = VerticalContainerStyles({ name: 'VerticalStepperContainer' });

return (
<Box ref={ref} className={classes.root}>
<Stack
ref={scrollRef}
justifyContent="center"
fullWidth
fullHeight
style={{
backgroundColor: '#f8f9fb',
overflow: 'auto',
position: 'relative',
}}
>
<Box className={classes.stepper}>{leftZone}</Box>
<Box className={classes.content}>{children}</Box>
</Stack>
</Box>
);
});

VerticalContainer.displayName = 'VerticalContainer';
VerticalContainer.defaultProps = VERTICAL_CONTAINER_DEFAULT_PROPS;
VerticalContainer.propTypes = VERTICAL_CONTAINER_PROP_TYPES;

export { VerticalContainer };
Loading

0 comments on commit a35036c

Please sign in to comment.