@onereach/ui-components 2.69.2-beta.2136.0 → 2.69.2

package/src/components/or-avatar-v3/OrAvatar.stories3.ts

@@ -2,7 +2,6 @@ import { Meta, StoryFn } from '@storybook/vue3';
 import OrAvatarDocs from './OrAvatar.docs.mdx';
 import OrAvatar from './OrAvatar.vue';
 import { AvatarColor, AvatarSize } from './props';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { getAbbreviation } from '../../utils/functions/text';
 import { computed } from 'vue-demi';
 
@@ -39,6 +38,10 @@ export default {
     colorSalt: {
       control: { type: 'text' },
     },
+
+    icon: {
+      control: { type: 'text' },
+    },
   },
 
   parameters: {
@@ -58,7 +61,6 @@ export default {
 const DefaultTemplate: StoryFn<typeof OrAvatar> = (args) => ({
   components: {
     OrAvatar,
-    OrIcon,
   },
 
   setup() {
@@ -114,22 +116,22 @@ WithTextInSlot.args = {
   colorSalt: 'A username',
 };
 
-export const WithIconInSlot = DefaultTemplate.bind({});
-WithIconInSlot.args = {
-  default: '<or-icon icon="face" size="inherit" />',
+export const WithIcon = DefaultTemplate.bind({});
+WithIcon.args = {
+  icon: 'store',
   colorSalt: 'Any string here',
 };
 
 export const WithColor = DefaultTemplate.bind({});
 WithColor.args = {
   color: AvatarColor.blue,
-  default: '<or-icon icon="person" size="inherit" />',
+  icon: 'person',
 };
 
 export const XL = DefaultTemplate.bind({});
 XL.args = {
   size: AvatarSize.XL,
-  default: '<or-icon icon="person" size="inherit" />',
+  icon: 'person',
   colorSalt: 'Big Avatar',
 };
 

package/src/components/or-avatar-v3/OrAvatar.vue

@@ -6,10 +6,16 @@
   >
     <slot>
       <img
+        v-if="src"
         :class="imageStyles"
         :src="src"
         :alt="''"
       >
+      <or-icon
+        v-else-if="icon"
+        :icon="icon"
+        size="inherit"
+      />
     </slot>
   </div>
 </template>
@@ -19,10 +25,14 @@ import { computed, defineComponent, PropType, ref, watchPostEffect } from 'vue-d
 import { useClassAttribute } from '../../hooks';
 import { generateHslFromString, hslToColorString } from '../../utils/functions/color';
 import { AvatarColor, AvatarSize } from './props';
-import { AvatarImage, AvatarRoot, AvatarRootColors, AvatarRootSizes } from './styles';
+import { AvatarImage, AvatarRoot, AvatarRootColors, AvatarRootSizes, AvatarRootAbbreviationSizes, AvatarRootIconSizes } from './styles';
+import { OrIconV3 as OrIcon } from '../or-icon-v3';
 
 export default defineComponent({
   name: 'OrAvatar',
+  components: {
+    OrIcon,
+  },
 
   inheritAttrs: false,
 
@@ -36,7 +46,10 @@ export default defineComponent({
       type: String as PropType<AvatarSize>,
       default: AvatarSize.M,
     },
-
+    icon: {
+      type: String,
+      default: undefined,
+    },
     color: {
       type: String as PropType<AvatarColor>,
       default: AvatarColor.auto,
@@ -58,6 +71,9 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
 
+    const isIcon = computed(() => {
+      return !props.icon;
+    });
     // Styles
     const classAttribute = useClassAttribute();
 
@@ -66,6 +82,10 @@ export default defineComponent({
       ...AvatarRoot,
       ...AvatarRootSizes[props.size],
       ...AvatarRootColors[props.color],
+      ...(isIcon.value
+        ? AvatarRootAbbreviationSizes[props.size]
+        : AvatarRootIconSizes[props.size]
+      ),
       classAttribute.value,
     ]);
 

package/src/components/or-avatar-v3/props.ts

@@ -3,6 +3,7 @@ export enum AvatarSize {
   L = 'l',
   M = 'm',
   S = 's',
+  XS = 'xs',
 }
 
 export enum AvatarColor {

package/src/components/or-avatar-v3/styles.ts

@@ -27,36 +27,30 @@ export const AvatarRootSizes: Record<AvatarSize, string[]> = {
     // Box
     'w-[80px]',
     'h-[80px]',
-
-    // Typography
-    'text-[32px]',
   ],
 
   'l': [
     // Box
     'w-[64px]',
     'h-[64px]',
-
-    // Typography
-    'text-[24px]',
   ],
 
   'm': [
     // Box
     'w-[40px]',
     'h-[40px]',
-
-    // Typography
-    'text-[16px]',
   ],
 
   's': [
     // Box
     'w-[32px]',
     'h-[32px]',
+  ],
 
-    // Typography
-    'text-[16px]',
+  'xs': [
+    // Box
+    'w-[24px]',
+    'h-[24px]',
   ],
 };
 
@@ -97,3 +91,47 @@ export const AvatarRootColors: Record<AvatarColor, string[]> = {
     'dark:text-overlay-dark',
   ],
 };
+
+export const AvatarRootAbbreviationSizes: Record<AvatarSize, string[]> = {
+  'xl': [
+    'typography-headline-1',
+  ],
+
+  'l': [
+    'typography-headline-1',
+  ],
+
+  'm': [
+    'typography-body-1-bold',
+  ],
+
+  's': [
+    'typography-body-1-bold',
+  ],
+
+  'xs': [
+    'typography-caption-semibold',
+  ],
+};
+
+export const AvatarRootIconSizes: Record<AvatarSize, string[]> = {
+  'xl': [
+    'text-[40px]',
+  ],
+
+  'l': [
+    'text-[32px]',
+  ],
+
+  'm': [
+    'text-[20px]',
+  ],
+
+  's': [
+    'text-[16px]',
+  ],
+
+  'xs': [
+    'text-[16px]',
+  ],
+};

package/src/components/or-button-v3/styles.ts

@@ -7,9 +7,6 @@ export const ButtonRoot: string[] = [
   // Shape
   'rounded-md',
 
-  // Sizing
-  'min-w-[96px]',
-
   // Interactivity
   'interactivity-auto',
 
@@ -49,9 +46,6 @@ export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
   'link': [
     // Spacing
     'gap-sm md:gap-xs',
-
-    // Sizing
-    'min-w-[auto]',
   ],
 };
 

package/src/components/or-menu-v3/OrMenu.stories3.ts

@@ -136,7 +136,7 @@ const OrderDropdownTemplate: StoryFn<typeof OrMenu> = (args) => ({
         color="inherit"
         @click="menu.toggle()"
       >
-        A-Z
+        Last Updated
         <OrIcon
           v-if="menu"
           :icon="menu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'"