feat: add icons to button

src/components/button/button.test.tsx

@@ -11,63 +11,108 @@ const defaultButton: ButtonProps = {
   handleClick: clickEvent,
 };
 
-function sut(props: ButtonProps = defaultButton): HTMLElement {
+function sut(props: ButtonProps = defaultButton) {
   render(<IonButton {...props} />);
-  return screen.getByRole('button', { name: props.label });
 }
 
+const getButton = () => {
+  return screen.getByTestId('ion-button');
+};
+
 describe('Button', () => {
-  it('should render the Button component', () => {
-    const label = 'Hello world!';
-    sut({ ...defaultButton, label: label });
-    expect(screen.getByText(label)).toBeInTheDocument();
-  });
+  describe('Default', () => {
+    it('should render the Button component', () => {
+      const label = 'Hello world!';
+      sut({ ...defaultButton, label: label });
+      expect(screen.getByText(label)).toBeInTheDocument();
+    });
 
-  it('should execute user event when the button is clicked', async () => {
-    await userEvent.click(sut({ ...defaultButton }));
-    expect(clickEvent).toHaveBeenCalled();
-  });
+    it('should execute user event when the button is clicked', async () => {
+      sut();
+      await userEvent.click(getButton());
+      expect(clickEvent).toHaveBeenCalled();
+    });
 
-  it('should be disabled', () => {
-    expect(sut({ ...defaultButton, disabled: true })).toHaveAttribute(
-      'disabled'
-    );
-  });
+    it('should be disabled', () => {
+      sut({ ...defaultButton, disabled: true });
+      expect(getButton()).toHaveAttribute('disabled');
+    });
 
-  afterEach(() => {
-    clickEvent.mockClear();
+    afterEach(() => {
+      clickEvent.mockClear();
+    });
   });
-});
 
-describe('Button Types', () => {
-  const buttonTypes: Array<ButtonProps['type']> = [
-    'primary',
-    'secondary',
-    'ghost',
-    'dashed',
-  ];
-
-  it.each(buttonTypes)('should render button with %s style type', (type) => {
-    const { className } = sut({ ...defaultButton, type: type });
-    expect(className).toContain(`type-${type}`);
+  describe('Button Types', () => {
+    const buttonTypes: Array<ButtonProps['type']> = [
+      'primary',
+      'secondary',
+      'ghost',
+      'dashed',
+    ];
+
+    it.each(buttonTypes)('should render button with %s style type', (type) => {
+      sut({ ...defaultButton, type: type });
+      const { className } = getButton();
+      expect(className).toContain(`type-${type}`);
+    });
+
+    it.each(buttonTypes)('should render %s danger button', (type) => {
+      sut({ ...defaultButton, type: type, danger: true });
+      const { className } = getButton();
+      expect(className).toContain('danger-true');
+      expect(className).toContain(`type-${type}`);
+    });
   });
 
-  it.each(buttonTypes)('should render %s danger button', (type) => {
-    const { className } = sut({ ...defaultButton, type: type, danger: true });
-    expect(className).toContain('danger-true');
-    expect(className).toContain(`type-${type}`);
+  describe('Button Sizes', () => {
+    const buttonSizes: Array<ButtonProps['size']> = ['sm', 'md', 'lg', 'xl'];
+
+    it.each(buttonSizes)(
+      'should render button with %s size variation',
+      (size) => {
+        sut({ ...defaultButton, size: size });
+        expect(getButton().className).toContain(`size-${size}`);
+      }
+    );
   });
-});
 
-describe('Button Sizes', () => {
-  const buttonSizes: Array<ButtonProps['size']> = ['sm', 'md', 'lg', 'xl'];
+  describe('With Icon', () => {
+    it('should render md icon size by default', () => {
+      const sm = '20';
+      const icon = 'pencil';
+      sut({ ...defaultButton, icon: icon });
+      const Tab = screen.getByTestId(`ion-icon-${icon}`);
+      expect(Tab).toHaveAttribute('height', sm);
+    });
 
-  it.each(buttonSizes)(
-    'should render button with %s size variation',
-    (size) => {
-      expect(sut({ ...defaultButton, size: size }).className).toContain(
-        `size-${size}`
+    it('should render icon lg when button is lg', () => {
+      const lgSize = '24';
+      const lgIconName = 'alert';
+      sut({
+        ...defaultButton,
+        name: 'button-icon',
+        size: 'lg',
+        icon: lgIconName,
+      });
+      expect(screen.getByTestId(`ion-icon-${lgIconName}`)).toHaveAttribute(
+        'height',
+        lgSize
       );
-    }
-  );
+    });
+
+    it('should render icon in right side', () => {
+      const icon = 'alert';
+      sut({ ...defaultButton, icon: icon, iconOnRight: true });
+      expect(getButton().className).toContain('iconOnRight-true');
+    });
+
+    it('should render icon in left by default', () => {
+      sut({ ...defaultButton, icon: 'alert' });
+      const buttonContainer = screen.getByTestId('ion-button-container');
+      const ContainerFirstChild = buttonContainer.children.item(0);
+
+      expect(ContainerFirstChild?.tagName).toBe('svg');
+    });
+  });
 });

src/components/button/button.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import IonIcon from '../icons/icons';
 import { SizeType } from '../../core/types/size';
+import { iconType } from '../icons/svgs/icons';
 import { ButtonStyles } from './styles';
 
 type StitchesButtonProps = React.ComponentProps<typeof ButtonStyles>;
@@ -13,25 +15,42 @@ export type ButtonProps = {
   handleClick?: () => void;
   danger?: boolean;
   size?: ButtonSizes;
+  icon?: iconType;
+  iconOnRight?: boolean;
 } & StitchesButtonProps;
 
 const IonButton = ({
   type = 'primary',
   disabled = false,
   danger = false,
   size = 'md',
+  icon,
+  iconOnRight,
   label,
   handleClick,
 }: ButtonProps) => {
+  const iconSize = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+  };
+
   return (
     <ButtonStyles
       type={type}
       onClick={handleClick}
       disabled={disabled}
       danger={danger}
       size={size}
+      withIcon={!!icon}
+      iconOnRight={iconOnRight}
+      data-testid="ion-button"
     >
-      {label}
+      <div data-testid="ion-button-container">
+        {icon && <IonIcon type={icon} size={iconSize[`${size}`]} />}
+        <span>{label}</span>
+      </div>
     </ButtonStyles>
   );
 };