@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/Avatar/Avatar.js.flow

@@ -0,0 +1,269 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  JumboSmall,
+  SubTitleLarge,
+  SubTitleMedium,
+  SubTitleSmall,
+} from '../../components/Text';
+import * as COLORS from '../../styles/variables/_color';
+import {
+  colorDangerLightest,
+  colorGrayLightest,
+  colorInformationLightest,
+  colorNeutralLightest,
+  colorSuccessLightest,
+  colorWarningLightest,
+} from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+import type {StatusSemanticType} from '../StatusIndicator';
+import {StatusIndicator} from '../StatusIndicator';
+
+import css from './Avatar.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  ring?: string,
+  content?: string,
+  image?: string,
+  icon?: string,
+  text?: string,
+}>;
+
+export const AVATAR_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  extraLarge: 'extraLarge',
+});
+export const avatarSizeOptions: Array<mixed> = [...Object.keys(AVATAR_SIZE)];
+
+export type AvatarSize = $Values<typeof AVATAR_SIZE>;
+export const AVATAR_COLOR = Object.freeze({
+  red: colorDangerLightest,
+  orange: colorWarningLightest,
+  green: colorSuccessLightest,
+  blue: colorInformationLightest,
+  gray: colorGrayLightest,
+  indigo: colorNeutralLightest,
+});
+
+export type AvatarColorType = $Keys<typeof AVATAR_COLOR>;
+
+export type AvatarProps = {
+  classNames?: ClassNames,
+  size?: AvatarSize,
+  imageSrc?: string,
+  ring?: boolean,
+  icon?: boolean,
+  text?: string,
+  color?: AvatarColorType,
+  style?: mixed,
+  iconName?: string,
+  iconType?: IconType,
+  status?: StatusSemanticType,
+  statusBorderColorToken?: $Keys<typeof COLORS>,
+};
+
+const getAvatarText = (text = '') => {
+  const [firstWord, secondWord] = text.split(' ');
+  const firstChar = firstWord ? firstWord[0].toUpperCase() : '';
+  const secondChar = secondWord ? secondWord[0].toUpperCase() : '';
+  return firstChar + secondChar;
+};
+
+const AvatarTextDecorator = ({
+  avatarText,
+  size,
+  className,
+}: {
+  avatarText: string,
+  size: AvatarSize,
+  className?: string,
+}) => {
+  switch (size) {
+  case 'small':
+    return <SubTitleSmall className={className}>{avatarText}</SubTitleSmall>;
+  case 'medium':
+    return (
+      <SubTitleMedium className={className}>{avatarText}</SubTitleMedium>
+    );
+  case 'large':
+    return <SubTitleLarge className={className}>{avatarText}</SubTitleLarge>;
+  case 'extraLarge':
+    return <JumboSmall className={className}>{avatarText}</JumboSmall>;
+  }
+};
+
+// mapping of iconSize for each avatar size;
+const iconSize = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'medium',
+  extraLarge: 'large',
+});
+
+export type AvatarContentProps = {
+  imageSrc?: string,
+  text?: string,
+  iconName?: string,
+  iconType?: IconType,
+  size: AvatarSize,
+  color?: AvatarColorType,
+  ring?: boolean,
+  status?: StatusSemanticType,
+  statusBorderColorToken?: $Keys<typeof COLORS>,
+  classNames?: ClassNames,
+};
+
+const AvatarConditionalContent = ({
+  imageSrc,
+  text,
+  iconName,
+  size,
+  iconType,
+  color = 'blue',
+  status,
+  statusBorderColorToken,
+  classNames,
+}: AvatarContentProps) => (
+  <div
+    className={classify(
+      css.innerContainer,
+      {[css.alignCenter]: !imageSrc},
+      classNames?.content,
+    )}
+    style={{
+      '--background-color': AVATAR_COLOR[color],
+    }}
+  >
+    {!!status && (
+      <div className={classify(css.statusIndicatorWrapper, css[size])}>
+        <StatusIndicator
+          status={status}
+          withBorder
+          borderColorToken={statusBorderColorToken}
+        />
+      </div>
+    )}
+
+    {imageSrc ? (
+      <img
+        src={imageSrc}
+        alt="Avatar"
+        className={classify(css.avatar, classNames?.image)}
+      ></img>
+    ) : iconName ? (
+      <Icon
+        name={iconName}
+        type={iconType}
+        size={iconSize[size]}
+        className={classNames?.icon}
+      />
+    ) : text ? (
+      <AvatarTextDecorator
+        avatarText={getAvatarText(text)}
+        size={size}
+        className={classNames?.text}
+      />
+    ) : null}
+  </div>
+);
+
+export const Avatar: React$AbstractComponent<AvatarProps, HTMLDivElement> =
+  React.forwardRef<AvatarProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        size = AVATAR_SIZE.medium,
+        imageSrc,
+        text,
+        style,
+        iconName,
+        iconType,
+        color,
+        ring = false,
+        status,
+        statusBorderColorToken,
+      }: AvatarProps,
+      ref,
+    ) => (
+      <div
+        className={classify(
+          css.container,
+          {
+            [css.extraLargeSize]: size === 'extraLarge',
+            [css.largeSize]: size === 'large',
+            [css.mediumSize]: size === 'medium',
+            [css.smallSize]: size === 'small',
+          },
+          classNames?.wrapper,
+        )}
+        style={style}
+        ref={ref}
+      >
+        {ring ? (
+          <div className={classify(css.ring, classNames?.ring)}>
+            <div className={css.whiteCircle}>
+              <AvatarConditionalContent
+                imageSrc={imageSrc}
+                text={text}
+                iconName={iconName}
+                iconType={iconType}
+                color={color}
+                size={size}
+                status={status}
+                statusBorderColorToken={statusBorderColorToken}
+                classNames={classNames}
+              />
+            </div>
+          </div>
+        ) : (
+          <AvatarConditionalContent
+            imageSrc={imageSrc}
+            text={text}
+            iconName={iconName}
+            iconType={iconType}
+            color={color}
+            size={size}
+            status={status}
+            statusBorderColorToken={statusBorderColorToken}
+            classNames={classNames}
+          />
+        )}
+      </div>
+    ),
+  );
+
+export const BaseAvatar = ({
+  classNames,
+  size = AVATAR_SIZE.medium,
+  text = '',
+  style,
+  color = 'blue',
+}: AvatarProps): React.Node => (
+  <div
+    className={classify(
+      css.container,
+      {
+        [css.baseExtraLargeSize]: size === 'extraLarge',
+        [css.baseLargeSize]: size === 'large',
+        [css.baseMediumSize]: size === 'medium',
+        [css.baseSmallSize]: size === 'small',
+      },
+      classNames?.wrapper,
+    )}
+    style={{...style, background: AVATAR_COLOR[color]}}
+  >
+    <AvatarTextDecorator
+      avatarText={text}
+      size={size}
+      className={classNames?.text}
+    />
+  </div>
+);

package/lib/components/Avatar/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Avatar';

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -49,7 +49,6 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
       },
       style: {
         borderColor,
-        // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly small: "4px"; readonly medium: `${number}px`; readonly large: "8px"; readonly extraLarge: "12px"; }'.
         marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`
       },
       color
@@ -66,12 +65,10 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
     const nameList = [];
     for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
       const child = childrenArray[i];
-      // @ts-ignore - TS2339 - Property 'props' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
       const {
         text
       } = child.props;
       if (text) {
-        // @ts-ignore - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
         nameList.push(text);
       }
     }
@@ -94,13 +91,11 @@ const AvatarGroup = exports.AvatarGroup = /*#__PURE__*/React.forwardRef((_ref, r
       },
       style: {
         borderColor,
-        // @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly small: "4px"; readonly medium: `${number}px`; readonly large: "8px"; readonly extraLarge: "12px"; }'.
         marginLeft: `-${leftOverlap[size]}`
       }
     })));
   };
   const childrenWithProps = React.Children.map(children, (child, index) => {
-    // @ts-ignore - TS2533 - Object is possibly 'null' or 'undefined'. | TS2339 - Property 'props' does not exist on type 'string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
     const {
       imageSrc
     } = child.props;

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -0,0 +1,164 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {colorBackgroundTertiary} from '../../styles/variables/_color';
+import {
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall,
+} from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import type {AvatarSize} from '../Avatar';
+import {BaseAvatar} from '../Avatar';
+import type {ElevationType, PlacementType} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+
+import css from './AvatarGroup.module.css';
+
+
+const COLOR_SEQUENCE = ['blue', 'green', 'orange', 'red', 'gray'];
+
+export type AvatarGroupProps = {
+  children?: React.Node,
+  size?: AvatarSize,
+  borderColor?: string,
+  maxTooltipLines?: number,
+  placement?: PlacementType,
+  maxAvatars?: number,
+  tooltipElevation?: ElevationType,
+};
+
+export const AvatarGroup: React$AbstractComponent<
+  AvatarGroupProps,
+  HTMLDivElement,
+> = React.forwardRef<AvatarGroupProps, HTMLDivElement>(
+  (
+    {
+      children,
+      size = 'medium',
+      borderColor = colorBackgroundTertiary,
+      maxTooltipLines = 7,
+      placement = 'top',
+      maxAvatars = 5,
+      tooltipElevation,
+    }: AvatarGroupProps,
+    ref,
+  ): React.Node => {
+    const childAvatarCount = React.Children.count(children);
+
+    const leftOverlap = {
+      small: spaceXXSmall,
+      medium: `${parseInt(spaceSmall) / 2}px`,
+      large: spaceXSmall,
+      extraLarge: spaceSmall,
+    };
+
+    let colorIndex = -1;
+
+    const avatarInGroup = (child, index, color) => {
+      const {classNames, text} = child.props;
+      const {wrapper, ...restClassNames} = classNames || {};
+      const avatar = React.cloneElement(child, {
+        size,
+        classNames: {
+          wrapper: classify(css.avatarInGroup, wrapper),
+          ...restClassNames,
+        },
+        style: {
+          borderColor,
+          marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`,
+        },
+        color,
+      });
+      return text ? (
+        <Tooltip body={text} placement={placement} elevation={tooltipElevation}>
+          {avatar}
+        </Tooltip>
+      ) : (
+        avatar
+      );
+    };
+
+    const childrenArray = React.Children.toArray(children);
+    const totalAvatarCount = childrenArray.length;
+    const plusAvatar = () => {
+      const nameList = [];
+
+      for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
+        const child = childrenArray[i];
+        const {text} = child.props;
+        if (text) {
+          nameList.push(text);
+        }
+      }
+
+      const NameListNode = () => (
+        <span>
+          {nameList.map((name) => (
+            <React.Fragment key={name}>
+              {name}
+              <br />
+            </React.Fragment>
+          ))}
+        </span>
+      );
+      return (
+        <Tooltip
+          body={<NameListNode />}
+          bodyMaxLines={maxTooltipLines}
+          placement={placement}
+          elevation={tooltipElevation}
+        >
+          <div className={css.plusAvatar}>
+            <BaseAvatar
+              size={size}
+              color="gray"
+              text={`+${childAvatarCount - maxAvatars + 1}`}
+              classNames={{wrapper: css.avatarInGroup}}
+              style={{
+                borderColor,
+                marginLeft: `-${leftOverlap[size]}`,
+              }}
+            />
+          </div>
+        </Tooltip>
+      );
+    };
+
+    const childrenWithProps = React.Children.map(children, (child, index) => {
+      const {imageSrc} = child.props;
+      if (!imageSrc) {
+        colorIndex++;
+        if (colorIndex === COLOR_SEQUENCE.length) {
+          colorIndex = 0;
+        }
+      }
+
+      const color = COLOR_SEQUENCE[colorIndex];
+      if (childAvatarCount <= maxAvatars) {
+        return avatarInGroup(child, index, color);
+      } else {
+        if (index < maxAvatars - 1) {
+          return avatarInGroup(child, index, color);
+        } else if (index === maxAvatars) {
+          return plusAvatar();
+        }
+      }
+    });
+
+    return (
+      <div
+        className={classify(css.avatarGroupContainer, {
+          [css.extraLargeSize]: size === 'extraLarge',
+          [css.largeSize]: size === 'large',
+          [css.mediumSize]: size === 'medium',
+          [css.smallSize]: size === 'small',
+        })}
+        ref={ref}
+      >
+        {childrenWithProps}
+      </div>
+    );
+  },
+);

package/lib/components/AvatarGroup/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './AvatarGroup';

package/lib/components/Badge/Badge.js.flow

@@ -0,0 +1,147 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  colorDanger,
+  colorDangerLightest,
+  colorGrayLightest,
+  colorInformation,
+  colorInformationLightest,
+  colorNeutral,
+  colorNeutralLightest,
+  colorSuccess,
+  colorSuccessLightest,
+  colorWarning,
+  colorWarningLightest,
+} from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {ButtonTextSmall} from '../Text';
+
+import css from './Badge.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, text?: string, icon?: string}>;
+
+export const BADGE_COLOR = Object.freeze({
+  gray: colorGrayLightest,
+  red: colorDangerLightest,
+  redDark: colorDanger,
+  orange: colorWarningLightest,
+  orangeDark: colorWarning,
+  green: colorSuccessLightest,
+  greenDark: colorSuccess,
+  blue: colorInformationLightest,
+  blueDark: colorInformation,
+  indigo: colorNeutralLightest,
+  indigoDark: colorNeutral,
+});
+
+export type BadgeColorType = $Keys<typeof BADGE_COLOR>;
+
+export type BaseBadgeProps = {
+  classNames?: ClassNames,
+  fill?: BadgeColorType,
+};
+
+export type BadgeProps = {
+  ...BaseBadgeProps,
+  text: string,
+};
+
+export type IconBadgeProps = {
+  ...BaseBadgeProps,
+  iconName: string,
+  iconType?: IconType,
+  iconSize?: IconSize,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ariaLabel?: string,
+};
+
+export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
+  React.forwardRef<BadgeProps, HTMLDivElement>(
+    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => {
+      const isDark = fill.includes('Dark');
+
+      return (
+        <div
+          data-testid="Badge"
+          style={{
+            '--wrapperBgColor': BADGE_COLOR[fill],
+          }}
+          className={classify(
+            css.badgeWrapper,
+            {
+              [css.fixedWidth]: text.length <= 2,
+            },
+            classNames?.wrapper,
+          )}
+          ref={ref}
+        >
+          <ButtonTextSmall
+            className={classify(
+              {
+                [css.dark]: isDark,
+                [css.light]: !isDark,
+              },
+              classNames?.text,
+            )}
+          >
+            {text}
+          </ButtonTextSmall>
+        </div>
+      );
+    },
+  );
+
+export const IconBadge: React$AbstractComponent<
+  IconBadgeProps,
+  HTMLDivElement,
+> = React.forwardRef<IconBadgeProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      fill = 'gray',
+      iconName,
+      iconSize = 'small',
+      iconType = 'solid',
+      ariaLabel,
+      onClick,
+    }: IconBadgeProps,
+    ref,
+  ): React.Node => {
+    const isDark = fill.includes('Dark');
+
+    return (
+      <div
+        data-testid="Badge"
+        style={{
+          '--wrapperBgColor': BADGE_COLOR[fill],
+        }}
+        className={classify(
+          css.badgeWrapper,
+          css.iconContainer,
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        <Icon
+          name={iconName}
+          type={iconType}
+          size={iconSize}
+          ariaLabel={ariaLabel}
+          onClick={onClick}
+          className={classify(
+            {
+              [css.dark]: isDark,
+              [css.light]: !isDark,
+            },
+            classNames?.icon,
+          )}
+        />
+      </div>
+    );
+  },
+);

package/lib/components/Badge/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Badge';

package/lib/components/BadgedIcon/BadgedIcon.js

@@ -26,9 +26,7 @@ const BadgedIcon = _ref => {
   }, /*#__PURE__*/React.createElement(_Icon.Icon, {
     ariaLabel: ariaLabel,
     name: name,
-    className: classNames?.icon
-    // @ts-ignore - TS17001 - JSX elements cannot have multiple attributes with the same name.
-    ,
+    className: classNames?.icon,
     name: name,
     size: size === 'large' ? 'medium' : size,
     type: type,