@spaced-out/ui-design-system 0.1.15 → 0.1.17

package/lib/components/Button/Button.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import {classify} from '../../utils/classify';
+import {CircularLoader} from '../CircularLoader';
 import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
 import {Truncate} from '../Truncate';
@@ -29,32 +30,33 @@ export const BUTTON_ACTION_TYPE = Object.freeze({
 export type ButtonType = $Values<typeof BUTTON_TYPES>;
 export type ButtonActionType = $Values<typeof BUTTON_ACTION_TYPE>;
 
-export type UnstyledButtonProps = {
+export type BaseButtonProps = {
   children?: React.Node,
   disabled?: mixed,
   actionType?: ButtonActionType,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
-  className?: string,
   ariaLabel?: string,
   tabIndex?: number,
+  isLoading?: boolean,
+  ...
+};
+
+export type UnstyledButtonProps = {
+  ...BaseButtonProps,
+  className?: string,
   ...
 };
 
 export type ButtonProps = {
-  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  ...BaseButtonProps,
   classNames?: ClassNames,
   iconLeftName?: string,
   iconLeftType?: IconType,
   iconRightName?: string,
   iconRightType?: IconType,
-  children?: React.Node,
   type?: ButtonType,
-  actionType?: ButtonActionType,
   isFluid?: boolean,
-  disabled?: boolean,
   size?: 'medium' | 'small',
-  ariaLabel?: string,
-  tabIndex?: number,
   ...
 };
 
@@ -66,6 +68,14 @@ const ButtonTypeToIconColorMap = {
   danger: 'inversePrimary',
 };
 
+const ButtonTypeToLoaderColorMap = {
+  primary: 'colorTextInversePrimary',
+  secondary: 'colorTextClickable',
+  tertiary: 'colorTextPrimary',
+  ghost: 'colorTextPrimary',
+  danger: 'colorTextInversePrimary',
+};
+
 export const UnstyledButton: React$AbstractComponent<
   UnstyledButtonProps,
   HTMLButtonElement,
@@ -78,9 +88,10 @@ export const UnstyledButton: React$AbstractComponent<
       ariaLabel,
       actionType,
       tabIndex = 0,
+      isLoading,
       ...props
     }: UnstyledButtonProps,
-    ref: React.Ref<'button'>,
+    ref,
   ) => (
     <button
       {...props}
@@ -92,7 +103,7 @@ export const UnstyledButton: React$AbstractComponent<
       tabIndex={disabled ? -1 : tabIndex}
       type={actionType}
       onClick={(event) => {
-        if (disabled) {
+        if (disabled || isLoading) {
           event.preventDefault();
         } else if (onClick) {
           onClick(event);
@@ -117,6 +128,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         disabled = false,
         actionType = 'button',
         size = 'medium',
+        isLoading,
         ...props
       }: ButtonProps,
       ref,
@@ -125,6 +137,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         {...props}
         actionType={actionType}
         disabled={disabled}
+        isLoading={isLoading}
         className={classify(
           css.button,
           {
@@ -149,18 +162,49 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         <div className={css.buttonRow}>
           {/* Has no icon, only child */}
           {!(iconLeftName || iconRightName) ? (
-            <div className={css.textContainerCenter}>
-              <Truncate>{children}</Truncate>
+            <div className={css.textContainer}>
+              {isLoading && (
+                <div className={css.loader}>
+                  <CircularLoader
+                    size={size}
+                    colorToken={
+                      disabled
+                        ? 'colorTextDisabled'
+                        : ButtonTypeToLoaderColorMap[type]
+                    }
+                  />
+                </div>
+              )}
+              <Truncate className={classify({[css.hidden]: isLoading})}>
+                {children}
+              </Truncate>
             </div>
           ) : // has icon, but no child
             children == null ? (
-              <Icon
-                name={iconLeftName || iconRightName}
-                color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
-                size={size === 'medium' ? 'medium' : 'small'}
-                type={iconLeftName ? iconLeftType : iconRightType}
-                className={classNames?.icon}
-              />
+              <>
+                {isLoading && (
+                  <div className={css.loader}>
+                    <CircularLoader
+                      size={size}
+                      colorToken={
+                        disabled
+                          ? 'colorTextDisabled'
+                          : ButtonTypeToLoaderColorMap[type]
+                      }
+                    />
+                  </div>
+                )}
+                <Icon
+                  name={iconLeftName || iconRightName}
+                  color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
+                  size={size === 'medium' ? 'medium' : 'small'}
+                  type={iconLeftName ? iconLeftType : iconRightType}
+                  className={classify(
+                    {[css.hidden]: isLoading},
+                    classNames?.icon,
+                  )}
+                />
+              </>
             ) : (
             // has icon _and_ child
               (iconLeftName || iconRightName) && (
@@ -173,11 +217,28 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                       }
                       size={size === 'medium' ? 'medium' : 'small'}
                       type={iconLeftType}
-                      className={classNames?.icon}
+                      className={classify(
+                        {[css.hidden]: isLoading},
+                        classNames?.icon,
+                      )}
                     />
                   )}
-                  <div className={css.textContainerLeft}>
-                    <Truncate>{children}</Truncate>
+                  <div className={css.textContainer}>
+                    {isLoading && (
+                      <div className={css.loader}>
+                        <CircularLoader
+                          size={size}
+                          colorToken={
+                            disabled
+                              ? 'colorTextDisabled'
+                              : ButtonTypeToLoaderColorMap[type]
+                          }
+                        />
+                      </div>
+                    )}
+                    <Truncate className={classify({[css.hidden]: isLoading})}>
+                      {children}
+                    </Truncate>
                   </div>
                   {iconRightName && (
                     <Icon
@@ -187,7 +248,10 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
                       }
                       size={size === 'medium' ? 'medium' : 'small'}
                       type={iconRightType}
-                      className={classNames?.icon}
+                      className={classify(
+                        {[css.hidden]: isLoading},
+                        classNames?.icon,
+                      )}
                     />
                   )}
                 </>

package/lib/components/Button/Button.module.css

@@ -63,6 +63,7 @@ button {
 
 .button {
   composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  position: relative;
   display: flex;
   flex-direction: row;
   padding: spaceNone spaceMedium;
@@ -84,6 +85,11 @@ button {
   column-gap: spaceXSmall;
 }
 
+.textContainer {
+  display: flex;
+  align-items: center;
+}
+
 .withIconLeft {
   padding: spaceNone spaceMedium spaceNone spaceSmall;
 }
@@ -226,3 +232,11 @@ button {
   background-color: colorFillDisabled;
   border: initial;
 }
+
+.hidden {
+  visibility: hidden;
+}
+
+.loader {
+  composes: absoluteCenter from '../../styles/utils.module.css';
+}

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const ButtonTab = _ref => {
+const ButtonTab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -29,6 +29,7 @@ const ButtonTab = _ref => {
     disabled: disabled,
     size: size,
     type: id === selectedButtonTabId ? 'tertiary' : 'ghost',
+    ref: ref,
     classNames: {
       wrapper: (0, _classify.default)(_ButtonTabModule.default.buttonTabWrapper, {
         [_ButtonTabModule.default.mediumButtonTab]: size === 'medium',
@@ -44,5 +45,5 @@ const ButtonTab = _ref => {
     iconLeftType: iconType,
     onClick: e => onButtonTabSelect && onButtonTabSelect(id, e)
   }), children);
-};
+});
 exports.ButtonTab = ButtonTab;

package/lib/components/ButtonTabs/ButtonTab/ButtonTab.js.flow

@@ -23,45 +23,55 @@ export type ButtonTabProps = {
   ariaLabel?: string,
   id: string,
   selectedButtonTabId?: string,
+  isLoading?: boolean,
   ...
 };
 
-export const ButtonTab = ({
-  classNames,
-  children,
-  iconName,
-  iconType = 'regular',
-  size,
-  onButtonTabSelect,
-  id,
-  selectedButtonTabId,
-  disabled,
-  ...props
-}: ButtonTabProps): React.Node => (
-  <Button
-    {...props}
-    disabled={disabled}
-    size={size}
-    type={id === selectedButtonTabId ? 'tertiary' : 'ghost'}
-    classNames={{
-      wrapper: classify(
-        css.buttonTabWrapper,
-        {
-          [css.mediumButtonTab]: size === 'medium',
-          [css.smallButtonTab]: size === 'small',
-          [css.onlyIcon]: iconName && !children,
-          [css.isSelected]: id === selectedButtonTabId,
-          [css.isUnSelected]: id !== selectedButtonTabId,
-          [css.disabled]: disabled,
-        },
-        classNames?.wrapper,
-      ),
-      icon: css.icon,
-    }}
-    iconLeftName={iconName}
-    iconLeftType={iconType}
-    onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
-  >
-    {children}
-  </Button>
+export const ButtonTab: React$AbstractComponent<
+  ButtonTabProps,
+  HTMLButtonElement,
+> = React.forwardRef<ButtonTabProps, HTMLButtonElement>(
+  (
+    {
+      classNames,
+      children,
+      iconName,
+      iconType = 'regular',
+      size,
+      onButtonTabSelect,
+      id,
+      selectedButtonTabId,
+      disabled,
+      ...props
+    }: ButtonTabProps,
+    ref,
+  ): React.Node => (
+    <Button
+      {...props}
+      disabled={disabled}
+      size={size}
+      type={id === selectedButtonTabId ? 'tertiary' : 'ghost'}
+      ref={ref}
+      classNames={{
+        wrapper: classify(
+          css.buttonTabWrapper,
+          {
+            [css.mediumButtonTab]: size === 'medium',
+            [css.smallButtonTab]: size === 'small',
+            [css.onlyIcon]: iconName && !children,
+            [css.isSelected]: id === selectedButtonTabId,
+            [css.isUnSelected]: id !== selectedButtonTabId,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        ),
+        icon: css.icon,
+      }}
+      iconLeftName={iconName}
+      iconLeftType={iconType}
+      onClick={(e) => onButtonTabSelect && onButtonTabSelect(id, e)}
+    >
+      {children}
+    </Button>
+  ),
 );

package/lib/components/ButtonTabs/ButtonTabs.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const ButtonTabs = _ref => {
+const ButtonTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
@@ -36,6 +36,7 @@ const ButtonTabs = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "ButtonTabs",
+    ref: ref,
     className: (0, _classify.default)(_ButtonTabsModule.default.buttonTabsWrapper, {
       [_ButtonTabsModule.default.medium]: size === 'medium',
       [_ButtonTabsModule.default.small]: size === 'small',
@@ -43,5 +44,5 @@ const ButtonTabs = _ref => {
       [_ButtonTabsModule.default.disabled]: disabled
     }, classNames?.wrapper)
   }, childrenWithProps);
-};
+});
 exports.ButtonTabs = ButtonTabs;

package/lib/components/ButtonTabs/ButtonTabs.js.flow

@@ -19,44 +19,53 @@ export type ButtonTabsProps = {
   onButtonTabSelect?: ?(id: string, e?: SyntheticEvent<HTMLElement>) => mixed,
 };
 
-export const ButtonTabs = ({
-  classNames,
-  children,
-  isFluid,
-  size = 'medium',
-  disabled,
-  selectedButtonTabId,
-  onButtonTabSelect,
-}: ButtonTabsProps): React.Node => {
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        ...child.props,
-        isFluid,
-        size,
-        disabled,
-        selectedButtonTabId,
-        onButtonTabSelect,
-      });
-    }
-    return child;
-  });
-
-  return (
-    <div
-      data-testid="ButtonTabs"
-      className={classify(
-        css.buttonTabsWrapper,
-        {
-          [css.medium]: size === 'medium',
-          [css.small]: size === 'small',
-          [css.isFluid]: isFluid,
-          [css.disabled]: disabled,
-        },
-        classNames?.wrapper,
-      )}
-    >
-      {childrenWithProps}
-    </div>
-  );
-};
+export const ButtonTabs: React$AbstractComponent<
+  ButtonTabsProps,
+  HTMLDivElement,
+> = React.forwardRef<ButtonTabsProps, HTMLDivElement>(
+  (
+    {
+      classNames,
+      children,
+      isFluid,
+      size = 'medium',
+      disabled,
+      selectedButtonTabId,
+      onButtonTabSelect,
+    }: ButtonTabsProps,
+    ref,
+  ): React.Node => {
+    const childrenWithProps = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          ...child.props,
+          isFluid,
+          size,
+          disabled,
+          selectedButtonTabId,
+          onButtonTabSelect,
+        });
+      }
+      return child;
+    });
+
+    return (
+      <div
+        data-testid="ButtonTabs"
+        ref={ref}
+        className={classify(
+          css.buttonTabsWrapper,
+          {
+            [css.medium]: size === 'medium',
+            [css.small]: size === 'small',
+            [css.isFluid]: isFluid,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+      >
+        {childrenWithProps}
+      </div>
+    );
+  },
+);

package/lib/components/Card/Card.js

@@ -23,7 +23,7 @@ const getPaddingValue = size => {
   const spaceKey = 'space' + (0, _string.capitalize)(size);
   return SPACES[spaceKey] || SPACES['spaceNone'];
 };
-const Card = _ref => {
+const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     classNames,
@@ -41,17 +41,25 @@ const Card = _ref => {
       '--card-padding-left': getPaddingValue(paddingLeft)
     },
     "data-testid": "Card",
-    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper)
+    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
+    ref: ref
   }), children);
-};
+});
 exports.Card = Card;
-const ClickableCard = _ref2 => {
+const ClickableCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     classNames,
     onClick,
     disabled = false,
     ...props
   } = _ref2;
+  const componentRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => componentRef.current);
+  React.useEffect(() => {
+    if (disabled) {
+      componentRef.current?.blur();
+    }
+  }, [disabled]);
   const onClickHandler = e => {
     if (!disabled) {
       onClick && onClick(e);
@@ -68,9 +76,10 @@ const ClickableCard = _ref2 => {
         [_CardModule.default.disabled]: disabled
       }, classNames?.wrapper)
     },
-    tabIndex: "0",
+    tabIndex: disabled ? -1 : 0,
     onClick: onClickHandler,
-    onKeyDown: onKeyDownHandler
+    onKeyDown: onKeyDownHandler,
+    ref: ref
   }));
-};
+});
 exports.ClickableCard = ClickableCard;

package/lib/components/Card/Card.js.flow

@@ -41,59 +41,77 @@ const getPaddingValue = (size: PaddingSizeType): string => {
   return SPACES[spaceKey] || SPACES['spaceNone'];
 };
 
-export const Card = ({
-  children,
-  classNames,
-  paddingTop = 'medium',
-  paddingRight = 'medium',
-  paddingBottom = 'medium',
-  paddingLeft = 'medium',
-  ...props
-}: CardProps): React.Node => (
-  <div
-    {...props}
-    style={{
-      '--card-padding-top': getPaddingValue(paddingTop),
-      '--card-padding-right': getPaddingValue(paddingRight),
-      '--card-padding-bottom': getPaddingValue(paddingBottom),
-      '--card-padding-left': getPaddingValue(paddingLeft),
-    }}
-    data-testid="Card"
-    className={classify(css.cardWrapper, classNames?.wrapper)}
-  >
-    {children}
-  </div>
-);
-
-export const ClickableCard = ({
-  classNames,
-  onClick,
-  disabled = false,
-  ...props
-}: ClickableCardProps): React.Node => {
-  const onClickHandler = (e) => {
-    if (!disabled) {
-      onClick && onClick(e);
-    }
-  };
-  const onKeyDownHandler = (e) => {
-    if (e.key === 'Enter') {
-      onClickHandler(e);
-    }
-  };
-  return (
-    <Card
-      {...props}
-      classNames={{
-        wrapper: classify(
-          css.clickableCard,
-          {[css.disabled]: disabled},
-          classNames?.wrapper,
-        ),
-      }}
-      tabIndex="0"
-      onClick={onClickHandler}
-      onKeyDown={onKeyDownHandler}
-    />
+export const Card: React$AbstractComponent<CardProps, HTMLDivElement> =
+  React.forwardRef<CardProps, HTMLDivElement>(
+    (
+      {
+        children,
+        classNames,
+        paddingTop = 'medium',
+        paddingRight = 'medium',
+        paddingBottom = 'medium',
+        paddingLeft = 'medium',
+        ...props
+      }: CardProps,
+      ref,
+    ): React.Node => (
+      <div
+        {...props}
+        style={{
+          '--card-padding-top': getPaddingValue(paddingTop),
+          '--card-padding-right': getPaddingValue(paddingRight),
+          '--card-padding-bottom': getPaddingValue(paddingBottom),
+          '--card-padding-left': getPaddingValue(paddingLeft),
+        }}
+        data-testid="Card"
+        className={classify(css.cardWrapper, classNames?.wrapper)}
+        ref={ref}
+      >
+        {children}
+      </div>
+    ),
   );
-};
+
+export const ClickableCard: React$AbstractComponent<
+  ClickableCardProps,
+  HTMLDivElement,
+> = React.forwardRef<ClickableCardProps, HTMLDivElement>(
+  (
+    {classNames, onClick, disabled = false, ...props}: ClickableCardProps,
+    ref,
+  ): React.Node => {
+    const componentRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => componentRef.current);
+    React.useEffect(() => {
+      if (disabled) {
+        componentRef.current?.blur();
+      }
+    }, [disabled]);
+    const onClickHandler = (e) => {
+      if (!disabled) {
+        onClick && onClick(e);
+      }
+    };
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onClickHandler(e);
+      }
+    };
+    return (
+      <Card
+        {...props}
+        classNames={{
+          wrapper: classify(
+            css.clickableCard,
+            {[css.disabled]: disabled},
+            classNames?.wrapper,
+          ),
+        }}
+        tabIndex={disabled ? -1 : 0}
+        onClick={onClickHandler}
+        onKeyDown={onKeyDownHandler}
+        ref={ref}
+      />
+    );
+  },
+);