introducing UX/UI position

src/Jobs.js

@@ -1,5 +1,13 @@
 // Jobs. Steve Jobs.
 const Jobs = {
+  ux: {
+    name: 'UX',
+    title: 'UX/UI дизайнер',
+    subTitle: 'Проект Teamplify',
+    description: 'Дизайнер продукта в команду Teamplify',
+    url: '/ux/',
+    active: true,
+  },
   python: {
     name: 'Python',
     title: 'Python/Django разработчик',

src/components/UXForm.jsx

@@ -0,0 +1,127 @@
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useBreakpoint } from 'gatsby-plugin-breakpoints';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+
+import ApplicationForm,
+{ getFormDataShape, numberTypeErr } from './ApplicationForm';
+import {
+  allExperienceTypes,
+} from './ExperienceRadioField';
+
+import * as styles from './ApplicationForm.module.scss';
+
+export { allExperienceTypes };
+
+const getFormSchema = (experienceTypes) => {
+  const baseDataShape = getFormDataShape(experienceTypes);
+  const dataShape = {
+    ...baseDataShape,
+    experienceOverall: yup.number().typeError(numberTypeErr).required().min(0),
+    specializedExperience:
+      yup.number().typeError(numberTypeErr).required().min(0),
+    portfolio: yup.string().required(),
+  };
+  const schema = yup.object().shape(dataShape);
+  return schema;
+};
+
+class UXFormComponent extends ApplicationForm {
+  sectionItemsGeneral() {
+    const data = super.sectionItemsGeneral();
+    data.rows.push({
+      id: 'section-general-2',
+      items: (
+        <div className={styles.formCol3}>
+          {super.renderField({
+            name: 'experienceOverall',
+            label: 'Сколько лет вы уже занимаетесь UX/UI дизайном?',
+            componentProps: {
+              className: styles.formControl,
+            },
+          })}
+        </div>
+      ),
+    });
+    return data;
+  }
+
+  sectionItemsAdditionalInfo() {
+    const data = super.sectionItemsAdditionalInfo();
+    const row1 = {
+      id: 'section-additional-2',
+      props: {
+        gutterY: true,
+      },
+      items: (
+        <div className={styles.formCol1}>
+          {super.renderField({
+            name: 'portfolio',
+            label: 'Где можно посмотреть примеры ваших работ?',
+            helpText: 'Пожалуйста, укажите ссылки здесь',
+            componentProps: {
+              className: styles.formControl,
+            },
+          })}
+        </div>
+      ),
+    };
+    data.rows[0].props = { gutterY: false };
+    data.rows.unshift(row1);
+    return data;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  sectionItemsExperience() {
+    return null;
+  }
+}
+
+UXFormComponent.propTypes = {
+  job: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    subTitle: PropTypes.string,
+    url: PropTypes.string.isRequired,
+    active: PropTypes.bool.isRequired,
+  }).isRequired,
+  experienceTypes: PropTypes.object.isRequired,
+  form: PropTypes.shape({
+    register: PropTypes.func.isRequired,
+    setValue: PropTypes.func.isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+    formState: PropTypes.shape({
+      errors: PropTypes.object,
+    }),
+  }).isRequired,
+  breakpoints: PropTypes.object.isRequired,
+};
+
+export default function UXForm({ job, experienceTypes }) {
+  const form = useForm({
+    resolver: yupResolver(getFormSchema(experienceTypes)),
+  });
+  const breakpoints = useBreakpoint();
+  const props = {
+    breakpoints,
+    experienceTypes,
+    form,
+    job,
+  };
+  return (
+    <UXFormComponent {...props} />
+  );
+}
+
+UXForm.propTypes = {
+  job: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    subTitle: PropTypes.string,
+    url: PropTypes.string.isRequired,
+    active: PropTypes.bool.isRequired,
+  }).isRequired,
+  experienceTypes: PropTypes.object.isRequired,
+};

src/pages/ux/form.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Jobs from '@/Jobs';
+import UXForm from '@/components/UXForm';
+import Layout from '@/components/layout/Layout';
+
+const backLink = { url: '/', text: 'Все вакансии' };
+
+export default function UXApplicationForm() {
+  return (
+    <Layout
+      pageTitle="Отклик на вакансию"
+      metaTitle={`Отклик на вакансию - ${Jobs.ux.title}`}
+      metaDescription={Jobs.ux.description}
+      backLink={backLink}
+    >
+      <UXForm job={Jobs.ux} experienceTypes={{}} />
+    </Layout>
+  );
+}

src/pages/ux/index.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import Jobs from '@/Jobs';
+import Benefits from '@/components/Benefits';
+import ExternalLink, { ExternalLinks } from '@/components/ExternalLink';
+import JobPage from '@/components/JobPage';
+import JobTextBlock from '@/components/JobTextBlock';
+import Layout from '@/components/layout/Layout';
+
+const backLink = { url: '/', text: 'Все вакансии' };
+
+export default function uxJob() {
+  return (
+    <Layout
+      pageTitle={Jobs.ux.title}
+      subTitle={Jobs.ux.subTitle}
+      metaDescription={Jobs.ux.description}
+      backLink={backLink}
+    >
+      <JobPage job={Jobs.ux}>
+        <JobTextBlock title="О проекте">
+          <p>
+            <ExternalLink href={ExternalLinks.teamplify.home}>
+              Teamplify
+            </ExternalLink> - инструмент для управления командами разработчиков,
+            помогающий улучшить прозрачность работы, упростить отчетность и
+            экономить время на статус-митингах. Teamplify родился как внутренний
+            проект компании, изначально мы использовали его только для своих
+            команд. Он хорошо работал для нас, и в какой-то момент мы решили
+            превратить его в публичный продукт и выпустить на рынок.
+          </p>
+        </JobTextBlock>
+        <JobTextBlock title="О вас">
+          <p>
+            Мы ищем опытного продуктового дизайнера для Teamplify. Мы ожидаем,
+            что вы отлично разбираетесь в UX, умеете анализировать потребности
+            пользователей и предлагать удобные и красивые решения, и занимаетесь
+            этим уже как минимум несколько лет. Понимание того как происходит
+            разработка ПО будет большим плюсом, так как наш продукт предназначен
+            для команд разработчиков.
+          </p>
+          <p>
+            Также мы ценим хорошие коммуникативные навыки - конструктивные
+            обсуждения, умение понятно и грамотно изложить свою мысль, и устно,
+            и письменно, причем как на русском, так и на английском. У нас
+            русскоязычная команда, но продукт имеет англоязычный интерфейс и
+            ориентирован на интернациональную аудиторию. Общение с большинством
+            клиентов происходит на английском. Поэтому русский и английский
+            знать обязательно. Английский можем помочь подтянуть – у нас
+            налажено корпоративное обучение ему; однако, ваш собственный
+            уровень на момент начала работы должен быть не ниже среднего.
+          </p>
+        </JobTextBlock>
+        <JobTextBlock title="Условия">
+          <Benefits />
+        </JobTextBlock>
+      </JobPage>
+    </Layout>
+  );
+}