From 8593f95bfb1fb4a3b2ed568bceb284e60f27b5b8 Mon Sep 17 00:00:00 2001 From: ukorvl Date: Mon, 18 Dec 2023 15:07:53 +0400 Subject: [PATCH] interim version of file input #133 --- site/package-lock.json | 14 +++--- site/package.json | 2 +- .../components/common/Icon/icons/Upload.tsx | 14 ++++++ site/src/components/common/Icon/utils.tsx | 4 ++ .../OpenJobs/FileInput/FileInput.module.scss | 23 ++++++++++ .../pages/OpenJobs/FileInput/FileInput.tsx | 29 ++++++++++++ .../pages/OpenJobs/FileInput/index.ts | 0 .../pages/OpenJobs/FileInput/overrides.ts | 18 ++++++++ .../pages/OpenJobs/Filter/Filter.tsx | 1 + .../OpenJobs/JobPage/ApplicationForm.tsx | 45 ++++++++++++++++--- .../pages/OpenJobs/JobPage/Styles.module.scss | 4 ++ .../OpenJobs/JobPage/formValidationSchema.ts | 1 + 12 files changed, 140 insertions(+), 15 deletions(-) create mode 100644 site/src/components/common/Icon/icons/Upload.tsx create mode 100644 site/src/components/pages/OpenJobs/FileInput/FileInput.module.scss create mode 100644 site/src/components/pages/OpenJobs/FileInput/FileInput.tsx create mode 100644 site/src/components/pages/OpenJobs/FileInput/index.ts create mode 100644 site/src/components/pages/OpenJobs/FileInput/overrides.ts diff --git a/site/package-lock.json b/site/package-lock.json index 5882a655..948faa22 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -10,7 +10,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", @@ -754,9 +754,9 @@ } }, "node_modules/@nilfoundation/ui-kit": { - "version": "2.2.8", - "resolved": "https://registry.npmjs.org/@nilfoundation/ui-kit/-/ui-kit-2.2.8.tgz", - "integrity": "sha512-p8a3ZYU7VzbGtLtqtujno1Eohjcaseh+F71D905q5c7DnTR7QkVjiEgQTkK7eXzbPc3lahhUM7lH3Y+6QsS/fA==", + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/@nilfoundation/ui-kit/-/ui-kit-2.2.9.tgz", + "integrity": "sha512-AMsXujCzrKucynWLijOa6rLQEaKqX43WBTzP6245LN4SJIdiVO28n0PkbcZm3kQAqizhcXAGVhn6WbMBzBGm9w==", "dependencies": { "copy-to-clipboard": "^3.3.3", "inline-style-expand-shorthand": "^1.6.0", @@ -8918,9 +8918,9 @@ "optional": true }, "@nilfoundation/ui-kit": { - "version": "2.2.8", - "resolved": "https://registry.npmjs.org/@nilfoundation/ui-kit/-/ui-kit-2.2.8.tgz", - "integrity": "sha512-p8a3ZYU7VzbGtLtqtujno1Eohjcaseh+F71D905q5c7DnTR7QkVjiEgQTkK7eXzbPc3lahhUM7lH3Y+6QsS/fA==", + "version": "2.2.9", + "resolved": "https://registry.npmjs.org/@nilfoundation/ui-kit/-/ui-kit-2.2.9.tgz", + "integrity": "sha512-AMsXujCzrKucynWLijOa6rLQEaKqX43WBTzP6245LN4SJIdiVO28n0PkbcZm3kQAqizhcXAGVhn6WbMBzBGm9w==", "requires": { "copy-to-clipboard": "^3.3.3", "inline-style-expand-shorthand": "^1.6.0", diff --git a/site/package.json b/site/package.json index 2103b56c..3a5a2af0 100644 --- a/site/package.json +++ b/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", diff --git a/site/src/components/common/Icon/icons/Upload.tsx b/site/src/components/common/Icon/icons/Upload.tsx new file mode 100644 index 00000000..53e72cd6 --- /dev/null +++ b/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 }) => ( + + + + + + +) + +export default memo(Upload) diff --git a/site/src/components/common/Icon/utils.tsx b/site/src/components/common/Icon/utils.tsx index 17489e29..d72715e1 100644 --- a/site/src/components/common/Icon/utils.tsx +++ b/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 } diff --git a/site/src/components/pages/OpenJobs/FileInput/FileInput.module.scss b/site/src/components/pages/OpenJobs/FileInput/FileInput.module.scss new file mode 100644 index 00000000..0a24f95f --- /dev/null +++ b/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; + } +} diff --git a/site/src/components/pages/OpenJobs/FileInput/FileInput.tsx b/site/src/components/pages/OpenJobs/FileInput/FileInput.tsx new file mode 100644 index 00000000..80643217 --- /dev/null +++ b/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, "ref"> + +const FileInput = forwardRef((props, ref) => { + const placeholder = 'Attach file' + return ( +
+
+ + } /> +
+
+ ) +}) + +FileInput.displayName = 'FileInput' +export default FileInput diff --git a/site/src/components/pages/OpenJobs/FileInput/index.ts b/site/src/components/pages/OpenJobs/FileInput/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/site/src/components/pages/OpenJobs/FileInput/overrides.ts b/site/src/components/pages/OpenJobs/FileInput/overrides.ts new file mode 100644 index 00000000..3366df0c --- /dev/null +++ b/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", + }, + }, +} diff --git a/site/src/components/pages/OpenJobs/Filter/Filter.tsx b/site/src/components/pages/OpenJobs/Filter/Filter.tsx index db03513a..cc9da4af 100644 --- a/site/src/components/pages/OpenJobs/Filter/Filter.tsx +++ b/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} />
{ - const { handleSubmit, register, formState: {errors, isSubmitting, isDirty, isValid, isValidating} } = useForm({ + const { + handleSubmit, + register, + formState: { errors, isSubmitting, isDirty, isValid, isValidating }, + } = useForm({ defaultValues: { name: '', surname: '', @@ -31,10 +44,14 @@ const ApplicationForm = () => {
Send resume as a file - Attach resume in docx, doc, pdf to apply for this vacancy. + + Attach resume in docx, doc,{' '} + pdf to apply for this vacancy. + +
- + {errors.name && } @@ -50,7 +67,9 @@ const ApplicationForm = () => {
- + ) } @@ -58,5 +77,17 @@ const ApplicationForm = () => { export default ApplicationForm const ErrorMessage = ({ message }: { message?: string }) => ( - {message} -); + {message} +) + +const SubmitSuccessfulMessage = () => { + return ( +
+ Application sent + + Thank you for your application, our HR team will contact you within the{' '} + next 7 days. + +
+ ) +} diff --git a/site/src/components/pages/OpenJobs/JobPage/Styles.module.scss b/site/src/components/pages/OpenJobs/JobPage/Styles.module.scss index f6a50493..c3377470 100644 --- a/site/src/components/pages/OpenJobs/JobPage/Styles.module.scss +++ b/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; diff --git a/site/src/components/pages/OpenJobs/JobPage/formValidationSchema.ts b/site/src/components/pages/OpenJobs/JobPage/formValidationSchema.ts index 8e99c20d..be974a89 100644 --- a/site/src/components/pages/OpenJobs/JobPage/formValidationSchema.ts +++ b/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()