-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
539 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 3 additions & 3 deletions
6
packages/components/src/informative/ActivityAnswersBar/CustomLegend/CustomLegend.styles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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' }, | ||
| }; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
15 changes: 15 additions & 0 deletions
15
packages/components/src/layout/VerticalContainer/VerticalContainer.constants.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | ||
| }; |
37 changes: 37 additions & 0 deletions
37
packages/components/src/layout/VerticalContainer/VerticalContainer.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 }; |
165 changes: 165 additions & 0 deletions
165
packages/components/src/layout/VerticalContainer/VerticalContainer.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
|
||
| <!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
| <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
|
|
||
| - [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. | ||
|
|
||
| <ThemeProvider> | ||
| <VerticalContainer | ||
| data={[ | ||
| { | ||
| label: 'Resumen', | ||
| badge: 'Badge', | ||
| status: 'OK', | ||
| }, | ||
| { | ||
| label: 'Pruebas', | ||
| onClick: () => { | ||
| }, | ||
| }, | ||
| ]} | ||
| ></VerticalContainer> | ||
| </ThemeProvider> | ||
|
|
||
| ## VerticalStepper width | ||
|
|
||
| You can control the width of the VerticalStepper with the ``navWidth` prop. | ||
|
|
||
| <ThemeProvider> | ||
| <VerticalContainer | ||
| navWidth={400} | ||
| data={[ | ||
| { | ||
| label: 'Resumen', | ||
| badge: 'Badge', | ||
| status: 'OK', | ||
| }, | ||
| { | ||
| label: 'Pruebas', | ||
| onClick: () => { | ||
| }, | ||
| }, | ||
| ]} | ||
| ></VerticalContainer> | ||
| <VerticalContainer | ||
| navWidth={800} | ||
| data={[ | ||
| { | ||
| label: 'Resumen', | ||
| badge: 'Badge', | ||
| status: 'OK', | ||
| }, | ||
| { | ||
| label: 'Pruebas', | ||
| onClick: () => { | ||
| }, | ||
| }, | ||
| ]} | ||
| ></VerticalContainer> | ||
| </ThemeProvider> | ||
|
|
||
| ## Content padding | ||
|
|
||
| With the boolean props `disableContentPadding`, control if you want padding for the content or not | ||
|
|
||
| <ThemeProvider> | ||
| <VerticalContainer | ||
| disableContentPadding | ||
| data={[ | ||
| { | ||
| label: 'Resumen', | ||
| badge: 'Badge', | ||
| status: 'OK', | ||
| }, | ||
| { | ||
| label: 'Pruebas', | ||
| }, | ||
| ]} | ||
| > | ||
| <ContextContainer title="Step 1"> | ||
| <Box> | ||
| <Paragraph> | ||
| 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 | ||
| </Paragraph> | ||
| </Box> | ||
| </ContextContainer> | ||
| </VerticalContainer> | ||
| </ThemeProvider> | ||
|
|
||
| ## VerticalStepper sticky at | ||
|
|
||
| With the `stickyAt` prop, control the position in pixels from the top at which the VerticalStepper becomes sticky. | ||
|
|
||
| <ThemeProvider> | ||
| <VerticalContainer | ||
| stickyAt={50} | ||
| data={[ | ||
| { | ||
| label: 'Resumen', | ||
| badge: 'Badge', | ||
| status: 'OK', | ||
| }, | ||
| { | ||
| label: 'Pruebas', | ||
| }, | ||
| ]} | ||
| > | ||
| <ContextContainer title="Step 1"> | ||
| <Box> | ||
| <Paragraph> | ||
| 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 | ||
| </Paragraph> | ||
| </Box> | ||
| </ContextContainer> | ||
| </VerticalContainer> | ||
| </ThemeProvider> | ||
|
|
||
| ## Component API | ||
|
|
||
| <Preview> | ||
| <Story id="atoms-layout-verticalsteppercontainer--playground" /> | ||
| </Preview> | ||
|
|
||
| <Props of={VerticalContainer} /> | ||
|
|
||
| ## 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) |
Oops, something went wrong.