feat(ActivityAccordion): add divider and withoutDivider prop

leemonade · Jan 22, 2024 · 86b3e85 · 86b3e85
1 parent 768e4f1
commit 86b3e85
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 52 deletions.
diff --git 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
@@ -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 (
-          <Accordion.Item value={panelProps.itemValue || panelProps.label || `Panel ${index}`}>
-            <Accordion.Control>
-              <AccordionLabel {...panelProps} compact={compact} classes={classes} />
-            </Accordion.Control>
-            <Accordion.Panel>
-              <Box className={cx(classes.content, { [classes.contentSolid]: color === 'solid' })}>
-                {panelContent}
-              </Box>
-            </Accordion.Panel>
-          </Accordion.Item>
+          <>
+            <Accordion.Item value={panelProps.itemValue || panelProps.label || `Panel ${index}`}>
+              <Accordion.Control>
+                <AccordionLabel {...panelProps} compact={compact} classes={classes} />
+              </Accordion.Control>
+              <Accordion.Panel>
+                <Box className={cx(classes.content, { [classes.contentSolid]: color === 'solid' })}>
+                  {panelContent}
+                </Box>
+              </Accordion.Panel>
+            </Accordion.Item>
+            {!withoutDivider && <Divider />}
+          </>
         );
       })}
     </Accordion>

diff --git 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 (
-    <Box sx={(theme) => ({ backgroundColor: theme.colors.ui02, padding: theme.spacing[9] })}>
-      <ActivityAccordion {...props}>
-        <ActivityAccordionPanel
-          label="Test 1"
-          color="solid"
-          icon={<AlarmBellCheckIcon />}
-          rightSection={<Badge label="35" size="md" color="stroke" closable={false} />}
-        >
-          <Box p={20}>
-            <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>
-        </ActivityAccordionPanel>
+const Template = ({ ...props }) => (
+  <Box sx={(theme) => ({ padding: theme.spacing[9] })}>
+    <ActivityAccordion {...props}>
+      <ActivityAccordionPanel
+        label="Test 1"
+        color="solid"
+        icon={<AlarmBellCheckIcon />}
+        rightSection={<Badge label="35" size="md" color="stroke" closable={false} />}
+      >
+        <Box p={20}>
+          <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>
+      </ActivityAccordionPanel>
 
-        <ActivityAccordionPanel
-          label="Test 2"
-          icon={<BoardEducationIcon />}
-          rightSection={<Badge label="Optional" closable={false} />}
-        >
-          <Box p={20}>
-            <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>
-        </ActivityAccordionPanel>
-      </ActivityAccordion>
-    </Box>
-  );
-};
+      <ActivityAccordionPanel
+        label="Test 2"
+        icon={<BoardEducationIcon />}
+        rightSection={<Badge label="Optional" closable={false} />}
+      >
+        <Box p={20}>
+          <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>
+      </ActivityAccordionPanel>
+    </ActivityAccordion>
+  </Box>
+);
 
 export const Playground = Template.bind({});