@spaced-out/ui-design-system 0.3.38 → 0.3.39

package/lib/components/Pagination/PaginationItem.d.ts

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import {ButtonTextSmall} from '../Text';
+import type {PaginationItemProps} from './Pagination';
+import css from './Pagination.module.css';
+export const PaginationButton = (
+  props: PaginationItemProps,
+): React.ReactNode => {
+  const {disabled, onClick, page, selected, type} = props;
+  const paginationBtnRef = React.useRef(null);
+  React.useEffect(() => {
+    if (selected) {
+      paginationBtnRef.current?.blur();
+    }
+  }, [selected]);
+
+  switch (type) {
+    case 'first':
+      return (
+        <Button
+          classNames={{
+            icon: classify(css.icon, {
+              [css.disabled]: disabled,
+            }),
+            wrapper: classify(css.paginatorButton, {
+              [css.disabled]: disabled,
+            }),
+          }}
+          type={selected ? 'secondary' : 'ghost'}
+          size="small"
+          onClick={onClick}
+          disabled={disabled}
+          ref={paginationBtnRef}
+          iconLeftName="chevrons-left"
+          ariaLabel="First page"
+        ></Button>
+      );
+
+    case 'previous':
+      return (
+        <Button
+          classNames={{
+            icon: classify(css.icon, {
+              [css.disabled]: disabled,
+            }),
+            wrapper: classify(css.paginatorButton, {
+              [css.disabled]: disabled,
+            }),
+          }}
+          type={selected ? 'secondary' : 'ghost'}
+          size="small"
+          onClick={onClick}
+          disabled={disabled}
+          ref={paginationBtnRef}
+          iconLeftName="chevron-left"
+          ariaLabel="Previous page"
+        ></Button>
+      );
+
+    case 'page':
+      return (
+        <Button
+          classNames={{
+            wrapper: classify(css.paginatorButton, {
+              [css.selected]: selected,
+            }),
+          }}
+          type={selected ? 'secondary' : 'ghost'}
+          size="small"
+          onClick={onClick}
+          disabled={disabled}
+          ref={paginationBtnRef}
+          tabIndex={selected ? -1 : 0}
+        >
+          {page}
+        </Button>
+      );
+
+    case 'start-ellipsis':
+    case 'end-ellipsis':
+      return (
+        <div className={classify(css.separator)}>
+          <ButtonTextSmall color="disabled">...</ButtonTextSmall>
+        </div>
+      );
+
+    case 'next':
+      return (
+        <Button
+          classNames={{
+            icon: classify(css.icon, {
+              [css.disabled]: disabled,
+            }),
+            wrapper: classify(css.paginatorButton, {
+              [css.disabled]: disabled,
+            }),
+          }}
+          type={selected ? 'secondary' : 'ghost'}
+          size="small"
+          onClick={onClick}
+          disabled={disabled}
+          ref={paginationBtnRef}
+          iconLeftName="chevron-right"
+          ariaLabel="Next page"
+        ></Button>
+      );
+
+    case 'last':
+      return (
+        <Button
+          classNames={{
+            icon: classify(css.icon, {
+              [css.disabled]: disabled,
+            }),
+            wrapper: classify(css.paginatorButton, {
+              [css.disabled]: disabled,
+            }),
+          }}
+          type={selected ? 'secondary' : 'ghost'}
+          size="small"
+          onClick={onClick}
+          disabled={disabled}
+          ref={paginationBtnRef}
+          iconLeftName="chevrons-right"
+          ariaLabel="Last page"
+        ></Button>
+      );
+
+    default:
+      break;
+  }
+};
+export const PaginationItem = (props: PaginationItemProps): React.ReactNode => (
+  <PaginationButton {...props} />
+);

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

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

package/lib/components/Panel/Panel.d.ts

@@ -0,0 +1,168 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import useMountTransition from '../../hooks/useMountTransition';
+import {
+  motionDurationNormal,
+  motionDurationSlow,
+} from '../../styles/variables/_motion';
+import {
+  spaceFluid,
+  spaceNegFluid,
+  spaceNone,
+} from '../../styles/variables/_space';
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import type {ModalProps} from '../Modal';
+import {Modal} from '../Modal';
+import {Truncate} from '../Truncate';
+import css from './Panel.module.css';
+export type PanelSize = 'small' | 'medium' | 'large';
+export type PanelAnchor = 'left' | 'right';
+export type PanelHeaderProps = {
+  children?: React.ReactNode;
+  hideCloseBtn?: boolean;
+  onCloseButtonClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  className?: string;
+  size?: 'medium' | 'small';
+};
+type FooterClassNames = $ReadOnly<{
+  wrapper?: string;
+  actions?: string;
+}>;
+export type PanelFooterProps = {
+  children?: React.ReactNode;
+  classNames?: FooterClassNames;
+};
+export type PanelBodyProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+export type PanelProps = ModalProps & {
+  allowBackgroundInteraction?: boolean;
+  size?: PanelSize;
+  anchor?: PanelAnchor;
+};
+
+const getDefaultPanelAnimation = (anchor: PanelAnchor) => ({
+  // Configure both open and close durations:
+  duration: {
+    open: parseInt(motionDurationSlow),
+    close: parseInt(motionDurationNormal),
+  },
+  initial: {
+    transform: `translateX(${anchor === 'right' ? spaceFluid : spaceNegFluid})`,
+  },
+  open: {
+    transform: `translateX(${spaceNone})`,
+  },
+  close: {
+    transform: `translateX(${anchor === 'right' ? spaceFluid : spaceNegFluid})`,
+  },
+});
+
+export const PanelHeader = ({
+  children,
+  hideCloseBtn,
+  onCloseButtonClick,
+  className,
+  size,
+}: PanelHeaderProps): React.ReactNode => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={classify(css.panelHeader, className)}>
+        <div className={css.headerContent}>
+          <Truncate>{children}</Truncate>
+        </div>
+        {!hideCloseBtn && (
+          <Button
+            iconLeftName="xmark"
+            type="ghost"
+            onClick={onCloseButtonClick}
+            ariaLabel="Close Button"
+            size={size}
+          ></Button>
+        )}
+      </div>
+    )}
+  </>
+);
+export const PanelBody: React$AbstractComponent<
+  PanelBodyProps,
+  HTMLDivElement
+> = React.forwardRef<PanelBodyProps, HTMLDivElement>(
+  ({children, className}: PanelBodyProps, ref): React.ReactNode => (
+    <div ref={ref} className={classify(css.panelBody, className)}>
+      {children}
+    </div>
+  ),
+);
+export const PanelFooter = ({
+  children,
+  classNames,
+}: PanelFooterProps): React.ReactNode => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={classify(css.panelFooter, classNames?.wrapper)}>
+        <div className={classify(css.panelFooterActions, classNames?.actions)}>
+          {children}
+        </div>
+      </div>
+    )}
+  </>
+);
+export const Panel = ({
+  children,
+  isOpen = false,
+  size = 'medium',
+  anchor = 'left',
+  onClose,
+  hideBackdrop = true,
+  classNames,
+  customAnimation,
+  tapOutsideToClose = true,
+  allowBackgroundInteraction,
+  ...restPanelProps
+}: PanelProps): React.ReactNode => {
+  const isTransitioning = useMountTransition(
+    isOpen,
+    parseInt(motionDurationNormal),
+  );
+  const defaultPanelAnimation = getDefaultPanelAnimation(anchor);
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      hideBackdrop={hideBackdrop}
+      tapOutsideToClose={allowBackgroundInteraction ? false : tapOutsideToClose}
+      allowBackgroundInteraction={allowBackgroundInteraction}
+      {...restPanelProps}
+      classNames={{
+        container: classify(
+          css.panelContainer,
+          {
+            [css.in]: isTransitioning,
+            [css.open]: isOpen,
+          },
+          classNames?.container,
+        ),
+        content: classify(
+          css.panel,
+          css[anchor],
+          {
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.large]: size === 'large',
+          },
+          classNames?.content,
+        ),
+        backdrop: classify(classNames?.backdrop),
+      }}
+      customAnimation={customAnimation || defaultPanelAnimation}
+    >
+      {children}
+    </Modal>
+  );
+};

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

@@ -0,0 +1,9 @@
+export type {
+  PanelAnchor,
+  PanelBodyProps,
+  PanelFooterProps,
+  PanelHeaderProps,
+  PanelProps,
+  PanelSize,
+} from './Panel';
+export {Panel, PanelBody, PanelFooter, PanelHeader} from './Panel';

package/lib/components/ProgressDonut/ProgressDonut.d.ts

@@ -0,0 +1,102 @@
+import {$ReadOnly, $Keys} from 'utility-types';
+import * as React from 'react';
+import * as COLORS from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import {BodyLargeBold} from '../Text';
+import css from './ProgressDonut.module.css';
+const STROKE_WIDTH = 8;
+const MIN_PERCENTAGE = 0;
+const DIVISOR_TWO = 2;
+const MAX_PERCENTAGE = 100;
+const SUCCESS_THRESHOLD = 80;
+const LARGE_DONUT_SIZE = 72;
+const INFO_THRESHOLD = 50;
+const WARNING_THRESHOLD = 30;
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type ProgressDonutProps = {
+  classNames?: ClassNames;
+  color?: $Keys<typeof COLORS>;
+  percentage: number;
+};
+
+const getProgressDonutColor = (percentage: number): string => {
+  if (percentage >= SUCCESS_THRESHOLD) {
+    return COLORS.colorSuccess;
+  } else if (percentage >= INFO_THRESHOLD && percentage < SUCCESS_THRESHOLD) {
+    return COLORS.colorInformation;
+  } else if (percentage >= WARNING_THRESHOLD && percentage < INFO_THRESHOLD) {
+    return COLORS.colorWarning;
+  } else {
+    return COLORS.colorDanger;
+  }
+};
+
+export const ProgressDonut: React$AbstractComponent<
+  ProgressDonutProps,
+  HTMLDivElement
+> = React.forwardRef<ProgressDonutProps, HTMLDivElement>(
+  ({classNames, percentage = 0, color = ''}: ProgressDonutProps, ref) => {
+    const donutPercentage = React.useMemo(
+      () => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE),
+      [percentage],
+    );
+    const donutColor = React.useMemo(
+      () => getProgressDonutColor(donutPercentage),
+      [donutPercentage],
+    );
+    const radius = React.useMemo(
+      () => (LARGE_DONUT_SIZE - STROKE_WIDTH) / DIVISOR_TWO,
+      [LARGE_DONUT_SIZE],
+    );
+    const circumference = React.useMemo(
+      () => DIVISOR_TWO * Math.PI * radius,
+      [radius],
+    );
+    const offset = React.useMemo(
+      () => circumference - (donutPercentage / MAX_PERCENTAGE) * circumference,
+      [circumference, donutPercentage],
+    );
+    return (
+      <div
+        ref={ref}
+        data-testid="ProgressDonut"
+        className={classify(css.wrapper, classNames?.wrapper)}
+      >
+        <div className={css.donutChart}>
+          <svg
+            width={LARGE_DONUT_SIZE}
+            height={LARGE_DONUT_SIZE}
+            viewBox={`0 0 ${LARGE_DONUT_SIZE} ${LARGE_DONUT_SIZE}`}
+            className={css.donutChartSvg}
+          >
+            <circle
+              className={css.donutChartBackground}
+              cx={LARGE_DONUT_SIZE / DIVISOR_TWO}
+              cy={LARGE_DONUT_SIZE / DIVISOR_TWO}
+              r={radius}
+              strokeWidth={STROKE_WIDTH}
+            />
+            <circle
+              className={css.donutChartForeground}
+              cx={LARGE_DONUT_SIZE / DIVISOR_TWO}
+              cy={LARGE_DONUT_SIZE / DIVISOR_TWO}
+              r={radius}
+              strokeWidth={STROKE_WIDTH}
+              strokeDasharray={circumference}
+              strokeDashoffset={
+                donutPercentage === MIN_PERCENTAGE ? circumference : offset
+              }
+              stroke={COLORS[color] || donutColor}
+              strokeLinecap="round"
+            />
+          </svg>
+          <BodyLargeBold className={css.donutChartPercentage}>
+            {`${donutPercentage}%`}
+          </BodyLargeBold>
+        </div>
+      </div>
+    );
+  },
+);

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

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

package/lib/components/PromptChip/PromptChip.d.ts

@@ -0,0 +1,167 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import type {ColorTypes} from '../../types/typography';
+import {TEXT_COLORS} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import {ConditionalWrapper} from '../ConditionalWrapper';
+import type {IconType} from '../Icon';
+import {CloseIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
+import css from './PromptChip.module.css';
+type ClassNames = $ReadOnly<{
+  icon?: string;
+  wrapper?: string;
+  children?: string;
+  container?: string;
+}>;
+export const PROMPT_CHIP_TYPE = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+});
+export type PromptChipType = $Values<typeof PROMPT_CHIP_TYPE>;
+export type PromptChipProps = (
+  | {
+      onDismiss?:
+        | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+        | null
+        | undefined;
+      dismissable: true;
+      selfDismiss?: boolean;
+    }
+  | {
+      dismissable?: false;
+    }
+) & {
+  classNames?: ClassNames;
+  type?: PromptChipType;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+  iconName?: string;
+  iconType?: IconType;
+  children?: React.ReactNode;
+  iconColor?: ColorTypes;
+  rightSlot?: React.ReactNode;
+  showInfoIcon?: boolean;
+  infoIconTooltip?: BaseTooltipProps;
+};
+export const PromptChip: React$AbstractComponent<
+  PromptChipProps,
+  HTMLDivElement
+> = React.forwardRef<PromptChipProps, HTMLDivElement>(
+  (props: PromptChipProps, ref): React.ReactNode => {
+    const {
+      type = PROMPT_CHIP_TYPE.primary,
+      onClick,
+      iconType = ICON_TYPE.solid,
+      iconName = 'lightbulb',
+      children,
+      iconColor,
+      rightSlot,
+      onDismiss,
+      classNames,
+      dismissable,
+      selfDismiss,
+      showInfoIcon,
+      infoIconTooltip,
+    } = props;
+    const [dismissed, setDismissed] = React.useState(false);
+
+    const closeClickHandler = (e) => {
+      e.stopPropagation();
+      onDismiss?.(e);
+      selfDismiss && setDismissed(true);
+    };
+
+    return (
+      <>
+        {!dismissed && (
+          <div
+            ref={ref}
+            data-testid="Prompt-Chip"
+            className={classify(
+              css.promptChipWrapper,
+              {
+                [css.primary]: type === PROMPT_CHIP_TYPE.primary,
+                [css.secondary]: type === PROMPT_CHIP_TYPE.secondary,
+              },
+              classNames?.wrapper,
+            )}
+            onClick={(event) => {
+              onClick?.(event);
+            }}
+            tabIndex={onClick ? 0 : undefined}
+            role="button"
+          >
+            <div
+              className={classify(
+                css.promptChipContainer,
+                {
+                  [css.promptChipContainerHover]: !!onClick,
+                },
+                classNames?.container,
+              )}
+            >
+              <div className={css.leftSection}>
+                <Icon
+                  size={ICON_SIZE.small}
+                  name={iconName}
+                  type={iconType}
+                  color={iconColor}
+                  className={classify(
+                    {
+                      [css.chipIconDefaultColor]: !iconColor,
+                    },
+                    classNames?.icon,
+                  )}
+                />
+                {!!children && (
+                  <div
+                    className={classify(
+                      css.childrenWrapper,
+                      classNames?.children,
+                    )}
+                  >
+                    {children}
+                  </div>
+                )}
+              </div>
+              <div className={css.rightSection}>
+                {rightSlot ? rightSlot : null}
+                {!!showInfoIcon && (
+                  <ConditionalWrapper
+                    condition={
+                      infoIconTooltip &&
+                      typeof infoIconTooltip === 'object' &&
+                      Object.keys(infoIconTooltip).length > 0
+                    }
+                    wrapper={(children) => (
+                      <Tooltip {...infoIconTooltip}>{children}</Tooltip>
+                    )}
+                  >
+                    <Icon
+                      size={ICON_SIZE.small}
+                      name="info-circle"
+                      color={TEXT_COLORS.primary}
+                      className={classNames?.icon}
+                    />
+                  </ConditionalWrapper>
+                )}
+                {!!dismissable && (
+                  <CloseIcon
+                    size={ICON_SIZE.small}
+                    onClick={closeClickHandler}
+                    ariaLabel="Dismiss"
+                    className={css.dismissIcon}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  },
+);

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

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