Money-Flow · quatrolavita · Sep 26, 2022 · Sep 26, 2022 · anttibull · Sep 27, 2022
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -136,7 +136,7 @@ module.exports = {
     settings: {
         'import/resolver': {
             node: {
-                extensions: ['js', 'jsx', '.ts', '.tsx'],
+                extensions: ['js', 'jsx', '.ts', '.tsx', '.css'],
             },
         },
         react: {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,3 +1,5 @@
+import '../src/shared/variables.css'
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {

diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/components/Button/Button.component.tsx b/src/components/Button/Button.component.tsx
@@ -0,0 +1,64 @@
+import React, { FC, ReactNode } from 'react'
+
+import classNames from 'classnames'
+
+import styles from './Button.module.css'
+// constants
-// constants
-// constants
-// constants
-// constants
+import {
+    ButtonVariant,
+    ButtonSize,
+    ButtonHtmlType,
+    DataHooks,
+} from './constants'
+
+export type PropsType = {
+    children: ReactNode
+    disabled: boolean
+    isLoading: boolean
+    onClick: () => void
+    size: ButtonSize
+    variant: ButtonVariant
+    className?: string
+    // Wait for theme palette
+    color?: string
+    htmlType?: ButtonHtmlType
+}
+
+export const Button: FC<PropsType> = ({
+    color,
+    disabled,
+    onClick,
+    variant,
+    size,
+    className,
+    children,
+    htmlType,
+    isLoading,
+}) => {
+    const buttonStyles = classNames(
+        {
+            [styles.default]: true,
+            [styles.primary]: variant === ButtonVariant.primary,
+            [styles.outline]: variant === ButtonVariant.outline,
+            [styles.small]: size === ButtonSize.small,
+            [styles.withCustomColor]: !!color,
+        },
+        className
+    )
+
+    return (
+        <button
+            className={buttonStyles}
+            onClick={onClick}
+            disabled={disabled || isLoading}
+            // eslint-disable-next-line react/button-has-type
+            type={htmlType}
+            style={{
+                backgroundColor: color,
+            }}
+            data-testid={DataHooks.Button}
+        >
+            {!isLoading ? children : <span>Loading...</span>}
+        </button>
+    )
+}
diff --git a/src/components/Button/Button.driver.tsx b/src/components/Button/Button.driver.tsx
@@ -0,0 +1,100 @@
+import React, { ReactElement } from 'react'
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+    DataHooks as ButtonDataHooks,
+    ButtonSize,
+    ButtonVariant,
+    ButtonHtmlType,
+} from 'components/Button/constants'
+
+import { Button, PropsType } from './Button.component'
+
+export type DriverType = {
+    given: {
+        children: (children: ReactElement) => DriverType
+        className: (className?: string) => DriverType
+        color: (color?: string) => DriverType
+        disabled: (disabled: boolean) => DriverType
+        htmlType: (htmlType?: ButtonHtmlType) => DriverType
+        isLoading: (isLoading: boolean) => DriverType
+        onClick: (onClick: () => null) => DriverType
+        size: (size: ButtonSize) => DriverType
+        variant: (variant: ButtonVariant) => DriverType
+    }
+
+    then: {
+        clickButton: () => void
+        getButton: () => HTMLElement
+        isExistButton: () => boolean
+        isExistChildren: () => boolean
+        isLoadding: () => boolean
+    }
+
+    when: {
+        created: () => DriverType
+    }
+}
+
+export const createButtonDriver = (): DriverType => {
+    let props: PropsType
+
+    const driver: DriverType = {
+        given: {
+            children: (children: ReactElement) => {
+                props = { ...props, children }
+                return driver
+            },
+            color: (color?: string) => {
+                props = { ...props, color }
+                return driver
+            },
+            disabled: (disabled: boolean) => {
+                props = { ...props, disabled }
+                return driver
+            },
+            isLoading: (isLoading: boolean) => {
+                props = { ...props, isLoading }
+                return driver
+            },
+            onClick: (onClick: () => null) => {
+                props = { ...props, onClick }
+                return driver
+            },
+            size: (size: ButtonSize) => {
+                props = { ...props, size }
+                return driver
+            },
+            className: (className?: string) => {
+                props = { ...props, className }
+                return driver
+            },
+            variant: (variant: ButtonVariant) => {
+                props = { ...props, variant }
+                return driver
+            },
+            htmlType: (htmlType?: ButtonHtmlType) => {
+                props = { ...props, htmlType }
+                return driver
+            },
+        },
+        when: {
+            created: () => {
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                render(<Button {...props} />)
+
+                return driver
+            },
+        },
+        then: {
+            isExistButton: () => !!screen.getByTestId(ButtonDataHooks.Button),
+            isLoadding: () => !!screen.queryByText('Loading...'),
+            isExistChildren: () => !!screen.queryByText('children'),
+            getButton: () => screen.getByTestId(ButtonDataHooks.Button),
+            clickButton: () =>
+                fireEvent.click(screen.getByTestId(ButtonDataHooks.Button)),
+        },
+    }
+    return driver
+}
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -0,0 +1,77 @@
+.default {
+    width: 206px;
+    padding: 15px 0;
+
+    font-weight: 500;
+    font-size: 14px;
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: Roboto, sans-serif;
+    line-height: 16px;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+
+    border-radius: 4px;
+}
+
+.primary {
+    color: var(--white-color);
+
+    background-color: var(--primary-color);
+    border: none;
+}
+
+.outline {
+    color: var(--primary-datk-color);
+
+    background-color: var(--white-color);
+    border: 2px solid var(--primary-color);
+}
+
+.outline:hover {
+    color: var(--primary-color);
+}
+
+.outline:active {
+    color: var(--secondary-dark-color);
+
+    border-color: var(--outline-color);
+}
+
+.outline:disabled {
+    color: var(--secondary-dark-color);
+
+    border-color: var(--outline-color);
+}
+
+.outline:disabled:hover {
+    color: var(--primary-color);
+}
+
+.primary:hover {
+    background-color: #ffb200;
+}
+
+.withCustomColor:hover {
+    background-color: unset;
+}
+
+.primary:active {
+    color: var(--secondary-dark-color);
+
+    background-color: var(--background-color) !important;
+}
+
+.primary:disabled {
+    color: var(--secondary-dark-color);
+
+    background-color: var(--background-color);
+}
+
+.primary:disabled:hover {
+    color: var(--primary-color);
+}
+
+.small {
+    width: 84px;
+    padding: 10px 0;
+}
diff --git a/src/components/Button/Button.spec.tsx b/src/components/Button/Button.spec.tsx
@@ -0,0 +1,85 @@
+import React from 'react'
+
+import { ButtonVariant } from 'components/Button/constants'
+
+import { createButtonDriver, DriverType } from './Button.driver'
+import styles from './Button.module.css'
+
+describe('Button', () => {
-describe('Button', () => {
+describe('<Button />', () => {
-describe('Button', () => {
+describe('<Button />', () => {
+    let driver: DriverType
+
+    beforeEach(() => {
+        driver = createButtonDriver()
+    })
+
+    describe('default button behavior', () => {
-    describe('default button behavior', () => {
+    describe('by default', () => {
-    describe('default button behavior', () => {
+    describe('by default', () => {
+        it('should display children', () => {
+            const isExistChildren = driver.given
+                .children(<span>children</span>)
+                .when.created()
+                .then.isExistChildren()
+            expect(isExistChildren).toBeTruthy()
+        })
+
+        it('should display default button', () => {
+            const isButtonExist = driver.when.created().then.isExistButton()
+            expect(isButtonExist).toBeTruthy()
+        })
+
+        it('should be disabled', () => {
+            const button = driver.given
+                .disabled(true)
+                .when.created()
+                .then.getButton()
+            expect(button).toHaveAttribute('disabled')
+        })
+
+        it('should be disabled when loading, ', () => {
-        it('should be disabled when loading, ', () => {
+        it('should be disabled when loading', () => {
-        it('should be disabled when loading, ', () => {
+        it('should be disabled when loading', () => {
+            const loadingButton = driver.given
+                .isLoading(true)
+                .when.created()
+                .then.getButton()
+            expect(loadingButton).toHaveAttribute('disabled')
+        })
+
+        it('should show loading status when loading', () => {
+            const loadingButton = driver.given
+                .isLoading(true)
+                .when.created()
+                .then.isLoadding()
+            expect(loadingButton).toBeTruthy()
+        })
+
+        it('should raise handler onClick func one time', () => {
+            const onClick = jest.fn()
+            driver.given.onClick(onClick).when.created().then.clickButton()
+            expect(onClick).toHaveBeenCalledTimes(1)
+        })
+    })
+
+    describe('layout button behavior', () => {
-    describe('layout button behavior', () => {
+    describe('by default', () => {
-    describe('layout button behavior', () => {
+    describe('by default', () => {
+        it('primary', () => {
+            const buttonPrimary = driver.given
+                .variant(ButtonVariant.primary)
+                .when.created()
+                .then.getButton()
+            expect(buttonPrimary).toHaveClass(styles.primary)
+        })
+
+        it('outline', () => {
+            const buttonPrimary = driver.given
+                .variant(ButtonVariant.outline)
+                .when.created()
+                .then.getButton()
+            expect(buttonPrimary).toHaveClass(styles.outline)
+        })
+
+        it('with custom ccolor', () => {
-        it('with custom ccolor', () => {
+        it('with custom color', () => {
-        it('with custom ccolor', () => {
+        it('with custom color', () => {
+            const buttonPrimary = driver.given
+                .color('#000')
+                .when.created()
+                .then.getButton()
+            expect(buttonPrimary).toHaveClass(styles.withCustomColor)
+        })
+    })
+})