@bitrise/bitkit 13.90.0 → 13.91.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.90.0",
+  "version": "13.91.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Avatar/Avatar.theme.ts

@@ -1,66 +1,237 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
-import { AvatarSizes } from './Avatar';
-
-const BACKGROUND_COLORS = [
-  '#68442c',
-  '#86d641',
-  '#a775db',
-  '#df5ac3',
-  '#46bee8',
-  '#63c99a',
-  '#19937c',
-  '#ed544c',
-  '#ff931e',
-  '#107ec1',
-  '#48e1ed',
-  '#743da5',
-  '#f9d128',
-  '#ff931e',
-  '#9e4b39',
-  '#b51c98',
-  '#b20202',
-  '#bf8a66',
-  '#2c3f50',
-  '#441f62',
-  '#0c5b4c',
-  '#391401',
-  '#27ae61',
-  '#ef7bef',
+import { rem } from '../../utils/utils';
+import { AvatarSizes, AvatarVariant } from './Avatar';
+
+const COLORS = [
+  {
+    backgroundColor: 'sys/neutral/subtle',
+    color: 'sys/neutral/strong',
+  },
+  {
+    backgroundColor: 'sys/success/subtle',
+    color: 'sys/success/strong',
+  },
+  {
+    backgroundColor: 'sys/warning/subtle',
+    color: 'sys/warning/strong',
+  },
+  {
+    backgroundColor: 'sys/orange/subtle',
+    color: 'sys/orange/strong',
+  },
+  {
+    backgroundColor: 'sys/info/subtle',
+    color: 'sys/info/strong',
+  },
+  {
+    backgroundColor: 'sys/critical/subtle',
+    color: 'sys/critical/strong',
+  },
+  {
+    backgroundColor: 'sys/interactive/subtle',
+    color: 'sys/interactive/strong',
+  },
+  {
+    backgroundColor: 'sys/turquoise/subtle',
+    color: 'sys/turquoise/strong',
+  },
 ];
 
-const getSize = (size: AvatarSizes) => {
-  const sizeAsNumber = Number(size);
-  const fontSizes = {
-    16: '9px',
-    24: '1',
-    32: '3',
-    40: '3',
+const getStyleForUserVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '12',
+    32: '16',
+    40: '24',
+    48: '24',
+    64: '12',
+    128: '24',
+  };
+
+  return {
+    borderRadius: borderRadius[size],
+  };
+};
+
+const getStyleForWorkspaceVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '24',
+    32: '8',
+    40: '8',
+    48: '12',
+    64: '12',
+    128: '24',
+  };
+
+  return {
+    borderRadius: borderRadius[size],
+  };
+};
+
+const getStyleForBrandVariant = (size: AvatarSizes) => {
+  const style = {
+    24: {
+      borderRadius: '4',
+      svg: {
+        height: '16',
+        width: '16',
+      },
+    },
+    32: {
+      borderRadius: '8',
+      svg: {
+        height: '20',
+        width: '20',
+      },
+    },
+    40: {
+      borderRadius: '8',
+      svg: {
+        height: '24',
+        width: '24',
+      },
+    },
+    48: {
+      borderRadius: '12',
+      svg: {
+        height: '32',
+        width: '32',
+      },
+    },
+    64: {
+      borderRadius: '12',
+      svg: {
+        height: '48',
+        width: '48',
+      },
+    },
+    128: {
+      borderRadius: '12',
+      svg: {
+        height: '96',
+        width: '96',
+      },
+    },
+  };
+
+  return {
+    ...style[size],
+  };
+};
+
+const getStyleForLettersVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '12',
+    32: '8',
+    40: '8',
+    48: '12',
+    64: '12',
+    128: '12',
+  };
+
+  return {
+    borderRadius: borderRadius[size],
+    padding: size === '128' ? '16' : undefined,
+  };
+};
+
+const getStyleForProjectVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '8',
+    32: '8',
+    40: '8',
+    48: '12',
+    64: '12',
+    128: '24',
+  };
+
+  return {
+    borderRadius: borderRadius[size],
+  };
+};
+
+const getStyleForStepVariant = (size: AvatarSizes) => {
+  const borderRadius = {
+    24: '4',
+    32: '4',
+    40: '4',
     48: '4',
-    64: '5',
-    96: '7',
-    128: '8',
+    64: '8',
+    128: '12',
   };
 
   return {
-    fontSize: fontSizes[sizeAsNumber as keyof typeof fontSizes],
-    height: `${sizeAsNumber / 16}rem`,
-    width: `${sizeAsNumber / 16}rem`,
+    borderRadius: borderRadius[size],
   };
 };
 
+const getSizeBasedTextStyle = (size: AvatarSizes) => {
+  const textStyles = {
+    24: 'heading/h5',
+    32: 'heading/h3',
+    40: 'heading/h2',
+    48: 'heading/h1',
+    64: 'display/sm',
+    128: 'display/lg',
+  };
+
+  return {
+    textStyle: textStyles[size],
+    fontWeight: 'bold',
+  };
+};
+
+const getStyleBySizeAndType = (size: AvatarSizes, variant: AvatarVariant) => {
+  switch (variant) {
+    case 'user':
+      return {
+        ...getStyleForUserVariant(size),
+      };
+    case 'workspace':
+      return {
+        ...getStyleForWorkspaceVariant(size),
+      };
+    case 'brand':
+      return {
+        ...getStyleForBrandVariant(size),
+      };
+    case 'letters':
+      return {
+        ...getStyleForLettersVariant(size),
+      };
+    case 'project':
+      return {
+        ...getStyleForProjectVariant(size),
+      };
+    case 'step':
+      return {
+        ...getStyleForStepVariant(size),
+      };
+  }
+};
+
 const AvatarTheme: ComponentStyleConfig = {
-  baseStyle: ({ name, size, src }) => {
-    const str = name.toUpperCase();
-    const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
+  baseStyle: ({ name, variant, size }) => {
+    let colors = {};
+    if (name) {
+      const str = name.toUpperCase();
+      const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
+      colors = COLORS[seed % COLORS.length];
+    } else if (variant === 'brand') {
+      colors = { backgroundColor: 'sys/neutral/subtle', color: 'text/secondary' };
+    }
 
     return {
       container: {
-        backgroundColor: src ? 'transparent' : BACKGROUND_COLORS[seed % BACKGROUND_COLORS.length],
-        color: 'neutral.100',
-        ...getSize(size),
+        ...colors,
+        overflow: 'hidden',
+        height: rem(size),
+        width: rem(size),
+        ...getSizeBasedTextStyle(size),
+        ...getStyleBySizeAndType(size, variant),
       },
     };
   },
+  parts: ['container'],
 };
 
 export default AvatarTheme;

package/src/Components/Avatar/Avatar.tsx

@@ -1,10 +1,24 @@
 import { Avatar as ChakraAvatar, AvatarProps as ChakraAvatarProps, forwardRef } from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
-export type AvatarSizes = '16' | '24' | '32' | '40' | '48' | '64' | '96' | '128';
+export type AvatarSizes = '24' | '32' | '40' | '48' | '64' | '128';
+export type AvatarVariant = 'user' | 'workspace' | 'brand' | 'letters' | 'project' | 'step';
 
-export interface AvatarProps extends ChakraAvatarProps {
-  size?: AvatarSizes;
-}
+export type AvatarProps = (
+  | {
+      iconName: TypeIconName;
+      name?: never;
+      size?: AvatarSizes;
+      variant?: 'brand';
+    }
+  | {
+      iconName?: never;
+      name: string;
+      size?: AvatarSizes;
+      variant?: 'user' | 'workspace' | 'letters' | 'project' | 'step';
+    }
+) &
+  ChakraAvatarProps;
 
 const getInitials = (name: string) => {
   if (name.length < 3) {
@@ -16,8 +30,15 @@ const getInitials = (name: string) => {
   return `${nameArray[0]}${nameArray[nameArray.length - 1]}`;
 };
 
-const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => (
-  <ChakraAvatar getInitials={getInitials} borderRadius="8" size="32" {...props} ref={ref} />
-));
+const Avatar = forwardRef<AvatarProps, 'span'>((props, ref) => {
+  const { iconName, variant = 'user', size = '32', ...rest } = props;
+
+  let icon;
+  if (iconName) {
+    icon = <Icon color="sys/neutral/strong" name={iconName} />;
+  }
+
+  return <ChakraAvatar getInitials={getInitials} icon={icon} size={size} variant={variant} {...rest} ref={ref} />;
+});
 
 export default Avatar;