Skip to content

Commit

Permalink
chore(Avatar): Add innerClassName prop. (#380)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yoshi6jp
yoshi6jp authored Jul 21, 2023
1 parent 1c4aa85 commit 5de58d3
Show file tree
Hide file tree
Showing 4 changed files with 245 additions and 76 deletions.
228 changes: 197 additions & 31 deletions src/Avatar/Avatar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import { StoryFn as Story, Meta } from '@storybook/react'

import Avatar, { AvatarProps } from '.'
import { AvatarGroupProps } from './AvatarGroup'
import Mask from '../Mask'

export default {
title: 'Data Display/Avatar',
Expand All @@ -14,63 +14,215 @@ export default {
options: ['lg', 'md', 'sm', 'xs'],
},
},
args: {
innerClassName: 'rounded',
src: 'https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg',
},
} as Meta

const Template: Story<AvatarProps> = (args) => {
return <Avatar {...args} />
}

export const Default = Template.bind({})
Default.args = {
color: 'primary',
src: 'http://daisyui.com/[email protected]',
}

export const Rounded = Template.bind({})
Rounded.args = {
src: 'http://daisyui.com/[email protected]',
shape: 'circle',
}
export const Default: Story<AvatarProps> = Template.bind({})

export const CustomSize = Template.bind({})
export const CustomSize: Story<AvatarProps> = Template.bind({})
CustomSize.args = {
src: 'http://daisyui.com/[email protected]',
shape: 'circle',
size: 30,
}

CustomSize.argTypes = {
size: {
control: { type: 'number', min: 1, step: 1 },
},
}

export const Group: Story<AvatarProps & AvatarGroupProps> = (args) => {
export const Sizes: Story<AvatarProps> = (args) => {
return (
<div className="flex items-center gap-4">
<Avatar {...args} size="lg" />
<Avatar {...args} size="md" />
<Avatar {...args} size={4 * 20} />
<Avatar {...args} size={4 * 16} />
<Avatar {...args} size="sm" />
<Avatar {...args} size="xs" />
</div>
)
}
Sizes.argTypes = {
size: {
control: false,
},
}

export const Rounded: Story<AvatarProps> = (args) => {
return (
<div className="flex items-center gap-4">
<Avatar {...args} innerClassName="rounded-xl" />
<Avatar {...args} shape="circle" />
</div>
)
}
Rounded.argTypes = {
shape: {
control: false,
},
innerClassName: {
control: false,
},
}

export const WithMask: Story<AvatarProps> = (args) => {
return (
<Avatar.Group space={args.space}>
<div className="flex items-center gap-4">
<Avatar
{...args}
innerClassName={Mask.className({ variant: 'squircle' })}
/>
<Avatar
{...args}
innerClassName={Mask.className({ variant: 'hexagon' })}
/>
<Avatar
{...args}
innerClassName={Mask.className({ variant: 'triangle' })}
/>
</div>
)
}
WithMask.argTypes = {
innerClassName: {
control: false,
},
}

export const Group: Story<AvatarProps> = (args) => {
return (
<Avatar.Group>
<Avatar {...args} />
<Avatar {...args} />
<Avatar {...args} />
<Avatar {...args} />
</Avatar.Group>
)
}
Group.args = {
src: 'http://daisyui.com/[email protected]',
space: -6,
size: 'sm',
innerClassName: '',
}
Group.argTypes = {
shape: { control: false },
}

export const Ring = Template.bind({})
export const GroupWithCounter: Story<AvatarProps> = ({
src,
letters,
...args
}) => {
return (
<Avatar.Group>
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} letters={letters} />
</Avatar.Group>
)
}
GroupWithCounter.args = {
size: 'sm',
letters: '+99',
innerClassName: '',
}
GroupWithCounter.argTypes = {
shape: { control: false },
}

export const GroupSpaceBetween: Story<AvatarProps> = ({
src,
letters,
...args
}) => {
return (
<div className="flex flex-col items-center gap-y-2">
<Avatar.Group className="space-x-4">
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} letters={letters} />
</Avatar.Group>
<Avatar.Group className="space-x-0">
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} letters={letters} />
</Avatar.Group>
<Avatar.Group className="-space-x-4">
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} letters={letters} />
</Avatar.Group>
<Avatar.Group className="-space-x-8">
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} src={src} />
<Avatar {...args} letters={letters} />
</Avatar.Group>
</div>
)
}
GroupSpaceBetween.args = {
size: 'sm',
letters: '+99',
innerClassName: '',
}
GroupSpaceBetween.argTypes = {
shape: { control: false },
}

export const Ring: Story<AvatarProps> = Template.bind({})
Ring.args = {
src: 'http://daisyui.com/[email protected]',
border: true,
borderColor: 'primary',
shape: 'circle',
}

export const Placeholder = Template.bind({})
export const PresenceIndicator: Story<AvatarProps> = (args) => {
return (
<div className="flex items-center gap-4">
<Avatar {...args} online />
<Avatar {...args} offline />
</div>
)
}
PresenceIndicator.argTypes = {
online: { control: false },
offline: { control: false },
}
PresenceIndicator.args = {
innerClassName: '',
shape: 'circle',
}

export const Placeholder: Story<AvatarProps> = (args) => {
return (
<div className="flex items-center gap-4">
<Avatar {...args} letters="K" size="lg" />
<Avatar {...args} letters="JO" size="md" online={true} />
<Avatar {...args} letters="MX" size="sm" />
<Avatar {...args} letters="AA" size="xs" />
</div>
)
}
Placeholder.argTypes = {
size: { control: false },
online: { control: false },
letters: { control: false },
src: { control: false },
}
Placeholder.args = {
shape: 'circle',
letters: 'Y',
src: '',
}

const reactLogoSvg = (
Expand Down Expand Up @@ -139,6 +291,8 @@ WithSvg.args = {
shape: 'circle',
children: reactLogoSvg,
border: true,
innerClassName: '',
src: '',
}

export const MultipleChildren: Story<Omit<AvatarProps, 'children'>> = (
Expand All @@ -151,25 +305,31 @@ export const MultipleChildren: Story<Omit<AvatarProps, 'children'>> = (
</Avatar>
)
}
MultipleChildren.args = {
innerClassName: '',
src: '',
}

export const Colors: Story<Omit<AvatarProps, 'color' | 'borderColor'>> = ({
src,
letters,
...args
}) => {
export const Colors: Story<AvatarProps> = ({ src, letters, ...args }) => {
return (
<div>
<div className="flex gap-4 m-4">
<Avatar {...args} borderColor="neutral" src={src} />
<Avatar {...args} borderColor="primary" src={src} />
<Avatar {...args} borderColor="secondary" src={src} />
<Avatar {...args} borderColor="accent" src={src} />
<Avatar {...args} borderColor="ghost" src={src} />
<Avatar {...args} borderColor="info" src={src} />
<Avatar {...args} borderColor="success" src={src} />
<Avatar {...args} borderColor="warning" src={src} />
<Avatar {...args} borderColor="error" src={src} />
</div>
<div className="flex gap-4 m-4">
<Avatar
{...args}
borderColor="neutral"
color="neutral"
letters={letters}
/>
<Avatar
{...args}
borderColor="primary"
Expand All @@ -188,7 +348,6 @@ export const Colors: Story<Omit<AvatarProps, 'color' | 'borderColor'>> = ({
color="accent"
letters={letters}
/>
<Avatar {...args} borderColor="ghost" color="ghost" letters={letters} />
<Avatar {...args} borderColor="info" color="info" letters={letters} />
<Avatar
{...args}
Expand All @@ -207,8 +366,15 @@ export const Colors: Story<Omit<AvatarProps, 'color' | 'borderColor'>> = ({
</div>
)
}
Colors.argTypes = {
color: {
control: false,
},
borderColor: {
control: false,
},
}
Colors.args = {
src: 'http://daisyui.com/[email protected]',
letters: 'Y',
border: true,
shape: 'circle',
Expand Down
21 changes: 11 additions & 10 deletions src/Avatar/Avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,18 @@ import {
ComponentSize,
} from '../types'

export type AvatarProps = React.HTMLAttributes<HTMLDivElement> &
export type AvatarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> &
IComponentBaseProps & {
src?: string
letters?: string
size?: ComponentSize | number
shape?: ComponentShape
color?: ComponentColor
color?: Exclude<ComponentColor, 'ghost'>
border?: boolean
borderColor?: ComponentColor
borderColor?: Exclude<ComponentColor, 'ghost'>
online?: boolean
offline?: boolean
innerClassName?: string
children?: React.ReactNode
}

Expand All @@ -40,6 +41,7 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
offline,
dataTheme,
className,
innerClassName,
children,
...props
},
Expand All @@ -55,12 +57,12 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
})
)

const imgClasses = clsx({
const imgClasses = clsx(innerClassName, {
'ring ring-offset-base-100 ring-offset-2': border,
'ring-accent': borderColor === 'accent',
'ring-error': borderColor === 'error',
'ring-ghost': borderColor === 'ghost',
'ring-info': borderColor === 'info',
'ring-neutral': borderColor === 'neutral',
'ring-primary': borderColor === 'primary',
'ring-secondary': borderColor === 'secondary',
'ring-success': borderColor === 'success',
Expand All @@ -73,20 +75,19 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
'w-10 h-10': size === 'xs',
})

const placeholderClasses = clsx({
const placeholderClasses = clsx(innerClassName, {
'bg-neutral-focus': !color,
'text-neutral-content': !color,
'text-neutral-content': !color || color === 'neutral',
'bg-accent': color === 'accent',
'bg-error': color === 'error',
'bg-ghost': color === 'ghost',
'bg-info': color === 'info',
'bg-neutral': color === 'neutral',
'bg-primary': color === 'primary',
'bg-secondary': color === 'secondary',
'bg-success': color === 'success',
'bg-warning': color === 'warning',
'text-accent-content': color === 'accent',
'text-error-content': color === 'error',
'text-ghost-content': color === 'ghost',
'text-info-content': color === 'info',
'text-primary-content': color === 'primary',
'text-secondary-content': color === 'secondary',
Expand All @@ -95,8 +96,8 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
'ring ring-offset-base-100 ring-offset-2': border,
'ring-accent': borderColor === 'accent',
'ring-error': borderColor === 'error',
'ring-ghost': borderColor === 'ghost',
'ring-info': borderColor === 'info',
'ring-neutral': borderColor === 'neutral',
'ring-primary': borderColor === 'primary',
'ring-secondary': borderColor === 'secondary',
'ring-success': borderColor === 'success',
Expand Down
Loading

0 comments on commit 5de58d3

Please sign in to comment.