Merge pull request #1419 from privy-open-source/feat/avatar-square

feat(avatar): create avatar square-round type variant

Author: adenvt

src/components/accordion/Accordion.vue

@@ -77,9 +77,16 @@ const classNames = computed(() => {
 
 <style lang="postcss">
 .accordion {
+  --p-accordion-border: theme(borderColor.default.DEFAULT);
+  --p-accordion-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-accordion-item-border: theme(borderColor.default.DEFAULT);
+  --p-accordion-item-border-dark: theme(borderColor.dark.default.DEFAULT);
+  --p-accordion-divide: theme(divideColor.default.DEFAULT);
+  --p-accordion-divide-dark: theme(divideColor.dark.default.DEFAULT);
+
   @apply flex flex-col w-full;
-  @apply border border-default rounded;
-  @apply dark:border-dark-default;
+  @apply border border-[var(--p-accordion-border)] rounded;
+  @apply dark:border-[var(--p-accordion-border-dark)];
 
   & > &__item {
     @apply first:rounded-t last:rounded-b;
@@ -89,14 +96,18 @@ const classNames = computed(() => {
     @apply gap-2 border-0 rounded-none;
 
     > .accordion__item {
-      @apply border rounded border-default;
-      @apply dark:border-dark-default;
+      @apply border rounded border-[var(--p-accordion-item-border)];
+      @apply dark:border-[var(--p-accordion-item-border-dark)];
+
+      > .accordion__item__activator {
+        @apply rounded-t-sm;
+      }
     }
   }
 
   &:not(&--pills) {
-    @apply divide-y divide-default;
-    @apply dark:divide-dark-default;
+    @apply divide-y divide-[var(--p-accordion-divide)];
+    @apply dark:divide-[var(--p-accordion-divide-dark)];
   }
 
   &--flush {

src/components/accordion/AccordionItem.vue

@@ -191,6 +191,8 @@ defineSlots<{
   --p-accordion-expanded-border-dark: theme(borderColor.dark.default.DEFAULT);
   --p-accordion-expanded-activator-bg: theme(backgroundColor.default.alpha);
   --p-accordion-expanded-activator-bg-dark: theme(backgroundColor.dark.default.alpha);
+  --p-accordion-expanded-activator-color: theme(textColor.default);
+  --p-accordion-expanded-activator-color-dark: theme(textColor.dark.default);
 
   @apply w-full bg-[color:var(--p-accordion-bg)];
   @apply dark:bg-[color:var(--p-accordion-bg-dark)];
@@ -220,6 +222,12 @@ defineSlots<{
     .expanded & {
       @apply bg-[color:var(--p-accordion-expanded-activator-bg)];
       @apply dark:bg-[color:var(--p-accordion-expanded-activator-bg-dark)];
+
+      .accordion__item__title,
+      .subheading {
+        @apply text-[color:var(--p-accordion-expanded-activator-color)];
+        @apply dark:text-[color:var(--p-accordion-expanded-activator-color-dark)];
+      }
     }
   }
 

src/components/accordion/index.md

@@ -559,7 +559,19 @@ const expanded = ref(false)
 ```
 
 ## Variables
-Accordion use local CSS variables on `.accordion__item` for enhanced real-time customization.
+Accordion use local CSS variables on `.accordion` and `.accordion__item` for enhanced real-time customization.
+
+### .accordion
+```sass
+--p-accordion-border: theme(borderColor.default.DEFAULT);
+--p-accordion-border-dark: theme(borderColor.dark.default.DEFAULT);
+--p-accordion-item-border: theme(borderColor.default.DEFAULT);
+--p-accordion-item-border-dark: theme(borderColor.dark.default.DEFAULT);
+--p-accordion-divide: theme(divideColor.default.DEFAULT);
+--p-accordion-divide-dark: theme(divideColor.dark.default.DEFAULT);
+```
+
+### .accordion__item
 
 ```sass
 --p-accordion-bg: theme(backgroundColor.default.DEFAULT);
@@ -570,8 +582,11 @@ Accordion use local CSS variables on `.accordion__item` for enhanced real-time c
 --p-accordion-expanded-border-dark: theme(borderColor.dark.default.DEFAULT);
 --p-accordion-expanded-activator-bg: theme(backgroundColor.default.alpha);
 --p-accordion-expanded-activator-bg-dark: theme(backgroundColor.dark.default.alpha);
+--p-accordion-expanded-activator-color: theme(textColor.default);
+--p-accordion-expanded-activator-color-dark: theme(textColor.dark.default);
 ```
 
+
 ## API
 
 ### Props `<p-accordion>`

src/components/avatar/Avatar.spec.ts

@@ -191,7 +191,7 @@ it('should emit event "imgerror" when image fail to load', async () => {
   )
 })
 
-it('should have addiotional class if prop imgClass if provided', () => {
+it('should have additional class if prop imgClass if provided', () => {
   const screen = render({
     components: { Avatar },
     template  : `
@@ -206,3 +206,17 @@ it('should have addiotional class if prop imgClass if provided', () => {
   expect(image).toHaveClass('custom-class')
   expect(avatar).not.toHaveClass('custom-class')
 })
+
+it('should have style `square` when `square` prop was provided', () => {
+  const screen = render({
+    components: { Avatar },
+    template  : `
+      <Avatar square />
+    `,
+  })
+
+  const avatar = screen.queryByTestId('avatar')
+
+  expect(avatar).toBeInTheDocument()
+  expect(avatar).toHaveClass('avatar--square')
+})

src/components/avatar/Avatar.vue

@@ -61,6 +61,10 @@ const props = defineProps({
     ],
     default: undefined,
   },
+  square: {
+    type   : Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits<{
@@ -77,6 +81,9 @@ const classNames = computed(() => {
   if (props.size)
     result.push(`avatar--${props.size}`)
 
+  if (props.square)
+    result.push('avatar--square')
+
   return result
 })
 
@@ -131,9 +138,13 @@ onMounted(() => {
 
 <style lang="postcss">
 .avatar {
-  @apply rounded-full inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
+  @apply inline-flex items-center justify-center overflow-hidden text-subtle bg-subtle;
   @apply dark:text-dark-subtle dark:bg-dark-subtle;
 
+  &:not(&--square) {
+    @apply rounded-full;
+  }
+
   &__image {
     @apply w-full h-full object-cover;
   }
@@ -157,5 +168,26 @@ onMounted(() => {
   &--xl {
     @apply w-24 h-24 text-lg;
   }
+
+  &--square {
+    &.avatar {
+      &--xs {
+        @apply rounded-xs;
+      }
+
+      &--sm {
+        @apply rounded-sm;
+      }
+
+      &--md {
+        @apply rounded;
+      }
+
+      &--lg,
+      &--xl {
+        @apply rounded-md;
+      }
+    }
+  }
 }
 </style>

src/components/avatar/index.md

@@ -7,6 +7,8 @@ description: Show user's avatar, using name or image
   import pAvatar from './Avatar.vue'
   import pAvatarGroup from './AvatarGroup.vue'
   import IconUser from '@privyid/persona-icon/vue/profile/20.vue'
+  import IconGroup from '@privyid/persona-icon/vue/chat/24.vue'
+  import pBanner from '../banner/Banner.vue'
 </script>
 
 # Avatar
@@ -59,18 +61,48 @@ description: Show user's avatar, using name or image
 </script>
 ```
 
+## Square round
+Avatar also comes in square-round type variant. Just using `square` prop
+to enable this type variant.
+
+<p-banner :dismissable="false">
+  Use square-round type variant of avatars only to represent an entity, e.g. group chat avatar. 
+  Avatar square-round can't be used to represent a user.
+</p-banner>
+
+<preview>
+  <p-avatar square>
+    <IconGroup />
+  </p-avatar>
+</preview>
+
+```vue
+<template>
+  <p-avatar square>
+    <IconChatGroup />
+  </p-avatar>
+</template>
+```
+
 ## Sizing
 
 There are 5 available size variant: `xs`, `sm`, `md`, `lg`, `xl`. The default is `md`.
 
-<preview>
+<preview class="flex-col space-y-4">
   <div class="flex flex-col items-center space-gap-3 lg:flex-row">
     <p-avatar src="https://picsum.photos/id/24/24" size="xs" />
     <p-avatar src="https://picsum.photos/id/32/32" size="sm" />
     <p-avatar src="https://picsum.photos/id/40/40" size="md" />
     <p-avatar src="https://picsum.photos/id/56/56" size="lg" />
     <p-avatar src="https://picsum.photos/id/96/96" size="xl" />
   </div>
+  <div class="flex flex-col items-center space-gap-3 lg:flex-row">
+    <p-avatar src="https://picsum.photos/id/96/96" size="xl" square />
+    <p-avatar src="https://picsum.photos/id/56/56" size="lg" square />
+    <p-avatar src="https://picsum.photos/id/40/40" size="md" square />
+    <p-avatar src="https://picsum.photos/id/32/32" size="sm" square />
+    <p-avatar src="https://picsum.photos/id/24/24" size="xs" square />
+  </div>
 </preview>
 
 ```vue
@@ -80,6 +112,12 @@ There are 5 available size variant: `xs`, `sm`, `md`, `lg`, `xl`. The default is
   <p-avatar src="https://picsum.photos/id/40/40" size="md" />
   <p-avatar src="https://picsum.photos/id/56/56" size="lg" />
   <p-avatar src="https://picsum.photos/id/96/96" size="xl" />
+
+  <p-avatar src="https://picsum.photos/id/96/96" size="xl" square />
+  <p-avatar src="https://picsum.photos/id/56/56" size="lg" square />
+  <p-avatar src="https://picsum.photos/id/40/40" size="md" square />
+  <p-avatar src="https://picsum.photos/id/32/32" size="sm" square />
+  <p-avatar src="https://picsum.photos/id/24/24" size="xs" square />
 </template>
 ```
 

src/components/notify/NotifyGroup.vue

@@ -121,8 +121,6 @@ defineExpose({
   }
 
   &--top-right {
-    @apply top-2 right-4;
-
     .notify-group__container {
       @apply items-end;
     }
@@ -136,7 +134,7 @@ defineExpose({
   }
 
   &--top-center {
-    @apply top-2 left-1/2 -translate-x-1/2;
+    @apply left-1/2 -translate-x-1/2;
 
     .notify-group__container {
       @apply items-center;
@@ -151,8 +149,6 @@ defineExpose({
   }
 
   &--top-left {
-    @apply top-2 left-4;
-
     .notify-group__container {
       @apply items-start;
     }
@@ -166,8 +162,6 @@ defineExpose({
   }
 
   &--bottom-right {
-    @apply bottom-2 right-4;
-
     .notify-group__container {
       @apply items-end;
     }
@@ -181,7 +175,7 @@ defineExpose({
   }
 
   &--bottom-center {
-    @apply bottom-2 left-1/2 -translate-x-1/2;
+    @apply left-1/2 -translate-x-1/2;
 
     .notify-group__container {
       @apply items-center;
@@ -196,8 +190,6 @@ defineExpose({
   }
 
   &--bottom-left {
-    @apply bottom-2 left-4;
-
     .notify-group__container {
       @apply items-start;
     }
@@ -213,14 +205,28 @@ defineExpose({
   &--top-left,
   &--top-center,
   &--top-right {
+    @apply top-8;
+
     .notify-group__container {
       @apply justify-start flex-col-reverse space-y-reverse;
     }
   }
 
+  &--top-right,
+  &--bottom-right {
+    @apply right-8;
+  }
+
+  &--top-left,
+  &--bottom-left {
+    @apply left-8;
+  }
+
   &--bottom-left,
   &--bottom-center,
   &--bottom-right {
+    @apply bottom-8;
+
     .notify-group__container {
       @apply justify-end flex-col;
     }

src/components/toast/index.md

@@ -38,7 +38,7 @@ description: Simple notification pop-up.
 ### Simple Usage
 
 <div class="flex mt-3">
-  <Button color="info" @click="toast('Far far away, behind the word.')">
+  <Button color="info" @click="toast({ text: 'Far far away, behind the word.', duration: -1 })">
     Show Toast
   </Button>
 </div>