diff --git a/packages/components/src/form/ListInput/ListInput.js b/packages/components/src/form/ListInput/ListInput.js index 830a7fe14..bd66934e1 100644 --- a/packages/components/src/form/ListInput/ListInput.js +++ b/packages/components/src/form/ListInput/ListInput.js @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import PropTypes from 'prop-types'; import { findIndex, isFunction, map } from 'lodash'; -import { AddCircleIcon } from '@bubbles-ui/icons/outline'; +import { AddCircleIcon } from '@bubbles-ui/icons/solid'; import { useId } from '@mantine/hooks'; import { Box } from '../../layout'; import { ListInputStyles } from './ListInput.styles'; diff --git a/packages/components/src/form/MultiSelect/MultiSelect.js b/packages/components/src/form/MultiSelect/MultiSelect.js index b37472b60..076bc59e3 100644 --- a/packages/components/src/form/MultiSelect/MultiSelect.js +++ b/packages/components/src/form/MultiSelect/MultiSelect.js @@ -99,7 +99,7 @@ const MultiSelect = forwardRef( // TODO: MEGATODO Por culpa de maxSelectedValues hemos tenido que repintar el MultiSelect de mantine. React.useEffect(() => { - if (!value || !value.length) { + if (!value?.length) { setShow(false); setTimeout(() => { setShow(true); diff --git a/packages/components/src/form/MultiSelect/MultiSelect.stories.js b/packages/components/src/form/MultiSelect/MultiSelect.stories.js index d4f72a847..8829065ef 100644 --- a/packages/components/src/form/MultiSelect/MultiSelect.stories.js +++ b/packages/components/src/form/MultiSelect/MultiSelect.stories.js @@ -3,7 +3,7 @@ import { StarIcon } from '@bubbles-ui/icons/solid'; import { RemoveIcon } from '@bubbles-ui/icons/outline'; import { Stack, Box } from '../../layout'; import { UserDisplayItem } from '../../informative'; -import { ActionButton } from '../../form'; +import { ActionButton } from '../ActionButton'; import { MultiSelect } from './MultiSelect'; import { MULTI_SELECT_DEFAULT_PROPS, @@ -34,19 +34,17 @@ export default { }; const Template = ({ children, data, useValueComponent, onChange, showIcon, ...props }) => { - const CustomValueComponent = forwardRef(({ label, onRemove }, ref) => { + const CustomValueComponent = forwardRef(({ label, onRemove }, ref) => ( // return ; - return ( - ({ paddingRight: theme.spacing[1] })}> - - {onRemove ? ( - - } onClick={() => onRemove(value)} /> - - ) : null} - - ); - }); + ({ paddingRight: theme.spacing[1] })}> + + {onRemove ? ( + + } onClick={() => onRemove(value)} /> + + ) : null} + + )); const [state, setState] = useState([]); const [value, setValue] = useState([]); @@ -102,6 +100,7 @@ Playground.args = { value: 'Homer Simpson', description: 'Overweight, lazy, and often ignorant', group: 'Group 1', + disabled: true, }, { image: 'https://img.icons8.com/clouds/256/000000/spongebob-squarepants.png', diff --git a/packages/components/src/form/TableInput/TableInputRow.js b/packages/components/src/form/TableInput/TableInputRow.js index ad8eb237f..766e7ccd3 100644 --- a/packages/components/src/form/TableInput/TableInputRow.js +++ b/packages/components/src/form/TableInput/TableInputRow.js @@ -1,9 +1,15 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { get, isFunction } from 'lodash'; -import { CheckIcon, DeleteBinIcon, DeleteIcon, EditWriteIcon } from '@bubbles-ui/icons/solid'; +import { + CheckIcon, + DeleteBinIcon, + DeleteIcon, + EditWriteIcon, + AddCircleIcon, +} from '@bubbles-ui/icons/solid'; import { Controller, useForm } from 'react-hook-form'; -import { SortDragIcon, AddCircleIcon } from '@bubbles-ui/icons/outline'; +import { SortDragIcon } from '@bubbles-ui/icons/outline'; import { Draggable } from 'react-beautiful-dnd'; import { Box } from '../../layout/Box'; import { TableCell } from '../../informative/Table/TableCell/TableCell'; @@ -155,7 +161,10 @@ const TableInputRow = ({ {getColumCellValue(cell)} ))} - + {editing ? ( <> ( - +const CrossIcon = ({ width = 16, height = 16 }) => ( + ); +CrossIcon.propTypes = { + width: PropTypes.number, + height: PropTypes.number, +}; export default CrossIcon; diff --git a/packages/components/src/navigation/Tree/NodeRenderer.js b/packages/components/src/navigation/Tree/NodeRenderer.js index bac50cfd4..fa0f917a0 100644 --- a/packages/components/src/navigation/Tree/NodeRenderer.js +++ b/packages/components/src/navigation/Tree/NodeRenderer.js @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { isString } from 'lodash'; -import { AddCircleIcon } from '@bubbles-ui/icons/outline'; +import { AddCircleIcon } from '@bubbles-ui/icons/solid'; import { useDragOver } from '@leemonade/react-dnd-treeview'; import { Box } from '../../layout/Box'; import { Button } from '../../form/Button'; diff --git a/packages/components/src/overlay/Dropdown/Item/Item.constants.js b/packages/components/src/overlay/Dropdown/Item/Item.constants.js index 2291d918e..a3b7cacdb 100644 --- a/packages/components/src/overlay/Dropdown/Item/Item.constants.js +++ b/packages/components/src/overlay/Dropdown/Item/Item.constants.js @@ -1,10 +1,13 @@ import PropTypes from 'prop-types'; -export const ITEM_DEFAULT_PROPS = {}; +export const ITEM_DEFAULT_PROPS = { + disabled: false, +}; export const ITEM_PROP_TYPES = { label: PropTypes.string, image: PropTypes.string, icon: PropTypes.node, dataSelected: PropTypes.bool, group: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + disabled: PropTypes.bool, }; diff --git a/packages/components/src/overlay/Dropdown/Item/Item.js b/packages/components/src/overlay/Dropdown/Item/Item.js index e019b6907..ba2d95009 100644 --- a/packages/components/src/overlay/Dropdown/Item/Item.js +++ b/packages/components/src/overlay/Dropdown/Item/Item.js @@ -10,10 +10,21 @@ import { ITEM_DEFAULT_PROPS, ITEM_PROP_TYPES } from './Item.constants'; const Item = forwardRef( ( - { icon, image, label, group, value, className, 'data-selected': dataSelected, ...props }, + { + icon, + image, + label, + group, + value, + disabled, + className, + 'data-selected': dataSelected, + ...props + }, ref, ) => { - const { classes } = ItemStyles({ group }, { name: 'Item' }); + const { classes } = ItemStyles({ group, disabled }, { name: 'Item' }); + return ( {image && } diff --git a/packages/components/src/overlay/Dropdown/Item/Item.styles.js b/packages/components/src/overlay/Dropdown/Item/Item.styles.js index faa2bc63c..e59c5e81a 100644 --- a/packages/components/src/overlay/Dropdown/Item/Item.styles.js +++ b/packages/components/src/overlay/Dropdown/Item/Item.styles.js @@ -1,8 +1,9 @@ import { createStyles } from '@mantine/styles'; import { pxToRem } from '../../../theme.mixins'; -export const ItemStyles = createStyles((theme, { group }) => { +const ItemStyles = createStyles((theme, { group, disabled }) => { const dropdownTheme = theme.other.dropdown; + return { root: { display: 'flex', @@ -10,33 +11,40 @@ export const ItemStyles = createStyles((theme, { group }) => { padding: dropdownTheme.spacing.padding.md, gap: dropdownTheme.spacing.gap, borderRadius: dropdownTheme.border.radius, - backgroundColor: dropdownTheme.background.color.default, + backgroundColor: disabled + ? theme.other.global.background.color.disabled + : dropdownTheme.background.color.default, '&[data-hovered]': { - backgroundColor: dropdownTheme.background.color.hover + backgroundColor: !disabled && dropdownTheme.background.color.hover, }, '&:hover': { - backgroundColor: dropdownTheme.background.color.hover + backgroundColor: !disabled && dropdownTheme.background.color.hover, }, '&:active': { - backgroundColor: dropdownTheme.background.color.down + backgroundColor: !disabled && dropdownTheme.background.color.down, }, - cursor: 'pointer' + cursor: disabled ? 'not-allowed' : 'pointer', + pointerEvents: disabled ? 'none' : 'auto', + filter: disabled ? 'grayscale(1)' : 'none', + opacity: disabled ? 0.5 : 1, }, label: { ...dropdownTheme.content.typo, color: dropdownTheme.content.color.default, - flex: 1 + flex: 1, }, iconWrapper: { position: 'relative', minWidth: pxToRem(16), minHeight: pxToRem(16), - color: dropdownTheme.content.color.default + color: dropdownTheme.content.color.default, // minHeight: theme.other.global.icon.size.md, // minWidth: theme.other.global.icon.size.md, }, check: { - color: theme.other.global.content.color.positive.default - } + color: theme.other.global.content.color.positive.default, + }, }; }); + +export { ItemStyles }; diff --git a/packages/icons/solid/esm/index.d.ts b/packages/icons/solid/esm/index.d.ts index 2c2d99570..60f42d93b 100644 --- a/packages/icons/solid/esm/index.d.ts +++ b/packages/icons/solid/esm/index.d.ts @@ -1,4 +1,5 @@ export { default as ActivitiesIcon } from './ActivitiesIcon' +export { default as AddCircleIcon } from './AddCircleIcon' export { default as AddCommentIcon } from './AddCommentIcon' export { default as AlertInformationCircleIcon } from './AlertInformationCircleIcon' export { default as AlertWarningTriangleIcon } from './AlertWarningTriangleIcon' @@ -159,6 +160,7 @@ export { default as TwitterIcon } from './TwitterIcon' export { default as UnlockIcon } from './UnlockIcon' export { default as UserGroupIcon } from './UserGroupIcon' export { default as VideoEditCcTitlesIcon } from './VideoEditCcTitlesIcon' +export { default as ViewOffIcon } from './ViewOffIcon' export { default as VolumeControlDownIcon } from './VolumeControlDownIcon' export { default as VolumeControlFullIcon } from './VolumeControlFullIcon' export { default as VolumeControlLowIcon } from './VolumeControlLowIcon' diff --git a/packages/icons/solid/esm/index.js b/packages/icons/solid/esm/index.js index ab5263920..e88d17734 100644 --- a/packages/icons/solid/esm/index.js +++ b/packages/icons/solid/esm/index.js @@ -1,4 +1,5 @@ export { default as ActivitiesIcon } from './ActivitiesIcon.js' +export { default as AddCircleIcon } from './AddCircleIcon.js' export { default as AddCommentIcon } from './AddCommentIcon.js' export { default as AlertInformationCircleIcon } from './AlertInformationCircleIcon.js' export { default as AlertWarningTriangleIcon } from './AlertWarningTriangleIcon.js' @@ -159,6 +160,7 @@ export { default as TwitterIcon } from './TwitterIcon.js' export { default as UnlockIcon } from './UnlockIcon.js' export { default as UserGroupIcon } from './UserGroupIcon.js' export { default as VideoEditCcTitlesIcon } from './VideoEditCcTitlesIcon.js' +export { default as ViewOffIcon } from './ViewOffIcon.js' export { default as VolumeControlDownIcon } from './VolumeControlDownIcon.js' export { default as VolumeControlFullIcon } from './VolumeControlFullIcon.js' export { default as VolumeControlLowIcon } from './VolumeControlLowIcon.js' diff --git a/packages/icons/solid/index.d.ts b/packages/icons/solid/index.d.ts index 2c2d99570..60f42d93b 100644 --- a/packages/icons/solid/index.d.ts +++ b/packages/icons/solid/index.d.ts @@ -1,4 +1,5 @@ export { default as ActivitiesIcon } from './ActivitiesIcon' +export { default as AddCircleIcon } from './AddCircleIcon' export { default as AddCommentIcon } from './AddCommentIcon' export { default as AlertInformationCircleIcon } from './AlertInformationCircleIcon' export { default as AlertWarningTriangleIcon } from './AlertWarningTriangleIcon' @@ -159,6 +160,7 @@ export { default as TwitterIcon } from './TwitterIcon' export { default as UnlockIcon } from './UnlockIcon' export { default as UserGroupIcon } from './UserGroupIcon' export { default as VideoEditCcTitlesIcon } from './VideoEditCcTitlesIcon' +export { default as ViewOffIcon } from './ViewOffIcon' export { default as VolumeControlDownIcon } from './VolumeControlDownIcon' export { default as VolumeControlFullIcon } from './VolumeControlFullIcon' export { default as VolumeControlLowIcon } from './VolumeControlLowIcon' diff --git a/packages/icons/solid/index.js b/packages/icons/solid/index.js index 8b8041529..9d20cf4dc 100644 --- a/packages/icons/solid/index.js +++ b/packages/icons/solid/index.js @@ -1,4 +1,5 @@ module.exports.ActivitiesIcon = require("./ActivitiesIcon.js") +module.exports.AddCircleIcon = require("./AddCircleIcon.js") module.exports.AddCommentIcon = require("./AddCommentIcon.js") module.exports.AlertInformationCircleIcon = require("./AlertInformationCircleIcon.js") module.exports.AlertWarningTriangleIcon = require("./AlertWarningTriangleIcon.js") @@ -159,6 +160,7 @@ module.exports.TwitterIcon = require("./TwitterIcon.js") module.exports.UnlockIcon = require("./UnlockIcon.js") module.exports.UserGroupIcon = require("./UserGroupIcon.js") module.exports.VideoEditCcTitlesIcon = require("./VideoEditCcTitlesIcon.js") +module.exports.ViewOffIcon = require("./ViewOffIcon.js") module.exports.VolumeControlDownIcon = require("./VolumeControlDownIcon.js") module.exports.VolumeControlFullIcon = require("./VolumeControlFullIcon.js") module.exports.VolumeControlLowIcon = require("./VolumeControlLowIcon.js") diff --git a/packages/icons/src/solid/add-circle.svg b/packages/icons/src/solid/add-circle.svg new file mode 100755 index 000000000..5d7fc2a08 --- /dev/null +++ b/packages/icons/src/solid/add-circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/src/solid/view-off.svg b/packages/icons/src/solid/view-off.svg new file mode 100644 index 000000000..277cc08d4 --- /dev/null +++ b/packages/icons/src/solid/view-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/leemons/src/academic-rules/RuleGroup/RuleGroup.js b/packages/leemons/src/academic-rules/RuleGroup/RuleGroup.js index 8e3c5750e..f5d0e8b72 100644 --- a/packages/leemons/src/academic-rules/RuleGroup/RuleGroup.js +++ b/packages/leemons/src/academic-rules/RuleGroup/RuleGroup.js @@ -2,10 +2,10 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; import { v4 as uuidv4 } from 'uuid'; -import { DeleteBinIcon } from '@bubbles-ui/icons/solid'; -import { DuplicateIcon, SwitchHorizontalIcon, AddCircleIcon } from '@bubbles-ui/icons/outline'; +import { DeleteBinIcon, AddCircleIcon } from '@bubbles-ui/icons/solid'; +import { DuplicateIcon, SwitchHorizontalIcon } from '@bubbles-ui/icons/outline'; import { Paper, Box, Text, Button, Stack, Select, Menu } from '@bubbles-ui/components'; -import { RuleCondition } from '../RuleCondition/'; +import { RuleCondition } from '../RuleCondition'; import { LOGIC_OPERATORS } from '../ProgramRules'; import { RuleGroupStyles } from './RuleGroup.styles'; @@ -160,13 +160,12 @@ const RuleGroup = ({ }} /> ); - } else { - return ( - - {parentOperator.label} - - ); } + return ( + + {parentOperator.label} + + ); }; const removeGroup = () => { @@ -263,7 +262,7 @@ const RuleGroup = ({ }} placeholders={placeholders} /> - ) + ), )} {provided.placeholder} diff --git a/packages/leemons/src/dataset/DatasetItemDrawer/components/FieldConfig/common/Options.js b/packages/leemons/src/dataset/DatasetItemDrawer/components/FieldConfig/common/Options.js index a112ee73d..94c2dac9a 100644 --- a/packages/leemons/src/dataset/DatasetItemDrawer/components/FieldConfig/common/Options.js +++ b/packages/leemons/src/dataset/DatasetItemDrawer/components/FieldConfig/common/Options.js @@ -1,27 +1,25 @@ import React, { useContext } from 'react'; import { forEach, get, map } from 'lodash'; import { Controller } from 'react-hook-form'; -import { AddCircleIcon } from '@bubbles-ui/icons/outline'; +import { AddCircleIcon } from '@bubbles-ui/icons/solid'; import { Box, Button, Col, Grid, SortableList, Text, TextInput } from '@bubbles-ui/components'; import DatasetItemDrawerContext from '../../../context/DatasetItemDrawerContext'; -const OptionItem = ({ value, onChange }) => { - return ( - ({ - padding: theme.spacing[2], - })} - > - { - onChange({ ...value, value: e }); - }} - /> - - ); -}; +const OptionItem = ({ value, onChange }) => ( + ({ + padding: theme.spacing[2], + })} + > + { + onChange({ ...value, value: e }); + }} + /> + +); const Options = ({ label, addOptionLabel }) => { const {