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

package/lib/components/Stepper/Step/StepLabel.d.ts

@@ -0,0 +1,35 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {classify} from '../../../utils/classify';
+import css from '../Stepper.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type StepLabelProps = {
+  children: React.ReactNode;
+  active?: boolean;
+  completed?: boolean;
+  disabled?: boolean;
+  classNames?: ClassNames;
+};
+export const StepLabel = ({
+  children,
+  classNames,
+  active,
+  completed = false,
+  disabled = false,
+}: StepLabelProps): React.ReactNode => (
+  <div
+    className={classify(
+      css.stepLabelWrapper,
+      {
+        [css.active]: active,
+        [css.completed]: completed,
+        [css.disabled]: disabled,
+      },
+      classNames?.wrapper,
+    )}
+  >
+    {children}
+  </div>
+);

package/lib/components/Stepper/Step/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Step';
+export * from './StepContent';
+export * from './StepLabel';

package/lib/components/Stepper/Stepper.d.ts

@@ -0,0 +1,60 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {classify} from '../../utils/classify';
+import css from './Stepper.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type StepperProps = {
+  classNames?: ClassNames;
+  activeStep?: number;
+  children: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+  disabled?: boolean;
+};
+export const Stepper: React$AbstractComponent<StepperProps, HTMLDivElement> =
+  React.forwardRef<StepperProps, HTMLDivElement>(
+    (
+      {
+        activeStep = 0,
+        children,
+        orientation = 'horizontal',
+        classNames,
+        disabled = false,
+      }: StepperProps,
+      ref,
+    ) => {
+      const childrenArray = React.Children.toArray(children).filter(Boolean);
+      const steps = childrenArray.map((step, index) => {
+        let isLastStepCompleted = false;
+        const {disabled: disabledChild, onClick} = step.props;
+
+        if (index === 0) {
+          isLastStepCompleted = true;
+        } else {
+          isLastStepCompleted = childrenArray[index - 1]?.props?.completed;
+        }
+
+        return React.cloneElement(step, {
+          ...step.props,
+          index,
+          last: index + 1 === childrenArray.length,
+          active: index === activeStep,
+          allowClick: onClick && index !== activeStep && isLastStepCompleted,
+          disabled: disabledChild || disabled,
+        });
+      });
+      return (
+        <div
+          className={classify(
+            css.stepperWrapper,
+            css[orientation],
+            classNames?.wrapper,
+          )}
+          ref={ref}
+        >
+          {steps}
+        </div>
+      );
+    },
+  );

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

@@ -0,0 +1,2 @@
+export * from './Step';
+export * from './Stepper';

package/lib/components/StickyBar/StickyBar.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import classify from '../../utils/classify';
+import css from './StickyBar.module.css';
+export type StickyBarProps = {
+  className?: string;
+  children: React.ReactNode;
+  position?: 'top' | 'bottom';
+};
+export type StickyBarChildProps = {
+  className?: string;
+  children: React.ReactNode;
+};
+export const StickyBarLeftSlot = ({
+  className,
+  children,
+  ...props
+}: StickyBarChildProps): React.ReactNode => (
+  <div {...props} className={classify(css.leftSlot, className)}>
+    {children}
+  </div>
+);
+export const StickyBarRightSlot = ({
+  className,
+  children,
+  ...props
+}: StickyBarChildProps): React.ReactNode => (
+  <div {...props} className={classify(css.rightSlot, className)}>
+    {children}
+  </div>
+);
+export const StickyBar: React$AbstractComponent<
+  StickyBarProps,
+  HTMLDivElement
+> = React.forwardRef<StickyBarProps, HTMLDivElement>(
+  (
+    {className, children, position = 'bottom', ...props}: StickyBarProps,
+    ref,
+  ) => (
+    <div
+      {...props}
+      ref={ref}
+      data-testid="StickyBar"
+      className={classify(
+        css.wrapper,
+        {
+          [css.top]: position === 'top',
+          [css.bottom]: position === 'bottom',
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  ),
+);

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

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

package/lib/components/SubMenu/SubMenu.d.ts

@@ -0,0 +1,89 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {SubTitleMedium, TEXT_COLORS} from '../Text';
+import css from './SubMenu.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type SubMenuProps = {
+  classNames?: ClassNames;
+  title: string;
+  titleIcon?: string;
+  titleIconSize?: IconSize;
+  titleIconType?: IconType;
+  children?: React.ReactNode;
+  onClose?: () => unknown;
+  showClose?: boolean;
+};
+export const SubMenu: React$AbstractComponent<SubMenuProps, HTMLDivElement> =
+  React.forwardRef<SubMenuProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        children,
+        title,
+        titleIcon,
+        titleIconSize,
+        titleIconType,
+        onClose,
+        showClose = false,
+      }: SubMenuProps,
+      ref,
+    ): React.ReactNode => {
+      const childrenWithProps = React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return (
+            <div className={css.menuChildWrap}>
+              {React.cloneElement(child, {})}
+            </div>
+          );
+        }
+      });
+      return (
+        <div
+          className={classify(css.subMenuWrapper, classNames?.wrapper)}
+          ref={ref}
+        >
+          <div className={css.subMenuTitleAndButton}>
+            <div className={css.subMenuTitleWrapper}>
+              {!!titleIcon && (
+                <Icon
+                  color={TEXT_COLORS.inverseSecondary}
+                  name={titleIcon}
+                  type={titleIconType}
+                  size={titleIconSize}
+                  className={css.titleIcon}
+                />
+              )}
+              <SubTitleMedium
+                className={css.subMenuHeader}
+                color={TEXT_COLORS.inversePrimary}
+              >
+                {title}
+              </SubTitleMedium>
+            </div>
+            {showClose && (
+              <Button
+                ariaLabel="Icon Button"
+                iconRightName="close"
+                onClick={onClose}
+                size="small"
+                type="ghost"
+                actionType="button"
+                classNames={{
+                  wrapper: css.subMenuCloseButton,
+                  icon: css.subMenuCloseIcon,
+                }}
+              />
+            )}
+          </div>
+          {childrenWithProps}
+        </div>
+      );
+    },
+  );
+SubMenu.displayName = 'SubMenu';

package/lib/components/SubMenu/SubMenuGroup.d.ts

@@ -0,0 +1,156 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../utils/classify';
+import {FocusManagerWithArrowKeyNavigation} from '../FocusManagerWithArrowKeyNavigation';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import type {StatusSemanticType} from '../StatusIndicator';
+import {StatusIndicator} from '../StatusIndicator';
+import {ButtonTextMedium, TEXT_COLORS} from '../Text';
+import css from './SubMenu.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  groupHeader?: string;
+  menuGroup?: string;
+}>;
+export type SubMenuGroupProps = {
+  children?: React.ReactNode;
+  groupTitle?: string;
+  groupIcon?: string;
+  groupIconSize?: IconSize;
+  groupIconType?: IconType;
+  collapsible?: boolean;
+  disabled?: boolean;
+  onChange?: (value: string) => unknown;
+  selectedMenuKey?: string;
+  status?: StatusSemanticType;
+  classNames?: ClassNames;
+};
+export const SubMenuGroup = ({
+  children,
+  groupTitle,
+  groupIcon,
+  groupIconSize,
+  groupIconType,
+  collapsible = false,
+  disabled = false,
+  onChange,
+  selectedMenuKey,
+  status,
+  classNames,
+}: SubMenuGroupProps): React.ReactNode => {
+  const isSubMenuGroupChildSelected = React.Children.toArray(children).some(
+    (child) => child.props.menuKey === selectedMenuKey,
+  );
+  const [collapsed, setCollapsed] = React.useState(
+    !isSubMenuGroupChildSelected,
+  );
+
+  const collapseHandler = () => {
+    collapsible && setCollapsed(!collapsed);
+  };
+
+  const onMenuItemChangeHandler = (value) => {
+    onChange && onChange(value);
+  };
+
+  const onKeyDownHandlerHeader = (e) => {
+    if (e.key === 'Enter') {
+      collapseHandler();
+    }
+  };
+
+  const childrenWithProps = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      const {disabled: disabledChild} = child.props;
+      return React.cloneElement(child, {
+        selectedMenuKey,
+        onChange: onMenuItemChangeHandler,
+        disabled: disabledChild || disabled,
+      });
+    }
+
+    return child;
+  });
+  React.useEffect(() => {
+    setCollapsed(!isSubMenuGroupChildSelected);
+  }, [selectedMenuKey]);
+  return (
+    <div className={classify(css.subMenuGroupWrapper, classNames?.wrapper)}>
+      <div
+        className={classify(
+          css.subMenuGroupHeader,
+          {
+            [css.collapsible]: collapsible,
+          },
+          {
+            [css.highlightedMenu]: isSubMenuGroupChildSelected,
+          },
+          {
+            [css.collapsed]: !collapsed,
+          },
+          classNames?.groupHeader,
+        )}
+        onClick={collapseHandler}
+        onKeyDown={onKeyDownHandlerHeader}
+        tabIndex={disabled ? '-1' : 0}
+      >
+        <div className={css.groupTitleWrapper}>
+          {(!!groupIcon || !!status) && (
+            <div className={css.groupIconWrapper}>
+              {!!groupIcon && (
+                <Icon
+                  color={TEXT_COLORS.inverseSecondary}
+                  name={groupIcon}
+                  type={groupIconType}
+                  size={groupIconSize}
+                  className={css.groupIcon}
+                />
+              )}
+              {!!status && collapsed && (
+                <div className={classify(css.statusIndicatorWrapper)}>
+                  <StatusIndicator
+                    status={status}
+                    className={css.statusIndicatorWrapper}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+          <ButtonTextMedium
+            color={TEXT_COLORS.inverseSecondary}
+            className={css.groupTitle}
+          >
+            {groupTitle}
+          </ButtonTextMedium>
+        </div>
+        {collapsible && (
+          <Icon
+            color={TEXT_COLORS.inverseSecondary}
+            name={collapsed ? 'chevron-down' : 'chevron-up'}
+            size="small"
+          />
+        )}
+      </div>
+      <div
+        className={classify(
+          css.subMenuGroup,
+          {
+            [css.collapsed]: collapsible && collapsed,
+          },
+          classNames?.menuGroup,
+        )}
+      >
+        <FocusManagerWithArrowKeyNavigation
+          classNames={{
+            wrapper: classify(css.subMenuFocusWrapper),
+          }}
+          focusItemOnOpen={true}
+          loop={true}
+        >
+          {childrenWithProps}
+        </FocusManagerWithArrowKeyNavigation>
+      </div>
+    </div>
+  );
+};

package/lib/components/SubMenu/SubMenuItem.d.ts

@@ -0,0 +1,161 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconProps} from '../Icon';
+import {Icon} from '../Icon';
+import type {TextProps} from '../Text';
+import {ButtonTextMedium, TEXT_COLORS} from '../Text';
+import {Truncate} from '../Truncate';
+import css from './SubMenu.module.css';
+export const SubMenuItemIcon = ({
+  className,
+  ...props
+}: IconProps): React.ReactNode => (
+  <Icon
+    {...props}
+    size="small"
+    color={TEXT_COLORS.inverseSecondary}
+    className={classify(css.menuIcon, className)}
+  />
+);
+SubMenuItemIcon.displayName = 'SubMenuItemIcon';
+export const SubMenuItemText = ({
+  children,
+  className,
+  ...props
+}: TextProps): React.ReactNode => (
+  <ButtonTextMedium
+    {...props}
+    className={classify(css.subMenuItemText, className)}
+    color={TEXT_COLORS.inversePrimary}
+  >
+    <Truncate showFullTextOnHover={true}>{children}</Truncate>
+  </ButtonTextMedium>
+);
+SubMenuItemText.displayName = 'SubMenuItemText';
+export type SubMenuItemBadgesProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+export const SubMenuItemBadges = ({
+  children,
+  className,
+  ...props
+}: SubMenuItemBadgesProps): React.ReactNode => (
+  <div {...props} className={classify(css.subMenuItemBadges, className)}>
+    {children}
+  </div>
+);
+SubMenuItemBadges.displayName = 'SubMenuItemBadges';
+export type SubMenuItemActionProps = {
+  isMenuItemSelected?: boolean;
+  children?: React.ReactNode;
+  color?: ColorTypes;
+  className?: string;
+};
+export const SubMenuItemAction: React$AbstractComponent<
+  SubMenuItemActionProps,
+  HTMLElement
+> = React.forwardRef(
+  (
+    {children, className, ...props}: SubMenuItemActionProps,
+    ref,
+  ): React.ReactNode => (
+    <div {...props} className={classify(css.actionItems, className)} ref={ref}>
+      {children}
+    </div>
+  ),
+);
+SubMenuItemAction.displayName = 'SubMenuItemAction';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type SubMenuItemProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+  selectedMenuKey?: string;
+  disabled?: boolean;
+  onChange?: (selectedMenuKey: string) => unknown;
+  menuKey: string;
+};
+export const SubMenuItem: React$AbstractComponent<
+  SubMenuItemProps,
+  HTMLElement
+> = React.forwardRef(
+  (
+    {
+      children,
+      selectedMenuKey,
+      disabled,
+      classNames,
+      onChange,
+      menuKey,
+      ...props
+    }: SubMenuItemProps,
+    ref,
+  ): React.ReactNode => {
+    const onChangeHandler = () => {
+      if (!disabled) {
+        onChange?.(menuKey);
+      }
+    };
+
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler();
+      }
+    };
+
+    const selected = selectedMenuKey === menuKey;
+
+    const getNamedComp = (comp: string) => {
+      const childrenArray = React.Children.toArray(children);
+
+      if (childrenArray.length) {
+        const nodes: React.ReactNode[] = [];
+
+        for (const child of childrenArray) {
+          if (child?.type?.displayName === comp) {
+            nodes.push(
+              React.cloneElement(child, {
+                selected,
+                disabled,
+              }),
+            );
+          }
+        }
+
+        return nodes.length > 1 ? nodes : nodes[0];
+      }
+
+      return null;
+    };
+
+    return (
+      <div
+        {...props}
+        className={classify(
+          css.menuItem,
+          {
+            [css.selected]: selected,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+        onKeyDown={onKeyDownHandler}
+        onClick={onChangeHandler}
+        tabIndex={disabled ? '-1' : 0}
+        disabled={disabled}
+        ref={ref}
+      >
+        <div className={css.menuIconName}>
+          {getNamedComp('SubMenuItemIcon')}
+          {getNamedComp('SubMenuItemText')}
+          {getNamedComp('SubMenuItemBadges')}
+        </div>
+        {getNamedComp('SubMenuItemAction')}
+      </div>
+    );
+  },
+);

package/lib/components/SubMenu/SubMenuLink.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {ButtonTextMedium, TEXT_COLORS} from '../Text';
+import {Truncate} from '../Truncate';
+import css from './SubMenu.module.css';
+export type SubMenuLinkProps = {
+  menuLinkTitle?: string;
+  menuLinkIcon: string;
+  menuLinkIconSize?: IconSize;
+  menuLinkIconType?: IconType;
+  menuKey: string;
+  selectedMenuKey?: string;
+  disabled?: boolean;
+  onChange?: (selectedMenuLinkKey: string) => unknown;
+};
+export const SubMenuLink: React$AbstractComponent<
+  SubMenuLinkProps,
+  HTMLElement
+> = React.forwardRef(
+  (
+    {
+      menuLinkTitle,
+      menuLinkIcon,
+      menuLinkIconSize = 'medium',
+      menuLinkIconType,
+      menuKey,
+      selectedMenuKey,
+      disabled = false,
+      onChange,
+    }: SubMenuLinkProps,
+    ref,
+  ): React.ReactNode => {
+    const isMenuLinkSelected = selectedMenuKey === menuKey;
+
+    const onChangeHandler = () => {
+      if (!disabled) {
+        onChange && onChange(menuKey);
+      }
+    };
+
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler();
+      }
+    };
+
+    return (
+      <div className={classify(css.subMenuLinkWrapper)}>
+        <div
+          className={classify(css.subMenuLink, {
+            [css.highlightedMenu]: isMenuLinkSelected,
+          })}
+          onKeyDown={onKeyDownHandler}
+          onClick={onChangeHandler}
+          ref={ref}
+          tabIndex={disabled ? '-1' : 0}
+        >
+          <div className={css.groupTitleWrapper}>
+            {!!menuLinkIcon && (
+              <Icon
+                color={TEXT_COLORS.inverseSecondary}
+                name={menuLinkIcon}
+                size={menuLinkIconSize}
+                type={menuLinkIconType}
+                className={css.menuLinkIcon}
+              />
+            )}
+            <ButtonTextMedium
+              color={TEXT_COLORS.inverseSecondary}
+              className={css.menuLinkTitle}
+            >
+              <Truncate>{menuLinkTitle}</Truncate>
+            </ButtonTextMedium>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,4 @@
+export * from './SubMenu';
+export * from './SubMenuGroup';
+export * from './SubMenuItem';
+export * from './SubMenuLink';