Some dialogs

.eslintrc.json

@@ -5,20 +5,26 @@
     "jest/globals": true
   },
   "parser": "babel-eslint",
-  "extends": ["airbnb"],
+  "extends": [
+    "airbnb",
+    "plugin:jsdoc/recommended"
+  ],
   "globals": {
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
   },
-
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["react", "jest"],
+  "plugins": [
+    "react",
+    "jsdoc",
+    "jest"
+  ],
   "rules": {
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "no-underscore-dangle":"off",

package.json

@@ -71,6 +71,7 @@
     "eslint-config-airbnb": "^18.0.1",
     "eslint-loader": "^3.0.2",
     "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsdoc": "^18.1.3",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "^1.7.0",

src/assets/styles/includes/_mixin.scss

@@ -0,0 +1,10 @@
+@mixin title {
+  margin-top: 18px;
+  margin-bottom: 8px;
+  color: #000;
+  font-weight: 700;
+  font-size: 24px;
+  font-family: "Grotesk";
+  line-height: 28px;
+  text-align: center;
+}

src/components/Button/Button.js

@@ -42,7 +42,7 @@ Button.propTypes = {
   iconPosition: propTypes.bool,
   type: propTypes.string,
   disabled: propTypes.bool,
-  onClick: propTypes.func.isRequired,
+  onClick: propTypes.func,
   theme: propTypes.string,
   size: propTypes.string,
 };
@@ -54,6 +54,7 @@ Button.defaultProps = {
   icon: null,
   iconPosition: false,
   disabled: false,
+  onClick: () => {},
 };
 
 export default Button;

src/components/Decision/Decision.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import FinPassForm from '../../stores/FormsStore/FinPassForm';
+import FinPassFormWrapper from '../FinPassFormWrapper/FinPassFormWrapper';
+
+import styles from './Decision.scss';
+
+@withTranslation()
+class Decision extends React.Component {
+  form = new FinPassForm({
+    hooks: {
+      onSuccess() {
+        return Promise.resolve();
+      },
+      onError() {
+        /* eslint-disable-next-line */
+        console.error('error');
+      },
+    },
+  })
+
+  static propTypes = {
+    t: PropTypes.func.isRequired,
+    icon: PropTypes.node.isRequired,
+    title: PropTypes.string.isRequired,
+  };
+
+  render() {
+    const { props, form } = this;
+    const { t, icon, title } = props;
+    return (
+      <div className={styles.decision}>
+        <div className={styles.decision__icon}>
+          {icon}
+        </div>
+        <h2 className={styles.decision__title}>
+          {title}
+        </h2>
+        <p className={styles.decision__subtext}>
+          {t('other:enterPassForConfirm')}
+        </p>
+        <FinPassFormWrapper form={form} />
+      </div>
+    );
+  }
+}
+
+export default Decision;

src/components/Decision/Decision.scss

@@ -0,0 +1,25 @@
+@import '../../assets/styles/includes/mixin';
+
+.decision {
+  width: 100%;
+  text-align: center;
+
+  &__title {
+    @include title;
+  }
+
+  &__subtext {
+    color: rgba(0, 0, 0, 0.7);
+    font-size: 14px;
+    line-height: 16px;
+    text-align: center;
+  }
+
+  &__icon {
+    svg {
+      width: auto;
+      height: auto;
+      margin-top: 47px;
+    }
+  }
+}

src/components/Decision/Decision.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { DecisionReject, DecisionAgree } from '.';
+
+describe('DecisionReject', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <DecisionReject />,
+    ).dive();
+  });
+
+  it('should render without error', () => {
+    expect(wrapper.length).toEqual(1);
+  });
+});
+
+describe('DecisionAgree', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <DecisionAgree />,
+    ).dive();
+  });
+
+  it('should render without error', () => {
+    expect(wrapper.length).toEqual(1);
+  });
+});

src/components/Decision/DecisionAgree.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import Decision from './Decision';
+import { VerifyIcon } from '../Icons';
+
+@withTranslation()
+class DecisionAgree extends React.Component {
+  static propTypes = {
+    t: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const { props } = this;
+    const { t } = props;
+    return (
+      <Decision
+        title={t('dialogs:definetelyAgree')}
+        icon={(<VerifyIcon />)}
+      />
+    );
+  }
+}
+
+export default DecisionAgree;

src/components/Decision/DecisionReject.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import Decision from './Decision';
+import { RejectIcon } from '../Icons';
+
+@withTranslation()
+class DecisionReject extends React.Component {
+  static propTypes = {
+    t: PropTypes.func.isRequired,
+  };
+
+  render() {
+    const { props } = this;
+    const { t } = props;
+    return (
+      <Decision
+        title={t('dialogs:definetelyReject')}
+        icon={(<RejectIcon />)}
+      />
+    );
+  }
+}
+
+export default DecisionReject;

src/components/Decision/index.js

@@ -0,0 +1,11 @@
+import Decision from './Decision';
+import DecisionReject from './DecisionReject';
+import DecisionAgree from './DecisionAgree';
+
+export default Decision;
+
+export {
+  Decision,
+  DecisionReject,
+  DecisionAgree,
+};

src/components/Dialog/Dialog.scss

@@ -13,7 +13,7 @@
   &__inner {
     position: relative;
     z-index: 1;
-    min-height: 325px;
+    min-height: 309px;
   }
 }
 

src/components/Dialog/index.js

@@ -1,3 +1,8 @@
 import Dialog from './Dialog';
+import DefaultDialogFooter from './DefaultDialogFooter';
 
 export default { Dialog };
+
+export {
+  DefaultDialogFooter,
+};

src/components/FinPassFormWrapper/FinPassFormWrapper.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import Input from '../Input';
+import { Password } from '../Icons';
+import Button from '../Button/Button';
+
+import styles from './FinPassFormWrapper.scss';
+
+@withTranslation()
+class FinPassFormWrapper extends React.Component {
+  static propTypes = {
+    t: PropTypes.func.isRequired,
+    form: PropTypes.shape({
+      onSubmit: PropTypes.func.isRequired,
+      $: PropTypes.func.isRequired,
+    }).isRequired,
+  };
+
+  render() {
+    const { props } = this;
+    const { t, form } = props;
+    return (
+      <div
+        className={styles['form-fin-pass']}
+      >
+        <form
+          onSubmit={form.onSubmit}
+        >
+          <div className={styles.input__wrapper}>
+            <Input field={form.$('fin-password')}>
+              <Password />
+            </Input>
+          </div>
+          <div className={styles.button__wrapper}>
+            <Button
+              className="btn--default btn--black"
+              type="submit"
+            >
+              {t('buttons:vote')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default FinPassFormWrapper;