@spaced-out/ui-design-system 0.3.38-beta.0 → 0.3.39-beta.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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