diff --git a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.constants.js b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.constants.js index 1d711464b..6c9b98ae7 100644 --- a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.constants.js +++ b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.constants.js @@ -3,8 +3,10 @@ import PropTypes from 'prop-types'; export const ACTIVITY_ACCORDION_DEFAULT_PROPS = { multiple: true, compact: false, + withoutDivider: false, }; export const ACTIVITY_ACCORDION_PROP_TYPES = { multiple: PropTypes.bool, compact: PropTypes.bool, + withoutDivider: PropTypes.bool, }; diff --git a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js index 8e1f96b18..739bc3696 100644 --- a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js +++ b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.js @@ -9,6 +9,7 @@ import { ACTIVITY_ACCORDION_DEFAULT_PROPS, ACTIVITY_ACCORDION_PROP_TYPES, } from './ActivityAccordion.constants'; +import { Divider } from '../../../lib/layout/Divider/Divider'; function AccordionLabel({ label, title, icon, hideIcon, rightSection, compact, classes }) { return ( @@ -48,7 +49,7 @@ AccordionLabel.propTypes = { classes: PropTypes.any, }; -const ActivityAccordion = ({ children, compact, ...props }) => { +const ActivityAccordion = ({ children, compact, withoutDivider, ...props }) => { const { classes, cx } = ActivityAccordionStyles({ compact }, { name: 'ActivityAccordion' }); return ( @@ -57,16 +58,19 @@ const ActivityAccordion = ({ children, compact, ...props }) => { if (!child) return null; const { children: panelContent, color, ...panelProps } = child.props; return ( - - - - - - - {panelContent} - - - + <> + + + + + + + {panelContent} + + + + {!withoutDivider && } + ); })} diff --git a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.stories.js b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.stories.js index d268541b1..6d44827d4 100644 --- a/packages/components/src/informative/ActivityAccordion/ActivityAccordion.stories.js +++ b/packages/components/src/informative/ActivityAccordion/ActivityAccordion.stories.js @@ -26,48 +26,46 @@ export default { }, }; -const Template = ({ ...props }) => { - return ( - ({ backgroundColor: theme.colors.ui02, padding: theme.spacing[9] })}> - - } - rightSection={} - > - - - 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. - - - +const Template = ({ ...props }) => ( + ({ padding: theme.spacing[9] })}> + + } + rightSection={} + > + + + 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. + + + - } - rightSection={} - > - - - 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. - - - - - - ); -}; + } + rightSection={} + > + + + 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. + + + + + +); export const Playground = Template.bind({});