@spaced-out/ui-design-system 0.0.7 → 0.0.9

package/lib/components/Menu/Menu.js.flow

@@ -4,6 +4,7 @@ import * as React from 'react';
 import {classify} from '../../utils/classify';
 import {UnstyledButton} from '../Button';
 import {Icon} from '../Icon';
+import type {IconType} from '../Icon/Icon.js';
 
 import css from './Menu.module.css';
 
@@ -14,7 +15,9 @@ export type MenuOption = {
   key?: string,
   label: string,
   iconLeft?: string,
+  iconLeftType?: IconType,
   iconRight?: string,
+  iconRightType?: IconType,
   disabled?: boolean,
 };
 
@@ -50,36 +53,52 @@ export const Menu = (props: MenuProps): React.Node => {
       })}
       style={{width}}
     >
-      {options.map(({key, label, iconLeft, iconRight, disabled}) => (
-        <UnstyledButton
-          className={classify(css.option, {
-            [css.selected]: key === selectedOption?.key,
-            [css.optionSmall]: size === 'small',
-            [css.optionMedium]: size === 'medium',
-            [css.disabled]: menuDisabled || disabled,
-            [css.withIconLeft]: !!iconLeft,
-            [css.withIconRight]: !!iconRight,
-          })}
-          key={key}
-          disabled={menuDisabled || disabled}
-          onClick={() => onSelect && onSelect({key, label})}
-          autoFocus={selectedOption?.key === key}
-        >
-          {!!iconLeft && (
-            <Icon name={iconLeft} size="small" className={css.icon} />
-          )}
+      {options.map(
+        ({
+          key,
+          label,
+          iconLeft,
+          iconLeftType,
+          iconRight,
+          iconRightType,
+          disabled,
+        }) => (
+          <UnstyledButton
+            className={classify(css.option, {
+              [css.selected]: key === selectedOption?.key,
+              [css.optionSmall]: size === 'small',
+              [css.optionMedium]: size === 'medium',
+              [css.disabled]: menuDisabled || disabled,
+              [css.withIconLeft]: !!iconLeft,
+              [css.withIconRight]: !!iconRight,
+            })}
+            key={key}
+            disabled={menuDisabled || disabled}
+            onClick={() => onSelect && onSelect({key, label})}
+            autoFocus={selectedOption?.key === key}
+          >
+            {!!iconLeft && (
+              <Icon
+                name={iconLeft}
+                type={iconLeftType}
+                size="small"
+                className={css.icon}
+              />
+            )}
 
-          <span className={css.optionText}>{label}</span>
+            <span className={css.optionText}>{label}</span>
 
-          {!!iconRight && (
-            <Icon
-              name={iconRight}
-              size="small"
-              className={classify(css.icon, css.rightIcon)}
-            />
-          )}
-        </UnstyledButton>
-      ))}
+            {!!iconRight && (
+              <Icon
+                name={iconRight}
+                type={iconRightType}
+                size="small"
+                className={classify(css.icon, css.rightIcon)}
+              />
+            )}
+          </UnstyledButton>
+        ),
+      )}
     </div>
   );
 };

package/lib/components/Tab/Tab.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tabSizeOptions = exports.Tab = exports.TAB_SIZE = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = require("../../utils/classify");
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _TabModule = _interopRequireDefault(require("./Tab.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 TAB_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium'
+});
+exports.TAB_SIZE = TAB_SIZE;
+const tabSizeOptions = [...Object.keys(TAB_SIZE)];
+exports.tabSizeOptions = tabSizeOptions;
+const Tab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    onSelect,
+    size = 'medium',
+    selectedTab,
+    disabled = false,
+    tabId,
+    label,
+    iconName,
+    iconType,
+    onClick,
+    width,
+    ...props
+  } = _ref;
+  const selected = tabId && tabId === selectedTab?.tabId;
+  const onClickHandler = e => {
+    if (!disabled) {
+      onSelect && onSelect({
+        tabId,
+        label
+      });
+      onClick && onClick(e);
+    }
+  };
+  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
+    disabled: disabled,
+    className: (0, _classify.classify)(_TabModule.default.button, {
+      [_TabModule.default.selected]: selected === true,
+      [_TabModule.default.disabled]: disabled === true,
+      [_TabModule.default.mediumSize]: size === 'medium',
+      [_TabModule.default.smallSize]: size === 'small'
+    }, classNames?.wrapper),
+    onClick: onClickHandler,
+    style: {
+      width
+    },
+    tabIndex: disabled ? '-1' : 0,
+    ref: ref
+  }), /*#__PURE__*/React.createElement("span", {
+    className: (0, _classify.classify)(_TabModule.default.iconTextWrap, {
+      [_TabModule.default.selected]: selected === true,
+      [_TabModule.default.disabled]: disabled === true
+    }, classNames?.iconTextWrap)
+  }, iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconName,
+    type: iconType,
+    size: 'medium',
+    className: (0, _classify.classify)(_TabModule.default.icon, {
+      [_TabModule.default.disabled]: disabled === true
+    })
+  }) : null, size === TAB_SIZE.medium ? /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
+    color: _typography.TEXT_COLORS.secondary,
+    className: (0, _classify.classify)(_TabModule.default.tabContainer, {
+      [_TabModule.default.disabled]: disabled === true
+    })
+  }, label) : /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, {
+    color: _typography.TEXT_COLORS.secondary,
+    className: (0, _classify.classify)(_TabModule.default.tabContainer, {
+      [_TabModule.default.selected]: selected === true,
+      [_TabModule.default.disabled]: disabled === true
+    })
+  }, label)));
+});
+exports.Tab = Tab;
+Tab.name = Tab.displayName = 'Tab';

package/lib/components/Tab/Tab.js.flow

@@ -0,0 +1,130 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import {classify} from '../../utils/classify';
+import {UnstyledButton} from '../Button';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {ButtonTextMedium, ButtonTextSmall} from '../Text';
+
+import css from './Tab.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, iconTextWrap?: string}>;
+
+export const TAB_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+});
+
+export const tabSizeOptions: Array<mixed> = [...Object.keys(TAB_SIZE)];
+
+export type TabSize = $Keys<typeof TAB_SIZE>;
+
+export type TabProps = {
+  classNames?: ClassNames,
+  onSelect?: ({tabId?: string, label?: string}) => mixed,
+  size?: TabSize,
+  selectedTab?: {tabId?: string, label?: string},
+  disabled?: boolean,
+  tabId?: string,
+  label?: string,
+  iconName?: string,
+  iconType?: IconType,
+  width?: string,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const Tab: React$AbstractComponent<TabProps, HTMLButtonElement> =
+  React.forwardRef<TabProps, HTMLButtonElement>(
+    (
+      {
+        classNames,
+        onSelect,
+        size = 'medium',
+        selectedTab,
+        disabled = false,
+        tabId,
+        label,
+        iconName,
+        iconType,
+        onClick,
+        width,
+        ...props
+      }: TabProps,
+      ref,
+    ) => {
+      const selected = tabId && tabId === selectedTab?.tabId;
+      const onClickHandler = (e) => {
+        if (!disabled) {
+          onSelect && onSelect({tabId, label});
+          onClick && onClick(e);
+        }
+      };
+      return (
+        <UnstyledButton
+          {...props}
+          disabled={disabled}
+          className={classify(
+            css.button,
+            {
+              [css.selected]: selected === true,
+              [css.disabled]: disabled === true,
+              [css.mediumSize]: size === 'medium',
+              [css.smallSize]: size === 'small',
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onClickHandler}
+          style={{width}}
+          tabIndex={disabled ? '-1' : 0}
+          ref={ref}
+        >
+          <span
+            className={classify(
+              css.iconTextWrap,
+              {
+                [css.selected]: selected === true,
+                [css.disabled]: disabled === true,
+              },
+              classNames?.iconTextWrap,
+            )}
+          >
+            {iconName ? (
+              <Icon
+                name={iconName}
+                type={iconType}
+                size={'medium'}
+                className={classify(css.icon, {
+                  [css.disabled]: disabled === true,
+                })}
+              />
+            ) : null}
+            {size === TAB_SIZE.medium ? (
+              <ButtonTextMedium
+                color={TEXT_COLORS.secondary}
+                className={classify(css.tabContainer, {
+                  [css.disabled]: disabled === true,
+                })}
+              >
+                {label}
+              </ButtonTextMedium>
+            ) : (
+              <ButtonTextSmall
+                color={TEXT_COLORS.secondary}
+                className={classify(css.tabContainer, {
+                  [css.selected]: selected === true,
+                  [css.disabled]: disabled === true,
+                })}
+              >
+                {label}
+              </ButtonTextSmall>
+            )}
+          </span>
+        </UnstyledButton>
+      );
+    },
+  );
+Tab.name = Tab.displayName = 'Tab';

package/lib/components/Tab/Tab.module.css

@@ -0,0 +1,66 @@
+@value (colorFillPrimary, colorTextSecondary, colorFillNone, colorFocusPrimary, colorTextPrimary, colorTextDisabled) from '../../styles/variables/_color.css';
+
+@value (spaceXXSmall) from '../../styles/variables/_space.css';
+
+@value (sizeFluid, size42, size38) from '../../styles/variables/_size.css';
+
+@value (borderWidthTertiary) from '../../styles/variables/_border.css';
+
+.button {
+  border: borderWidthTertiary solid colorFillNone;
+  box-sizing: border-box;
+  display: flex;
+}
+
+.button.mediumSize {
+  height: size42;
+}
+
+.button.smallSize {
+  height: size38;
+}
+
+.button:focus {
+  border: borderWidthTertiary solid colorFocusPrimary;
+}
+
+.button:focus .tabContainer {
+  color: colorTextPrimary;
+}
+
+.button .disabled {
+  cursor: not-allowed;
+}
+
+.iconTextWrap {
+  display: flex;
+  flex-direction: row;
+  gap: spaceXXSmall;
+  align-items: center;
+  color: colorTextSecondary;
+  border-bottom: borderWidthTertiary solid colorFillNone;
+  height: sizeFluid;
+  white-space: nowrap;
+}
+
+.iconTextWrap.selected {
+  color: colorTextPrimary;
+  border-bottom: borderWidthTertiary solid colorFillPrimary;
+}
+
+.iconTextWrap.disabled {
+  color: colorTextDisabled;
+  border-bottom: borderWidthTertiary solid colorFillNone;
+}
+
+.icon {
+  color: inherit;
+}
+
+.tabContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: inherit;
+}

package/lib/components/Tab/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function () {
+    return _Tab.Tab;
+  }
+});
+Object.defineProperty(exports, "tabSizeOptions", {
+  enumerable: true,
+  get: function () {
+    return _Tab.tabSizeOptions;
+  }
+});
+var _Tab = require("./Tab");

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {TabProps} from './Tab';
+export {Tab, tabSizeOptions} from './Tab';

package/lib/components/TabList/TabDropdown.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabDropdown = 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 _Menu = require("../Menu");
+var _Tab = require("../Tab");
+var _TabDropdownModule = _interopRequireDefault(require("./TabDropdown.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 TabDropdown = _ref => {
+  let {
+    anchorPosition = 'bottom-start',
+    size,
+    onOptionSelect,
+    props,
+    classNames
+  } = _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))]
+  });
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref2 => {
+    let {
+      isOpen,
+      onOpen,
+      cancelNext,
+      clickAway
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "TabDropdown",
+      className: (0, _classify.classify)(_TabDropdownModule.default.tabDropdownContainer, classNames?.wrapper),
+      ref: menuBtnRef
+    }, /*#__PURE__*/React.createElement(_Tab.Tab, _extends({}, props?.tab, {
+      size: size,
+      ref: reference,
+      onClick: e => {
+        e.stopPropagation();
+        onOpen();
+      },
+      classNames: {
+        wrapper: _TabDropdownModule.default.dotTabWrapper,
+        iconTextWrap: _TabDropdownModule.default.dotTextWrap
+      }
+    })), isOpen && props?.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({}, props.menu, {
+      onSelect: option => {
+        onOptionSelect && onOptionSelect(option);
+        clickAway();
+      },
+      size: size
+    }))));
+  });
+};
+exports.TabDropdown = TabDropdown;

package/lib/components/TabList/TabDropdown.js.flow

@@ -0,0 +1,110 @@
+// @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 {MenuOption, MenuProps} from '../Menu';
+import {Menu} from '../Menu';
+import type {TabProps} from '../Tab';
+import {Tab} from '../Tab';
+
+import css from './TabDropdown.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type TabDropdownProps = {
+  anchorPosition?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end',
+  size?: 'medium' | 'small',
+  props?: {
+    tab: TabProps,
+    menu: MenuProps,
+  },
+  onOptionSelect?: (option: MenuOption) => mixed,
+  classNames?: ClassNames,
+  selected?: boolean,
+  disabled?: boolean,
+};
+
+export const TabDropdown = ({
+  anchorPosition = 'bottom-start',
+  size,
+  onOptionSelect,
+  props,
+  classNames,
+}: TabDropdownProps): 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))],
+  });
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
+        <div
+          data-testid="TabDropdown"
+          className={classify(css.tabDropdownContainer, classNames?.wrapper)}
+          ref={menuBtnRef}
+        >
+          <Tab
+            {...props?.tab}
+            size={size}
+            ref={reference}
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpen();
+            }}
+            classNames={{
+              wrapper: css.dotTabWrapper,
+              iconTextWrap: css.dotTextWrap,
+            }}
+          />
+          {isOpen && props?.menu && (
+            <div
+              onClickCapture={cancelNext}
+              ref={floating}
+              style={{
+                display: 'flex',
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+              }}
+            >
+              <Menu
+                {...props.menu}
+                onSelect={(option) => {
+                  onOptionSelect && onOptionSelect(option);
+                  clickAway();
+                }}
+                size={size}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/TabList/TabDropdown.module.css

@@ -0,0 +1,20 @@
+@value ( size36) from '../../styles/variables/_size.css';
+@value ( spaceXSmall, spaceNone) from '../../styles/variables/_size.css';
+
+.tabDropdownContainer {
+  display: flex;
+  position: relative;
+}
+
+.dotTabWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: inherit;
+  width: size36;
+}
+
+.dotTextWrap {
+  padding: spaceNone spaceXSmall;
+}