fix(Avatar): hardcoded colors

daisyui · Apr 3, 2023 · 9fbf01a · 9fbf01a
1 parent 7555b36
commit 9fbf01a
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 5 deletions.
diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx
@@ -56,7 +56,7 @@ export const Group: Story<AvatarProps & AvatarGroupProps> = (args) => {
 }
 Group.args = {
   src: 'http://daisyui.com/tailwind-css-component-profile-1@94w.png',
-  space: -6
+  space: -6,
 }
 
 export const Ring = Template.bind({})
@@ -151,3 +151,66 @@ export const MultipleChildren: Story<Omit<AvatarProps, 'children'>> = (
     </Avatar>
   )
 }
+
+export const Colors: Story<Omit<AvatarProps, 'color' | 'borderColor'>> = ({
+  src,
+  letters,
+  ...args
+}) => {
+  return (
+    <div>
+      <div className="flex gap-4 m-4">
+        <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="primary"
+          color="primary"
+          letters={letters}
+        />
+        <Avatar
+          {...args}
+          borderColor="secondary"
+          color="secondary"
+          letters={letters}
+        />
+        <Avatar
+          {...args}
+          borderColor="accent"
+          color="accent"
+          letters={letters}
+        />
+        <Avatar {...args} borderColor="ghost" color="ghost" letters={letters} />
+        <Avatar {...args} borderColor="info" color="info" letters={letters} />
+        <Avatar
+          {...args}
+          borderColor="success"
+          color="success"
+          letters={letters}
+        />
+        <Avatar
+          {...args}
+          borderColor="warning"
+          color="warning"
+          letters={letters}
+        />
+        <Avatar {...args} borderColor="error" color="error" letters={letters} />
+      </div>
+    </div>
+  )
+}
+Colors.args = {
+  src: 'http://daisyui.com/tailwind-css-component-profile-1@94w.png',
+  letters: 'Y',
+  border: true,
+  shape: 'circle',
+  size: 'sm',
+}
diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx
@@ -57,7 +57,14 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
 
     const imgClasses = clsx({
       'ring ring-offset-base-100 ring-offset-2': border,
-      [`ring-${borderColor}`]: borderColor,
+      ['ring-accent']: borderColor === 'accent',
+      ['ring-error']: borderColor === 'error',
+      ['ring-ghost']: borderColor === 'ghost',
+      ['ring-info']: borderColor === 'info',
+      ['ring-primary']: borderColor === 'primary',
+      ['ring-secondary']: borderColor === 'secondary',
+      ['ring-success']: borderColor === 'success',
+      ['ring-warning']: borderColor === 'warning',
       'rounded-btn': shape === 'square',
       'rounded-full': shape === 'circle',
       'w-32 h-32': size === 'lg',
@@ -69,10 +76,33 @@ const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
     const placeholderClasses = clsx({
       'bg-neutral-focus': !color,
       'text-neutral-content': !color,
-      [`bg-${color}`]: color,
-      [`text-${color}-content`]: color,
+      ['bg-accent']: color === 'accent',
+      ['bg-error']: color === 'error',
+      ['bg-ghost']: color === 'ghost',
+      ['bg-info']: color === 'info',
+      ['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',
+      ['text-success-content']: color === 'success',
+      ['text-warning-content']: color === 'warning',
+
       'ring ring-offset-base-100 ring-offset-2': border,
-      [`ring-${borderColor}`]: borderColor,
+      ['ring-accent']: borderColor === 'accent',
+      ['ring-error']: borderColor === 'error',
+      ['ring-ghost']: borderColor === 'ghost',
+      ['ring-info']: borderColor === 'info',
+      ['ring-primary']: borderColor === 'primary',
+      ['ring-secondary']: borderColor === 'secondary',
+      ['ring-success']: borderColor === 'success',
+      ['ring-warning']: borderColor === 'warning',
+
       'rounded-btn': shape === 'square',
       'rounded-full': shape === 'circle',
       'w-32 h-32 text-3xl': size === 'lg',