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

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

@@ -2,6 +2,7 @@ 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';
 
@@ -38,10 +39,6 @@ export default {
     colorSalt: {
       control: { type: 'text' },
     },
-
-    icon: {
-      control: { type: 'text' },
-    },
   },
 
   parameters: {
@@ -61,6 +58,7 @@ export default {
 const DefaultTemplate: StoryFn<typeof OrAvatar> = (args) => ({
   components: {
     OrAvatar,
+    OrIcon,
   },
 
   setup() {
@@ -116,22 +114,22 @@ WithTextInSlot.args = {
   colorSalt: 'A username',
 };
 
-export const WithIcon = DefaultTemplate.bind({});
-WithIcon.args = {
-  icon: 'store',
+export const WithIconInSlot = DefaultTemplate.bind({});
+WithIconInSlot.args = {
+  default: '<or-icon icon="face" size="inherit" />',
   colorSalt: 'Any string here',
 };
 
 export const WithColor = DefaultTemplate.bind({});
 WithColor.args = {
   color: AvatarColor.blue,
-  icon: 'person',
+  default: '<or-icon icon="person" size="inherit" />',
 };
 
 export const XL = DefaultTemplate.bind({});
 XL.args = {
   size: AvatarSize.XL,
-  icon: 'person',
+  default: '<or-icon icon="person" size="inherit" />',
   colorSalt: 'Big Avatar',
 };
 

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

@@ -6,16 +6,10 @@
   >
     <slot>
       <img
-        v-if="src"
         :class="imageStyles"
         :src="src"
         :alt="''"
       >
-      <or-icon
-        v-else-if="icon"
-        :icon="icon"
-        size="inherit"
-      />
     </slot>
   </div>
 </template>
@@ -25,14 +19,10 @@ 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, AvatarRootAbbreviationSizes, AvatarRootIconSizes } from './styles';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { AvatarImage, AvatarRoot, AvatarRootColors, AvatarRootSizes } from './styles';
 
 export default defineComponent({
   name: 'OrAvatar',
-  components: {
-    OrIcon,
-  },
 
   inheritAttrs: false,
 
@@ -46,10 +36,7 @@ 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,
@@ -71,9 +58,6 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
 
-    const isIcon = computed(() => {
-      return !props.icon;
-    });
     // Styles
     const classAttribute = useClassAttribute();
 
@@ -82,10 +66,6 @@ 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,7 +3,6 @@ export enum AvatarSize {
   L = 'l',
   M = 'm',
   S = 's',
-  XS = 'xs',
 }
 
 export enum AvatarColor {

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

@@ -27,30 +27,36 @@ 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]',
-  ],
 
-  'xs': [
-    // Box
-    'w-[24px]',
-    'h-[24px]',
+    // Typography
+    'text-[16px]',
   ],
 };
 
@@ -91,47 +97,3 @@ 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,6 +7,9 @@ export const ButtonRoot: string[] = [
   // Shape
   'rounded-md',
 
+  // Sizing
+  'min-w-[96px]',
+
   // Interactivity
   'interactivity-auto',
 
@@ -46,6 +49,9 @@ 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()"
       >
-        Last Updated
+        A-Z
         <OrIcon
           v-if="menu"
           :icon="menu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'"