Added basic buttons

Author: EranNL

__tests__/Button.test.tsx

@@ -0,0 +1,83 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Button from '@/components/Button';
+import { Variant } from '@/components';
+
+describe('Button test', () => {
+    it('should render button', () => {
+        const container = shallow(
+            <Button
+                variant={Variant.PRIMARY}
+            >
+                Hello world
+            </Button>
+        );
+
+        expect(container.find('button').length).toBe(1);
+    });
+
+    it('should render button as link', () => {
+        const container = shallow(
+            <Button
+                as="a"
+                variant={Variant.PRIMARY}
+            >
+                Hello world
+            </Button>
+        );
+
+        expect(container.find('a').length).toBe(1);
+    });
+
+    it('should render block button', () => {
+        const container = shallow(
+            <Button
+                variant={Variant.PRIMARY}
+                block
+            >
+                Hello world
+            </Button>
+        );
+
+        expect(container.find('button').hasClass('btn-block')).toBeTruthy();
+    });
+
+    it('should render small button', () => {
+        const container = shallow(
+            <Button
+                variant={Variant.PRIMARY}
+                small
+            >
+                Hello world
+            </Button>
+        );
+
+        expect(container.find('button').hasClass('btn-small')).toBeTruthy();
+    });
+
+    it('should render button with icon left', () => {
+        const container = shallow(
+            <Button
+                variant={Variant.PRIMARY}
+                iconLeft={<i>icon</i>}
+            >
+                Hello world
+            </Button>
+        );
+
+        expect(container.find('button').find('i').text()).toContain('icon');
+    });
+
+    it('should render button with icon left', () => {
+        const container = shallow(
+            <Button
+                variant={Variant.PRIMARY}
+                iconRight={<i>icon</i>}
+            >
+                Hello world
+            </Button>
+        );
+
+        expect(container.find('button').find('i').text()).toContain('icon');
+    });
+});

package-lock.json

@@ -40,6 +40,10 @@
         "webpack-dev-server": "^3.11.0"
     },
     "dependencies": {
+        "@fortawesome/fontawesome-free": "^5.15.1",
+        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "@fortawesome/free-regular-svg-icons": "^5.15.1",
+        "@fortawesome/react-fontawesome": "^0.1.11",
         "clsx": "^1.1.1",
         "react": "^17.0.1"
     }

package.json

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import { Variant } from '@/components';
+
+export type ButtonComponentTypes = 'button' | 'a';
+
+export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
+    as?: ButtonComponentTypes;
+    variant: Variant | string;
+    iconLeft?: React.ReactElement;
+    iconRight?: React.ReactElement;
+    block?: boolean;
+    small?: boolean;
+}
+
+const Button = React.forwardRef<HTMLElement, ButtonProps>((
+    {
+        as: Component = 'button',
+        children,
+        className,
+        variant,
+        iconLeft,
+        iconRight,
+        block,
+        small,
+        ...rest
+    },
+    ref
+): React.ReactElement => {
+    return (
+        <Component
+            ref={ref as React.RefObject<any>}
+            className={clsx(
+                'btn',
+                `btn-${variant}`,
+                block &&'btn-block',
+                small && 'btn-small',
+                className
+            )}
+            {...rest}
+        >
+            {iconLeft && (
+                <div className="icon-container icon-left">
+                    {iconLeft}
+                </div>
+            )}
+            <span>{children}</span>
+            {iconRight && (
+                <div className="icon-container icon-right">
+                    {iconRight}
+                </div>
+            )}
+        </Component>
+    );
+});
+
+Button.displayName = 'Button';
+Button.propTypes = {
+    as: PropTypes.oneOf(['button', 'a']),
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    variant: PropTypes.string.isRequired,
+    iconLeft: PropTypes.element,
+    iconRight: PropTypes.element,
+    block: PropTypes.bool,
+    small: PropTypes.bool
+};
+
+export default Button;

src/components/Button/index.tsx

@@ -1,2 +1,15 @@
 export enum Variant {
+    PRIMARY = 'primary',
+    PRIMARY_GHOST = 'primary-ghost',
+    SECONDARY = 'secondary',
+    DANGER = 'danger',
+    DANGER_GHOST = 'danger-ghost'
 }
+
+export const variantList: string[] = [
+    'primary',
+    'primary-ghost',
+    'secondary',
+    'danger',
+    'danger-ghost'
+];

src/components/utils/Variant.ts

@@ -1,5 +1,7 @@
 html {
     font-size: var(--base-font-size);
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
 }
 
 body {
@@ -9,4 +11,5 @@ body {
     font: {
         family: var(--base-font-family);
     }
+    line-height: 1.2rem;
 }