@spaced-out/ui-design-system 0.0.23-beta.0 → 0.0.24

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.24](https://github.com/spaced-out/ui-design-system/compare/v0.0.23...v0.0.24) (2023-02-15)
+
+
+### Features
+
+* inline dropdown ([#65](https://github.com/spaced-out/ui-design-system/issues/65)) ([c6063d3](https://github.com/spaced-out/ui-design-system/commit/c6063d376a61dce4d94e0f0079e2dcf44c5a86bf))
+
+
+### Bug Fixes
+
+* border fixes for Status inddicator ([d2b2903](https://github.com/spaced-out/ui-design-system/commit/d2b2903c37c521a95566f1016845b1ce8e8eeee5))
+
+### [0.0.23](https://github.com/spaced-out/ui-design-system/compare/v0.0.23-beta.0...v0.0.23) (2023-02-14)
+
+
+### Bug Fixes
+
+* import fixes for avataar ([1880ed7](https://github.com/spaced-out/ui-design-system/commit/1880ed760283e48347b68c220a7ba11a54dfcd4f))
+* status support for avataar ([e877b88](https://github.com/spaced-out/ui-design-system/commit/e877b88c326262f9738da89457bd417d4f684002))
+
 ### [0.0.23-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.22...v0.0.23-beta.0) (2023-02-14)
 
 

package/lib/components/Avatar/Avatar.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.avatarSizeOptions = exports.BaseAvatar = exports.Avatar = exports.AVATAR_SIZE = exports.AVATAR_COLOR = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Text = require("../../components/Text");
-var _color = require("../../styles/variables/_color");
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
+var _StatusIndicator = require("../StatusIndicator");
 var _AvatarModule = _interopRequireDefault(require("./Avatar.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -23,12 +24,12 @@ exports.AVATAR_SIZE = AVATAR_SIZE;
 const avatarSizeOptions = [...Object.keys(AVATAR_SIZE)];
 exports.avatarSizeOptions = avatarSizeOptions;
 const AVATAR_COLOR = Object.freeze({
-  red: _color.colorDangerLightest,
-  orange: _color.colorWarningLightest,
-  green: _color.colorSuccessLightest,
-  blue: _color.colorInformationLightest,
-  gray: _color.colorGrayLightest,
-  indigo: _color.colorNeutralLightest
+  red: COLORS.colorDangerLightest,
+  orange: COLORS.colorWarningLightest,
+  green: COLORS.colorSuccessLightest,
+  blue: COLORS.colorInformationLightest,
+  gray: COLORS.colorGrayLightest,
+  indigo: COLORS.colorNeutralLightest
 });
 exports.AVATAR_COLOR = AVATAR_COLOR;
 const getAvatarText = function () {
@@ -66,14 +67,22 @@ const AvatarConditionalContent = _ref2 => {
     iconName,
     size,
     iconType,
-    color = 'blue'
+    color = 'blue',
+    status,
+    statusBorderColorToken
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     className: _AvatarModule.default.innerContainer,
     style: {
       background: AVATAR_COLOR[color]
     }
-  }, imageSrc ? /*#__PURE__*/React.createElement("img", {
+  }, !!status && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AvatarModule.default.statusIndicatorWrapper, _AvatarModule.default[size])
+  }, /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
+    status: status,
+    withBorder: true,
+    borderColorToken: statusBorderColorToken
+  })), imageSrc ? /*#__PURE__*/React.createElement("img", {
     src: imageSrc,
     alt: "Avatar",
     className: _AvatarModule.default.avatar
@@ -96,7 +105,9 @@ const Avatar = _ref3 => {
     iconName,
     iconType,
     color,
-    ring = false
+    ring = false,
+    status,
+    statusBorderColorToken
   } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarModule.default.container, {
@@ -115,14 +126,18 @@ const Avatar = _ref3 => {
     iconName: iconName,
     iconType: iconType,
     color: color,
-    size: size
+    size: size,
+    status: status,
+    statusBorderColorToken: statusBorderColorToken
   }))) : /*#__PURE__*/React.createElement(AvatarConditionalContent, {
     imageSrc: imageSrc,
     text: text,
     iconName: iconName,
     iconType: iconType,
     color: color,
-    size: size
+    size: size,
+    status: status,
+    statusBorderColorToken: statusBorderColorToken
   }));
 };
 exports.Avatar = Avatar;

package/lib/components/Avatar/Avatar.js.flow

@@ -7,6 +7,7 @@ import {
   SubTitleMedium,
   SubTitleSmall,
 } from '../../components/Text';
+import * as COLORS from '../../styles/variables/_color';
 import {
   colorDangerLightest,
   colorGrayLightest,
@@ -18,6 +19,8 @@ import {
 import classify from '../../utils/classify';
 import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
+import type {StatusSemanticType} from '../StatusIndicator';
+import {StatusIndicator} from '../StatusIndicator';
 
 import css from './Avatar.module.css';
 
@@ -55,6 +58,8 @@ export type AvatarProps = {
   iconName?: string,
   iconType?: IconType,
   ring?: boolean,
+  status?: StatusSemanticType,
+  statusBorderColorToken?: $Keys<typeof COLORS>,
 };
 
 const getAvatarText = (text = '') => {
@@ -96,6 +101,8 @@ export type AvatarContentProps = {
   size: AvatarSize,
   color?: AvatarColorType,
   ring?: boolean,
+  status?: StatusSemanticType,
+  statusBorderColorToken?: $Keys<typeof COLORS>,
 };
 
 const AvatarConditionalContent = ({
@@ -105,8 +112,20 @@ const AvatarConditionalContent = ({
   size,
   iconType,
   color = 'blue',
+  status,
+  statusBorderColorToken,
 }: AvatarContentProps) => (
   <div className={css.innerContainer} style={{background: AVATAR_COLOR[color]}}>
+    {!!status && (
+      <div className={classify(css.statusIndicatorWrapper, css[size])}>
+        <StatusIndicator
+          status={status}
+          withBorder
+          borderColorToken={statusBorderColorToken}
+        />
+      </div>
+    )}
+
     {imageSrc ? (
       <img src={imageSrc} alt="Avatar" className={css.avatar}></img>
     ) : iconName ? (
@@ -127,6 +146,8 @@ export const Avatar = ({
   iconType,
   color,
   ring = false,
+  status,
+  statusBorderColorToken,
 }: AvatarProps): React.Node => (
   <div
     className={classify(
@@ -150,6 +171,8 @@ export const Avatar = ({
             iconType={iconType}
             color={color}
             size={size}
+            status={status}
+            statusBorderColorToken={statusBorderColorToken}
           />
         </div>
       </div>
@@ -161,6 +184,8 @@ export const Avatar = ({
         iconType={iconType}
         color={color}
         size={size}
+        status={status}
+        statusBorderColorToken={statusBorderColorToken}
       />
     )}
   </div>

package/lib/components/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 @value (colorFillPrimary, colorBackgroundTertiary, colorInformation) from '../../styles/variables/_color.css';
 @value ( size34, size42, size60, sizeFluid) from '../../styles/variables/_size.css';
 @value (borderRadiusCircle, borderRadiusLarge, borderRadiusXLarge, borderWidthSecondary) from '../../styles/variables/_border.css';
-@value (spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';
+@value (spaceNone, spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';
 
 .container {
   border-radius: borderRadiusCircle;
@@ -79,9 +79,29 @@
 
 .innerContainer {
   display: flex;
+  position: relative;
   border-radius: borderRadiusCircle;
   width: sizeFluid;
   height: sizeFluid;
   align-items: center;
   justify-content: center;
 }
+
+.statusIndicatorWrapper {
+  position: absolute;
+}
+
+.statusIndicatorWrapper.large {
+  top: calc(spaceXXSmall / 2);
+  right: calc(spaceXXSmall / 2);
+}
+
+.statusIndicatorWrapper.medium {
+  top: spaceNone;
+  right: spaceNone;
+}
+
+.statusIndicatorWrapper.small {
+  top: calc((spaceXXSmall / 2) * -1);
+  right: calc((spaceXXSmall / 2) * -1);
+}

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

@@ -1,6 +1,11 @@
 // @flow strict
 
-export type {ButtonActionType, ButtonProps, ButtonType} from './Button';
+export type {
+  ButtonActionType,
+  ButtonProps,
+  ButtonType,
+  UnstyledButtonProps,
+} from './Button';
 export {
   Button,
   BUTTON_ACTION_TYPE,

package/lib/components/InlineDropdown/InlineDropdown.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineDropdown = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("@floating-ui/react-dom");
+var _space = require("../../styles/variables/_space");
+var _classify = require("../../utils/classify");
+var _clickAway = require("../../utils/click-away");
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Menu = require("../Menu");
+var _Truncate = require("../Truncate");
+var _InlineDropdownModule = _interopRequireDefault(require("./InlineDropdown.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 InlineDropdown = _ref => {
+  let {
+    anchorPosition = 'bottom-start',
+    size = 'medium',
+    onOptionSelect,
+    menu,
+    classNames,
+    disabled,
+    onMenuOpen,
+    onMenuClose,
+    children,
+    ...restButtonProps
+  } = _ref;
+  const menuBtnRef = React.useRef();
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy
+  } = (0, _reactDom.useFloating)({
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: _reactDom.autoUpdate,
+    middleware: [(0, _reactDom.shift)(), (0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
+  });
+  const onMenuToggle = isOpen => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
+    onChange: onMenuToggle
+  }, _ref2 => {
+    let {
+      isOpen,
+      onOpen,
+      cancelNext,
+      clickAway
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "InlineDropdown",
+      className: (0, _classify.classify)(_InlineDropdownModule.default.inlineDropdownContainer, classNames?.dropdownContainer),
+      ref: menuBtnRef
+    }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
+      disabled: disabled,
+      ref: reference,
+      onClick: e => {
+        e.stopPropagation();
+        onOpen();
+      },
+      className: (0, _classify.classify)(_InlineDropdownModule.default.inlineButton, {
+        [_InlineDropdownModule.default.disabled]: disabled
+      }, _InlineDropdownModule.default[size], classNames?.buttonWrapper)
+    }), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), /*#__PURE__*/React.createElement(_Icon.Icon, {
+      name: isOpen ? 'caret-up' : 'caret-down',
+      size: "small",
+      type: "solid",
+      className: (0, _classify.classify)({
+        [_InlineDropdownModule.default.disabled]: disabled
+      })
+    })), isOpen && menu && /*#__PURE__*/React.createElement("div", {
+      onClickCapture: cancelNext,
+      ref: floating,
+      style: {
+        display: 'flex',
+        position: strategy,
+        top: y ?? _space.spaceNone,
+        left: x ?? _space.spaceNone
+      }
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
+      onSelect: option => {
+        onOptionSelect && onOptionSelect(option);
+        clickAway();
+      }
+    }))));
+  });
+};
+exports.InlineDropdown = InlineDropdown;

package/lib/components/InlineDropdown/InlineDropdown.js.flow

@@ -0,0 +1,134 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react-dom';
+
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import {ClickAway} from '../../utils/click-away';
+import type {UnstyledButtonProps} from '../Button';
+import {UnstyledButton} from '../Button';
+import type {AnchorType} from '../ButtonDropdown';
+import {Icon} from '../Icon';
+import type {MenuOption, MenuProps} from '../Menu';
+import {Menu} from '../Menu';
+import {Truncate} from '../Truncate';
+
+import css from './InlineDropdown.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  buttonWrapper?: string,
+  dropdownContainer?: string,
+}>;
+
+export type InlineDropdownProps = {
+  ...UnstyledButtonProps,
+  classNames?: ClassNames,
+  menu: MenuProps,
+  anchorPosition?: AnchorType,
+  onOptionSelect?: (option: MenuOption) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  size?: 'medium' | 'small' | 'extraSmall',
+  ...
+};
+
+export const InlineDropdown = ({
+  anchorPosition = 'bottom-start',
+  size = 'medium',
+  onOptionSelect,
+  menu,
+  classNames,
+  disabled,
+  onMenuOpen,
+  onMenuClose,
+  children,
+  ...restButtonProps
+}: InlineDropdownProps): React.Node => {
+  const menuBtnRef = React.useRef();
+  const {x, y, reference, floating, strategy} = useFloating({
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+  });
+
+  const onMenuToggle = (isOpen: boolean) => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
+
+  return (
+    <ClickAway onChange={onMenuToggle}>
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
+        <div
+          data-testid="InlineDropdown"
+          className={classify(
+            css.inlineDropdownContainer,
+            classNames?.dropdownContainer,
+          )}
+          ref={menuBtnRef}
+        >
+          <UnstyledButton
+            {...restButtonProps}
+            disabled={disabled}
+            ref={reference}
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpen();
+            }}
+            className={classify(
+              css.inlineButton,
+              {
+                [css.disabled]: disabled,
+              },
+              css[size],
+              classNames?.buttonWrapper,
+            )}
+          >
+            <Truncate>{children}</Truncate>
+            <Icon
+              name={isOpen ? 'caret-up' : 'caret-down'}
+              size="small"
+              type="solid"
+              className={classify({
+                [css.disabled]: disabled,
+              })}
+            />
+          </UnstyledButton>
+          {isOpen && menu && (
+            <div
+              onClickCapture={cancelNext}
+              ref={floating}
+              style={{
+                display: 'flex',
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+              }}
+            >
+              <Menu
+                {...menu}
+                onSelect={(option) => {
+                  onOptionSelect && onOptionSelect(option);
+                  clickAway();
+                }}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/InlineDropdown/InlineDropdown.module.css

@@ -0,0 +1,44 @@
+@value ( sizeFluid) from '../../styles/variables/_size.css';
+@value ( spaceXXSmall) from '../../styles/variables/_space.css';
+@value ( colorTextDisabled, colorFocusPrimary) from '../../styles/variables/_color.css';
+@value ( borderWidthNone, borderWidthTertiary, borderRadiusXSmall) from '../../styles/variables/_border.css';
+
+.inlineDropdownContainer {
+  display: flex;
+  position: relative;
+}
+
+.isFluid {
+  width: sizeFluid;
+}
+
+.inlineButton {
+  display: flex;
+  gap: spaceXXSmall;
+  cursor: pointer;
+  align-items: center;
+  border-radius: borderRadiusXSmall;
+}
+
+.inlineButton:focus {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.medium {
+  composes: buttonTextMedium from '../../styles/typography.module.css';
+}
+
+.small {
+  composes: buttonTextSmall from '../../styles/typography.module.css';
+}
+
+.extraSmall {
+  composes: buttonTextExtraSmall from '../../styles/typography.module.css';
+}
+
+.disabled {
+  pointer-events: none;
+  color: colorTextDisabled;
+  cursor: not-allowed;
+}

package/lib/components/InlineDropdown/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _InlineDropdown = require("./InlineDropdown");
+Object.keys(_InlineDropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InlineDropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InlineDropdown[key];
+    }
+  });
+});

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

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

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StatusIndicator = exports.STATUS_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _StatusIndicatorModule = _interopRequireDefault(require("./StatusIndicator.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,13 +25,17 @@ const StatusIndicator = _ref => {
     classNames,
     status = 'information',
     withBorder,
+    borderColorToken = 'colorBackgroundTertiary',
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     "data-testid": "StatusIndicator",
     className: (0, _classify.default)(_StatusIndicatorModule.default.statusWrapper, _StatusIndicatorModule.default[status], {
       [_StatusIndicatorModule.default.withBorder]: withBorder
-    }, classNames?.wrapper)
+    }, classNames?.wrapper),
+    style: {
+      '--border-color': COLORS[borderColorToken] || COLORS['colorBackgroundTertiary']
+    }
   }));
 };
 exports.StatusIndicator = StatusIndicator;

package/lib/components/StatusIndicator/StatusIndicator.js.flow

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import * as COLORS from '../../styles/variables/_color';
 import classify from '../../utils/classify';
 
 import css from './StatusIndicator.module.css';
@@ -23,6 +24,7 @@ export type StatusIndicatorProps = {
   classNames?: ClassNames,
   status?: StatusSemanticType,
   withBorder?: boolean,
+  borderColorToken?: $Keys<typeof COLORS>,
   ...
 };
 
@@ -30,6 +32,7 @@ export const StatusIndicator = ({
   classNames,
   status = 'information',
   withBorder,
+  borderColorToken = 'colorBackgroundTertiary',
   ...props
 }: StatusIndicatorProps): React.Node => (
   <div
@@ -43,5 +46,9 @@ export const StatusIndicator = ({
       },
       classNames?.wrapper,
     )}
+    style={{
+      '--border-color':
+        COLORS[borderColorToken] || COLORS['colorBackgroundTertiary'],
+    }}
   ></div>
 );

package/lib/components/StatusIndicator/StatusIndicator.module.css

@@ -3,6 +3,7 @@
 @value (borderRadiusCircle, borderWidthTertiary) from '../../styles/variables/_border.css';
 
 .statusWrapper {
+  --border-color: colorBackgroundTertiary;
   display: flex;
   color: colorFillPrimary;
   width: size8;
@@ -33,5 +34,5 @@
 }
 
 .withBorder {
-  border: borderWidthTertiary solid colorBackgroundTertiary;
+  border: borderWidthTertiary solid var(--border-color);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.23-beta.0",
+  "version": "0.0.24",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {