interim version of file input #133

site/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
     "@hotjar/browser": "^1.0.9",
-    "@nilfoundation/ui-kit": "^2.2.8",
+    "@nilfoundation/ui-kit": "^2.2.9",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "axios": "^1.4.0",

site/src/components/common/Icon/icons/Upload.tsx

@@ -0,0 +1,14 @@
+import { memo } from 'react'
+import { SvgIconComponent } from '../SvgIconComponent'
+import {PRIMITIVE_COLORS} from '@nilfoundation/ui-kit'
+
+const Upload: SvgIconComponent = ({ className }) => (
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <rect x="2" y="8" width="1" height="6" fill={PRIMITIVE_COLORS.gray200} />
+    <rect x="13" y="8" width="1" height="6" fill={PRIMITIVE_COLORS.gray200} />
+    <rect transform="rotate(90 14 13)" x="14" y="13" width="1" height="12" fill={PRIMITIVE_COLORS.gray200} />
+    <path d="m8 10-3.3536-3.3535 0.70711-0.70711 2.1464 2.1464v-6.7929h1v6.7929l2.1464-2.1464 0.7071 0.70711-3.3535 3.3535z" clip-rule="evenodd" fill={PRIMITIVE_COLORS.gray200} fill-rule="evenodd"/>
+</svg>
+)
+
+export default memo(Upload)

site/src/components/common/Icon/utils.tsx

@@ -21,6 +21,7 @@ import Cross from './icons/Cross'
 import Squares from './icons/Squares'
 import DevPortal from './icons/DevPortal'
 import { SvgIconComponent } from './SvgIconComponent'
+import Upload from './icons/Upload'
 
 export const getIcon = (name: string): SvgIconComponent | null => {
   switch (name) {
@@ -90,6 +91,9 @@ export const getIcon = (name: string): SvgIconComponent | null => {
     case 'squares':
       return Squares
 
+    case 'upload':
+      return Upload
+
     default:
       return null
   }

site/src/components/pages/OpenJobs/FileInput/FileInput.module.scss

@@ -0,0 +1,23 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.inputsContainer {
+    position: relative;
+    width: 134px;
+    height: 46px;
+}
+
+.input {
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    cursor: pointer;
+    // remove inner button
+    &::-webkit-file-upload-button {
+        display: none;
+    }
+}

site/src/components/pages/OpenJobs/FileInput/FileInput.tsx

@@ -0,0 +1,29 @@
+import { Input } from '@nilfoundation/ui-kit'
+import {forwardRef} from 'react'
+import {inputOverrids} from './overrides'
+import s from './FileInput.module.scss'
+import {UseFormRegisterReturn} from 'react-hook-form'
+import Icon from 'components/Icon'
+
+type FileInputProps = Omit<UseFormRegisterReturn<any>, "ref">
+
+const FileInput = forwardRef<HTMLInputElement, FileInputProps>((props, ref) => {
+    const placeholder = 'Attach file'
+  return (
+    <div className={s.container}>
+        <div className={s.inputsContainer}>
+            <input
+                className={s.input}
+                type="file"
+                {...props}
+                ref={ref}
+                accept="application/pdf,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            />
+            <Input overrides={inputOverrids} placeholder={placeholder} readOnly endEnhancer={<Icon name="upload" />} />
+        </div>
+    </div>
+  )
+})
+
+FileInput.displayName = 'FileInput'
+export default FileInput

site/src/components/pages/OpenJobs/FileInput/overrides.ts

@@ -0,0 +1,18 @@
+import {InputOverrides} from "baseui/input";
+
+export const inputOverrids: InputOverrides = {
+    Root: {
+        style: {
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+        },
+    },
+    Input: {
+        style: {
+            appearance: "none",
+        },
+    },
+}

site/src/components/pages/OpenJobs/Filter/Filter.tsx

@@ -61,6 +61,7 @@ export const Filter = ({ filter, setFilter, departments, locations, types }: Fil
         onChange={({ value }) => {
           setFilter({ ...filter, location: value[0]?.value as string })
         }}
+        disabled={filter.remoteOnly}
       />
       <div className={s.remoteToggleContainer}>
         <Checkbox

site/src/components/pages/OpenJobs/JobPage/ApplicationForm.tsx

@@ -1,11 +1,24 @@
-import { Button, FormControl, HeadingLarge, Input, LabelMedium, PRIMITIVE_COLORS } from '@nilfoundation/ui-kit'
+import {
+  Button,
+  FormControl,
+  HeadingLarge,
+  HeadingMedium,
+  Input,
+  LabelMedium,
+  PRIMITIVE_COLORS,
+} from '@nilfoundation/ui-kit'
 import s from './Styles.module.scss'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import formValidationSchema, { ApplicationFormData } from './formValidationSchema'
+import FileInput from '../FileInput/FileInput'
 
 const ApplicationForm = () => {
-  const { handleSubmit, register, formState: {errors, isSubmitting, isDirty, isValid, isValidating} } = useForm<ApplicationFormData>({
+  const {
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting, isDirty, isValid, isValidating },
+  } = useForm<ApplicationFormData>({
     defaultValues: {
       name: '',
       surname: '',
@@ -31,10 +44,14 @@ const ApplicationForm = () => {
       </HeadingLarge>
       <div>
         <LabelMedium>Send resume as a file</LabelMedium>
-        <LabelMedium>Attach resume in docx, doc, pdf to apply for this vacancy.</LabelMedium>
+        <LabelMedium color={PRIMITIVE_COLORS.gray300} marginBottom="16px">
+          Attach resume in <span className={s.lightText}>docx</span>, <span className={s.lightText}>doc</span>,{' '}
+          <span className={s.lightText}>pdf</span> to apply for this vacancy.
+        </LabelMedium>
+        <FileInput {...partialRegister('file')} />
       </div>
       <div className={s.form}>
-        <FormControl label="Name" error={!!errors.name} >
+        <FormControl label="Name" error={!!errors.name}>
           <Input placeholder="Name" type="text" {...partialRegister('name')} />
         </FormControl>
         {errors.name && <ErrorMessage message={errors.name.message} />}
@@ -50,13 +67,27 @@ const ApplicationForm = () => {
           <Input placeholder="Link" type="text" />
         </FormControl>
       </div>
-      <Button type="submit" disabled={isSubmitting || !isDirty || !isValid || !isValidating} isLoading={isSubmitting}>Submit application</Button>
+      <Button type="submit" disabled={isSubmitting || !isDirty || !isValid || !isValidating} isLoading={isSubmitting}>
+        Submit application
+      </Button>
     </form>
   )
 }
 
 export default ApplicationForm
 
 const ErrorMessage = ({ message }: { message?: string }) => (
-    <LabelMedium color={PRIMITIVE_COLORS.red500}>{message}</LabelMedium>
-);
+  <LabelMedium color={PRIMITIVE_COLORS.red500}>{message}</LabelMedium>
+)
+
+const SubmitSuccessfulMessage = () => {
+  return (
+    <div>
+      <HeadingMedium>Application sent</HeadingMedium>
+      <LabelMedium color={PRIMITIVE_COLORS.gray300}>
+        Thank you for your application, our HR team will contact you within the{' '}
+        <span className={s.lightText}>next 7 days.</span>
+      </LabelMedium>
+    </div>
+  )
+}

site/src/components/pages/OpenJobs/JobPage/Styles.module.scss

@@ -11,6 +11,10 @@
     margin: 32px 0;
 }
 
+.lightText {
+    color: $gray-50;
+}
+
 .freshteamContent {
     > div > span {
         color: $gray-300;

site/src/components/pages/OpenJobs/JobPage/formValidationSchema.ts

@@ -10,6 +10,7 @@ const optionalFields = z
     surname: z.string().max(500, 'Too Long!'),
     telegram: z.string().startsWith('@', 'Invalid telegram nickname').max(50, 'Too Long!'),
     tel: z.string().max(50, 'Too Long!'),
+    file: z.string().max(50, 'Too Long!'),
   })
   .partial()