Feature/confirm button

package.json

@@ -58,9 +58,9 @@
     "styled-components": ">=5.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.8.3",
+    "@babel/runtime": "^7.8.4",
     "browser-cookie-lite": "^1.0.4",
-    "dayjs": "^1.8.19",
+    "dayjs": "^1.8.20",
     "downshift": "^4.0.8",
     "i18next": "^19.1.0",
     "jump.js": "^1.0.2",
@@ -74,28 +74,28 @@
     "react-i18next": "^11.3.1",
     "react-qr-svg": "^2.2.1",
     "react-transition-group": "^4.3.0",
-    "react-use": "^13.22.3",
+    "react-use": "^13.24.0",
     "react-useportal": "^1.0.13",
-    "styled-icons": "^9.2.0",
-    "styled-normalize": "^8.0.6",
+    "styled-icons": "^9.3.0",
+    "styled-normalize": "^8.0.7",
     "styled-theming": "^2.2.0",
     "uuid-validate": "0.0.3",
     "yup": "^0.28.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.3",
+    "@babel/core": "^7.8.4",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-decorators": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/polyfill": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
-    "@storybook/addon-actions": "^5.3.9",
-    "@storybook/addon-knobs": "^5.3.9",
-    "@storybook/react": "^5.3.9",
-    "@testing-library/jest-dom": "^5.0.2",
+    "@storybook/addon-actions": "^5.3.12",
+    "@storybook/addon-knobs": "^5.3.12",
+    "@storybook/react": "^5.3.12",
+    "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.4.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^25.1.0",
@@ -109,9 +109,9 @@
     "css-loader": "^3.4.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.0",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.18.0",
+    "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.3.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^5.0.2",
@@ -123,7 +123,7 @@
     "jest-environment-jsdom": "^25.1.0",
     "jest-environment-jsdom-global": "^1.2.0",
     "jest-styled-components": "^7.0.0",
-    "lint-staged": "^10.0.4",
+    "lint-staged": "^10.0.7",
     "mini-css-extract-plugin": "^0.9.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "^1.19.1",
@@ -133,7 +133,7 @@
     "react-router-dom": "^5.1.2",
     "storybook-react-router": "^1.0.8",
     "style-loader": "^1.1.3",
-    "styled-components": "^5.0.0",
+    "styled-components": "^5.0.1",
     "test-data-bot": "^0.8.0",
     "url-loader": "^3.0.0",
     "webpack": "^4.41.5",

src/components/ButtonToggle/index.jsx

@@ -52,7 +52,7 @@ ButtonToggle.propTypes = {
     PropTypes.node,
   ]),
   onChange: PropTypes.func,
-  mode: PropTypes.oneOf(["redMode", "blueMode"]),
+  mode: PropTypes.oneOf(["red", "blue"]),
   icon: PropTypes.node,
 };
 

src/components/ConfirmButton/StyledConfirmButton.jsx

@@ -0,0 +1,34 @@
+import styled, { css } from "styled-components";
+
+import { Button } from "../Button";
+
+import colors from "../../themes/colors";
+
+function getHoverStyles({ isDisabled }) {
+  return !isDisabled
+    ? css`
+        background-color: ${({ confirmColor }) => confirmColor};
+        color: ${colors.whiteSimple};
+      `
+    : ``;
+}
+
+const StyledConfirmButton = styled(Button).attrs(() => ({
+  buttonTheme: "reset",
+}))`
+  background-color: ${colors.blueWhite};
+  min-width: 105px;
+
+  ${({ isConfirm, confirmColor }) =>
+    isConfirm &&
+    css`
+      background-color: ${confirmColor};
+      color: ${colors.whiteSimple};
+    `}
+
+  &:hover {
+    ${getHoverStyles};
+  }
+`;
+
+export { StyledConfirmButton };

src/components/ConfirmButton/__tests__/ConfirmButton.js

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { ConfirmButton } from "../index";
+
+import { fireEvent } from "@testing-library/react";
+import { render } from "../../../../test/utils";
+
+const componentName = "confirm-button";
+const nonConfirmText = "click";
+const confirmText = "sure?";
+const onConfirmMock = jest.fn();
+
+afterEach(() => {
+  onConfirmMock.mockClear();
+});
+
+afterAll(() => {
+  onConfirmMock.mockReset();
+});
+
+function renderConfirmButton(props) {
+  return render(
+    <ConfirmButton
+      data-testid={componentName}
+      onConfirm={onConfirmMock}
+      {...props}
+    >
+      {({ isConfirm }) => (isConfirm ? confirmText : nonConfirmText)}
+    </ConfirmButton>
+  );
+}
+
+describe("ConfirmButton tests", () => {
+  test("ConfirmButton should render text inside button correctly", () => {
+    const { getByTestId } = renderConfirmButton();
+
+    expect(getByTestId(componentName)).toHaveTextContent(nonConfirmText);
+
+    fireEvent.click(getByTestId(componentName));
+
+    expect(getByTestId(componentName)).toHaveTextContent(confirmText);
+
+    fireEvent.mouseLeave(getByTestId(componentName));
+
+    expect(getByTestId(componentName)).toHaveTextContent(nonConfirmText);
+  });
+
+  test("ConfirmButton should call onConfirm correctly", () => {
+    const { getByTestId } = renderConfirmButton();
+
+    fireEvent.click(getByTestId(componentName));
+    expect(onConfirmMock.mock.calls).toHaveLength(0);
+
+    fireEvent.click(getByTestId(componentName));
+    expect(onConfirmMock.mock.calls).toHaveLength(1);
+  });
+});

src/components/ConfirmButton/index.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { useState } from "react";
+
+import { StyledConfirmButton } from "./StyledConfirmButton";
+
+function ConfirmButton({
+  onConfirm,
+  size,
+  isDisabled,
+  confirmColor,
+  children,
+  className,
+  "data-testid": testId,
+}) {
+  const [isConfirm, setIsConfirm] = useState(false);
+
+  return (
+    <StyledConfirmButton
+      className={className}
+      isConfirm={isConfirm}
+      onClick={ev => {
+        ev.stopPropagation();
+        setIsConfirm(!isConfirm);
+        if (isConfirm) {
+          onConfirm();
+        }
+      }}
+      onMouseLeave={() => {
+        if (isConfirm) {
+          setIsConfirm(false);
+        }
+      }}
+      size={size}
+      isDisabled={isDisabled}
+      data-testid={testId}
+      confirmColor={confirmColor}
+    >
+      {typeof children === "function"
+        ? children({ isConfirm, setIsConfirm })
+        : children}
+    </StyledConfirmButton>
+  );
+}
+
+ConfirmButton.defaultProps = {
+  "data-testid": "confirm-button",
+};
+
+ConfirmButton.propTypes = {
+  onConfirm: PropTypes.func.isRequired,
+  size: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  confirmColor: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  className: PropTypes.string,
+  "data-testid": PropTypes.string,
+};
+
+export { ConfirmButton, StyledConfirmButton };

src/components/DeleteSureButton/DeleteSureButton.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { text, select } from "@storybook/addon-knobs";
+
+import { DeleteSureButton } from "./index";
+import { colors } from "../../themes/colors";
+
+storiesOf("Basic UI| DeleteSureButton", module).add("default", () => {
+  return (
+    <DeleteSureButton
+      sureText={text("Sure text", "Sure?")}
+      deleteText={text("Delete text", "Delete")}
+      deleteColor={select(
+        "Color",
+        {
+          Red: colors.brownSimple,
+          Green: colors.greenish,
+          Pink: colors.middlePink,
+        },
+        colors.brownSimple
+      )}
+    />
+  );
+});

src/components/DeleteSureButton/__tests__/DeleteSureButton.js

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { DeleteSureButton } from "../index";
+
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders as render } from "../../../../test/utils";
+
+const componentName = "delete-button";
+const nonDeleteText = "delete";
+const deleteText = "sure?";
+const onDeleteMock = jest.fn();
+
+afterEach(() => {
+  onDeleteMock.mockClear();
+});
+
+afterAll(() => {
+  onDeleteMock.mockReset();
+});
+
+function renderDeleteButton(props) {
+  return render(
+    <DeleteSureButton
+      sureText={deleteText}
+      deleteText={nonDeleteText}
+      onDelete={onDeleteMock}
+      data-testid={componentName}
+      {...props}
+    />
+  );
+}
+
+describe("DeleteSureButton tests", () => {
+  // test("DeleteSureButton should render text inside button correctly", () => {
+  //   const { getByTestId } = renderDeleteButton();
+
+  //   expect(getByTestId(componentName)).toHaveTextContent(nonDeleteText);
+
+  //   fireEvent.click(getByTestId(componentName));
+
+  //   expect(getByTestId(componentName)).toHaveTextContent(deleteText);
+
+  //   fireEvent.mouseLeave(getByTestId(componentName));
+
+  //   expect(getByTestId(componentName)).toHaveTextContent(nonDeleteText);
+  // });
+
+  test.only("DeleteSureButton should call onDelete correctly", () => {
+    const { getByTestId } = renderDeleteButton();
+
+    fireEvent.click(getByTestId(componentName));
+    expect(onDeleteMock.mock.calls).toHaveLength(0);
+
+    fireEvent.click(getByTestId(componentName));
+    expect(onDeleteMock.mock.calls).toHaveLength(1);
+  });
+});