aplicando full width no botão

src/components/Button/index.tsx

@@ -3,10 +3,13 @@ import * as S from './styles'
 export type ButtonProps = {
   children?: React.ReactNode
   size?: 'small' | 'medium' | 'large'
+  fullWidth?: boolean
 }
 
-const Button = ({ children, size = 'medium' }: ButtonProps) => (
-  <S.Wrapper size={size}>{!!children && <span>{children}</span>}</S.Wrapper>
+const Button = ({ children, size = 'medium', fullWidth }: ButtonProps) => (
+  <S.Wrapper size={size} fullWidth={fullWidth}>
+    {!!children && <span>{children}</span>}
+  </S.Wrapper>
 )
 
 export default Button

src/components/Button/styles.ts

@@ -1,7 +1,7 @@
 import styled, { css, DefaultTheme } from 'styled-components'
 import { ButtonProps } from '.'
 
-type WrapperProps = Pick<ButtonProps, 'size'>
+type WrapperProps = Pick<ButtonProps, 'size' | 'fullWidth'>
 
 const wrapperModifiers = {
   small: (theme: DefaultTheme) => css`
@@ -17,17 +17,21 @@ const wrapperModifiers = {
     height: 5rem;
     font-size: ${theme.font.sizes.medium};
     padding: ${theme.spacings.xxsmall} ${theme.spacings.xlarge};
+  `,
+  fullWidth: () => css`
+    width: 100%;
   `
 }
 
 export const Wrapper = styled.button<WrapperProps>`
-  ${({ theme, size }) => css`
+  ${({ theme, size, fullWidth }) => css`
     background: linear-gradient(180deg, #ff5f5f 0%, #f062c0 50%);
     color: ${theme.colors.white};
     border: 0;
     border-radius: ${theme.border.radius};
     padding: ${theme.spacings.xxsmall};
 
     ${!!size && wrapperModifiers[size](theme)}
+    ${!!fullWidth && wrapperModifiers.fullWidth}
   `}
 `

src/components/Button/test.tsx

@@ -30,4 +30,11 @@ describe('<Button />', () => {
       'font-size': '1.2rem'
     })
   })
+
+  it('should render a full width version', () => {
+    renderWithTheme(<Button fullWidth>Click Me</Button>)
+    expect(screen.getByRole('button', { name: /Click Me/i })).toHaveStyle({
+      width: '100%'
+    })
+  })
 })