feat: Optional fullwidth prop for Button (#681)

* feat: Optional fullwidth prop for Button * Remove unneccessary import
comicrelief · Nov 1, 2024 · e94bc57 · e94bc57
1 parent 75d1180
commit e94bc57
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/components/Atoms/Button/Button.js b/src/components/Atoms/Button/Button.js
@@ -22,26 +22,30 @@ const StyledButton = styled.button`
     text-decoration: none;
   }
   ${({ color, theme }) => (color ? theme.buttonColors(color) : theme.buttonColors('red'))};
+
   @media ${({ theme }) => theme.allBreakpoints('M')} {
-    width: auto;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
   }
 
   @media ${({ theme }) => theme.allBreakpoints('L')} {
-    width: auto;
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
     padding: ${spacing('md')} ${spacing('l')};
     margin: 0 auto ${spacing('l')};
   }
 `;
 
-const Button = React.forwardRef(({ children, wrapper = false, ...rest }, ref) => (
-  <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref}>
+const Button = React.forwardRef(({
+  children, wrapper = false, fullWidth = false, ...rest
+}, ref) => (
+  <StyledButton {...rest} as={wrapper ? 'span' : 'button'} ref={ref} fullWidth={fullWidth}>
     {children}
   </StyledButton>
 ));
 
 Button.propTypes = {
   children: PropTypes.node.isRequired,
-  wrapper: PropTypes.bool // Buttons as span
+  wrapper: PropTypes.bool, // Buttons as span
+  fullWidth: PropTypes.bool
 };
 
 export default Button;
diff --git a/src/components/Atoms/Button/Button.md b/src/components/Atoms/Button/Button.md
@@ -5,3 +5,7 @@
 ```js
 <Button wrapper>My button as a span</Button>
 ```
+
+```js
+<Button type="button" fullWidth>Full-width button</Button>
+```
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,7 @@ @@
     ```js
     <Button wrapper>My button as a span</Button>
     ```
+    ```js
+    <Button type="button" fullWidth>Full-width button</Button>
+    ```