Only override bottom padding

comicrelief · Nov 1, 2024 · 10a0343 · 10a0343
1 parent a74154b
commit 10a0343
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/components/Molecules/Accordion/Accordion.js b/src/components/Molecules/Accordion/Accordion.js
@@ -60,20 +60,20 @@ const Copy = styled.div`
     padding: 0 ${spacing('lg')};
   }
 
-  ${({ isOpen, contentPadding }) => (isOpen && css`
+  ${({ isOpen, contentBottomPadding }) => (isOpen && css`
     height: auto;
     visibility: visible;
     transition: all 0.2s cubic-bezier(0.21, 1.7, 0.83, 0.68) 0s;
-    padding: 0 (${contentPadding} || ${spacing('l')}) (${contentPadding} || ${spacing('l')});
+    padding: 0 ${spacing('lg')} ${contentBottomPadding || spacing('l')};
 
     @media ${({ theme }) => theme.allBreakpoints('M')} {
-      padding: 0 ${spacing('lg')} ${spacing('l')};
+      padding: 0 ${spacing('lg')} ${contentBottomPadding || spacing('l')};
     }
   `)}
 `;
 
 const Accordion = ({
-  children, title, contentPadding, ...rest
+  children, title, contentBottomPadding, ...rest
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -89,15 +89,15 @@ const Accordion = ({
           <Chevron colour="black" direction={isOpen ? 'up' : 'down'} />
         </Icon>
       </Button>
-      <Copy isOpen={isOpen} contentPadding={contentPadding}>
+      <Copy isOpen={isOpen} contentBottomPadding={contentBottomPadding}>
         {children}
       </Copy>
     </Container>
   );
 };
 
 Accordion.propTypes = {
-  contentPadding: PropTypes.string,
+  contentBottomPadding: PropTypes.string,
   children: PropTypes.node.isRequired,
   title: PropTypes.oneOfType([
     PropTypes.string,

diff --git a/src/components/Molecules/Accordion/Accordion.md b/src/components/Molecules/Accordion/Accordion.md
@@ -18,13 +18,13 @@ import Text from '../../Atoms/Text/Text';
 import Text from '../../Atoms/Text/Text';
 
 <Accordion
-  contentPadding="666px"
+  contentBottomPadding="15px"
   title={
     <Text family="Anton" size="l" uppercase>
       I am the title
     </Text>
   }
   >
- <Text tag="p">Tweaked padding here</Text>
+ <Text tag="p">Customised bottom padding here!</Text>
 </Accordion>
 ```