@spaced-out/ui-design-system 0.3.45 → 0.3.46

package/lib/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,161 +0,0 @@
-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 {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.ReactNode;
-  size?: AvatarSize;
-  borderColor?: string;
-  maxTooltipLines?: number;
-  placement?: PlacementType;
-  maxAvatars?: number;
-  tooltipElevation?: string;
-};
-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.ReactNode => {
-    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.d.ts

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

package/lib/components/Badge/Badge.d.ts

@@ -1,138 +0,0 @@
-import {$ReadOnly, $Keys} from 'utility-types';
-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?:
-    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
-    | null
-    | undefined;
-  ariaLabel?: string;
-};
-export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
-  React.forwardRef<BadgeProps, HTMLDivElement>(
-    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.ReactNode => {
-      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.ReactNode => {
-    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.d.ts

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

package/lib/components/BadgedIcon/BadgedIcon.d.ts

@@ -1,70 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-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.ReactNode => (
-  <>
-    {!!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 | null | undefined;
-}): React.ReactNode => (
-  <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.d.ts

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

package/lib/components/Banner/Banner.d.ts

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import {ALERT_SEMANTIC} from '../../types/common';
-import classify from '../../utils/classify';
-import type {InContextAlertProps} from '../InContextAlert';
-import {InContextAlert} from '../InContextAlert';
-import css from './Banner.module.css';
-export type BannerProps = InContextAlertProps & {
-  alignment?: 'top' | 'bottom';
-};
-export const Banner: React$AbstractComponent<BannerProps, HTMLDivElement> =
-  React.forwardRef<BannerProps, HTMLDivElement>(
-    (
-      {
-        classNames,
-        semantic,
-        leftIconType = 'solid',
-        alignment = 'top',
-        ...props
-      }: BannerProps,
-      ref,
-    ): React.ReactNode => (
-      <>
-        <InContextAlert
-          {...props}
-          leftIconType={leftIconType}
-          semantic={semantic}
-          ref={ref}
-          classNames={{
-            ...classNames,
-            wrapper: classify(
-              css.bannerContainer,
-              {
-                [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
-                [css.success]: semantic === ALERT_SEMANTIC.success,
-                [css.information]: semantic === ALERT_SEMANTIC.information,
-                [css.warning]: semantic === ALERT_SEMANTIC.warning,
-                [css.danger]: semantic === ALERT_SEMANTIC.danger,
-                [css.topAligned]: alignment === 'top',
-                [css.bottomAligned]: alignment === 'bottom',
-              },
-              classNames?.wrapper,
-            ),
-            alertText: classify(classNames?.alertText),
-            actionContainer: classify(
-              css.alertContainer,
-              classNames?.actionContainer,
-            ),
-          }}
-        />
-      </>
-    ),
-  );

package/lib/components/Banner/index.d.ts

@@ -1 +0,0 @@
-export * from './Banner';

package/lib/components/Breadcrumbs/BreadcrumbLink/BreadcrumbLink.d.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-import classify from '../../../utils/classify';
-import type {LinkProps} from '../../Link';
-import {Link} from '../../Link';
-import css from './BreadcrumbLink.module.css';
-export type BreadcrumbLinkProps = LinkProps & {
-  isActive?: boolean;
-  id: string;
-  onClick?: (arg0: React.SyntheticEvent<HTMLElement>, id: string) => unknown;
-};
-export const BreadcrumbLink: React$AbstractComponent<
-  BreadcrumbLinkProps,
-  HTMLAnchorElement | null | undefined
-> = React.forwardRef<BreadcrumbLinkProps, HTMLAnchorElement | null | undefined>(
-  (
-    {
-      id,
-      className,
-      as,
-      underline = false,
-      isActive,
-      onClick,
-      href,
-      to,
-      ...props
-    }: BreadcrumbLinkProps,
-    ref,
-  ) => (
-    <Link
-      {...props}
-      to={to ?? href}
-      data-testid="BreadcrumbLink"
-      ref={ref}
-      as={as || 'subTitleExtraSmall'}
-      underline={underline}
-      disabled={isActive}
-      className={classify(
-        css.breadcrumbLink,
-        {
-          [css.active]: isActive ?? window.location.href.includes(to ?? href),
-        },
-        className,
-      )}
-      onClick={(e) => {
-        onClick?.(e, id);
-      }}
-    />
-  ),
-);
-BreadcrumbLink.displayName = 'BreadcrumbLink';

package/lib/components/Breadcrumbs/BreadcrumbLink/index.d.ts

@@ -1 +0,0 @@
-export * from './BreadcrumbLink';

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,64 +0,0 @@
-import {$ReadOnly} from 'utility-types';
-import * as React from 'react';
-import classify from '../../utils/classify';
-import {Icon} from '../Icon';
-import type {BaseLinkProps} from '../Link';
-import css from './Breadcrumbs.module.css';
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-}>;
-export type BreadcrumbsProps = {
-  classNames?: ClassNames;
-  children: React.ReactNode;
-  linkComponent?: React.AbstractComponent<
-    BaseLinkProps,
-    HTMLAnchorElement | null | undefined
-  >;
-};
-
-const BreadcrumbSeparator = (): React.ReactNode => (
-  <Icon
-    className={css.separator}
-    name="chevron-right"
-    size="small"
-    color="secondary"
-  />
-);
-
-export const Breadcrumbs: React$AbstractComponent<
-  BreadcrumbsProps,
-  HTMLDivElement
-> = React.forwardRef<BreadcrumbsProps, HTMLDivElement>(
-  ({classNames, children, linkComponent}: BreadcrumbsProps, ref) => {
-    const total = React.Children.count(children);
-    return (
-      <div
-        ref={ref}
-        data-testid="Breadcrumbs"
-        className={classify(css.wrapper, classNames?.wrapper)}
-      >
-        {React.Children.map(
-          children,
-          (
-            child,
-            idx, // eslint-disable-next-line react/no-array-index-key
-          ) => (
-            <React.Fragment key={`crumb-${idx}`}>
-              {/*add linkComponent to BreadcrumbLinks only,
-        otherwise return original element */}
-              {React.isValidElement(child) &&
-              child?.type?.displayName === 'BreadcrumbLink'
-                ? React.cloneElement(child, {
-                    linkComponent,
-                  })
-                : child}
-
-              {/*Add Separator*/}
-              {idx < total - 1 && <BreadcrumbSeparator aria-hidden />}
-            </React.Fragment>
-          ),
-        )}
-      </div>
-    );
-  },
-);

package/lib/components/Breadcrumbs/index.d.ts

@@ -1,2 +0,0 @@
-export * from './BreadcrumbLink';
-export * from './Breadcrumbs';