Feature/buttons

__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.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"
     }

src/components/Button/index.tsx

@@ -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/utils/Variant.ts

@@ -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/style/base/_base.scss

@@ -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;
 }

src/style/base/_typography.scss

@@ -82,6 +82,8 @@
     url('../fonts/inter/inter-v2-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
 h1 {
     font-size: 2rem;
     color: mixins.color('gray', 900);

src/style/base/_variables.scss

@@ -1,8 +1,6 @@
 @use "mixins";
 @use "colors";
 
-$primary-radius: 4px;
-
 /**
  * 1. Base
  */
@@ -12,6 +10,8 @@ $base-font-color: mixins.color('blueGray', 900);
 $base-font-family: 'Inter, apple-sf-pro-text, Helvetica, Arial, sans-serif';
 $base-font-size: 16px;
 $base-border-color: mixins.color('gray', 300);
+$base-border-radius: 4px;
+$base-gutter: 1rem;
 
 :root {
     --base-font-size: #{$base-font-size};
@@ -20,10 +20,41 @@ $base-border-color: mixins.color('gray', 300);
     --base-font-color: #{$base-font-color};
     --base-font-family: #{$base-font-family};
     --base-border-color: #{$base-border-color};
+    --base-border-radius: #{$base-border-radius};
+    --base-gutter: #{$base-gutter};
 }
 
 /**
- * 2. Panel
+ * 2. Colors
+ */
+$primary-color: mixins.color('deepPurple', 600);
+$primary-color-hover: mixins.color('deepPurple', 700);
+$primary-color-active: mixins.color('deepPurple', 800);
+
+$secondary-color: mixins.color('red', 600);
+$secondary-color-hover: mixins.color('red', 700);
+$secondary-color-active: mixins.color('red', 800);
+
+$danger-color: mixins.color('red', 700);
+$danger-color-hover: mixins.color('red', 800);
+$danger-color-active: mixins.color('red', 900);
+
+:root {
+    --primary-color: #{$primary-color};
+    --primary-color-hover: #{$primary-color-hover};
+    --primary-color-active: #{$primary-color-active};
+
+    --secondary-color: #{$secondary-color};
+    --secondary-color-hover: #{$secondary-color-hover};
+    --secondary-color-active: #{$secondary-color-active};
+
+    --danger-color: #{$danger-color};
+    --danger-color-hover: #{$danger-color-hover};
+    --danger-color-active: #{$danger-color-active};
+}
+
+/**
+ * 3. Panel
  */
 $panel-background: #fff;
 $panel-gutter: 2rem;
@@ -34,10 +65,61 @@ $panel-gutter: 2rem;
 }
 
 /**
- * 3. Page
+ * 4. Page
  */
 $page-gutter: 2rem;
 
 :root {
     --page-gutter: #{$page-gutter};
 }
+
+/**
+ * 5. Button
+ */
+$button-padding: 1rem;
+$button-font-weight: 600;
+$button-font-size: 1rem;
+
+$primary-button-ghost-hover-background: mixins.color('deepPurple', 50);
+$primary-button-ghost-active-background: mixins.color('deepPurple', 75);
+
+$secondary-button-background: transparent;
+$secondary-button-hover-background: mixins.color('deepPurple', 50);
+$secondary-button-active-background: mixins.color('deepPurple', 75);
+
+$danger-button-ghost-hover-background: mixins.color('red', 50);
+$danger-button-ghost-active-background: mixins.color('red', 75);
+
+:root {
+    --button-padding: #{$button-padding};
+    --button-font-weight: #{$button-font-weight};
+    --button-font-size: #{$button-font-size};
+
+    --primary-button-background: var(--primary-color);
+    --primary-button-border: var(--primary-color);
+    --primary-button-hover-background: var(--primary-color-hover);
+    --primary-button-hover-border: var(--primary-color-hover);
+    --primary-button-active-background: var(--primary-color-active);
+    --primary-button-active-border: var(--primary-color-active);
+
+    --primary-button-ghost-color: var(--primary-color);
+    --primary-button-ghost-border: var(--primary-color);
+    --primary-button-ghost-hover-background: #{$primary-button-ghost-hover-background};
+    --primary-button-ghost-active-background: #{$primary-button-ghost-active-background};
+
+    --secondary-button-background: #{$secondary-button-background};
+    --secondary-button-hover-background: #{$secondary-button-hover-background};
+    --secondary-button-active-background: #{$secondary-button-active-background};
+
+    --danger-button-background: var(--danger-color);
+    --danger-button-border: var(--danger-color);
+    --danger-button-hover-background: var(--danger-color-hover);
+    --danger-button-hover-border: var(--danger-color-hover);
+    --danger-button-active-background: var(--danger-color-active);
+    --danger-button-active-border: var(--danger-color-active);
+
+    --danger-button-ghost-color: var(--danger-color);
+    --danger-button-ghost-border: var(--danger-color);
+    --danger-button-ghost-hover-background: #{$danger-button-ghost-hover-background};
+    --danger-button-ghost-active-background: #{$danger-button-ghost-active-background};
+}