@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.1

package/src/components/client/Avatar/AvatarText.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from 'react';
+
+import { cx } from '../../../styles/styler';
+import type { UniversalAvatarTextProps } from '../../../tokens';
+import { Box } from '../../Box';
+import type { TextProps } from '../../Text';
+import { Text } from '../../Text';
+import {
+  buildAvatarRootClasses,
+  buildInlineSizeStyles,
+  DEFAULT_AVATAR_SIZE,
+  DEFAULT_AVATAR_VARIANT,
+  generateAvatarAbbreviation,
+} from './utils';
+
+// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+
+interface AvatarTextProps extends UniversalAvatarTextProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    text?: Partial<TextProps & DataAttributes>;
+  };
+}
+
+/**
+ * **AvatarText Component**
+ *
+ * Renders an Avatar with text (initials) representation.
+ *
+ * @param props - Props for text variant.
+ * @returns The AvatarText element.
+ */
+const AvatarText = ({
+  size = DEFAULT_AVATAR_SIZE,
+  variant = DEFAULT_AVATAR_VARIANT,
+  name,
+  initials,
+  customSize,
+  abbreviationStrategy,
+  className,
+  slotProps,
+  ...props
+}: AvatarTextProps) => {
+  const classNames = useMemo(
+    () => ({
+      root: buildAvatarRootClasses(size, {
+        avatarTextVariantRoot: variant,
+        className: cx('overflow-hidden', 'truncate', className),
+      }),
+
+      text: cx(
+        'w-full',
+        'h-full',
+        'shrink-0',
+        'overflow-hidden',
+        'text-center',
+        'inline-flex',
+        'justify-center',
+        'items-center',
+        'truncate',
+      ),
+    }),
+    [className, size, variant],
+  );
+
+  const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
+
+  return (
+    <Box className={classNames.root} style={inlineStyles.root} {...props}>
+      <Text
+        color="inherit"
+        variant="inherit"
+        className={classNames.text}
+        style={inlineStyles.contents}
+        {...slotProps?.text}
+      >
+        {initials || generateAvatarAbbreviation(name, abbreviationStrategy)}
+      </Text>
+    </Box>
+  );
+};
+
+AvatarText.displayName = 'AvatarText';
+
+export { AvatarText, type AvatarTextProps };

package/src/components/client/Avatar/index.ts

@@ -0,0 +1,4 @@
+export { Avatar, type AvatarProps } from './Avatar';
+export { AvatarIcon, type AvatarIconProps } from './AvatarIcon';
+export { AvatarImage, type AvatarImageProps } from './AvatarImage';
+export { AvatarText, type AvatarTextProps } from './AvatarText';

package/src/components/client/Avatar/utils.ts

@@ -0,0 +1,105 @@
+import { isFunction } from 'lodash';
+import type { CSSProperties } from 'react';
+
+import { cx, getStyles } from '../../../styles/styler';
+import type {
+  AvatarAbbreviationStrategy,
+  AvatarSize,
+  AvatarVariant,
+  UniversalAvatarProps,
+} from '../../../tokens';
+
+/** Strategies for generating text abbreviation */
+const abbrevStrategies: Record<
+  Extract<AvatarAbbreviationStrategy, string>,
+  (initials: string[]) => string
+> = {
+  first: (initials) => initials[0] ?? '',
+  last: (initials) => initials[initials.length - 1] ?? '',
+  firstAndLast: (initials) =>
+    initials.length === 1 ? initials[0] : `${initials[0]}${initials[initials.length - 1]}`,
+  firstTwo: (initials) => initials.slice(0, 2).join(''),
+  firstThree: (initials) => initials.slice(0, 3).join(''),
+  firstOfEach: (initials) => initials.join(''),
+};
+
+/* -------------------------------------------------------------------------- */
+/*                              Helper Functions                              */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Generates an abbreviation from a name using a specified strategy.
+ *
+ * @param name - The full name.
+ * @param strategy - Abbreviation strategy key or custom function.
+ * @returns The generated abbreviation.
+ */
+const generateAvatarAbbreviation = (
+  name?: string,
+  strategy: AvatarAbbreviationStrategy = 'firstAndLast',
+): string => {
+  if (!name) {
+    return '';
+  }
+
+  if (isFunction(strategy)) {
+    return strategy(name);
+  }
+
+  const words = name.trim().split(/\s+/);
+  const initials = words.map((word) => word[0].toUpperCase());
+
+  return abbrevStrategies[strategy](initials);
+};
+
+/**
+ * Builds the root CSS classes for the Avatar.
+ *
+ * @param size - The size of the Avatar.
+ * @returns A string of CSS classes.
+ */
+const buildAvatarRootClasses = (
+  size: UniversalAvatarProps['size'] = 'md',
+  styles?: Parameters<typeof getStyles>[0],
+): string => {
+  const { className: stylesClassName, ...restStyles } = styles ?? {};
+
+  return getStyles({
+    avatarSizeRoot: size,
+    ...restStyles,
+    className: cx(
+      'shrink-0',
+      'text-center',
+      'inline-flex',
+      'justify-center',
+      'items-center',
+      'overflow-visible',
+      'truncate',
+      stylesClassName,
+    ),
+  });
+};
+
+const buildInlineSizeStyles = (customSize?: UniversalAvatarProps['customSize']) => {
+  const rootStyles = customSize ? { height: customSize, width: customSize } : {};
+
+  return {
+    root: rootStyles,
+
+    contents: {
+      ...rootStyles,
+      boxSizing: 'content-box',
+    } satisfies CSSProperties,
+  };
+};
+
+const DEFAULT_AVATAR_VARIANT: AvatarVariant = 'primary';
+const DEFAULT_AVATAR_SIZE: AvatarSize = 'md';
+
+export {
+  buildAvatarRootClasses,
+  buildInlineSizeStyles,
+  DEFAULT_AVATAR_SIZE,
+  DEFAULT_AVATAR_VARIANT,
+  generateAvatarAbbreviation,
+};

package/src/components/client/Badge.tsx

@@ -0,0 +1,133 @@
+import React, { forwardRef, useMemo } from 'react';
+
+import { cx, getStyles } from '../../styles/styler';
+import type { BadgeConfig, BaseSelector, UniversalBadgeProps } from '../../tokens';
+import { HStack } from '../HStack';
+import type { IconSlotProps } from '../IconSlot';
+import { IconSlot } from '../IconSlot';
+
+// TODO: we might not need these base classes with the new system
+const BASE_CLASS: BaseSelector<typeof BadgeConfig> = 'uds-badge';
+const VARIANT_BASE_CLASS = 'uds-badge-variant';
+const SIZE_BASE_CLASS = 'uds-badge-size';
+const ICON_SIZE_BASE_CLASS = 'uds-badge-iconSize';
+const ICON_COLOR_BASE_CLASS = 'uds-badge-iconColor';
+
+type HtmlDivProps = React.HTMLAttributes<HTMLDivElement>;
+
+interface BadgeProps extends HtmlDivProps, UniversalBadgeProps {}
+
+const MAX_WIDTH_DEFAULT = 200;
+
+/**
+ * **⚙️️ A badge.
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Badges show notifications, counts, or status information on navigation items and icons.
+ *
+ * @see
+ * Check out the {@link https://uds.build/docs/components/badge Badge Docs} for more info
+ *
+ * @usage
+ * - ???
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Badge } from "@yahoo/uds";
+ *
+ * <Badge>Label</Badge>
+ *```
+ *
+ * @related [Chip](https://uds.build/docs/components/chip).
+ **/
+const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(
+  {
+    variant = 'primary',
+    size = 'md',
+    minWidth,
+    maxWidth = MAX_WIDTH_DEFAULT,
+    startIcon,
+    endIcon,
+    backgroundColor,
+    color,
+    iconColor,
+    borderColor,
+    children,
+    className,
+    ...rest
+  }: BadgeProps,
+  ref,
+) {
+  const rootStyles = getStyles({
+    badgeSizeRoot: size,
+    badgeVariantRoot: variant,
+    className: cx([BASE_CLASS, VARIANT_BASE_CLASS, SIZE_BASE_CLASS, className]),
+  });
+
+  const iconStyles = getStyles({
+    badgeVariantIcon: variant,
+    badgeSizeIcon: size,
+    className: cx([ICON_SIZE_BASE_CLASS, ICON_COLOR_BASE_CLASS]),
+  });
+
+  const containerStyles = useMemo(
+    () => ({
+      ...(minWidth ? { minWidth: `${minWidth}px` } : {}),
+      ...(maxWidth === 'full' ? {} : { maxWidth: `${maxWidth}px` }),
+      ...(backgroundColor ? { backgroundColor } : {}),
+      ...(borderColor ? { borderColor } : {}),
+      ...(color ? { color } : {}),
+    }),
+    [backgroundColor, borderColor, color, maxWidth, minWidth],
+  );
+
+  const iconProps = useMemo(
+    (): IconSlotProps['iconProps'] => ({
+      variant: 'fill',
+      style: {
+        ...(iconColor ? { color: iconColor } : {}),
+      },
+    }),
+    [iconColor],
+  );
+
+  return (
+    <HStack
+      ref={ref}
+      gap="2"
+      display="inline-flex"
+      alignItems="center"
+      className={rootStyles}
+      style={containerStyles}
+      {...rest}
+    >
+      {startIcon && (
+        <IconSlot
+          icon={startIcon}
+          iconProps={iconProps}
+          data-testid="start-icon"
+          className={iconStyles}
+        />
+      )}
+
+      <span className="flex-1 truncate whitespace-nowrap text-center">{children}</span>
+
+      {endIcon && (
+        <IconSlot
+          icon={endIcon}
+          iconProps={iconProps}
+          data-testid="end-icon"
+          className={iconStyles}
+        />
+      )}
+    </HStack>
+  );
+});
+
+// Need to re-set this because of the forwardRef wrapper
+Badge.displayName = 'Badge';
+
+export { Badge, type BadgeProps };

package/src/components/client/Button.tsx

@@ -0,0 +1,312 @@
+import { buttonIconSvgSize } from '@yahoo/uds/fixtures';
+import type { MotionVariant, UniversalButtonProps } from '@yahoo/uds/tokens';
+import { parseDeprecatedButtonPaletteVariant } from '@yahoo/uds/tokens';
+import { Progress } from '@yahoo/uds-icons';
+import type { HTMLMotionProps } from 'motion/react';
+import { AnimatePresence, m, useReducedMotion } from 'motion/react';
+import type { ForwardRefExoticComponent } from 'react';
+import React, {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { cx, getStyles } from '../../styles/styler';
+import {
+  buttonMotionVariants,
+  getGapVariant,
+  getStartVariant,
+  iconContainerMotionVariants,
+  iconMotionVariants,
+  loadingMotionVariants,
+} from '../../tokens/consts/buttonMotionTokens';
+import { createSlot } from '../../utils/createSlot';
+import { Icon } from '../Icon';
+import { IconSlot } from '../IconSlot';
+import { SpringMotionConfig } from './SpringMotionConfig';
+
+type HtmlButtonProps = Omit<HTMLMotionProps<'button'>, 'color' | 'name'> &
+  Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>;
+
+interface ButtonProps extends HtmlButtonProps, UniversalButtonProps {}
+
+/**
+ * **🖲️ A button element that can be used to trigger an action**
+ *
+ * @componentType Client component
+ *
+ * @description A button is a fundamental component used to trigger an action or event. Buttons are interactive elements that users can click, tap, or otherwise engage with to submit forms, open dialogues, or perform any other interaction within an application or website. Consider an IconButton for buttons that only contain an icon.
+ *
+ * @see The {@link https://uds.build/docs/components/button Button Docs} for more info
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Button, HStack } from "@yahoo/uds";
+ *
+ * export function Demo() {
+ *   return (
+ *     <HStack gap="2">
+ *       <Button onClick={console.log}>Save</Button>
+ *       <Button variant="secondary" onClick={console.log}>Cancel</Button>
+ *     </HStack>
+ *   )
+ * }
+ * ```
+ *
+ * @usage
+ * Buttons should be used to clearly indicate and initiate actions that users can take.
+ *
+ * @related [Icon](https://uds.build/docs/components/icon), [IconButton](https://uds.build/docs/components/icon-button), [Pressable](https://uds.build/docs/components/pressable)
+ **/
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    // Button config props
+    variant,
+    size: buttonSize,
+    // Icon props
+    startIcon,
+    endIcon,
+    iconVariant,
+    // State props
+    loading,
+    disableEffects,
+    // Misc props
+    children,
+    asChild,
+    // HTML props (className, disabled, aria-*, data-*, onClick, etc.)
+    type = 'button',
+    className,
+    // Size props
+    width,
+    ...rest
+  },
+  forwardedRef,
+) {
+  /* ------------------------------- Setup refs ------------------------------- */
+  const ref = useRef<HTMLButtonElement>(null);
+  useImperativeHandle(forwardedRef, () => ref.current as HTMLButtonElement);
+
+  /* --------------------------- Create motion slot --------------------------- */
+  const Slot = useMemo(() => createSlot<ForwardRefExoticComponent<HtmlButtonProps>>(), []);
+  const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
+
+  /* -------------------------------- Variants -------------------------------- */
+  const endVariant = endIcon ? 'icon' : 'hide';
+  const gapVariant = getGapVariant({ startIcon, endIcon, loading });
+  const startVariant = getStartVariant({ loading, startIcon });
+
+  const { palette: buttonPalette_DEPRECATED, variant: buttonVariant_DEPRECATED } = useMemo(
+    () => parseDeprecatedButtonPaletteVariant({ flatVariant: variant }),
+    [variant],
+  );
+
+  /* ---------------------------- Setup classNames ---------------------------- */
+  const classNames = useMemo(
+    () => ({
+      button: getStyles({
+        width,
+        buttonSize,
+        buttonVariant: buttonVariant_DEPRECATED,
+        buttonPalette: buttonPalette_DEPRECATED,
+        className: cx(
+          // Base class name
+          'uds-button',
+          // Focus ring
+          'uds-ring',
+          // Minimum hit target of 44px
+          'uds-hit-target',
+          // State
+          loading && 'uds-button-loading',
+          disableEffects && 'uds-button-without-effects',
+          gapVariant === 'withIcon' && 'uds-button-with-gap',
+
+          // Consumer class names
+          className,
+        ),
+      }),
+      content: 'uds-button-content truncate',
+      iconContainer: 'uds-button-icon-container flex overflow-clip',
+      loading: 'uds-button-icon start-content animate-spin',
+      start: 'uds-button-icon start-content',
+      end: 'uds-button-icon end-content',
+    }),
+    [
+      width,
+      buttonSize,
+      buttonVariant_DEPRECATED,
+      buttonPalette_DEPRECATED,
+      className,
+      loading,
+      disableEffects,
+      gapVariant,
+    ],
+  );
+
+  /* --------------------- Motion config setup for button --------------------- */
+  const prefersReducedMotion = useReducedMotion();
+  const layoutVariant: MotionVariant = prefersReducedMotion ? 'smooth' : 'subtle';
+
+  /* -------------------------- Start and end content ------------------------- */
+
+  /**
+   * TODO see if we can get these to work as ReactElements like (ie <StartContent />)
+   * Animations aren't currently propagating if I do that
+   **/
+
+  const startContent = useMemo(
+    () => (
+      <m.span
+        className={classNames.iconContainer}
+        initial={false}
+        variants={iconContainerMotionVariants}
+        animate={startVariant}
+      >
+        <AnimatePresence initial={false} mode="popLayout">
+          {loading && (
+            <m.span
+              key="loading"
+              variants={loadingMotionVariants}
+              initial="hide"
+              animate="loading"
+              exit="hide"
+            >
+              <Icon
+                size={buttonIconSvgSize}
+                name={Progress}
+                variant={iconVariant}
+                color="current"
+                className={classNames.loading}
+              />
+            </m.span>
+          )}
+          {startIcon && !loading && (
+            <m.span variants={iconMotionVariants} initial="hide" animate="icon" exit="hide">
+              <IconSlot
+                className={classNames.start}
+                icon={startIcon}
+                iconProps={{
+                  size: buttonIconSvgSize,
+                  variant: iconVariant,
+                  color: 'current',
+                }}
+              />
+            </m.span>
+          )}
+        </AnimatePresence>
+      </m.span>
+    ),
+    [
+      classNames.iconContainer,
+      classNames.loading,
+      classNames.start,
+      startVariant,
+      loading,
+      iconVariant,
+      startIcon,
+    ],
+  );
+
+  const endContent = useMemo(
+    () => (
+      <m.span
+        className={classNames.iconContainer}
+        initial={false}
+        variants={iconContainerMotionVariants}
+        animate={endVariant}
+      >
+        <AnimatePresence initial={false} mode="popLayout">
+          {endIcon && (
+            <m.span variants={iconMotionVariants} initial="hide" animate="icon" exit="hide">
+              <IconSlot
+                className={classNames.end}
+                icon={endIcon}
+                iconProps={{
+                  size: buttonIconSvgSize,
+                  variant: iconVariant,
+                  color: 'current',
+                }}
+              />
+            </m.span>
+          )}
+        </AnimatePresence>
+      </m.span>
+    ),
+    [classNames.iconContainer, classNames.end, endIcon, endVariant, iconVariant],
+  );
+
+  const buttonVariants = useMemo(() => {
+    if (!disableEffects) {
+      return buttonMotionVariants;
+    }
+    return {
+      ...buttonMotionVariants,
+      rest: {},
+      hover: {},
+      pressed: {},
+    };
+  }, [disableEffects]);
+
+  /* -------------------------------------------------------------------------- */
+  /*                                 The button                                 */
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------------- TODO ---------------------------------- */
+  /* ----------------------------- Button asChild ----------------------------- */
+  /* ------------ Remove this cloneElement stuff when UD-734 lands ------------ */
+  if (asChild && isValidElement(children)) {
+    return (
+      <SpringMotionConfig layoutSpeed="3" layoutVariant={layoutVariant}>
+        <MotionSlot
+          type={type}
+          className={classNames.button}
+          initial={['hide', gapVariant]}
+          animate={gapVariant}
+          variants={buttonVariants}
+          whileHover="hover"
+          whileTap="pressed"
+          {...rest}
+        >
+          {cloneElement(
+            children,
+            children.props,
+            <>
+              {startContent}
+              <span className={classNames.content}>{children.props.children}</span>
+              {endContent}
+            </>,
+          )}
+        </MotionSlot>
+      </SpringMotionConfig>
+    );
+  }
+  /* -------------------------------- End TODO -------------------------------- */
+
+  /* ----------------------------- Standard button ---------------------------- */
+  return (
+    <SpringMotionConfig layoutSpeed="3" layoutVariant={layoutVariant}>
+      <m.button
+        ref={ref}
+        type={type}
+        className={classNames.button}
+        initial={['hide', gapVariant]}
+        animate={gapVariant}
+        variants={buttonVariants}
+        whileHover="hover"
+        whileTap="pressed"
+        {...rest}
+      >
+        {startContent}
+        <span className={classNames.content}>{children}</span>
+        {endContent}
+      </m.button>
+    </SpringMotionConfig>
+  );
+});
+
+Button.displayName = 'Button';
+
+export { Button, type ButtonProps };