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

4
components/design/Button/Button.test.tsx
View File

@ -1,9 +1,9 @@
import { render } from '@testing-library/react'
import { Button } from './'
import { Button } from '.'
describe('<Button />', () => {
it('should render', async () => {
it('should render', () => {
const { getByText } = render(<Button>Submit</Button>)
expect(getByText('Submit')).toBeInTheDocument()
})

6
components/design/Checkbox/Checkbox.tsx
View File

@ -8,15 +8,15 @@ export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
export const Checkbox: React.FC<CheckboxProps> = (props) => {
const { label, id, className } = props
return (
<div className={classNames('flex items-center mt-4', className)}>
<div className={classNames('mt-4 flex items-center', className)}>
<input
{...props}
type='checkbox'
id={id}
className='relative appearance-none min-h-[25px] min-w-[25px] bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] dark:from-[#1f2937] dark:to-[#273547] mr-3 cursor-pointer rounded-md after:absolute before:absolute after:w-[2px] before:w-[2px] after:bg-black before:bg-black dark:after:bg-white dark:before:bg-white transition-all after:transition-all before:transition-all after:top-[62.5%] after:left-[36%] after:h-[7px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:duration-200 before:top-[50%] before:left-[59%] before:h-[12px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 checked:after:scale-100 checked:before:scale-100'
className='relative mr-3 min-h-[25px] min-w-[25px] cursor-pointer appearance-none rounded-md bg-gradient-to-t from-[#bcc7d4] to-[#d3dfed] transition-all before:absolute before:top-[50%] before:left-[59%] before:h-[12px] before:w-[2px] before:translate-x-[-59%] before:translate-y-[-50%] before:rotate-[40deg] before:scale-0 before:bg-black before:transition-all after:absolute after:top-[62.5%] after:left-[36%] after:h-[7px] after:w-[2px] after:translate-x-[-35%] after:translate-y-[-62.5%] after:rotate-[-50deg] after:scale-0 after:bg-black after:transition-all after:duration-200 checked:before:scale-100 checked:after:scale-100 dark:from-[#1f2937] dark:to-[#273547] dark:before:bg-white dark:after:bg-white'
/>
<label
className='cursor-pointer opacity-80 hover:opacity-100 transition duration-400 select-none '
className='duration-400 cursor-pointer select-none opacity-80 transition hover:opacity-100 '
htmlFor={id}
>
{label}

2
components/design/Divider/Divider.stories.tsx
View File

@ -1,6 +1,6 @@
import { Meta, Story } from '@storybook/react'
import { Divider as Component } from './'
import { Divider as Component } from '.'
const Stories: Meta = {
title: 'Divider',

2
components/design/Divider/Divider.test.tsx
View File

@ -1,6 +1,6 @@
import { render } from '@testing-library/react'
import { Divider } from './'
import { Divider } from '.'
describe('<Divider />', () => {
it('should render successfully', () => {

4
components/design/Divider/Divider.tsx
View File

@ -1,7 +1,7 @@
export const Divider: React.FC = () => {
return (
<div className='relative flex justify-center h-[2px] w-full mb-3'>
<div className='absolute h-[2px] w-8/12 bg-gray-600 dark:bg-white/20 rounded-full'></div>
<div className='relative mb-3 flex h-[2px] w-full justify-center'>
<div className='absolute h-[2px] w-8/12 rounded-full bg-gray-600 dark:bg-white/20'></div>
</div>
)
}

12
components/design/FormState/FormState.test.tsx
View File

@ -1,24 +1,24 @@
import { render } from '@testing-library/react'
import { FormState } from './'
import { FormState } from '.'
describe('<FormState />', () => {
it('should return nothing if the state is idle', async () => {
it('should return nothing if the state is idle', () => {
const { container } = render(<FormState state='idle' />)
expect(container.innerHTML.length).toEqual(0)
})
it('should return nothing if the message is null', async () => {
it('should return nothing if the message is null', () => {
const { container } = render(<FormState state='error' />)
expect(container.innerHTML.length).toEqual(0)
})
it('should render the <Loader /> if state is loading', async () => {
it('should render the <Loader /> if state is loading', () => {
const { getByTestId } = render(<FormState state='loading' />)
expect(getByTestId('loader')).toBeInTheDocument()
})
it('should render the success message if state is success', async () => {
it('should render the success message if state is success', () => {
const message = 'Success Message'
const { getByText } = render(
<FormState state='success' message={message} />
@ -26,7 +26,7 @@ describe('<FormState />', () => {
expect(getByText(message)).toBeInTheDocument()
})
it('should render the error message if state is error', async () => {
it('should render the error message if state is error', () => {
const message = 'Error Message'
const { getByText } = render(<FormState state='error' message={message} />)
expect(getByText(message)).toBeInTheDocument()

4
components/design/FormState/FormState.tsx
View File

@ -30,14 +30,14 @@ export const FormState: React.FC<FormStateProps> = (props) => {
<>
<div
className={classNames(
'mt-6 relative flex flex-row items-center font-medium text-center max-w-xl',
'relative mt-6 flex max-w-xl flex-row items-center text-center font-medium',
{
'text-red-800 dark:text-red-400': state === 'error',
'text-green-800 dark:text-green-400': state === 'success'
}
)}
>
<div className='thumbnail bg-cover absolute top-0 inline-block font-headline'></div>
<div className='thumbnail absolute top-0 inline-block bg-cover font-headline'></div>
<span id={id} className={classNames({ 'pl-6': state === 'error' })}>
<b>{t(`errors:${state}`)}:</b> {message}
</span>

2
components/design/IconButton/IconButton.tsx
View File

@ -9,7 +9,7 @@ export const IconButton: React.FC<IconButtonProps> = (props) => {
return (
<button
className={classNames(
'text-center flex items-center justify-center text-green-800 dark:text-green-400 focus:outline-none focus:animate-pulse hover:animate-pulse',
'flex items-center justify-center text-center text-green-800 hover:animate-pulse focus:animate-pulse focus:outline-none dark:text-green-400',
className
)}
{...rest}

8
components/design/IconLink/IconLink.tsx
View File

@ -13,15 +13,15 @@ export const IconLink: React.FC<IconLinkProps> = (props) => {
return (
<Link href={href}>
<a className='w-full flex justify-center relative group' title={title}>
<a className='group relative flex w-full justify-center' title={title}>
<div
className={classNames('w-full flex justify-center group', className)}
className={classNames('group flex w-full justify-center', className)}
>
{children}
<div className='absolute flex items-center w-3 h-12 left-0'>
<div className='absolute left-0 flex h-12 w-3 items-center'>
<span
className={classNames(
'absolute w-4/12 bg-green-700 rounded-r-lg group-hover:h-5',
'absolute w-4/12 rounded-r-lg bg-green-700 group-hover:h-5',
{
'h-full': selected
}

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

2
components/design/Loader/Loader.test.tsx
View File

@ -1,6 +1,6 @@
import { render } from '@testing-library/react'
import { Loader } from './'
import { Loader } from '.'
describe('<Loader />', () => {
it('should render with correct width and height', async () => {

2
components/design/Main/Main.test.tsx
View File

@ -1,6 +1,6 @@
import { render } from '@testing-library/react'
import { Main } from './'
import { Main } from '.'
describe('<Main />', () => {
it('should render successfully', () => {

2
components/design/Main/Main.tsx
View File

@ -10,7 +10,7 @@ export const Main: React.FC<MainProps> = (props) => {
return (
<main
className={classNames(
'flex flex-1 flex-col justify-center items-center py-8',
'flex flex-1 flex-col items-center justify-center py-8',
className
)}
>

2
components/design/SocialMediaButton/SocialMediaButton.test.tsx
View File

@ -1,6 +1,6 @@
import { render } from '@testing-library/react'
import { SocialMedia, SocialMediaButton } from './'
import { SocialMedia, SocialMediaButton } from '.'
describe('<SocialMediaButton />', () => {
it('should render the social media', async () => {

6
components/design/Textarea/Textarea.tsx
View File

@ -11,14 +11,14 @@ export const Textarea: React.FC<TextareaProps> = (props) => {
return (
<div className='flex flex-col'>
<div className='flex justify-between mt-6 mb-2'>
<div className='mt-6 mb-2 flex justify-between'>
<label className='pl-1' htmlFor={id}>
{label}
</label>
</div>
<div className='mt-0 relative'>
<div className='relative mt-0'>
<TextareaAutosize
className='p-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] caret-green-600 font-paragraph w-full focus:border focus:outline-none resize-none focus:shadow-green overflow-hidden'
className='w-full resize-none overflow-hidden rounded-lg bg-[#f1f1f1] p-3 font-paragraph text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
wrap='soft'
id={id}
name={id}