Rename variant to size

ls1intum · Aug 7, 2024 · 10a62f4 · 10a62f4
1 parent df98b8d
commit 10a62f4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/webapp/src/app/ui/avatar/avatar.component.ts b/webapp/src/app/ui/avatar/avatar.component.ts
@@ -7,14 +7,14 @@ import { NgOptimizedImage } from '@angular/common';
 
 const [avatarVariants, args, argTypes] = cva('relative flex shrink-0 overflow-hidden rounded-full', {
   variants: {
-    variant: {
-      small: 'h-6 w-6 text-xs',
-      medium: 'h-10 w-10',
-      large: 'h-14 w-14 text-lg'
+    size: {
+      default: 'h-10 w-10',
+      sm: 'h-6 w-6 text-xs',
+      lg: 'h-14 w-14 text-lg'
     }
   },
   defaultVariants: {
-    variant: 'medium'
+    size: 'default'
   }
 });
 
@@ -31,7 +31,7 @@ interface AvatarVariants extends VariantProps<typeof avatarVariants> {}
 })
 export class AppAvatarComponent {
   class = input<ClassValue>('');
-  variant = input<AvatarVariants['variant']>('medium');
+  size = input<AvatarVariants['size']>('default');
 
   src = input<string>('');
   alt = input<string>('');
@@ -44,7 +44,7 @@ export class AppAvatarComponent {
     this.canShow.set(false);
   };
 
-  computedClass = computed(() => cn(avatarVariants({ variant: this.variant() }), this.class()));
+  computedClass = computed(() => cn(avatarVariants({ size: this.size() }), this.class()));
 
   computedSrc = computed(() => (this.canShow() ? this.src() : this.fallback()));
 

diff --git a/webapp/src/app/ui/avatar/avatar.stories.ts b/webapp/src/app/ui/avatar/avatar.stories.ts
@@ -6,7 +6,8 @@ const meta: Meta<AppAvatarComponent> = {
   component: AppAvatarComponent,
   tags: ['autodocs'],
   args: {
-    ...args
+    ...args,
+    size: 'default'
   },
   argTypes: {
     ...argTypes
@@ -18,7 +19,6 @@ type Story = StoryObj<AppAvatarComponent>;
 
 export const Default: Story = {
   args: {
-    variant: 'medium',
     src: 'https://i.pravatar.cc/40?img=1',
     alt: 'avatar',
     class: ''
@@ -32,7 +32,7 @@ export const Default: Story = {
 
 export const Small: Story = {
   args: {
-    variant: 'small',
+    size: 'sm',
     src: 'https://i.pravatar.cc/24?img=1'
   },
 
@@ -44,7 +44,7 @@ export const Small: Story = {
 
 export const Medium: Story = {
   args: {
-    variant: 'medium',
+    size: 'default',
     src: 'https://i.pravatar.cc/40?img=1'
   },
 
@@ -56,7 +56,7 @@ export const Medium: Story = {
 
 export const Large: Story = {
   args: {
-    variant: 'large',
+    size: 'lg',
     src: 'https://i.pravatar.cc/56?img=1',
     alt: 'avatar',
     class: ''
@@ -70,7 +70,7 @@ export const Large: Story = {
 
 export const WithRandomImage: Story = {
   args: {
-    variant: 'large',
+    size: 'lg',
     src: 'https://i.pravatar.cc/56',
     alt: 'avatar'
   },
@@ -83,7 +83,7 @@ export const WithRandomImage: Story = {
 
 export const WithFallback: Story = {
   args: {
-    variant: 'medium',
+    size: 'default',
     src: 'foobar.jpg',
     fallback: 'https://placehold.co/40',
     alt: 'fallback'