From 1b25ecc40004997d46d2cfeb2eaf7b9badaa420e Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Wed, 17 Jan 2024 18:11:01 +0100 Subject: [PATCH] feat(ProgressBottomBar): new component fix(TextEditor): readOnly refresh feat(ComputerKeyboardNext): change SVG fix(Accordion): set hover color to transparent --- .../ActivityAccordion.styles.js | 9 +- .../ProgressBottomBar.constants.js | 40 +++++++++ .../ProgressBottomBar/ProgressBottomBar.js | 48 +++++++++++ .../ProgressBottomBar/ProgressBottomBar.mdx | 32 ++++++++ .../ProgressBottomBar.stories.js | 82 +++++++++++++++++++ .../ProgressBottomBar.styles.js | 16 ++++ .../informative/ProgressBottomBar/index.js | 1 + packages/components/src/informative/index.js | 1 + .../editors/src/form/TextEditor/TextEditor.js | 5 ++ .../outline/computer-keyboard-next.svg | 4 +- .../icons/outline/ComputerKeyboardNextIcon.js | 10 +-- .../outline/esm/ComputerKeyboardNextIcon.js | 10 +-- .../src/outline/computer-keyboard-next.svg | 15 +--- 13 files changed, 247 insertions(+), 26 deletions(-) create mode 100644 packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.constants.js create mode 100644 packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.js create mode 100644 packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.mdx create mode 100644 packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.stories.js create mode 100644 packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.styles.js create mode 100644 packages/components/src/informative/ProgressBottomBar/index.js diff --git a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js index adc0e863b..d72fb8de4 100644 --- a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js +++ b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js @@ -1,9 +1,9 @@ import { createStyles } from '@mantine/styles'; -import { pxToRem, getPaddings, getFontExpressive, getFontProductive } from '../../theme.mixins'; +import { pxToRem } from '../../theme.mixins'; const BORDER_RADIUS = 8; -export const ActivityAccordionStyles = createStyles((theme, { compact }) => { +const ActivityAccordionStyles = createStyles((theme, { compact }) => { const PANEL_COLORS = { default: theme.colors.uiBackground01, solid: theme.colors.interactive03h, @@ -14,6 +14,9 @@ export const ActivityAccordionStyles = createStyles((theme, { compact }) => { display: 'flex', flexDirection: 'column', gap: theme.spacing[2], + '& .mantine-Accordion-control:hover': { + backgroundColor: 'transparent', + }, }, item: { backgroundColor: theme.colors.uiBackground01, @@ -54,3 +57,5 @@ export const ActivityAccordionStyles = createStyles((theme, { compact }) => { }, }; }); + +export { ActivityAccordionStyles }; diff --git a/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.constants.js b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.constants.js new file mode 100644 index 000000000..8a16a7da6 --- /dev/null +++ b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.constants.js @@ -0,0 +1,40 @@ +import propTypes from 'prop-types'; + +export const PROGRESSBOTTOMBAR_RADIUS = ['xs', 'sm', 'md', 'lg', 'xl']; +export const PROGRESSBOTTOMBAR_SIZES = ['xs', 'sm', 'md', 'lg', 'xl']; + +// SECTIONS PROP EXAMPLE +// If you want to use sections prop, you need to pass an array of objects with value, color and label keys. +// only value and color keys are required. +// +// sections={[ +// { value: 33, color: 'pink', label: 'Documents', tooltip: 'Document – 33 Gb' }, +// { value: 28, color: 'grape', label: 'Apps', tooltip: 'Apps – 28 Gb' }, +// { value: 25, color: 'violet', label: 'Other', tooltip: 'Other – 25 Gb' }, +// ]} + +export const PROGRESSBOTTOMBAR_DEFAULT_PROPS = { + animate: false, + color: 'orange', + label: '', + labelLeft: 'labelLeft', + labelRight: 'LabelRight', + radius: 'lg', + sections: null, + size: 'sm', + striped: false, + value: 100, +}; + +export const PROGRESSBOTTOMBAR_PROP_TYPES = { + animate: propTypes.bool, + color: propTypes.string, + label: propTypes.string, + labelLeft: propTypes.string, + labelRight: propTypes.string, + radius: propTypes.oneOf(PROGRESSBOTTOMBAR_RADIUS), + sections: propTypes.array, + size: propTypes.oneOf(PROGRESSBOTTOMBAR_SIZES), + striped: propTypes.bool, + value: propTypes.number, +}; diff --git a/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.js b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.js new file mode 100644 index 000000000..3d62d74cb --- /dev/null +++ b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { Progress as MantineProgress } from '@mantine/core'; +import { Box, Text } from '@bubbles-ui/components'; +import { + PROGRESSBOTTOMBAR_DEFAULT_PROPS, + PROGRESSBOTTOMBAR_PROP_TYPES, +} from './ProgressBottomBar.constants'; +import { ProgressBottomBarStyles } from './ProgressBottomBar.styles'; + +const ProgressBottomBar = ({ + animate, + label, + labelTop, + color, + radius, + sections, + size, + striped, + value, +}) => { + const { classes, theme } = ProgressBottomBarStyles(); + return ( + + {labelTop && ( + + {labelTop} + + )} + + + ); +}; + +ProgressBottomBar.propTypes = PROGRESSBOTTOMBAR_PROP_TYPES; +ProgressBottomBar.defaultProps = PROGRESSBOTTOMBAR_DEFAULT_PROPS; +ProgressBottomBar.displayName = 'ProgressBottomBar'; + +export { ProgressBottomBar }; +export default ProgressBottomBar; diff --git a/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.mdx b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.mdx new file mode 100644 index 000000000..164ada1b9 --- /dev/null +++ b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.mdx @@ -0,0 +1,32 @@ +import { Story, Props, Source, Preview } from '@storybook/addon-docs'; +import * as stories from './ProgressBottomBar.stories.js'; +import { ProgressBottomBar } from './ProgressBottomBar.js'; +import { ThemeProvider } from './../../ThemeProvider'; + +# ChatMessage + +[Source code](https://github.com/leemonade/bubbles/tree/main/packages/components/src/informative/ChatMessage/ChatMessage.js) + +## Table of Contents + + + + +- [Overview](#overview) +{/* - [ProgessColorBar options](#ProgessColorBar-options) */} +- [Component API](#component-api) +- [Feedback](#feedback) + +## Overview + +ChatMessage is a component used to display a message from an user. + + +## ChatMessage options + + + +## Feedback + +Help us improve this component by providing feedback, asking questions on Slack, or updating this file on +[GitHub](https://github.com/leemonade/bubbles/edit/main/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.mdx) diff --git a/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.stories.js b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.stories.js new file mode 100644 index 000000000..37d7a1cb7 --- /dev/null +++ b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.stories.js @@ -0,0 +1,82 @@ +import React from 'react'; +import { ProgressBottomBar } from './ProgressBottomBar'; +import mdx from './ProgressBottomBar.mdx'; +import { Box } from '../../layout'; +import { PROGRESSBOTTOMBAR_RADIUS, PROGRESSBOTTOMBAR_SIZES } from './ProgressBottomBar.constants'; + +export default { + title: 'Atoms/Informative/ProgressBottomBar', + parameters: { + component: ProgressBottomBar, + docs: { + page: mdx, + }, + design: { + type: 'figma', + // url: 'https://www.figma.com/file/c3MWm2gVHU4JfYlVfr5VvB/🍋💧-Bubbles-SD-v2?node-id=3639%3A28963', + }, + }, + argTypes: { + animate: { + control: { + type: 'boolean', + }, + }, + color: { + control: { + type: 'color', + }, + }, + radius: { + control: { + type: 'select', + options: PROGRESSBOTTOMBAR_RADIUS, + }, + }, + size: { + control: { + type: 'select', + options: PROGRESSBOTTOMBAR_SIZES, + }, + }, + striped: { + control: { + type: 'boolean', + }, + }, + label: { + control: { + type: 'text', + }, + }, + labelLeft: { + control: { + type: 'text', + }, + }, + labelRight: { + control: { + type: 'text', + }, + }, + }, +}; + +const Template = ({ ...props }) => ( + + + +); + +export const Playground = Template.bind({}); + +Playground.args = { + animate: false, + value: 50, + size: 'lg', + radius: 'lg', + striped: false, + color: 'orange', + label: '', + labelTop: 'labelTop', +}; diff --git a/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.styles.js b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.styles.js new file mode 100644 index 000000000..167bc8ee0 --- /dev/null +++ b/packages/components/src/informative/ProgressBottomBar/ProgressBottomBar.styles.js @@ -0,0 +1,16 @@ +import { createStyles } from '@mantine/styles'; +import { pxToRem } from '../../theme.mixins'; + +const ProgressBottomBarStyles = createStyles((theme) => ({ + topLabelContainer: { + display: 'flex', + justifyContent: 'center', + marginBottom: pxToRem(8), + }, + labelTop: { + color: theme.other.progress.content.color.text, + ...theme.other.progress.content.typo, + }, +})); + +export { ProgressBottomBarStyles }; diff --git a/packages/components/src/informative/ProgressBottomBar/index.js b/packages/components/src/informative/ProgressBottomBar/index.js new file mode 100644 index 000000000..d2f2b70c4 --- /dev/null +++ b/packages/components/src/informative/ProgressBottomBar/index.js @@ -0,0 +1 @@ +export * from './ProgressBottomBar'; diff --git a/packages/components/src/informative/index.js b/packages/components/src/informative/index.js index 7ff391c38..4403874f9 100644 --- a/packages/components/src/informative/index.js +++ b/packages/components/src/informative/index.js @@ -17,4 +17,5 @@ export * from './UserCards'; export * from './UserDisplayItemList'; export * from './ChatMessage'; export * from './ProgressColorBar'; +export * from './ProgressBottomBar'; export * from './ProgressRing'; diff --git a/packages/editors/src/form/TextEditor/TextEditor.js b/packages/editors/src/form/TextEditor/TextEditor.js index f63aa64ac..32fd785ee 100644 --- a/packages/editors/src/form/TextEditor/TextEditor.js +++ b/packages/editors/src/form/TextEditor/TextEditor.js @@ -124,11 +124,16 @@ const TextEditor = ({ if (isFunction(onSchemaChange) && useSchema) onSchemaChange(getEditorJson()); }; + const dispatchSchema = () => { + if (isFunction(onSchemaChange) && useSchema) onSchemaChange(getEditorJson()); + }; + useEffect(() => { if (!editor) return; if (!isEqual(content, store.current.content)) { store.current.content = content; editor.commands.setContent(content || ''); + dispatchSchema(); } }, [editor, content]); diff --git a/packages/icons/optimized/outline/computer-keyboard-next.svg b/packages/icons/optimized/outline/computer-keyboard-next.svg index b4641a31d..80ec631a5 100644 --- a/packages/icons/optimized/outline/computer-keyboard-next.svg +++ b/packages/icons/optimized/outline/computer-keyboard-next.svg @@ -1,3 +1,3 @@ -