diff --git a/packages/calendars/CHANGELOG.md b/packages/calendars/CHANGELOG.md index 17c3a2aa7..5700faa00 100644 --- a/packages/calendars/CHANGELOG.md +++ b/packages/calendars/CHANGELOG.md @@ -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 diff --git a/packages/calendars/package.json b/packages/calendars/package.json index 4c3dd372f..3b39c7538 100644 --- a/packages/calendars/package.json +++ b/packages/calendars/package.json @@ -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", @@ -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": "*" diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f5b85a172..2be02d331 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -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 diff --git a/packages/components/package.json b/packages/components/package.json index 2719e9c41..7040cd6e7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -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", @@ -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", diff --git a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js index df84b6624..8e1f96b18 100644 --- a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js +++ b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js @@ -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 ( - - {icon - ? React.cloneElement(icon, { - width: compact ? 16 : 22, - height: compact ? 16 : 22, - className: classes.labelIcon, - }) - : null} - - - {label} - + {!hideIcon ? ( + + {icon + ? React.cloneElement(icon, { + width: compact ? 16 : 22, + height: compact ? 16 : 22, + className: classes.labelIcon, + }) + : null} + + ) : null} + + {label ? ( + + {label} + + ) : null} + {title || null} {rightSection || null} @@ -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, diff --git a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js index d72fb8de4..ca2580645 100644 --- a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js +++ b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.styles.js @@ -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', diff --git a/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.js b/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.js index 16d31d189..2f5af8dfc 100644 --- a/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.js +++ b/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.js @@ -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' }); @@ -11,28 +11,13 @@ const CustomLegend = ({ id }) => { const getLegendIcon = () => { if (isOK) - return ; + return ; if (isKO) - return ; - return ( - - / - - ); + return ; + return ; }; - const getLegendFill = () => { - if (isOK) return '#4BA773'; - if (isKO) return '#C9516C'; - return '#8E97A3'; - }; - - return ( - - - {getLegendIcon()} - - ); + return {getLegendIcon()}; }; CustomLegend.defaultProps = CUSTOM_LEGEND_DEFAULT_PROPS; diff --git a/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js b/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js index dfa9343d5..9c8921e9b 100644 --- a/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js +++ b/packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js @@ -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' }, }; }); diff --git a/packages/components/src/informative/SortableList/SortableList.styles.js b/packages/components/src/informative/SortableList/SortableList.styles.js index a9967a18d..f65d69091 100644 --- a/packages/components/src/informative/SortableList/SortableList.styles.js +++ b/packages/components/src/informative/SortableList/SortableList.styles.js @@ -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 }; diff --git a/packages/components/src/informative/Table/Table.js b/packages/components/src/informative/Table/Table.js index 170952ca4..29dac3167 100644 --- a/packages/components/src/informative/Table/Table.js +++ b/packages/components/src/informative/Table/Table.js @@ -165,7 +165,7 @@ const Table = ({ ref={draggableProvided.innerRef} > {!!sortable && ( - + { const [showFooterBorder, setShowFooterBorder] = React.useState(false); const { classes } = TotalLayoutFooterContainerStyles( - { showFooterBorder, leftOffset, fixed, fullWidth }, + { showFooterBorder: showFooterBorder || _showFooterBorder, leftOffset, fixed, fullWidth }, { name: 'TotalLayoutFooterContainer' }, ); diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js index f2358191c..541378d45 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.js @@ -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' }, ); diff --git a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js index 3f6906338..cd29e7a00 100644 --- a/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js +++ b/packages/components/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js @@ -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 ', @@ -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, diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.constants.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.constants.js new file mode 100644 index 000000000..439183131 --- /dev/null +++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.constants.js @@ -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, +}; diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.js new file mode 100644 index 000000000..f7c920175 --- /dev/null +++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.js @@ -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 ( + + + {leftZone} + {children} + + + ); +}); + +VerticalContainer.displayName = 'VerticalContainer'; +VerticalContainer.defaultProps = VERTICAL_CONTAINER_DEFAULT_PROPS; +VerticalContainer.propTypes = VERTICAL_CONTAINER_PROP_TYPES; + +export { VerticalContainer }; diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx b/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx new file mode 100644 index 000000000..57762f3f2 --- /dev/null +++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.mdx @@ -0,0 +1,165 @@ +import { Preview, Props, Story } from '@storybook/addon-docs'; +import { VerticalContainer } from './VerticalContainer.js'; +import { ThemeProvider } from './../../ThemeProvider'; +import { Box, ContextContainer } from '../../layout'; +import { Paragraph } from '../../typography'; + +# VerticalStepperContainer + +[Source code](https://github.com/leemonade/bubbles/tree/main/packages/components/src/layout/VerticalStepperContainer/VerticalStepperContainer.js) + +## Table of Contents + + + + +- [Overview](#overview) +- [VerticalStepper width](#verticalstepper-width) +- [Content padding](#content-padding) +- [VerticalStepper sticky at](#verticalstepper-sticky-at) +- [Component API](#component-api) +- [References](#references) +- [Feedback](#feedback) + +## Overview + +VerticalStepperContainer is component to render a VerticalStepper including the steps. + + + { + }, + }, + ]} + > + + +## VerticalStepper width + +You can control the width of the VerticalStepper with the ``navWidth` prop. + + + { + }, + }, + ]} + > + { + }, + }, + ]} + > + + +## Content padding + +With the boolean props `disableContentPadding`, control if you want padding for the content or not + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum + + + + + + +## VerticalStepper sticky at + +With the `stickyAt` prop, control the position in pixels from the top at which the VerticalStepper becomes sticky. + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur + sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id + est laborum + + + + + + +## Component API + + + + + + + +## References + +[MDN: ARIA navigation role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role) + +[W3: Role attribute](https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute) + +## 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/layout/VerticalStepperContainer/VerticalStepperContainer.mdx) diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.stories.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.stories.js new file mode 100644 index 000000000..704fe625a --- /dev/null +++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.stories.js @@ -0,0 +1,209 @@ +import React, { useMemo, useState } from 'react'; +import PropTypes from 'prop-types'; +import { PluginAssignmentsIcon } from '@bubbles-ui/icons/solid'; +import { VerticalContainer } from './VerticalContainer'; +import { VERTICAL_CONTAINER_DEFAULT_PROPS } from './VerticalContainer.constants'; +import mdx from './VerticalContainer.mdx'; +import { SIMPLE_DATA as STEPPER_DATA } from '../../navigation/VerticalStepper/mock/data'; +import { Box } from '../Box'; +import { Stack } from '../Stack'; +import { ContextContainer } from '../ContextContainer'; +import { Button } from '../../form/Button'; +import { Paragraph } from '../../typography/Paragraph'; +import { + TotalLayoutFooterContainer, + TotalLayoutHeader, + TotalLayoutStepContainer, +} from '../TotalLayout'; +import { TotalLayoutContainer } from '../TotalLayout/TotalLayoutContainer/TotalLayoutContainer'; + +export default { + title: 'Atoms/Layout/VerticalStepperContainer', + parameters: { + component: VerticalContainer, + docs: { + page: mdx, + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/c3MWm2gVHU4JfYlVfr5VvB/%F0%9F%8D%8B%F0%9F%92%A7-Bubbles-SD-v2?node-id=8215%3A104591', + }, + }, + argTypes: {}, +}; + +const Template = ({ data = [], currentStep, ...props }) => { + const [activeStep, setActiveStep] = useState(currentStep || 0); + + const randomContent = useMemo( + () => [...Array(data.length)].map(() => Math.floor(Math.random() * 10)), + [data], + ); + + const handleNext = () => { + setActiveStep(activeStep + 1); + window.scrollTo(0, 0, { behavior: 'smooth' }); + }; + + const handlePrev = () => { + setActiveStep(activeStep - 1); + window.scrollTo(0, 0, { behavior: 'smooth' }); + }; + + return ( + + Toma prueba} + currentStep={activeStep} + > + { + [...Array(data.length)].map((_, i) => ( + + + + {[...Array(randomContent[i])].map((__, j) => ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore + eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt + in culpa qui officia deserunt mollit anim id est laborum + + ))} + + + + {activeStep > 0 && ( + + )} + + + + + + ))[activeStep] + } + + + ); +}; + +Template.propTypes = { + data: PropTypes.array, + currentStep: PropTypes.number, +}; + +export const Playground = Template.bind({}); + +Playground.args = { + ...VERTICAL_CONTAINER_DEFAULT_PROPS, + data: STEPPER_DATA, +}; + +const TotalLayoutTemplate = ({ data = [], currentStep, ...props }) => { + const [activeStep, setActiveStep] = useState(currentStep || 0); + const scrollRef = React.useRef(null); + + const randomContent = useMemo( + () => [...Array(data.length)].map(() => Math.floor(Math.random() * 10)), + [data], + ); + + // Prepare Header. It is necesary to pass the setOpenCancelModal function to the header + const handleOnCancel = () => { + console.log('Redirecting after cancel'); + }; + + const handleNext = () => { + setActiveStep(activeStep + 1); + window.scrollTo(0, 0, { behavior: 'smooth' }); + }; + + const handlePrev = () => { + setActiveStep(activeStep - 1); + window.scrollTo(0, 0, { behavior: 'smooth' }); + }; + + const buildHeader = () => ( + } + formTitlePlaceholder={'Título de la tarea'} + onCancel={handleOnCancel} + /> + ); + + return ( + + buildHeader()}> + + { + [...Array(data.length)].map((_, i) => ( + + {activeStep > 0 && ( + + )} + + } + rightZone={} + /> + } + > + + {[...Array(randomContent[i])].map((__, j) => ( + <> + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit anim id est laborum + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit anim id est laborum + + + ))} + + + ))[activeStep] + } + + + + ); +}; + +TotalLayoutTemplate.propTypes = { + data: PropTypes.array, + currentStep: PropTypes.number, +}; + +export const WithTotalLayout = TotalLayoutTemplate.bind({}); + +WithTotalLayout.args = { + ...VERTICAL_CONTAINER_DEFAULT_PROPS, + data: STEPPER_DATA, +}; diff --git a/packages/components/src/layout/VerticalContainer/VerticalContainer.styles.js b/packages/components/src/layout/VerticalContainer/VerticalContainer.styles.js new file mode 100644 index 000000000..3be449eb7 --- /dev/null +++ b/packages/components/src/layout/VerticalContainer/VerticalContainer.styles.js @@ -0,0 +1,31 @@ +import { createStyles } from '@mantine/styles'; + +const VerticalContainerStyles = createStyles((theme) => { + const stepperTheme = theme.other.stepper; + + return { + root: { + position: 'relative', + display: 'flex', + width: '100%', + overflow: 'hidden', + flex: 1, + }, + stepper: { + position: 'sticky', + top: 25, + height: 'fit-content', + minWidth: 192, + marginRight: 16, + marginTop: 25, + }, + content: { + width: 928, + '@media (min-width: 1920px)': { + width: 1200, + }, + }, + }; +}); + +export { VerticalContainerStyles }; diff --git a/packages/components/src/layout/VerticalContainer/index.js b/packages/components/src/layout/VerticalContainer/index.js new file mode 100644 index 000000000..9b45e1df1 --- /dev/null +++ b/packages/components/src/layout/VerticalContainer/index.js @@ -0,0 +1,2 @@ +export * from './VerticalContainer'; +export * from './VerticalContainer.constants'; diff --git a/packages/components/src/layout/index.js b/packages/components/src/layout/index.js index d52ab8695..ae7b2f263 100644 --- a/packages/components/src/layout/index.js +++ b/packages/components/src/layout/index.js @@ -1,6 +1,7 @@ export * from './HorizontalStepperContainer'; export * from './TotalLayout'; export * from './VerticalStepperContainer'; +export * from './VerticalContainer'; export * from './ContextContainer'; export * from './ContentLegible'; export * from './PageContainer'; diff --git a/packages/components/src/overlay/Tooltip/Tooltip.constants.js b/packages/components/src/overlay/Tooltip/Tooltip.constants.js index 4702458c8..5c325323a 100644 --- a/packages/components/src/overlay/Tooltip/Tooltip.constants.js +++ b/packages/components/src/overlay/Tooltip/Tooltip.constants.js @@ -18,7 +18,7 @@ export const TOOLTIP_POSITION = [ ]; export const TOOLTIP_DEFAULT_PROPS = { - size: 'xs', + size: 'sm', color: 'primary', position: 'top', withArrow: true, diff --git a/packages/components/src/overlay/Tooltip/Tooltip.js b/packages/components/src/overlay/Tooltip/Tooltip.js index fa1d1107a..3bd2f7025 100644 --- a/packages/components/src/overlay/Tooltip/Tooltip.js +++ b/packages/components/src/overlay/Tooltip/Tooltip.js @@ -10,7 +10,7 @@ import { } from './Tooltip.constants'; const Tooltip = ({ size, color, position, withArrow, useAria, withinPortal, ...props }) => { - size = TOOLTIP_SIZES.includes(size) ? size : 'xs'; + size = TOOLTIP_SIZES.includes(size) ? size : 'sm'; color = TOOLTIP_COLORS.includes(color) ? color : 'primary'; position = TOOLTIP_POSITION.includes(position) ? position : 'top'; diff --git a/packages/components/src/overlay/Tooltip/Tooltip.styles.js b/packages/components/src/overlay/Tooltip/Tooltip.styles.js index e2e214486..3cd3be774 100644 --- a/packages/components/src/overlay/Tooltip/Tooltip.styles.js +++ b/packages/components/src/overlay/Tooltip/Tooltip.styles.js @@ -2,7 +2,7 @@ import { createStyles } from '@mantine/styles'; import { pxToRem, getPaddings, getFontExpressive } from '../../theme.mixins'; const getSizes = (theme, size) => { - const spacing = theme.spacing; + const { spacing } = theme; return { xs: { @@ -24,17 +24,17 @@ const getSizes = (theme, size) => { }[size]; }; -const getColor = (theme, color) => { - return { +const getColor = (theme, color) => + ({ primary: { - backgroundColor: theme.colors.interactive01h, + backgroundColor: 'black', // theme.colors.interactive01h, color: theme.other.button.content.color.primary['default--reverse'], '&:hover': { - backgroundColor: theme.colors.interactive01h, + backgroundColor: 'black', // theme.colors.interactive01h, }, '&:active': { - backgroundColor: theme.colors.interactive01h, - borderColor: theme.colors.interactive01h, + backgroundColor: 'black', // theme.colors.interactive01h, + // borderColor: theme.colors.interactive01h, }, }, secondary: { @@ -48,26 +48,25 @@ const getColor = (theme, color) => { borderColor: theme.colors.interactive01, }, }, - }[color]; -}; + })[color]; -export const TooltipStyles = createStyles((theme, { color, size }) => { - return { - root: {}, - arrow: { - ...getColor(theme, color), +const TooltipStyles = createStyles((theme, { color, size }) => ({ + root: {}, + arrow: { + ...getColor(theme, color), + }, + tooltip: { + ...getFontExpressive(null, 400), + ...getColor(theme, color), + ...getSizes(theme, size), + display: 'flex', + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + svg: { + marginLeft: pxToRem(5), }, - tooltip: { - ...getFontExpressive(null, 400), - ...getColor(theme, color), - ...getSizes(theme, size), - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - svg: { - marginLeft: pxToRem(5), - }, - }, - }; -}); + }, +})); + +export { TooltipStyles }; diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js index ad11f90d1..c0c8660b3 100644 --- a/packages/components/src/tokens.compiled.js +++ b/packages/components/src/tokens.compiled.js @@ -1153,7 +1153,7 @@ export default { "y": 0, "blur": 4, "spread": 0, - "color": "#ffffff26", + "color": "#ffffff", "type": "dropShadow" }, "type": "boxShadow" @@ -1234,8 +1234,17 @@ export default { "type": "color" }, "hover--reverse-transparent": { - "value": "#ffffff26", - "type": "color" + "value": "#ffffff", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.15", + "space": "lch" + } + } + } }, "down": { "value": "#F1FFBD", @@ -4930,12 +4939,30 @@ export default { "color": { "primary": { "default": { - "value": "#4d535866", - "type": "color" + "value": "#4D5358", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.4", + "space": "lch" + } + } + } }, "hover": { - "value": "#4d5358b3", - "type": "color" + "value": "#4D5358", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.7", + "space": "lch" + } + } + } }, "down": { "value": "#4D5358", diff --git a/packages/editors/CHANGELOG.md b/packages/editors/CHANGELOG.md index c1c18302a..4bd782a7d 100644 --- a/packages/editors/CHANGELOG.md +++ b/packages/editors/CHANGELOG.md @@ -1,5 +1,50 @@ # @bubbles-ui/editors +## 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 diff --git a/packages/editors/package.json b/packages/editors/package.json index 49ffaf872..c98abed98 100644 --- a/packages/editors/package.json +++ b/packages/editors/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/editors", - "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", @@ -79,8 +79,8 @@ "styled-icons": "^10.45.0" }, "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": "*" diff --git a/packages/extras/CHANGELOG.md b/packages/extras/CHANGELOG.md index 5dda7a04a..28ee9640b 100644 --- a/packages/extras/CHANGELOG.md +++ b/packages/extras/CHANGELOG.md @@ -1,5 +1,50 @@ # @bubbles-ui/extras +## 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 diff --git a/packages/extras/package.json b/packages/extras/package.json index f8025036c..f772c7335 100644 --- a/packages/extras/package.json +++ b/packages/extras/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/extras", - "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", @@ -53,8 +53,8 @@ "swiper": "^8.1.4" }, "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", "@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 12fa644f1..971b96aaf 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,35 @@ # @bubbles-ui/icons +## 1.2.126 + +### Patch Changes + +- Versions bump + +## 1.2.125 + +### Patch Changes + +- Versions bump + +## 1.2.124 + +### Patch Changes + +- Versions bump + +## 1.2.123 + +### Patch Changes + +- Versions bump + +## 1.2.122 + +### Patch Changes + +- Versions bump + ## 1.2.121 ### Patch Changes diff --git a/packages/icons/outline/esm/index.d.ts b/packages/icons/outline/esm/index.d.ts index f5f384b30..fcbb67298 100644 --- a/packages/icons/outline/esm/index.d.ts +++ b/packages/icons/outline/esm/index.d.ts @@ -163,6 +163,7 @@ export { default as RemoveIcon } from './RemoveIcon' export { default as SchoolBuildingIcon } from './SchoolBuildingIcon' export { default as SchoolTeacherFemaleIcon } from './SchoolTeacherFemaleIcon' export { default as SchoolTeacherMaleIcon } from './SchoolTeacherMaleIcon' +export { default as SearchPlusIcon } from './SearchPlusIcon' export { default as SearchIcon } from './SearchIcon' export { default as SendEmailEnvelopeIcon } from './SendEmailEnvelopeIcon' export { default as SendMessageIcon } from './SendMessageIcon' diff --git a/packages/icons/outline/esm/index.js b/packages/icons/outline/esm/index.js index fc2191d78..5a89abb0a 100644 --- a/packages/icons/outline/esm/index.js +++ b/packages/icons/outline/esm/index.js @@ -163,6 +163,7 @@ export { default as RemoveIcon } from './RemoveIcon.js' export { default as SchoolBuildingIcon } from './SchoolBuildingIcon.js' export { default as SchoolTeacherFemaleIcon } from './SchoolTeacherFemaleIcon.js' export { default as SchoolTeacherMaleIcon } from './SchoolTeacherMaleIcon.js' +export { default as SearchPlusIcon } from './SearchPlusIcon.js' export { default as SearchIcon } from './SearchIcon.js' export { default as SendEmailEnvelopeIcon } from './SendEmailEnvelopeIcon.js' export { default as SendMessageIcon } from './SendMessageIcon.js' diff --git a/packages/icons/outline/index.d.ts b/packages/icons/outline/index.d.ts index f5f384b30..fcbb67298 100644 --- a/packages/icons/outline/index.d.ts +++ b/packages/icons/outline/index.d.ts @@ -163,6 +163,7 @@ export { default as RemoveIcon } from './RemoveIcon' export { default as SchoolBuildingIcon } from './SchoolBuildingIcon' export { default as SchoolTeacherFemaleIcon } from './SchoolTeacherFemaleIcon' export { default as SchoolTeacherMaleIcon } from './SchoolTeacherMaleIcon' +export { default as SearchPlusIcon } from './SearchPlusIcon' export { default as SearchIcon } from './SearchIcon' export { default as SendEmailEnvelopeIcon } from './SendEmailEnvelopeIcon' export { default as SendMessageIcon } from './SendMessageIcon' diff --git a/packages/icons/outline/index.js b/packages/icons/outline/index.js index 7370ec78f..44838bd04 100644 --- a/packages/icons/outline/index.js +++ b/packages/icons/outline/index.js @@ -163,6 +163,7 @@ module.exports.RemoveIcon = require("./RemoveIcon.js") module.exports.SchoolBuildingIcon = require("./SchoolBuildingIcon.js") module.exports.SchoolTeacherFemaleIcon = require("./SchoolTeacherFemaleIcon.js") module.exports.SchoolTeacherMaleIcon = require("./SchoolTeacherMaleIcon.js") +module.exports.SearchPlusIcon = require("./SearchPlusIcon.js") module.exports.SearchIcon = require("./SearchIcon.js") module.exports.SendEmailEnvelopeIcon = require("./SendEmailEnvelopeIcon.js") module.exports.SendMessageIcon = require("./SendMessageIcon.js") diff --git a/packages/icons/package.json b/packages/icons/package.json index f7bf6a0dd..862e6a8bc 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/icons", - "version": "1.2.121", + "version": "1.2.126", "description": "The Bubbles Design System icons library.", "license": "MIT", "repository": { diff --git a/packages/icons/solid/esm/index.d.ts b/packages/icons/solid/esm/index.d.ts index 9929e6060..d776778fb 100644 --- a/packages/icons/solid/esm/index.d.ts +++ b/packages/icons/solid/esm/index.d.ts @@ -23,6 +23,7 @@ export { default as BookmarkedIcon } from './BookmarkedIcon' export { default as BookmarksIcon } from './BookmarksIcon' export { default as CakeBirthdayIcon } from './CakeBirthdayIcon' export { default as ChatTranslateIcon } from './ChatTranslateIcon' +export { default as CheckBoldIcon } from './CheckBoldIcon' export { default as CheckIcon } from './CheckIcon' export { default as ClassIcon } from './ClassIcon' export { default as CommentIcon } from './CommentIcon' @@ -76,6 +77,7 @@ export { default as ElectionDebateIcon } from './ElectionDebateIcon' export { default as ExclamationIcon } from './ExclamationIcon' export { default as ExcludeIcon } from './ExcludeIcon' export { default as ExpandFullIcon } from './ExpandFullIcon' +export { default as ExpandIcon } from './ExpandIcon' export { default as FacebookIcon } from './FacebookIcon' export { default as FavoriteHeartIcon } from './FavoriteHeartIcon' export { default as FlagIcon } from './FlagIcon' @@ -149,8 +151,10 @@ export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIco export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon' export { default as SettingsIcon } from './SettingsIcon' export { default as ShapePyramidIcon } from './ShapePyramidIcon' +export { default as SlashIcon } from './SlashIcon' export { default as StarAlternateIcon } from './StarAlternateIcon' export { default as StarIcon } from './StarIcon' +export { default as StatisticsIcon } from './StatisticsIcon' export { default as StudentIcon } from './StudentIcon' export { default as SubtractCircleAlternateIcon } from './SubtractCircleAlternateIcon' export { default as SubtractSquareAlternateIcon } from './SubtractSquareAlternateIcon' diff --git a/packages/icons/solid/esm/index.js b/packages/icons/solid/esm/index.js index 215bcfdf4..1ac239198 100644 --- a/packages/icons/solid/esm/index.js +++ b/packages/icons/solid/esm/index.js @@ -23,6 +23,7 @@ export { default as BookmarkedIcon } from './BookmarkedIcon.js' export { default as BookmarksIcon } from './BookmarksIcon.js' export { default as CakeBirthdayIcon } from './CakeBirthdayIcon.js' export { default as ChatTranslateIcon } from './ChatTranslateIcon.js' +export { default as CheckBoldIcon } from './CheckBoldIcon.js' export { default as CheckIcon } from './CheckIcon.js' export { default as ClassIcon } from './ClassIcon.js' export { default as CommentIcon } from './CommentIcon.js' @@ -76,6 +77,7 @@ export { default as ElectionDebateIcon } from './ElectionDebateIcon.js' export { default as ExclamationIcon } from './ExclamationIcon.js' export { default as ExcludeIcon } from './ExcludeIcon.js' export { default as ExpandFullIcon } from './ExpandFullIcon.js' +export { default as ExpandIcon } from './ExpandIcon.js' export { default as FacebookIcon } from './FacebookIcon.js' export { default as FavoriteHeartIcon } from './FavoriteHeartIcon.js' export { default as FlagIcon } from './FlagIcon.js' @@ -149,8 +151,10 @@ export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIco export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon.js' export { default as SettingsIcon } from './SettingsIcon.js' export { default as ShapePyramidIcon } from './ShapePyramidIcon.js' +export { default as SlashIcon } from './SlashIcon.js' export { default as StarAlternateIcon } from './StarAlternateIcon.js' export { default as StarIcon } from './StarIcon.js' +export { default as StatisticsIcon } from './StatisticsIcon.js' export { default as StudentIcon } from './StudentIcon.js' export { default as SubtractCircleAlternateIcon } from './SubtractCircleAlternateIcon.js' export { default as SubtractSquareAlternateIcon } from './SubtractSquareAlternateIcon.js' diff --git a/packages/icons/solid/index.d.ts b/packages/icons/solid/index.d.ts index 9929e6060..d776778fb 100644 --- a/packages/icons/solid/index.d.ts +++ b/packages/icons/solid/index.d.ts @@ -23,6 +23,7 @@ export { default as BookmarkedIcon } from './BookmarkedIcon' export { default as BookmarksIcon } from './BookmarksIcon' export { default as CakeBirthdayIcon } from './CakeBirthdayIcon' export { default as ChatTranslateIcon } from './ChatTranslateIcon' +export { default as CheckBoldIcon } from './CheckBoldIcon' export { default as CheckIcon } from './CheckIcon' export { default as ClassIcon } from './ClassIcon' export { default as CommentIcon } from './CommentIcon' @@ -76,6 +77,7 @@ export { default as ElectionDebateIcon } from './ElectionDebateIcon' export { default as ExclamationIcon } from './ExclamationIcon' export { default as ExcludeIcon } from './ExcludeIcon' export { default as ExpandFullIcon } from './ExpandFullIcon' +export { default as ExpandIcon } from './ExpandIcon' export { default as FacebookIcon } from './FacebookIcon' export { default as FavoriteHeartIcon } from './FavoriteHeartIcon' export { default as FlagIcon } from './FlagIcon' @@ -149,8 +151,10 @@ export { default as SettingMenuHorizontalIcon } from './SettingMenuHorizontalIco export { default as SettingMenuVerticalIcon } from './SettingMenuVerticalIcon' export { default as SettingsIcon } from './SettingsIcon' export { default as ShapePyramidIcon } from './ShapePyramidIcon' +export { default as SlashIcon } from './SlashIcon' export { default as StarAlternateIcon } from './StarAlternateIcon' export { default as StarIcon } from './StarIcon' +export { default as StatisticsIcon } from './StatisticsIcon' export { default as StudentIcon } from './StudentIcon' export { default as SubtractCircleAlternateIcon } from './SubtractCircleAlternateIcon' export { default as SubtractSquareAlternateIcon } from './SubtractSquareAlternateIcon' diff --git a/packages/icons/solid/index.js b/packages/icons/solid/index.js index 66d53cc70..b6233ff9a 100644 --- a/packages/icons/solid/index.js +++ b/packages/icons/solid/index.js @@ -23,6 +23,7 @@ module.exports.BookmarkedIcon = require("./BookmarkedIcon.js") module.exports.BookmarksIcon = require("./BookmarksIcon.js") module.exports.CakeBirthdayIcon = require("./CakeBirthdayIcon.js") module.exports.ChatTranslateIcon = require("./ChatTranslateIcon.js") +module.exports.CheckBoldIcon = require("./CheckBoldIcon.js") module.exports.CheckIcon = require("./CheckIcon.js") module.exports.ClassIcon = require("./ClassIcon.js") module.exports.CommentIcon = require("./CommentIcon.js") @@ -76,6 +77,7 @@ module.exports.ElectionDebateIcon = require("./ElectionDebateIcon.js") module.exports.ExclamationIcon = require("./ExclamationIcon.js") module.exports.ExcludeIcon = require("./ExcludeIcon.js") module.exports.ExpandFullIcon = require("./ExpandFullIcon.js") +module.exports.ExpandIcon = require("./ExpandIcon.js") module.exports.FacebookIcon = require("./FacebookIcon.js") module.exports.FavoriteHeartIcon = require("./FavoriteHeartIcon.js") module.exports.FlagIcon = require("./FlagIcon.js") @@ -149,8 +151,10 @@ module.exports.SettingMenuHorizontalIcon = require("./SettingMenuHorizontalIcon. module.exports.SettingMenuVerticalIcon = require("./SettingMenuVerticalIcon.js") module.exports.SettingsIcon = require("./SettingsIcon.js") module.exports.ShapePyramidIcon = require("./ShapePyramidIcon.js") +module.exports.SlashIcon = require("./SlashIcon.js") module.exports.StarAlternateIcon = require("./StarAlternateIcon.js") module.exports.StarIcon = require("./StarIcon.js") +module.exports.StatisticsIcon = require("./StatisticsIcon.js") module.exports.StudentIcon = require("./StudentIcon.js") module.exports.SubtractCircleAlternateIcon = require("./SubtractCircleAlternateIcon.js") module.exports.SubtractSquareAlternateIcon = require("./SubtractSquareAlternateIcon.js") diff --git a/packages/icons/src/outline/search-plus.svg b/packages/icons/src/outline/search-plus.svg new file mode 100644 index 000000000..1eef69381 --- /dev/null +++ b/packages/icons/src/outline/search-plus.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/packages/icons/src/solid/check-bold.svg b/packages/icons/src/solid/check-bold.svg new file mode 100644 index 000000000..da8680eba --- /dev/null +++ b/packages/icons/src/solid/check-bold.svg @@ -0,0 +1,12 @@ + + + + + + + + + + diff --git a/packages/icons/src/solid/expand.svg b/packages/icons/src/solid/expand.svg new file mode 100644 index 000000000..c463e3752 --- /dev/null +++ b/packages/icons/src/solid/expand.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/icons/src/solid/slash.svg b/packages/icons/src/solid/slash.svg new file mode 100644 index 000000000..103e432b0 --- /dev/null +++ b/packages/icons/src/solid/slash.svg @@ -0,0 +1,4 @@ + + + diff --git a/packages/icons/src/solid/statistics.svg b/packages/icons/src/solid/statistics.svg new file mode 100644 index 000000000..90efe3fff --- /dev/null +++ b/packages/icons/src/solid/statistics.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/leemons/CHANGELOG.md b/packages/leemons/CHANGELOG.md index be353aedf..dd9b394e5 100644 --- a/packages/leemons/CHANGELOG.md +++ b/packages/leemons/CHANGELOG.md @@ -1,5 +1,60 @@ # @bubbles-ui/leemons +## 1.2.126 + +### Patch Changes + +- Versions bump +- Updated dependencies + - @bubbles-ui/components@1.2.126 + - @bubbles-ui/calendars@1.2.126 + - @bubbles-ui/editors@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/calendars@1.2.125 + - @bubbles-ui/editors@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/calendars@1.2.124 + - @bubbles-ui/editors@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/calendars@1.2.123 + - @bubbles-ui/editors@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/calendars@1.2.122 + - @bubbles-ui/editors@1.2.122 + - @bubbles-ui/icons@1.2.122 + ## 1.2.121 ### Patch Changes diff --git a/packages/leemons/package.json b/packages/leemons/package.json index 3eccabe8f..159352335 100644 --- a/packages/leemons/package.json +++ b/packages/leemons/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/leemons", - "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", @@ -74,10 +74,10 @@ "ajv": "6.12.6" }, "peerDependencies": { - "@bubbles-ui/calendars": "^1.2.121", - "@bubbles-ui/components": "^1.2.121", - "@bubbles-ui/editors": "^1.2.121", - "@bubbles-ui/icons": "^1.2.121", + "@bubbles-ui/calendars": "^1.2.126", + "@bubbles-ui/components": "^1.2.126", + "@bubbles-ui/editors": "^1.2.126", + "@bubbles-ui/icons": "^1.2.126", "dayjs": "^1.10.7", "react": "^17.0.1", "react-dom": "^17.0.1", diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.js index 684582d52..bf7b0b501 100644 --- a/packages/leemons/src/common/AssetPlayer/AssetPlayer.js +++ b/packages/leemons/src/common/AssetPlayer/AssetPlayer.js @@ -1,8 +1,8 @@ +/* eslint-disable no-nested-ternary */ import React, { useEffect, useMemo, useRef, useState } from 'react'; import ReactPlayer from 'react-player/lazy'; import { isFunction, isNil } from 'lodash'; import { Box, ImageLoader, Text, COLORS, ModalZoom, TextClamp } from '@bubbles-ui/components'; -import { ControlsPlayIcon } from '@bubbles-ui/icons/solid'; import { DownloadIcon } from '@bubbles-ui/icons/outline'; import { AssetPlayerStyles } from './AssetPlayer.styles'; import { ASSET_PLAYER_DEFAULT_PROPS, ASSET_PLAYER_PROP_TYPES } from './AssetPlayer.constants'; @@ -10,6 +10,7 @@ import { ProgressBar } from './components/ProgressBar'; import { AudioCardPlayer } from './components/AudioCardPlayer'; import { PDFPlayer } from './components/PDFPlayer'; import { Aframe } from './components/Aframe'; +import { ButtonIcon } from './components/ButtonIcon'; const format = (seconds) => { const date = new Date(seconds * 1000); @@ -333,8 +334,14 @@ const AssetPlayer = ({ )} {(!showPlayer || media.isAudio) && ( - - + { + e.stopPropagation(); + e.preventDefault(); + }} + > + {cover && } @@ -345,6 +352,9 @@ const AssetPlayer = ({ <> {media.isImage && ( + + + @@ -362,6 +372,9 @@ const AssetPlayer = ({ pointerEvents: !canPlay && 'none', }} > + + + {!hideURLInfo && ( @@ -394,13 +407,17 @@ const AssetPlayer = ({ ) : ( + + + - ) ) : null} {!media.isImage && !media.isURL && !media.isPDF && !media.isAFrame3D && ( - {icon} + + + )} )} diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.stories.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.stories.js index 474f69be1..c8bdc61d7 100644 --- a/packages/leemons/src/common/AssetPlayer/AssetPlayer.stories.js +++ b/packages/leemons/src/common/AssetPlayer/AssetPlayer.stories.js @@ -90,6 +90,8 @@ export const Playground = Template.bind({}); Playground.args = { ...ASSET_PLAYER_DEFAULT_PROPS, test_asset: 'video', + height: 200, + width: 496, pdfLabels: { pageLabel: 'Página', paginatorLabel: 'de', diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js index 540aacbfa..27e502ff2 100644 --- a/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js +++ b/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js @@ -53,6 +53,17 @@ const AssetPlayerStyles = createStyles( pointerEvents: showPlayer && 'none', userSelect: 'none', }, + reactPlayer: { + backgroundColor: 'black', + }, + buttonIcon: { + position: 'absolute', + zIndex: 10, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + pointerEvents: 'none', + }, coverShadow: { position: 'absolute', height: '100%', diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.constants.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.constants.js new file mode 100644 index 000000000..0057d3a8f --- /dev/null +++ b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.constants.js @@ -0,0 +1,9 @@ +import propTypes from 'prop-types'; + +export const BUTTONICON_DEFAULT_PROPS = { + fileType: '', +}; + +export const BUTTONICON_PROP_TYPES = { + fileType: propTypes.string, +}; diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.js new file mode 100644 index 000000000..9251bbfee --- /dev/null +++ b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { Box } from '@bubbles-ui/components'; +import { DownloadIcon, OpenIcon, SearchPlusIcon } from '@bubbles-ui/icons/outline'; +import { ControlsPlayIcon } from '@bubbles-ui/icons/solid'; + +import { ButtonIconStyles } from './ButtonIcon.styles'; +import { BUTTONICON_DEFAULT_PROPS, BUTTONICON_PROP_TYPES } from './ButtonIcon.constants'; + +const ButtonIcon = ({ fileType }) => { + const { classes } = ButtonIconStyles({}); + const fileTypeIcon = { + image: ( + + ), + file: , + document: , + video: , + }; + + return ( + { + e.preventDefault(); + e.stopPropagation(); + }} + > + {fileType && fileTypeIcon[fileType]} + + ); +}; + +ButtonIcon.popTypes = BUTTONICON_PROP_TYPES; +ButtonIcon.defaultProps = BUTTONICON_DEFAULT_PROPS; +ButtonIcon.displayName = 'ButtonIcon'; + +export { ButtonIcon }; diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.styles.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.styles.js new file mode 100644 index 000000000..83f9fdc23 --- /dev/null +++ b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.styles.js @@ -0,0 +1,19 @@ +import { createStyles } from '@bubbles-ui/components'; + +const ButtonIconStyles = createStyles((theme) => ({ + root: { + display: 'flex', + width: '40px', + maxHeight: '40px', + padding: '12px 16px 8px 16px', + justifyContent: 'center', + alignItems: 'center', + borderRadius: '4px', + backgroundColor: theme.other.buttonIconCard.background.color.primary.default, + '&:hover': { + backgroundColor: theme.other.buttonIconCard.background.color.primary.hover, + }, + }, +})); + +export { ButtonIconStyles }; diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/index.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/index.js new file mode 100644 index 000000000..d016c203e --- /dev/null +++ b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/index.js @@ -0,0 +1 @@ +export * from './ButtonIcon'; diff --git a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js index 809129844..972a92329 100644 --- a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js +++ b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js @@ -1,15 +1,15 @@ import React, { useEffect } from 'react'; -import { PROGRESS_BAR_DEFAULT_PROPS, PROGRESS_BAR_PROP_TYPES } from './ProgressBar.constants'; -import { ProgressBarStyles } from './ProgressBar.styles'; import { Box, Text } from '@bubbles-ui/components'; import { - ExpandFullIcon, + ExpandIcon, ControlsPlayIcon, ControlsPauseIcon, VolumeControlLowIcon, VolumeControlOffIcon, } from '@bubbles-ui/icons/solid'; import { ShrinkIcon } from '@bubbles-ui/icons/outline'; +import { ProgressBarStyles } from './ProgressBar.styles'; +import { PROGRESS_BAR_DEFAULT_PROPS, PROGRESS_BAR_PROP_TYPES } from './ProgressBar.constants'; const ProgressBar = ({ seekValue, @@ -47,25 +47,6 @@ const ProgressBar = ({ const { classes } = ProgressBarStyles({}, { name: 'ProgressBar' }); return ( - - - - setIsPlaying(!isPlaying)} className={classes.iconWrapper}> {isPlaying ? ( @@ -94,10 +75,29 @@ const ProgressBar = ({ style={{ flex: 1, justifyContent: 'right', marginRight: 2 }} onClick={handleFullscreenChange} > + + + + {fullScreenMode ? ( ) : ( - + )} diff --git a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js index 23873d7c5..79be98dec 100644 --- a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js +++ b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js @@ -1,6 +1,6 @@ import { createStyles, pxToRem } from '@bubbles-ui/components'; -export const ProgressBarStyles = createStyles((theme, {}) => { +const ProgressBarStyles = createStyles((theme, {}) => { const globalTheme = theme.other.global; return { @@ -10,12 +10,15 @@ export const ProgressBarStyles = createStyles((theme, {}) => { flexDirection: 'column', gap: globalTheme.spacing.gap.lg, padding: globalTheme.spacing.padding.md, - left: 0, - right: 0, - bottom: 0, + left: 16, + right: 16, + bottom: 5, zIndex: 2, - background: - 'linear-gradient(180deg, rgba(50, 50, 50, 0) 13.54%, rgba(54, 54, 54, 0.609375) 73.44%, #383838 100%)', + borderRadius: 4, + backgroundColor: theme.other.buttonIconCard.background.color.primary.default, + '&:hover': { + backgroundColor: theme.other.buttonIconCard.background.color.primary.hover, + }, }, progressBar: { WebkitAppearance: 'none', @@ -25,6 +28,7 @@ export const ProgressBarStyles = createStyles((theme, {}) => { borderRadius: 4, overflow: 'hidden', position: 'relative', + marginRight: 14, }, progressBarValue: { height: '100%', @@ -86,3 +90,5 @@ export const ProgressBarStyles = createStyles((theme, {}) => { }, }; }); + +export { ProgressBarStyles }; diff --git a/packages/leemons/src/library/LibraryCard/mock/data.js b/packages/leemons/src/library/LibraryCard/mock/data.js index 2007743d6..6dfd00924 100644 --- a/packages/leemons/src/library/LibraryCard/mock/data.js +++ b/packages/leemons/src/library/LibraryCard/mock/data.js @@ -55,9 +55,8 @@ export const VIDEO_ASSET = { tags: ['Rome', 'Docu'], cover: 'https://images.unsplash.com/photo-1627552245715-77d79bbf6fe2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80', - url: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4', + url: 'https://www.rickydelgado.es/wp-content/uploads/2020/01/Ricky-Delgado-Felicitación-navideña-Olipes-2018.mp4', }; - export const IMAGE_ASSET = { color: '#DC5571', name: 'El ritmo de la guerra', diff --git a/packages/notifications/CHANGELOG.md b/packages/notifications/CHANGELOG.md index a0c2c8c49..c69977e51 100644 --- a/packages/notifications/CHANGELOG.md +++ b/packages/notifications/CHANGELOG.md @@ -1,5 +1,50 @@ # @bubbles-ui/notifications +## 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 diff --git a/packages/notifications/package.json b/packages/notifications/package.json index a69e5291b..ec68c5f9b 100644 --- a/packages/notifications/package.json +++ b/packages/notifications/package.json @@ -1,6 +1,6 @@ { "name": "@bubbles-ui/notifications", - "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", @@ -52,8 +52,8 @@ "react-transition-group": "^4.4.2" }, "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", "@mantine/core": "5.2.4", "@mantine/hooks": "5.2.4", "react": "^17.0.1",