@spaced-out/ui-design-system 0.4.13 → 0.4.15-beta.0

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

@@ -1,269 +0,0 @@
-// @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

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

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

@@ -1,164 +0,0 @@
-// @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

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

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

@@ -1,147 +0,0 @@
-// @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

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

package/lib/components/BadgedIcon/BadgedIcon.js.flow

@@ -1,73 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import classify from '../../utils/classify';
-import type {IconSize, IconType} from '../Icon';
-import {Icon} from '../Icon';
-
-import typographyStyle from '../../styles/typography.module.css';
-import css from './BadgedIcon.module.css';
-
-
-type ClassNames = $ReadOnly<{
-  wrapper?: string,
-  icon?: string,
-  badgeIcon?: string,
-}>;
-
-export type BadgedIconProps = {
-  type?: IconType,
-  name: string,
-  size?: IconSize,
-  ariaLabel?: string,
-  showBadge?: boolean,
-  classNames?: ClassNames,
-};
-
-export const BadgedIcon = ({
-  name,
-  showBadge = true,
-  classNames,
-  size = 'medium',
-  type = 'solid',
-  ariaLabel,
-}: BadgedIconProps): React.Node => (
-  <>
-    {!!name && (
-      <div
-        className={classify(css.iconContainer, css[size], classNames?.wrapper)}
-      >
-        <Icon
-          ariaLabel={ariaLabel}
-          name={name}
-          className={classNames?.icon}
-          name={name}
-          size={size === 'large' ? 'medium' : size}
-          type={type}
-          color={TEXT_COLORS.clickable}
-        />
-        {showBadge && <BadgeIcon className={classNames?.badgeIcon} />}
-      </div>
-    )}
-  </>
-);
-
-const BadgeIcon = ({className}: {className: ?string}): React.Node => (
-  <svg
-    className={classify(
-      css.badgeIcon,
-      typographyStyle[TEXT_COLORS['clickable']],
-      className,
-    )}
-    viewBox="0 0 12 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6.46573 1.0335L8.10352 4.61465L11.6941 6.24816C11.883 6.3424 12.009 6.53088 12.009 6.71936C12.009 6.90784 11.883 7.09632 11.6941 7.15915L8.10352 8.82407L6.46573 12.4052C6.37124 12.5937 6.18226 12.7194 5.99329 12.7194C5.80431 12.7194 5.61533 12.5937 5.55234 12.4052L3.88305 8.82407L0.292498 7.19056C0.103521 7.09632 0.0090332 6.90784 0.0090332 6.71936C0.0090332 6.53088 0.103521 6.3424 0.292498 6.24816L3.88305 4.61465L5.55234 1.0335C5.61533 0.845015 5.80431 0.71936 5.99329 0.71936C6.18226 0.71936 6.37124 0.845015 6.46573 1.0335Z"
-      fill="currentColor"
-    />
-  </svg>
-);

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

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