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

package/lib/components/AvatarGroup/AvatarGroup.js.flow

@@ -29,112 +29,127 @@ export type AvatarGroupProps = {
   tooltipElevation?: string,
 };
 
-export const AvatarGroup = ({
-  children,
-  size = 'medium',
-  borderColor = colorBackgroundTertiary,
-  maxTooltipLines = 7,
-  placement = 'top',
-  maxAvatars = 5,
-  tooltipElevation,
-}: AvatarGroupProps): React.Node => {
-  const childAvatarCount = React.Children.count(children);
-
-  const leftOverlap = {
-    small: spaceXXSmall,
-    medium: `${parseInt(spaceSmall) / 2}px`,
-    large: spaceXSmall,
-  };
-
-  let colorIndex = -1;
-
-  const avatarInGroup = (child, index, color) =>
-    React.cloneElement(child, {
-      size,
-      classNames: {wrapper: css.avatarInGroup},
-      style: {
-        borderColor,
-        marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`,
-      },
-      color,
-    });
+export const AvatarGroup: React$AbstractComponent<
+  AvatarGroupProps,
+  HTMLDivElement,
+> = React.forwardRef<AvatarGroupProps, HTMLDivElement>(
+  (
+    {
+      children,
+      size = 'medium',
+      borderColor = colorBackgroundTertiary,
+      maxTooltipLines = 7,
+      placement = 'top',
+      maxAvatars = 5,
+      tooltipElevation,
+    }: AvatarGroupProps,
+    ref,
+  ): React.Node => {
+    const childAvatarCount = React.Children.count(children);
+
+    const leftOverlap = {
+      small: spaceXXSmall,
+      medium: `${parseInt(spaceSmall) / 2}px`,
+      large: spaceXSmall,
+    };
+
+    let colorIndex = -1;
+
+    const avatarInGroup = (child, index, color) => {
+      const {classNames} = child.props;
+      const {wrapper, ...restClassNames} = classNames || {};
+      return React.cloneElement(child, {
+        size,
+        classNames: {
+          wrapper: classify(css.avatarInGroup, wrapper),
+          ...restClassNames,
+        },
+        style: {
+          borderColor,
+          marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`,
+        },
+        color,
+      });
+    };
+
+    const childrenArray = React.Children.toArray(children);
+    const totalAvatarCount = childrenArray.length;
+    const plusAvatar = () => {
+      const nameList = [];
+
+      for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
+        const child = childrenArray[i];
+        const {text} = child.props;
+        if (text) {
+          nameList.push(text);
+        }
+      }
 
-  const childrenArray = React.Children.toArray(children);
-  const totalAvatarCount = childrenArray.length;
-  const plusAvatar = () => {
-    const nameList = [];
+      const NameListNode = () => (
+        <span>
+          {nameList.map((name) => (
+            <React.Fragment key={name}>
+              {name}
+              <br />
+            </React.Fragment>
+          ))}
+        </span>
+      );
+      return (
+        <Tooltip
+          body={<NameListNode />}
+          bodyMaxLines={maxTooltipLines}
+          placement={placement}
+          elevation={tooltipElevation}
+        >
+          <div className={css.plusAvatar}>
+            <BaseAvatar
+              size={size}
+              color="gray"
+              text={`+${childAvatarCount - maxAvatars + 1}`}
+              classNames={{wrapper: css.avatarInGroup}}
+              style={{
+                borderColor,
+                marginLeft: `-${leftOverlap[size]}`,
+              }}
+            />
+          </div>
+        </Tooltip>
+      );
+    };
+
+    const childrenWithProps = React.Children.map(children, (child, index) => {
+      const {imageSrc} = child.props;
+      if (!imageSrc) {
+        colorIndex++;
+        if (colorIndex === COLOR_SEQUENCE.length) {
+          colorIndex = 0;
+        }
+      }
 
-    for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
-      const child = childrenArray[i];
-      const {text} = child.props;
-      if (text) {
-        nameList.push(text);
+      const color = COLOR_SEQUENCE[colorIndex];
+      if (childAvatarCount <= maxAvatars) {
+        return avatarInGroup(child, index, color);
+      } else {
+        if (index < maxAvatars - 1) {
+          return avatarInGroup(child, index, color);
+        } else if (index === maxAvatars) {
+          return plusAvatar();
+        }
       }
-    }
-
-    const NameListNode = () => (
-      <span>
-        {nameList.map((name) => (
-          <React.Fragment key={name}>
-            {name}
-            <br />
-          </React.Fragment>
-        ))}
-      </span>
-    );
+    });
+
     return (
-      <Tooltip
-        body={<NameListNode />}
-        bodyMaxLines={maxTooltipLines}
-        placement={placement}
-        elevation={tooltipElevation}
+      <div
+        className={classify(css.avatarGroupContainer, {
+          [css.largeSize]: size === 'large',
+          [css.mediumSize]: size === 'medium',
+          [css.smallSize]: size === 'small',
+        })}
+        ref={ref}
       >
-        <div className={css.plusAvatar}>
-          <BaseAvatar
-            size={size}
-            color="gray"
-            text={`+${childAvatarCount - maxAvatars + 1}`}
-            classNames={{wrapper: css.avatarInGroup}}
-            style={{
-              borderColor,
-              marginLeft: `-${leftOverlap[size]}`,
-            }}
-          />
-        </div>
-      </Tooltip>
+        {childrenWithProps}
+      </div>
     );
-  };
-
-  const childrenWithProps = React.Children.map(children, (child, index) => {
-    const {imageSrc} = child.props;
-    if (!imageSrc) {
-      colorIndex++;
-      if (colorIndex === COLOR_SEQUENCE.length) {
-        colorIndex = 0;
-      }
-    }
-
-    const color = COLOR_SEQUENCE[colorIndex];
-    if (childAvatarCount <= maxAvatars) {
-      return avatarInGroup(child, index, color);
-    } else {
-      if (index < maxAvatars - 1) {
-        return avatarInGroup(child, index, color);
-      } else if (index === maxAvatars) {
-        return plusAvatar();
-      }
-    }
-  });
-
-  return (
-    <div
-      className={classify(css.avatarGroupContainer, {
-        [css.largeSize]: size === 'large',
-        [css.mediumSize]: size === 'medium',
-        [css.smallSize]: size === 'small',
-      })}
-    >
-      {childrenWithProps}
-    </div>
-  );
-};
+  },
+);

package/lib/components/Badge/Badge.js

@@ -22,7 +22,7 @@ const BADGE_COLOR = Object.freeze({
   indigo: _color.colorNeutralLightest
 });
 exports.BADGE_COLOR = BADGE_COLOR;
-const Badge = _ref => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     text,
@@ -35,7 +35,8 @@ const Badge = _ref => {
     }, classNames?.wrapper),
     style: {
       backgroundColor: BADGE_COLOR[fill]
-    }
+    },
+    ref: ref
   }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, null, text));
-};
+});
 exports.Badge = Badge;

package/lib/components/Badge/Badge.js.flow

@@ -35,24 +35,24 @@ export type BadgeProps = {
   fill?: BadgeColorType,
 };
 
-export const Badge = ({
-  classNames,
-  text,
-  fill = 'gray',
-}: BadgeProps): React.Node => (
-  <div
-    data-testid="Badge"
-    className={classify(
-      css.badgeWrapper,
-      {
-        [css.fixedWidth]: text.length <= 2,
-      },
-      classNames?.wrapper,
-    )}
-    style={{
-      backgroundColor: BADGE_COLOR[fill],
-    }}
-  >
-    <ButtonTextSmall>{text}</ButtonTextSmall>
-  </div>
-);
+export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
+  React.forwardRef<BadgeProps, HTMLDivElement>(
+    ({classNames, text, fill = 'gray'}: BadgeProps, ref): React.Node => (
+      <div
+        data-testid="Badge"
+        className={classify(
+          css.badgeWrapper,
+          {
+            [css.fixedWidth]: text.length <= 2,
+          },
+          classNames?.wrapper,
+        )}
+        style={{
+          backgroundColor: BADGE_COLOR[fill],
+        }}
+        ref={ref}
+      >
+        <ButtonTextSmall>{text}</ButtonTextSmall>
+      </div>
+    ),
+  );

package/lib/components/Badge/index.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Badge", {
-  enumerable: true,
-  get: function () {
-    return _Badge.Badge;
-  }
-});
-var _Badge = require("./Badge");
+var _Badge = require("./Badge");
+Object.keys(_Badge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Badge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Badge[key];
+    }
+  });
+});

package/lib/components/Badge/index.js.flow

@@ -1,4 +1,3 @@
 // @flow strict
 
-export type {BadgeProps} from './Badge';
-export {Badge} from './Badge';
+export * from './Badge';

package/lib/components/Banner/Banner.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 Banner = _ref => {
+const Banner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     semantic,
@@ -23,6 +23,7 @@ const Banner = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_InContextAlert.InContextAlert, _extends({}, props, {
     leftIconType: leftIconType,
     semantic: semantic,
+    ref: ref,
     classNames: {
       wrapper: (0, _classify.default)(_BannerModule.default.bannerContainer, {
         [_BannerModule.default.neutral]: semantic === _InContextAlert.ALERT_SEMANTIC.neutral,
@@ -37,5 +38,5 @@ const Banner = _ref => {
       actionContainer: (0, _classify.default)(_BannerModule.default.alertContainer, classNames?.actionContainer)
     }
   })));
-};
+});
 exports.Banner = Banner;

package/lib/components/Banner/Banner.js.flow

@@ -14,38 +14,45 @@ export type BannerProps = {
   alignment?: 'top' | 'bottom',
 };
 
-export const Banner = ({
-  classNames,
-  semantic,
-  leftIconType = 'solid',
-  alignment = 'top',
-  ...props
-}: BannerProps): React.Node => (
-  <>
-    <InContextAlert
-      {...props}
-      leftIconType={leftIconType}
-      semantic={semantic}
-      classNames={{
-        wrapper: classify(
-          css.bannerContainer,
-          {
-            [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
-            [css.success]: semantic === ALERT_SEMANTIC.success,
-            [css.information]: semantic === ALERT_SEMANTIC.information,
-            [css.warning]: semantic === ALERT_SEMANTIC.warning,
-            [css.danger]: semantic === ALERT_SEMANTIC.danger,
-            [css.topAligned]: alignment === 'top',
-            [css.bottomAligned]: alignment === 'bottom',
-          },
-          classNames?.wrapper,
-        ),
-        alertText: classify(classNames?.alertText),
-        actionContainer: classify(
-          css.alertContainer,
-          classNames?.actionContainer,
-        ),
-      }}
-    />
-  </>
-);
+export const Banner: React$AbstractComponent<BannerProps, HTMLDivElement> =
+  React.forwardRef<BannerProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        semantic,
+        leftIconType = 'solid',
+        alignment = 'top',
+        ...props
+      }: BannerProps,
+      ref,
+    ): React.Node => (
+      <>
+        <InContextAlert
+          {...props}
+          leftIconType={leftIconType}
+          semantic={semantic}
+          ref={ref}
+          classNames={{
+            wrapper: classify(
+              css.bannerContainer,
+              {
+                [css.neutral]: semantic === ALERT_SEMANTIC.neutral,
+                [css.success]: semantic === ALERT_SEMANTIC.success,
+                [css.information]: semantic === ALERT_SEMANTIC.information,
+                [css.warning]: semantic === ALERT_SEMANTIC.warning,
+                [css.danger]: semantic === ALERT_SEMANTIC.danger,
+                [css.topAligned]: alignment === 'top',
+                [css.bottomAligned]: alignment === 'bottom',
+              },
+              classNames?.wrapper,
+            ),
+            alertText: classify(classNames?.alertText),
+            actionContainer: classify(
+              css.alertContainer,
+              classNames?.actionContainer,
+            ),
+          }}
+        />
+      </>
+    ),
+  );

package/lib/components/Button/Button.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.UnstyledButton = exports.Button = exports.BUTTON_TYPES = exports.BUTTON_ACTION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
+var _CircularLoader = require("../CircularLoader");
 var _Icon = require("../Icon");
 var _Truncate = require("../Truncate");
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
@@ -34,6 +35,13 @@ const ButtonTypeToIconColorMap = {
   ghost: 'primary',
   danger: 'inversePrimary'
 };
+const ButtonTypeToLoaderColorMap = {
+  primary: 'colorTextInversePrimary',
+  secondary: 'colorTextClickable',
+  tertiary: 'colorTextPrimary',
+  ghost: 'colorTextPrimary',
+  danger: 'colorTextInversePrimary'
+};
 const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     disabled,
@@ -42,6 +50,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ariaLabel,
     actionType,
     tabIndex = 0,
+    isLoading,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("button", _extends({}, props, ariaLabel ? {
@@ -54,7 +63,7 @@ const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tabIndex: disabled ? -1 : tabIndex,
     type: actionType,
     onClick: event => {
-      if (disabled) {
+      if (disabled || isLoading) {
         event.preventDefault();
       } else if (onClick) {
         onClick(event);
@@ -76,11 +85,13 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     disabled = false,
     actionType = 'button',
     size = 'medium',
+    isLoading,
     ...props
   } = _ref2;
   return /*#__PURE__*/React.createElement(UnstyledButton, _extends({}, props, {
     actionType: actionType,
     disabled: disabled,
+    isLoading: isLoading,
     className: (0, _classify.classify)(_ButtonModule.default.button, {
       [_ButtonModule.default.primary]: type === 'primary',
       [_ButtonModule.default.secondary]: type === 'secondary',
@@ -100,31 +111,60 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   }), /*#__PURE__*/React.createElement("div", {
     className: _ButtonModule.default.buttonRow
   }, !(iconLeftName || iconRightName) ? /*#__PURE__*/React.createElement("div", {
-    className: _ButtonModule.default.textContainerCenter
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)) :
+    className: _ButtonModule.default.textContainer
+  }, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: _ButtonModule.default.loader
+  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    size: size,
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
+  })), /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    })
+  }, children)) :
   // has icon, but no child
-  children == null ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+  children == null ? /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: _ButtonModule.default.loader
+  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    size: size,
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
+  })), /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName || iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconLeftName ? iconLeftType : iconRightType,
-    className: classNames?.icon
-  }) :
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    }, classNames?.icon)
+  })) :
   // has icon _and_ child
   (iconLeftName || iconRightName) && /*#__PURE__*/React.createElement(React.Fragment, null, iconLeftName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconLeftName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconLeftType,
-    className: classNames?.icon
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    }, classNames?.icon)
   }), /*#__PURE__*/React.createElement("div", {
-    className: _ButtonModule.default.textContainerLeft
-  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children)), iconRightName && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    className: _ButtonModule.default.textContainer
+  }, isLoading && /*#__PURE__*/React.createElement("div", {
+    className: _ButtonModule.default.loader
+  }, /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    size: size,
+    colorToken: disabled ? 'colorTextDisabled' : ButtonTypeToLoaderColorMap[type]
+  })), /*#__PURE__*/React.createElement(_Truncate.Truncate, {
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    })
+  }, children)), iconRightName && /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: iconRightName,
     color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
     size: size === 'medium' ? 'medium' : 'small',
     type: iconRightType,
-    className: classNames?.icon
+    className: (0, _classify.classify)({
+      [_ButtonModule.default.hidden]: isLoading
+    }, classNames?.icon)
   }))));
 });
 exports.Button = Button;