@spaced-out/ui-design-system 0.1.47 → 0.1.48-beta.0

package/.cspell/custom-words.txt

@@ -1,3 +1,5 @@
+Aditya
+aditya-kaushal
 amet
 Anant
 argstable

package/.github/workflows/publish_to_npm.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, nsfmc, ashwini-sensehq
+          ALLOWED_USERS: superrover, Anant-Raj, nsfmc, ashwini-sensehq, aditya-kaushal
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.1.48-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.47...v0.1.48-beta.0) (2023-09-04)
+
+
+### Bug Fixes
+
+* submenu updates ([#138](https://github.com/spaced-out/ui-design-system/issues/138)) ([71b0c7a](https://github.com/spaced-out/ui-design-system/commit/71b0c7ad9a537c8d42968bf5c773390c6f080329))
+
 ### [0.1.47](https://github.com/spaced-out/ui-design-system/compare/v0.1.46...v0.1.47) (2023-08-30)
 
 

package/design-tokens/color/app-color.json

@@ -173,6 +173,9 @@
         "default": {
           "value": "{baseColor.indigo.920.value}"
         }
+      },
+      "star": {
+        "value": "{baseColor.yellow.500.value}"
       }
     },
     "gray.lightest": {

package/lib/components/Badge/Badge.js

@@ -16,10 +16,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const BADGE_COLOR = Object.freeze({
   gray: _color.colorGrayLightest,
   red: _color.colorDangerLightest,
+  redDark: _color.colorDanger,
   orange: _color.colorWarningLightest,
+  orangeDark: _color.colorWarning,
   green: _color.colorSuccessLightest,
+  greenDark: _color.colorSuccess,
   blue: _color.colorInformationLightest,
-  indigo: _color.colorNeutralLightest
+  blueDark: _color.colorInformation,
+  indigo: _color.colorNeutralLightest,
+  indigoDark: _color.colorNeutral
 });
 exports.BADGE_COLOR = BADGE_COLOR;
 const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {

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

@@ -3,11 +3,16 @@
 import * as React from 'react';
 
 import {
+  colorDanger,
   colorDangerLightest,
   colorGrayLightest,
+  colorInformation,
   colorInformationLightest,
+  colorNeutral,
   colorNeutralLightest,
+  colorSuccess,
   colorSuccessLightest,
+  colorWarning,
   colorWarningLightest,
 } from '../../styles/variables/_color';
 import classify from '../../utils/classify';
@@ -21,10 +26,15 @@ type ClassNames = $ReadOnly<{wrapper?: string, text?: string}>;
 export const BADGE_COLOR = Object.freeze({
   gray: colorGrayLightest,
   red: colorDangerLightest,
+  redDark: colorDanger,
   orange: colorWarningLightest,
+  orangeDark: colorWarning,
   green: colorSuccessLightest,
+  greenDark: colorSuccess,
   blue: colorInformationLightest,
+  blueDark: colorInformation,
   indigo: colorNeutralLightest,
+  indigoDark: colorNeutral,
 });
 
 export type BadgeColorType = $Keys<typeof BADGE_COLOR>;

package/lib/components/SubMenu/SubMenu.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SubMenuItemText = exports.SubMenuItemIcon = exports.SubMenuItemAction = exports.SubMenuItem = exports.SubMenuGroup = exports.SubMenu = void 0;
+exports.SubMenu = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
@@ -13,169 +13,23 @@ var _SubMenuModule = _interopRequireDefault(require("./SubMenu.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 SubMenuItemIcon = _ref => {
-  let {
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/React.createElement(_Icon.Icon, _extends({}, props, {
-    size: "small",
-    color: _Text.TEXT_COLORS.inverseSecondary,
-    className: (0, _classify.default)(_SubMenuModule.default.menuIcon, className)
-  }));
-};
-exports.SubMenuItemIcon = SubMenuItemIcon;
-SubMenuItemIcon.displayName = 'SubMenuItemIcon';
-const SubMenuItemText = _ref2 => {
-  let {
-    children,
-    className,
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, _extends({}, props, {
-    className: (0, _classify.default)(_SubMenuModule.default.subMenuItemText, className),
-    color: _Text.TEXT_COLORS.inversePrimary
-  }), children);
-};
-exports.SubMenuItemText = SubMenuItemText;
-SubMenuItemText.displayName = 'SubMenuItemText';
-const SubMenuItemAction = _ref3 => {
-  let {
-    children,
-    className,
-    ...props
-  } = _ref3;
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: (0, _classify.default)(_SubMenuModule.default.subMenuItemAction, className)
-  }), children);
-};
-exports.SubMenuItemAction = SubMenuItemAction;
-SubMenuItemAction.displayName = 'SubMenuItemAction';
-const SubMenuItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
-  let {
-    children,
-    selectedMenuKey,
-    disabled,
-    classNames,
-    onChange,
-    menuKey,
-    ...props
-  } = _ref4;
-  const onChangeHandler = () => {
-    if (!disabled) {
-      onChange && onChange(menuKey);
-    }
-  };
-  const onKeyDownHandler = e => {
-    if (e.key === 'Enter') {
-      onChangeHandler();
-    }
-  };
-  const selected = selectedMenuKey === menuKey;
-  const getNamedComp = comp => {
-    const childrenArray = React.Children.toArray(children);
-    if (childrenArray.length) {
-      const nodes = [];
-      for (const child of childrenArray) {
-        if (child?.type?.displayName === comp) {
-          nodes.push( /*#__PURE__*/React.cloneElement(child, {
-            selected,
-            disabled
-          }));
-        }
-      }
-      return nodes.length > 1 ? nodes : nodes[0];
-    }
-    return null;
-  };
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: (0, _classify.default)(_SubMenuModule.default.menuItem, {
-      [_SubMenuModule.default.selected]: selected,
-      [_SubMenuModule.default.disabled]: disabled
-    }, classNames?.wrapper),
-    onKeyDown: onKeyDownHandler,
-    onClick: onChangeHandler,
-    ref: ref,
-    tabIndex: disabled ? '-1' : 0
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _SubMenuModule.default.menuIconName
-  }, getNamedComp('SubMenuItemIcon'), getNamedComp('SubMenuItemText')), getNamedComp('SubMenuItemAction'));
-});
-exports.SubMenuItem = SubMenuItem;
-const SubMenuGroup = _ref5 => {
-  let {
-    children,
-    groupTitle,
-    collapsible = false,
-    disabled = false,
-    onChange,
-    selectedMenuKey,
-    classNames
-  } = _ref5;
-  const [collapsed, setCollapsed] = React.useState(false);
-  const collapseHandler = () => {
-    collapsible && setCollapsed(!collapsed);
-  };
-  const onChangeHandler = value => {
-    if (onChange) {
-      onChange(value);
-    }
-  };
-  const onKeyDownHandlerHeader = e => {
-    if (e.key === 'Enter') {
-      collapseHandler();
-    }
-  };
-  const childrenWithProps = React.Children.map(children, child => {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      const {
-        disabled: disabledChild
-      } = child.props;
-      return /*#__PURE__*/React.cloneElement(child, {
-        selectedMenuKey,
-        onChange: onChangeHandler,
-        disabled: disabledChild || disabled
-      });
-    }
-    return child;
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupWrapper, classNames?.wrapper)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, {
-      [_SubMenuModule.default.collapsible]: collapsible
-    }, classNames?.groupHeader),
-    onClick: collapseHandler,
-    onKeyDown: onKeyDownHandlerHeader,
-    tabIndex: collapsible ? 0 : -1
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
-    color: _Text.TEXT_COLORS.inverseSecondary,
-    className: _SubMenuModule.default.groupTitle
-  }, groupTitle), collapsible && /*#__PURE__*/React.createElement(_Icon.Icon, {
-    color: _Text.TEXT_COLORS.inverseSecondary,
-    name: collapsed ? 'chevron-down' : 'chevron-up',
-    size: "small"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.default)(_SubMenuModule.default.subMenuGroup, {
-      [_SubMenuModule.default.collapsed]: collapsible && collapsed
-    }, classNames?.menuGroup)
-  }, childrenWithProps));
-};
-exports.SubMenuGroup = SubMenuGroup;
-const SubMenu = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+
+const SubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     classNames,
     children,
     title,
+    titleIcon,
+    titleIconSize,
+    titleIconType,
     onClose,
     showClose = false
-  } = _ref6;
+  } = _ref;
   const childrenWithProps = React.Children.map(children, child => {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       return /*#__PURE__*/React.createElement("div", {
         className: _SubMenuModule.default.menuChildWrap
-      }, child);
+      }, /*#__PURE__*/React.cloneElement(child, {}));
     }
   });
   return /*#__PURE__*/React.createElement("div", {
@@ -183,10 +37,18 @@ const SubMenu = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: _SubMenuModule.default.subMenuTitleAndButton
-  }, /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _SubMenuModule.default.subMenuTitleWrapper
+  }, !!titleIcon && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    color: _Text.TEXT_COLORS.inverseSecondary,
+    name: titleIcon,
+    type: titleIconType,
+    size: titleIconSize,
+    className: _SubMenuModule.default.titleIcon
+  }), /*#__PURE__*/React.createElement(_Text.SubTitleMedium, {
     className: _SubMenuModule.default.subMenuHeader,
     color: _Text.TEXT_COLORS.inversePrimary
-  }, title), showClose && /*#__PURE__*/React.createElement(_Button.Button, {
+  }, title)), showClose && /*#__PURE__*/React.createElement(_Button.Button, {
     ariaLabel: "Icon Button",
     iconRightName: "close",
     onClick: onClose,

package/lib/components/SubMenu/SubMenu.js.flow

@@ -2,249 +2,23 @@
 
 import * as React from 'react';
 
-import type {ColorTypes} from '../../types/typography';
 import classify from '../../utils/classify';
 import {Button} from '../Button';
-import type {IconProps} from '../Icon';
+import type {IconSize, IconType} from '../Icon';
 import {Icon} from '../Icon';
-import type {TextProps} from '../Text';
-import {
-  ButtonTextSmall,
-  SubTitleExtraSmall,
-  SubTitleMedium,
-  TEXT_COLORS,
-} from '../Text';
+import {SubTitleMedium, TEXT_COLORS} from '../Text';
 
 import css from './SubMenu.module.css';
 
 
 type ClassNames = $ReadOnly<{wrapper?: string}>;
 
-export const SubMenuItemIcon = ({
-  className,
-  ...props
-}: IconProps): React.Node => (
-  <Icon
-    {...props}
-    size="small"
-    color={TEXT_COLORS.inverseSecondary}
-    className={classify(css.menuIcon, className)}
-  />
-);
-
-SubMenuItemIcon.displayName = 'SubMenuItemIcon';
-
-export const SubMenuItemText = ({
-  children,
-  className,
-  ...props
-}: TextProps): React.Node => (
-  <ButtonTextSmall
-    {...props}
-    className={classify(css.subMenuItemText, className)}
-    color={TEXT_COLORS.inversePrimary}
-  >
-    {children}
-  </ButtonTextSmall>
-);
-SubMenuItemText.displayName = 'SubMenuItemText';
-
-export type SubMenuItemActionProps = {
-  children?: React.Node,
-  color?: ColorTypes,
-  className?: string,
-  ...
-};
-export const SubMenuItemAction = ({
-  children,
-  className,
-  ...props
-}: SubMenuItemActionProps): React.Node => (
-  <div {...props} className={classify(css.subMenuItemAction, className)}>
-    {children}
-  </div>
-);
-SubMenuItemAction.displayName = 'SubMenuItemAction';
-
-export type SubMenuItemProps = {
-  classNames?: ClassNames,
-  children?: React.Node,
-  selectedMenuKey?: string,
-  disabled?: boolean,
-  onChange?: (selectedMenuKey: string) => mixed,
-  menuKey: string,
-  ...
-};
-
-export const SubMenuItem: React$AbstractComponent<
-  SubMenuItemProps,
-  HTMLElement,
-> = React.forwardRef(
-  (
-    {
-      children,
-      selectedMenuKey,
-      disabled,
-      classNames,
-      onChange,
-      menuKey,
-      ...props
-    }: SubMenuItemProps,
-    ref,
-  ): React.Node => {
-    const onChangeHandler = () => {
-      if (!disabled) {
-        onChange && onChange(menuKey);
-      }
-    };
-
-    const onKeyDownHandler = (e) => {
-      if (e.key === 'Enter') {
-        onChangeHandler();
-      }
-    };
-
-    const selected = selectedMenuKey === menuKey;
-
-    const getNamedComp = (comp: string) => {
-      const childrenArray = React.Children.toArray(children);
-      if (childrenArray.length) {
-        const nodes: React.Node[] = [];
-        for (const child of childrenArray) {
-          if (child?.type?.displayName === comp) {
-            nodes.push(
-              React.cloneElement(child, {
-                selected,
-                disabled,
-              }),
-            );
-          }
-        }
-        return nodes.length > 1 ? nodes : nodes[0];
-      }
-      return null;
-    };
-
-    return (
-      <div
-        {...props}
-        className={classify(
-          css.menuItem,
-          {
-            [css.selected]: selected,
-            [css.disabled]: disabled,
-          },
-          classNames?.wrapper,
-        )}
-        onKeyDown={onKeyDownHandler}
-        onClick={onChangeHandler}
-        ref={ref}
-        tabIndex={disabled ? '-1' : 0}
-      >
-        <div className={css.menuIconName}>
-          {getNamedComp('SubMenuItemIcon')}
-          {getNamedComp('SubMenuItemText')}
-        </div>
-        {getNamedComp('SubMenuItemAction')}
-      </div>
-    );
-  },
-);
-
-type SubMenuGroupClassNames = $ReadOnly<{
-  wrapper?: string,
-  groupHeader?: string,
-  menuGroup?: string,
-}>;
-
-export type SubMenuGroupProps = {
-  children?: React.Node,
-  groupTitle?: string,
-  collapsible?: boolean,
-  disabled?: boolean,
-  onChange?: (value: string) => mixed,
-  selectedMenuKey?: string,
-  classNames?: SubMenuGroupClassNames,
-};
-
-export const SubMenuGroup = ({
-  children,
-  groupTitle,
-  collapsible = false,
-  disabled = false,
-  onChange,
-  selectedMenuKey,
-  classNames,
-}: SubMenuGroupProps): React.Node => {
-  const [collapsed, setCollapsed] = React.useState(false);
-  const collapseHandler = () => {
-    collapsible && setCollapsed(!collapsed);
-  };
-  const onChangeHandler = (value) => {
-    if (onChange) {
-      onChange(value);
-    }
-  };
-  const onKeyDownHandlerHeader = (e) => {
-    if (e.key === 'Enter') {
-      collapseHandler();
-    }
-  };
-  const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      const {disabled: disabledChild} = child.props;
-      return React.cloneElement(child, {
-        selectedMenuKey,
-        onChange: onChangeHandler,
-        disabled: disabledChild || disabled,
-      });
-    }
-    return child;
-  });
-  return (
-    <div className={classify(css.subMenuGroupWrapper, classNames?.wrapper)}>
-      <div
-        className={classify(
-          css.subMenuGroupHeader,
-          {[css.collapsible]: collapsible},
-          classNames?.groupHeader,
-        )}
-        onClick={collapseHandler}
-        onKeyDown={onKeyDownHandlerHeader}
-        tabIndex={collapsible ? 0 : -1}
-      >
-        <SubTitleExtraSmall
-          color={TEXT_COLORS.inverseSecondary}
-          className={css.groupTitle}
-        >
-          {groupTitle}
-        </SubTitleExtraSmall>
-        {collapsible && (
-          <Icon
-            color={TEXT_COLORS.inverseSecondary}
-            name={collapsed ? 'chevron-down' : 'chevron-up'}
-            size="small"
-          />
-        )}
-      </div>
-      <div
-        className={classify(
-          css.subMenuGroup,
-          {
-            [css.collapsed]: collapsible && collapsed,
-          },
-          classNames?.menuGroup,
-        )}
-      >
-        {childrenWithProps}
-      </div>
-    </div>
-  );
-};
-
 export type SubMenuProps = {
   classNames?: ClassNames,
   title: string,
+  titleIcon?: string,
+  titleIconSize?: IconSize,
+  titleIconType?: IconType,
   children?: React.Node,
   onClose?: () => mixed,
   showClose?: boolean,
@@ -253,12 +27,25 @@ export type SubMenuProps = {
 export const SubMenu: React$AbstractComponent<SubMenuProps, HTMLDivElement> =
   React.forwardRef<SubMenuProps, HTMLDivElement>(
     (
-      {classNames, children, title, onClose, showClose = false}: SubMenuProps,
+      {
+        classNames,
+        children,
+        title,
+        titleIcon,
+        titleIconSize,
+        titleIconType,
+        onClose,
+        showClose = false,
+      }: SubMenuProps,
       ref,
     ): React.Node => {
       const childrenWithProps = React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
-          return <div className={css.menuChildWrap}>{child}</div>;
+          return (
+            <div className={css.menuChildWrap}>
+              {React.cloneElement(child, {})}
+            </div>
+          );
         }
       });
 
@@ -268,12 +55,23 @@ export const SubMenu: React$AbstractComponent<SubMenuProps, HTMLDivElement> =
           ref={ref}
         >
           <div className={css.subMenuTitleAndButton}>
-            <SubTitleMedium
-              className={css.subMenuHeader}
-              color={TEXT_COLORS.inversePrimary}
-            >
-              {title}
-            </SubTitleMedium>
+            <div className={css.subMenuTitleWrapper}>
+              {!!titleIcon && (
+                <Icon
+                  color={TEXT_COLORS.inverseSecondary}
+                  name={titleIcon}
+                  type={titleIconType}
+                  size={titleIconSize}
+                  className={css.titleIcon}
+                />
+              )}
+              <SubTitleMedium
+                className={css.subMenuHeader}
+                color={TEXT_COLORS.inversePrimary}
+              >
+                {title}
+              </SubTitleMedium>
+            </div>
             {showClose && (
               <Button
                 ariaLabel="Icon Button"