Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat: interact with user settings/profile (#9)

Browse Source
This commit is contained in:
Divlo
2022-02-19 23:20:33 +01:00
committed by GitHub
parent 48debe8638
commit 7ac4f86cd5
101 changed files with 6705 additions and 9777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/design/Input/Input.test.tsx
View File

@ -1,15 +1,15 @@
import { render, fireEvent } from '@testing-library/react'
import { Input, getInputType } from './'
import { Input, getInputType } from '.'
describe('<Input />', () => {
it('should render the label', async () => {
it('should render the label', () => {
const labelContent = 'label content'
const { getByText } = render(<Input label={labelContent} />)
expect(getByText(labelContent)).toBeInTheDocument()
})
it('should not render forgot password link', async () => {
it('should not render forgot password link', () => {
const { queryByTestId } = render(
<Input type='text' label='content' showForgotPassword />
)
@ -17,7 +17,7 @@ describe('<Input />', () => {
expect(forgotPasswordLink).not.toBeInTheDocument()
})
it('should render forgot password link', async () => {
it('should render forgot password link', () => {
const { queryByTestId } = render(
<Input type='password' label='content' showForgotPassword />
)
@ -25,7 +25,7 @@ describe('<Input />', () => {
expect(forgotPasswordLink).toBeInTheDocument()
})
it('should not render the eye icon if the input is not of type "password"', async () => {
it('should not render the eye icon if the input is not of type "password"', () => {
const { queryByTestId } = render(<Input type='text' label='content' />)
const passwordEye = queryByTestId('password-eye')
expect(passwordEye).not.toBeInTheDocument()
@ -42,11 +42,11 @@ describe('<Input />', () => {
})
describe('getInputType', () => {
it('should return `text`', async () => {
it('should return `text`', () => {
expect(getInputType('password')).toEqual('text')
})
it('should return `password`', async () => {
it('should return `password`', () => {
expect(getInputType('text')).toEqual('password')
})
})

10
components/design/Input/Input.tsx
View File

@ -38,7 +38,7 @@ export const Input: React.FC<InputProps> = (props) => {
<>
<div className='flex flex-col'>
<div
className={classNames('flex justify-between mt-6 mb-2', className)}
className={classNames('mt-6 mb-2 flex justify-between', className)}
>
<label className='pl-1' htmlFor={name}>
{label}
@ -46,7 +46,7 @@ export const Input: React.FC<InputProps> = (props) => {
{type === 'password' && showForgotPassword ? (
<Link href='/authentication/forgot-password'>
<a
className='font-headline text-center text-xs sm:text-sm text-green-800 dark:text-green-400 hover:underline'
className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
data-testid='forgot-password-link'
>
{t('authentication:forgot-password')}
@ -54,11 +54,11 @@ export const Input: React.FC<InputProps> = (props) => {
</Link>
) : null}
</div>
<div className='mt-0 relative'>
<div className='relative mt-0'>
<input
data-testid='input'
data-cy={`input-${name ?? 'name'}`}
className='h-11 leading-10 px-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] border border-transparent caret-green-600 font-paragraph w-full focus:border focus:outline-none focus:shadow-green'
className='h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
{...rest}
id={name}
name={name}
@ -68,7 +68,7 @@ export const Input: React.FC<InputProps> = (props) => {
<div
data-testid='password-eye'
onClick={handlePassword}
className='password-eye absolute cursor-pointer bg-cover bg-[#f1f1f1]'
className='password-eye absolute cursor-pointer bg-[#f1f1f1] bg-cover'
/>
)}
<FormState