adicionando icone ao botão

davimattos · Jan 30, 2021 · ab68bd5 · ab68bd5
1 parent 6e9880d
commit ab68bd5
Show file tree

Hide file tree

Showing 5 changed files with 2,006 additions and 2,637 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "styled-components": "^5.1.1",
+    "styled-icons": "^10.27.0",
     "styled-media-query": "^2.1.2"
   },
   "devDependencies": {

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -4,10 +4,17 @@ export type ButtonProps = {
   children?: React.ReactNode
   size?: 'small' | 'medium' | 'large'
   fullWidth?: boolean
+  icon?: React.ReactNode
 }
 
-const Button = ({ children, size = 'medium', fullWidth }: ButtonProps) => (
-  <S.Wrapper size={size} fullWidth={fullWidth}>
+const Button = ({
+  children,
+  size = 'medium',
+  fullWidth,
+  icon
+}: ButtonProps) => (
+  <S.Wrapper size={size} fullWidth={fullWidth} hasIcon={!!icon}>
+    {!!icon && icon}
     {!!children && <span>{children}</span>}
   </S.Wrapper>
 )

diff --git a/src/components/Button/stories.tsx b/src/components/Button/stories.tsx
@@ -1,4 +1,6 @@
 import { Story, Meta } from '@storybook/react/types-6-0'
+import { AddShoppingCart } from '@styled-icons/material-outlined/AddShoppingCart'
+
 import Button, { ButtonProps } from '.'
 
 export default {
@@ -16,3 +18,11 @@ export const Default: Story<ButtonProps> = (args) => <Button {...args} />
 Default.args = {
   children: 'Click Me'
 }
+
+export const WithIcon: Story<ButtonProps> = (args) => <Button {...args} />
+
+WithIcon.args = {
+  size: 'small',
+  children: 'Click Me',
+  icon: <AddShoppingCart />
+}
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
@@ -1,7 +1,10 @@
 import styled, { css, DefaultTheme } from 'styled-components'
 import { ButtonProps } from '.'
 
-type WrapperProps = Pick<ButtonProps, 'size' | 'fullWidth'>
+type WrapperProps = { hasIcon: boolean } & Pick<
+  ButtonProps,
+  'size' | 'fullWidth'
+>
 
 const wrapperModifiers = {
   small: (theme: DefaultTheme) => css`
@@ -20,18 +23,32 @@ const wrapperModifiers = {
   `,
   fullWidth: () => css`
     width: 100%;
+  `,
+  withIcon: (theme: DefaultTheme) => css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 1.5rem;
+
+      & + span {
+        margin-left: ${theme.spacings.xxsmall};
+      }
+    }
   `
 }
 
 export const Wrapper = styled.button<WrapperProps>`
-  ${({ theme, size, fullWidth }) => css`
+  ${({ theme, size, fullWidth, hasIcon }) => 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}
+    ${!!size && wrapperModifiers[size](theme)};
+    ${!!fullWidth && wrapperModifiers.fullWidth};
+    ${!!hasIcon && wrapperModifiers.withIcon(theme)};
   `}
 `