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

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

@@ -0,0 +1,30 @@
+export {TEXT_COLORS} from '../../types/typography';
+export type {TextProps} from './Text';
+export {
+  BodyLarge,
+  BodyLargeBold,
+  BodyMedium,
+  BodyMediumBold,
+  BodySmall,
+  BodySmallBold,
+  ButtonTextExtraSmall,
+  ButtonTextExtraSmallUnderline,
+  ButtonTextMedium,
+  ButtonTextMediumUnderline,
+  ButtonTextSmall,
+  ButtonTextSmallUnderline,
+  FormInputMedium,
+  FormInputSmall,
+  FormLabelMedium,
+  FormLabelSmall,
+  JumboLarge,
+  JumboMedium,
+  JumboSmall,
+  MenuTextMedium,
+  MenuTextSmall,
+  SubTitleExtraSmall,
+  SubTitleLarge,
+  SubTitleMedium,
+  SubTitleSmall,
+  TitleMedium,
+} from './Text';

package/lib/components/TextTile/TextTile.d.ts

@@ -0,0 +1,40 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import classify from '../../utils/classify';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
+import {BodyLarge, JumboMedium} from '../Text';
+import css from './TextTile.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  title?: string;
+}>;
+export type TextTileProps = {
+  header?: string;
+  iconName?: string;
+  classNames?: ClassNames;
+  description?: string;
+};
+export const TextTile: React$AbstractComponent<TextTileProps, HTMLDivElement> =
+  React.forwardRef<TextTileProps, HTMLDivElement>(
+    (
+      {header, iconName = 'sparkles', classNames, description}: TextTileProps,
+      ref,
+    ) => (
+      <div
+        ref={ref}
+        data-testid="TextTile"
+        className={classify(css.textTileWrapper, classNames?.wrapper)}
+      >
+        <div className={classify(css.textTileTitle, classNames?.title)}>
+          <Icon
+            size={ICON_SIZE.large}
+            name={iconName}
+            type={ICON_TYPE.solid}
+            className={css.sparkles}
+          />
+          <JumboMedium>{header}</JumboMedium>
+        </div>
+        <BodyLarge>{description}</BodyLarge>
+      </div>
+    ),
+  );

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

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

package/lib/components/Textarea/Textarea.d.ts

@@ -0,0 +1,132 @@
+import {$ReadOnly} from 'utility-types';
+import * as React from 'react';
+import {classify} from '../../utils/classify';
+import {BodySmall, FormLabelSmall} from '../Text';
+import css from './Textarea.module.css';
+type ClassNames = $ReadOnly<{
+  box?: string;
+  textarea?: string;
+}>;
+export type TextareaProps = {
+  value?: string;
+  onChange?: (
+    evt: React.SyntheticEvent<HTMLInputElement>,
+    isEnter?: boolean,
+  ) => unknown;
+  onFocus?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => unknown;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  name?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  locked?: boolean;
+  error?: boolean;
+  errorText?: string;
+  label?: string | React.ReactNode;
+  helperText?: string | React.ReactNode;
+  classNames?: ClassNames;
+  size?: 'medium' | 'small';
+  required?: boolean;
+  textCountLimit?: number;
+};
+
+const Textarea_ = (props: TextareaProps, ref): React.ReactNode => {
+  const {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    name,
+    disabled,
+    placeholder,
+    error,
+    locked,
+    errorText,
+    label,
+    helperText,
+    classNames,
+    size = 'medium',
+    required,
+    textCountLimit,
+    ...textareaProps
+  } = props;
+  const [textCountError, setTextCountError] = React.useState(false);
+  React.useEffect(() => {
+    if (textCountLimit) {
+      if (value && value.length > textCountLimit) {
+        setTextCountError(true);
+      } else {
+        setTextCountError(false);
+      }
+    }
+  }, [value]);
+  const controlledTextareaFilled = value !== '';
+  return (
+    <div
+      className={classify(css.wrapper, {
+        [css.filled]: controlledTextareaFilled ?? false,
+        [css.withError]: (error || textCountError) ?? false,
+      })}
+    >
+      {Boolean(label) && (
+        <div className={css.info}>
+          <div className={css.infoContent}>
+            <FormLabelSmall color="secondary">{label ?? ''}</FormLabelSmall>
+            &nbsp;
+            {required && <FormLabelSmall color="danger">{'*'}</FormLabelSmall>}
+          </div>
+          <FormLabelSmall
+            color={error || textCountError ? 'danger' : 'secondary'}
+          >
+            {!!textCountLimit &&
+              ((value && value.length) || 0) + '/' + textCountLimit}
+          </FormLabelSmall>
+        </div>
+      )}
+      <div
+        className={classify(
+          css.box,
+          {
+            [css.inputDisabled]: disabled ?? false,
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.locked]: locked,
+          },
+          classNames?.box,
+        )}
+      >
+        <textarea
+          {...textareaProps}
+          disabled={locked || disabled}
+          name={name}
+          ref={ref}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          className={classNames?.textarea}
+        ></textarea>
+      </div>
+      {(Boolean(helperText) || error) && (
+        <div className={css.info}>
+          <BodySmall
+            color={
+              error && errorText
+                ? 'danger'
+                : disabled
+                ? 'disabled'
+                : 'secondary'
+            }
+          >
+            {error && errorText ? errorText : helperText ?? ''}
+          </BodySmall>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Textarea = React.forwardRef<TextareaProps, HTMLTextAreaElement>(
+  Textarea_,
+) as React$AbstractComponent<TextareaProps, HTMLTextAreaElement>;

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

@@ -0,0 +1,2 @@
+export type {TextareaProps} from './Textarea';
+export {Textarea} from './Textarea';

package/lib/components/Timeline/Timeline.d.ts

@@ -0,0 +1,40 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import {classify} from '../../utils/classify';
+import css from './Timeline.module.css';
+export const ORIENTATION = Object.freeze({
+  left: 'left',
+  right: 'right',
+});
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+}>;
+export type Orientation = $Values<typeof ORIENTATION>;
+export type TimelineProps = {
+  children: React.ReactNode;
+  classNames?: ClassNames;
+  orientation?: Orientation;
+};
+
+const Timeline_ = (
+  {classNames, orientation = ORIENTATION.left, children}: TimelineProps,
+  ref,
+): React.ReactNode => {
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const timelineItems = childrenArray.map((timelineItem) =>
+    React.cloneElement(timelineItem, {...timelineItem.props, orientation}),
+  );
+  return (
+    <div
+      ref={ref}
+      className={classify(css.timelineWrapper, classNames?.wrapper)}
+      data-testid="Timeline"
+    >
+      {timelineItems}
+    </div>
+  );
+};
+
+export const Timeline = React.forwardRef<TimelineProps, HTMLDivElement>(
+  Timeline_,
+) as React$AbstractComponent<TimelineProps, HTMLDivElement>;

package/lib/components/Timeline/TimelineItem/TimelineItem.d.ts

@@ -0,0 +1,121 @@
+import {$ReadOnly} 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 {Card, PADDING_SIZES} from '../../Card';
+import {ConditionalWrapper} from '../../ConditionalWrapper';
+import type {IconType} from '../../Icon';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../../Icon';
+import type {Orientation} from '../Timeline';
+import {ORIENTATION} from '../Timeline';
+import css from '../Timeline.module.css';
+type ClassNames = $ReadOnly<{
+  card?: string;
+  icon?: string;
+  title?: string;
+  wrapper?: string;
+  description?: string;
+}>;
+export type TimelineItemProps = {
+  id?: string;
+  title?: React.ReactNode;
+  iconName: string;
+  children: React.ReactNode;
+  iconType?: IconType;
+  iconColor?: ColorTypes;
+  classNames?: ClassNames;
+  description?: React.ReactNode;
+  orientation?: Orientation;
+  parentComponent?: React.ReactNode;
+  enableCardWrapper?: boolean;
+};
+
+const TimelineItem_ = (
+  {
+    id,
+    title,
+    iconName,
+    iconType = ICON_TYPE.solid,
+    children,
+    iconColor = TEXT_COLORS.information,
+    classNames,
+    description,
+    orientation = ORIENTATION.left,
+    parentComponent,
+    enableCardWrapper = true,
+  }: TimelineItemProps,
+  ref,
+): React.ReactNode => (
+  <div
+    id={id}
+    key={id}
+    data-testid="Timeline-item"
+    className={classify(css.timelineItemWrapper, classNames?.wrapper)}
+    style={{
+      '--align': orientation === 'left' ? 'flex-start' : 'flex-end',
+    }}
+    ref={ref}
+  >
+    {parentComponent}
+    <div
+      style={{
+        '--direction': orientation === 'left' ? 'row' : 'row-reverse',
+      }}
+      className={css.timelineItemContent}
+    >
+      <div className={css.timelineItemIconWrapper}>
+        <Icon
+          name={iconName}
+          type={iconType}
+          size={ICON_SIZE.small}
+          color={iconColor}
+          className={classify(css.timelineItemIcon, classNames?.icon)}
+        />
+        <div className={css.timelineItemBorder}>
+          <div className={css.border} />
+        </div>
+      </div>
+      <div className={css.timelineItemEventDetails}>
+        <div className={css.timelineItemInfo}>
+          <div className={classify(css.timelineItemTitle, classNames?.title)}>
+            {title}
+          </div>
+          {description ? (
+            <div
+              className={classify(
+                css.timelineItemDescription,
+                classNames?.description,
+              )}
+            >
+              {description}
+            </div>
+          ) : null}
+        </div>
+        <ConditionalWrapper
+          condition={enableCardWrapper}
+          wrapper={(children) => (
+            <Card
+              paddingTop={PADDING_SIZES.small}
+              paddingBottom={PADDING_SIZES.small}
+              classNames={{
+                wrapper: classify(
+                  css.timelineItemCardWrapper,
+                  classNames?.card,
+                ),
+              }}
+            >
+              {children}
+            </Card>
+          )}
+        >
+          {children}
+        </ConditionalWrapper>
+      </div>
+    </div>
+  </div>
+);
+
+export const TimelineItem = React.forwardRef<TimelineItemProps, HTMLDivElement>(
+  TimelineItem_,
+) as React$AbstractComponent<TimelineItemProps, HTMLDivElement>;

package/lib/components/Timeline/TimelineItem/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './Timeline';
+export * from './TimelineItem';

package/lib/components/Toast/Toast.d.ts

@@ -0,0 +1,248 @@
+import {$ReadOnly, $Values} from 'utility-types';
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  FloatingFocusManager, // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react';
+import classify from '../../utils/classify';
+import {CloseIcon, Icon} from '../Icon';
+import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+import typography from '../../styles/typography.module.css';
+import css from './Toast.module.css';
+type ClassNames = $ReadOnly<{
+  wrapper?: string;
+  time?: string;
+}>;
+export const TOAST_SEMANTIC = Object.freeze({
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+  primary: 'primary',
+});
+export type ToastSemanticType = $Values<typeof TOAST_SEMANTIC>;
+export type ToastProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+  time?: string;
+  semantic?: ToastSemanticType;
+  onClose?: () => void;
+  initialFocus?: number;
+  customIcon?: React.ReactNode;
+  hideCloseIcon?: boolean;
+};
+
+const ToastIcon = ({semantic}: {semantic: ToastSemanticType}) => {
+  switch (semantic) {
+    case 'success':
+      return (
+        <Icon
+          name="circle-check"
+          size="medium"
+          color={TEXT_COLORS.success}
+          type="solid"
+        />
+      );
+
+    case TOAST_SEMANTIC.information:
+      return (
+        <Icon
+          name="circle-info"
+          size="medium"
+          color={TEXT_COLORS.information}
+          type="solid"
+        />
+      );
+
+    case TOAST_SEMANTIC.warning:
+      return (
+        <Icon
+          name="circle-exclamation"
+          size="medium"
+          color={TEXT_COLORS.warning}
+          type="solid"
+        />
+      );
+
+    case TOAST_SEMANTIC.danger:
+      return (
+        <Icon
+          name="shield-exclamation"
+          size="medium"
+          color={TEXT_COLORS.danger}
+          type="solid"
+        />
+      );
+
+    default:
+      return (
+        <Icon
+          color={TEXT_COLORS.neutral}
+          name="face-smile"
+          size="medium"
+          type="solid"
+        />
+      );
+  }
+};
+
+export type ToastTitleProps = {
+  children?: React.ReactNode;
+  className?: string;
+  semantic?: ToastSemanticType;
+};
+export const ToastTitle: React$AbstractComponent<
+  ToastTitleProps,
+  HTMLDivElement
+> = React.forwardRef<ToastTitleProps, HTMLDivElement>(
+  (
+    {children, semantic = '', className, ...props}: ToastTitleProps,
+    ref,
+  ): React.ReactNode => (
+    <div
+      className={classify(css.toastTitle, typography[semantic], className)}
+      {...props}
+      ref={ref}
+    >
+      {children}
+    </div>
+  ),
+);
+ToastTitle.displayName = 'ToastTitle';
+export type ToastBodyProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+export const ToastBody: React$AbstractComponent<
+  ToastBodyProps,
+  HTMLDivElement
+> = React.forwardRef<ToastBodyProps, HTMLDivElement>(
+  ({children, className, ...props}: ToastBodyProps, ref): React.ReactNode => (
+    <div className={classify(css.toastBody, className)} {...props} ref={ref}>
+      {children}
+    </div>
+  ),
+);
+ToastBody.displayName = 'ToastBody';
+export type ToastFooterProps = {
+  children?: React.ReactNode;
+  onClose?: () => void;
+};
+export const ToastFooter = ({
+  children,
+  onClose,
+}: ToastFooterProps): React.ReactNode => {
+  const arrayChildren = React.Children.toArray(children);
+  const footerActions = React.Children.map(children, (child, index) => {
+    const isLast = index === arrayChildren.length - 1;
+
+    if (React.isValidElement(child)) {
+      const {onClick} = child.props;
+
+      const buttonClickHandler = (e) => {
+        onClose && onClose();
+        onClick && onClick(e);
+      };
+
+      if (child?.type?.displayName === 'Button' && isLast) {
+        return React.cloneElement(child, {
+          size: 'small',
+          type: 'primary',
+          ...child.props,
+          onClick: buttonClickHandler,
+        });
+      } else if (child?.type?.displayName === 'Button') {
+        return React.cloneElement(child, {
+          size: 'small',
+          type: 'tertiary',
+          ...child.props,
+          onClick: buttonClickHandler,
+        });
+      }
+    }
+
+    return child;
+  });
+  return React.Children.count(children) > 0 ? (
+    <div className={css.toastFooterActions}>{footerActions}</div>
+  ) : null;
+};
+ToastFooter.displayName = 'ToastFooter';
+export const Toast = ({
+  classNames,
+  children,
+  time,
+  semantic = TOAST_SEMANTIC.success,
+  onClose,
+  initialFocus = -1,
+  customIcon,
+  hideCloseIcon,
+}: ToastProps): React.ReactNode => {
+  const {refs, context} = useFloating({
+    open: true,
+  });
+
+  const getComp = (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, {
+              semantic,
+            }),
+          );
+        }
+      }
+
+      return nodes.length > 1 ? nodes : nodes[0];
+    }
+
+    return null;
+  };
+
+  const footer = getComp('ToastFooter');
+  // $FlowFixMe
+  const footerWithClose = footer
+    ? React.cloneElement(footer, {
+        onClose,
+      })
+    : null;
+  return (
+    <FloatingFocusManager context={context} initialFocus={initialFocus}>
+      <div
+        className={classify(css.toastContainer, classNames?.wrapper)}
+        ref={refs.setFloating}
+      >
+        {customIcon || <ToastIcon semantic={semantic} />}
+        <div className={css.toastMidSection}>
+          <div className={css.contentWrap}>
+            <div className={css.titleBodyWrap}>
+              {getComp('ToastTitle')}
+              {getComp('ToastBody')}
+            </div>
+            {time && (
+              <SubTitleExtraSmall className={classNames?.time}>
+                {time}
+              </SubTitleExtraSmall>
+            )}
+          </div>
+          {footerWithClose}
+        </div>
+        {!hideCloseIcon && (
+          <CloseIcon
+            classNames={{
+              button: css.closeIcon,
+            }}
+            onClick={onClose}
+            ariaLabel="Close Button"
+          />
+        )}
+      </div>
+    </FloatingFocusManager>
+  );
+};