scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-162): final design edit profile page

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-18 08:15:57 +02:00
committed by Christel Westerberg
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/TempDesignSystem/Form/Input/index.tsx
View File

@@ -1,8 +1,13 @@
"use client"
import { Input as AriaInput, TextField } from "react-aria-components"
import { useController } from "react-hook-form"
import {
Input as AriaInput,
Label as AriaLabel,
TextField,
} from "react-aria-components"
import { useController, useFormContext } from "react-hook-form"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./input.module.css"
@@ -11,17 +16,24 @@ import type { InputProps } from "./input"
export default function Input({
"aria-label": ariaLabel,
control,
disabled,
label,
name,
placeholder,
registerOptions,
placeholder = "",
registerOptions = {},
required = false,
type = "text",
}: InputProps) {
const { control } = useFormContext()
const rules = {
...registerOptions,
required:
"required" in registerOptions ? !!registerOptions.required : required,
}
const { field, fieldState, formState } = useController({
control,
name,
rules: registerOptions,
rules,
})
return (
@@ -32,18 +44,24 @@ export default function Input({
isInvalid={fieldState.invalid}
isRequired={!!registerOptions?.required}
name={field.name}
onBlur={field.onBlur}
onChange={field.onChange}
type={type}
>
<Body asChild fontOnly>
<AriaInput
className={styles.input}
placeholder={placeholder}
ref={field.ref}
/>
</Body>
<ErrorMessage errors={formState.errors} name={name} />
<AriaLabel className={styles.container} htmlFor={field.name}>
<Body asChild fontOnly>
<AriaInput
className={styles.input}
id={field.name}
name={field.name}
onBlur={field.onBlur}
onChange={field.onChange}
placeholder={placeholder}
ref={field.ref}
required={rules.required}
/>
</Body>
<Label required={rules.required}>{label}</Label>
</AriaLabel>
<ErrorMessage errors={formState.errors} name={field.name} />
</TextField>
)
}

50
components/TempDesignSystem/Form/Input/input.module.css
View File

@@ -1,8 +1,44 @@
.input {
border: 2px solid var(--UI-Grey-60);
border-radius: var(--Corner-radius-Small);
color: var(--UI-Grey-60);
height: 40px;
.container {
align-content: center;
background-color: var(--Main-Grey-White);
border-color: var(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-Medium);
display: grid;
gap: var(--Spacing-x-half);
grid-template-rows: auto auto;
height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2);
width: min(280px, 100%);
}
transition: border-color 200ms ease;
}
.container:has(.input:not(:focus):placeholder-shown) {
gap: 0;
grid-template-rows: 1fr;
}
.container:has(.input:active, .input:focus) {
border-color: var(--Scandic-Blue-90);
}
.input {
background: none;
border: none;
color: var(--Main-Grey-100);
height: 18px;
margin: 0;
order: 2;
overflow: visible;
padding: 0;
}
.input:not(:active, :focus):placeholder-shown {
height: 0px;
}
.input:focus,
.input:focus:placeholder-shown {
height: 18px;
outline: none;
}

10
components/TempDesignSystem/Form/Input/input.ts
View File

@@ -1,10 +1,8 @@
import { Control, RegisterOptions } from "react-hook-form"
import { EditProfileSchema } from "@/components/MyProfile/Profile/Edit/Form/schema"
import type { RegisterOptions } from "react-hook-form"
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {
control: Control<EditProfileSchema>
name: keyof EditProfileSchema
registerOptions?: RegisterOptions<EditProfileSchema>
label: string
name: string
registerOptions?: RegisterOptions
}