@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/Panel/Panel.js.flow

@@ -0,0 +1,181 @@
+// @flow strict
+
+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.Node,
+  hideCloseBtn?: boolean,
+  onCloseButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
+  size?: 'medium' | 'small',
+};
+
+type FooterClassNames = $ReadOnly<{
+  wrapper?: string,
+  actions?: string,
+}>;
+
+export type PanelFooterProps = {
+  children?: React.Node,
+  classNames?: FooterClassNames,
+};
+
+export type PanelBodyProps = {
+  children?: React.Node,
+  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.Node => (
+  <>
+    {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.Node => (
+    <div ref={ref} className={classify(css.panelBody, className)}>
+      {children}
+    </div>
+  ),
+);
+
+export const PanelFooter = ({
+  children,
+  classNames,
+}: PanelFooterProps): React.Node => (
+  <>
+    {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.Node => {
+  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.js.flow

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

package/lib/components/ProgressDonut/ProgressDonut.js

@@ -34,7 +34,6 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
   let {
     classNames,
     percentage = 0,
-    // @ts-ignore - TS2322 - Type '""' is not assignable to type '"colorTextPrimary" | "colorTextSecondary" | "colorTextTertiary" | "colorTextDisabled" | "colorTextClickable" | "colorTextNeutral" | "colorTextSuccess" | "colorTextInformation" | ... 95 more ... | "colorDangerDarkest"'.
     color = ''
   } = _ref;
   const donutPercentage = React.useMemo(() => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE), [percentage]);

package/lib/components/ProgressDonut/ProgressDonut.js.flow

@@ -0,0 +1,111 @@
+// @flow strict
+
+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.js.flow

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

package/lib/components/PromptChip/PromptChip.js

@@ -26,11 +26,9 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
     children,
     iconColor,
     rightSlot,
-    // @ts-ignore - TS2339 - Property 'onDismiss' does not exist on type 'PromptChipProps'.
     onDismiss,
     classNames,
     dismissable,
-    // @ts-ignore - TS2339 - Property 'selfDismiss' does not exist on type 'PromptChipProps'.
     selfDismiss,
     showInfoIcon,
     infoIconTooltip
@@ -74,16 +72,12 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
   }, rightSlot ? rightSlot : null, !!showInfoIcon && /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: infoIconTooltip && typeof infoIconTooltip === 'object' && Object.keys(infoIconTooltip).length > 0,
     wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, infoIconTooltip, children)
-  }, /*#__PURE__*/React.createElement(_Icon.Icon
-  // @ts-ignore - TS2769 - No overload matches this call.
-  , {
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
     size: _Icon.ICON_SIZE.small,
     name: "info-circle",
     color: _typography.TEXT_COLORS.primary,
     className: classNames?.icon
-  })), !!dismissable && /*#__PURE__*/React.createElement(_Icon.CloseIcon
-  // @ts-ignore - TS2769 - No overload matches this call.
-  , {
+  })), !!dismissable && /*#__PURE__*/React.createElement(_Icon.CloseIcon, {
     size: _Icon.ICON_SIZE.small,
     onClick: closeClickHandler,
     ariaLabel: "Dismiss",

package/lib/components/PromptChip/PromptChip.js.flow

@@ -0,0 +1,166 @@
+// @flow strict
+
+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 = {
+  classNames?: ClassNames,
+  ...
+    | {
+        onDismiss?: ?(SyntheticEvent<HTMLElement>) => mixed,
+        dismissable: true,
+        selfDismiss?: boolean,
+      }
+    | {dismissable?: false},
+  type?: PromptChipType,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  iconName?: string,
+  iconType?: IconType,
+  children?: React.Node,
+  iconColor?: ColorTypes,
+  rightSlot?: React.Node,
+  showInfoIcon?: boolean,
+  infoIconTooltip?: BaseTooltipProps,
+};
+
+export const PromptChip: React$AbstractComponent<
+  PromptChipProps,
+  HTMLDivElement,
+> = React.forwardRef<PromptChipProps, HTMLDivElement>(
+  (props: PromptChipProps, ref): React.Node => {
+    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.js.flow

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

package/lib/components/PromptInput/PromptInput.js

@@ -45,25 +45,18 @@ const PromptInput = exports.PromptInput = /*#__PURE__*/React.forwardRef((_ref, r
     buttonAriaLabel = CONSTANTS.BUTTON_ARIA_LABEL,
     isButtonLoading,
     buttonIconLeftName = CONSTANTS.BUTTON_ICON,
-    // @ts-ignore - TS2322 - Type 'string' is not assignable to type '"regular" | "solid" | "duotone" | "brands"'.
     buttonIconLeftType = _Icon.ICON_TYPE.solid
   } = _ref;
   const textareaRef = React.useRef(null);
   const handleInput = () => {
     const textarea = textareaRef.current;
     if (textarea) {
-      // @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'.
       textarea.style.height = 'auto'; // Reset height to auto to shrink
-      // @ts-ignore - TS2339 - Property 'scrollHeight' does not exist on type 'never'.
       if (textarea.scrollHeight > parseInt(_size.size200)) {
-        // @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'.
         textarea.style.height = _size.size200; // Limit height to size200
-        // @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'.
         textarea.style.overflowY = 'auto';
       } else {
-        // @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'. | TS2339 - Property 'scrollHeight' does not exist on type 'never'.
         textarea.style.height = `${textarea.scrollHeight}px`; // Adjust to content height
-        // @ts-ignore - TS2339 - Property 'style' does not exist on type 'never'.
         textarea.style.overflowY = 'hidden';
       }
     }
@@ -101,9 +94,7 @@ const PromptInput = exports.PromptInput = /*#__PURE__*/React.forwardRef((_ref, r
     placeholder: inputPlaceholder,
     locked: inputLocked,
     error: inputError || textCountError,
-    errorText: inputErrorText
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    errorText: inputErrorText,
     rows: CONSTANTS.TEXT_AREA_ROWS
   }), /*#__PURE__*/React.createElement(_Button.Button, {
     iconLeftName: buttonIconLeftName,