Skip to content

Commit

Permalink
decrease usage of clsx and add a test case for Avatar
Browse files Browse the repository at this point in the history
  • Loading branch information
talentlessguy committed Dec 2, 2024
1 parent c3a0ca5 commit 1d93468
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 33 deletions.
14 changes: 13 additions & 1 deletion components/src/components/atoms/Avatar/Avatar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,18 @@ describe('<Avatar />', () => {
src="https://images.mirror-media.xyz/publication-images/H-zIoEYWk4SpFkljJiwB9.png"
/>,
)
await waitFor(() => expect(screen.getByRole('img')).toBeInTheDocument())
await waitFor(() => {
expect(screen.getByRole('img')).toBeInTheDocument()

expect(screen.getByRole('img')).toHaveAttribute('src', 'https://images.mirror-media.xyz/publication-images/H-zIoEYWk4SpFkljJiwB9.png')
})
})
it('should render placeholder if no src is provided', async () => {
render(
<Avatar label="Avatar" />,
)
await waitFor(() => {
expect(screen.getByAltText('Avatar')).toBeInTheDocument()
})
})
})
5 changes: 2 additions & 3 deletions components/src/components/atoms/ScrollBox/ScrollBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@ import type { Space } from '@/src/tokens'
import * as styles from './styles.css'
import type { BoxProps } from '../Box/Box'
import { Box } from '../Box/Box'
import clsx from 'clsx'

const ScrollBoxBox = React.forwardRef<HTMLElement, BoxProps>((props, ref) => (
<Box className={clsx(styles.scrollBox, props.className)} ref={ref} {...props} />
const ScrollBoxBox = React.forwardRef<HTMLElement, Pick<BoxProps, 'style' | 'children'>>((props, ref) => (
<Box className={styles.scrollBox} ref={ref} {...props} />
))

const DividerBox = ({
Expand Down
19 changes: 10 additions & 9 deletions components/src/components/molecules/FieldSet/FieldSet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,27 @@ const Container = (props: BoxProps) => (
/>
)

const ContainerInner = (props: BoxProps) => (
<Box {...props} display="flex" flexDirection="column" gap="1" px="4" />
const ContainerInner = ({ children }: React.PropsWithChildren) => (
<Box display="flex" flexDirection="column" gap="1" px="4">{children}</Box>
)

const Row = (props: BoxProps) => (
const Row = ({ children }: React.PropsWithChildren) => (
<Box
{...props}
alignItems="center"
display="flex"
flexDirection="row"
gap="3"
/>
>
{children}
</Box>
)

const Description = (props: BoxProps) => (
<Box {...props} color="textSecondary" fontSize="body" lineHeight="body" />
const Description = ({ children }: React.PropsWithChildren) => (
<Box color="textSecondary" fontSize="body" lineHeight="body">{children}</Box>
)

const ChildrenContainer = (props: BoxProps) => (
<Box {...props} display="flex" flexDirection="column" gap="4" />
const ChildrenContainer = ({ children }: React.PropsWithChildren) => (
<Box display="flex" flexDirection="column" gap="4">{children}</Box>
)

type NativeFieldSetProps = React.FieldsetHTMLAttributes<HTMLFieldSetElement>
Expand Down
6 changes: 3 additions & 3 deletions components/src/components/molecules/Helper/Helper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { AlertSVG, InfoCircleSVG } from '@/src/icons'

import type { Alert } from '@/src/types'

import type { BoxProps } from '../../atoms/Box/Box'
import type { AsProp, BoxProps } from '../../atoms/Box/Box'
import { Box } from '../../atoms/Box/Box'

import * as styles from './styles.css'
Expand Down Expand Up @@ -42,8 +42,8 @@ const Container = ({
/>
)

const IconElement = ({ $alert, className, ...props }: BoxProps & { $alert: Alert }) => (
<Box {...props} className={clsx(styles.variants({ svgAlert: $alert }), className)} wh="6" />
const IconElement = ({ $alert, as }: { $alert: Alert, as: AsProp }) => (
<Box as={as} className={clsx(styles.variants({ svgAlert: $alert }))} wh="6" />
)

export const Helper: React.FC<HelperProps> = ({
Expand Down
2 changes: 1 addition & 1 deletion components/src/components/molecules/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import type { BoxProps } from '../../atoms/Box/Box'
import { Box } from '../../atoms/Box/Box'
import { getValueForPlacement } from './utils/getValueForPlacement'
import * as styles from './styles.css'
import clsx from 'clsx'
import { clsx } from 'clsx'
import type { Color } from '@/src/tokens/color'

type TooltipPopoverElementProps = {
Expand Down
35 changes: 19 additions & 16 deletions components/src/components/organisms/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import type { BoxProps } from '../../atoms/Box/Box'
import { Box } from '../../atoms/Box/Box'
import { Typography } from '../../atoms'
import { Modal } from '../../molecules'
import clsx from 'clsx'
import { clsx } from 'clsx'
import * as styles from './styles.css'

const CloseButton = ({ className, ...props }: BoxProps) => (
const CloseButton = ({ onClick }: Pick<BoxProps, 'onClick'>) => (
<Box
{...props}
className={clsx(styles.closeButton, className)}
onClick={onClick}
className={styles.closeButton}
alignItems="center"
as="button"
backgroundColor={{ base: 'transparent', hover: 'greySurface' }}
Expand All @@ -39,10 +39,9 @@ const CloseButton = ({ className, ...props }: BoxProps) => (
</Box>
)

const StyledCard = ({ className, ...props }: BoxProps) => (
const StyledCard = ({ children }: React.PropsWithChildren) => (
<Box
{...props}
className={clsx(styles.styledCard, className)}
className={styles.styledCard}
alignItems="center"
backgroundColor="backgroundPrimary"
borderBottomLeftRadius={{ xs: '0', sm: '3xLarge' }}
Expand All @@ -57,7 +56,9 @@ const StyledCard = ({ className, ...props }: BoxProps) => (
padding={{ xs: '4', sm: '6' }}
position="relative"
width="full"
/>
>
{children}
</Box>
)

type NonNullableAlert = NonNullable<WithAlert['alert']>
Expand Down Expand Up @@ -107,34 +108,36 @@ const FooterContainer = (props: BoxProps) => (
/>
)

const TitleContainer = (props: BoxProps) => (
const TitleContainer = ({ children }: React.PropsWithChildren) => (
<Box
{...props}
alignItems="center"
display="flex"
flexDirection="column"
gap="px"
justifyContent="center"
/>
>
{children}
</Box>
)

const StepContainer = (props: BoxProps) => (
const StepContainer = ({ children }: React.PropsWithChildren) => (
<Box
{...props}
alignItems="center"
display="flex"
flexDirection="row"
gap="2"
justifyContent="center"
/>
>
{children}
</Box>
)

export type StepType = 'notStarted' | 'inProgress' | 'completed'

const StepItem = ({ $type, className, ...props }: BoxProps & { $type: StepType }) => (
const StepItem = ({ $type, ...props }: React.PropsWithChildren<{ $type: StepType }>) => (
<Box
{...props}
className={clsx(styles.variants({ stepType: $type }), className)}
className={styles.variants({ stepType: $type })}
borderRadius="full"
borderStyle="solid"
wh="3.5"
Expand Down

0 comments on commit 1d93468

Please sign in to comment.