@spaced-out/ui-design-system 0.3.1 → 0.3.2

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.3.2](https://github.com/spaced-out/ui-design-system/compare/v0.3.1...v0.3.2) (2024-11-12)
+
+
+### Bug Fixes
+
+* add status indicator on sub menu link ([#286](https://github.com/spaced-out/ui-design-system/issues/286)) ([325c1fe](https://github.com/spaced-out/ui-design-system/commit/325c1fec30151d9fbba39f85ddc72d6b4d2d9cfb))
+
 ### [0.3.1](https://github.com/spaced-out/ui-design-system/compare/v0.3.0...v0.3.1) (2024-11-11)
 
 

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -10,6 +10,7 @@ var _Button = require("../Button");
 var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Icon = require("../Icon");
 var _Link = require("../Link");
+var _StatusIndicator = require("../StatusIndicator");
 var _Text = require("../Text");
 var _Tooltip = require("../Tooltip");
 var _SideMenuLinkModule = _interopRequireDefault(require("./SideMenuLink.module.css"));
@@ -182,6 +183,16 @@ const MENU_NAME_LIST = Object.freeze({
     title: 'Voiceflow',
     iconName: 'phone-volume',
     iconType: 'duotone'
+  },
+  broadcast: {
+    title: 'Broadcast',
+    iconName: 'bullhorn',
+    iconType: 'duotone'
+  },
+  liveAgentTransfer: {
+    title: 'Live Agent Transfer',
+    iconName: 'user-headset',
+    iconType: 'duotone'
   }
 });
 exports.MENU_NAME_LIST = MENU_NAME_LIST;
@@ -200,6 +211,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     rightSlot,
     to,
     customTitle,
+    status,
     ...restButtonProps
   } = _ref;
   const selected = selectedValue === pageNameKey;
@@ -236,13 +248,20 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tabIndex: disabled || to !== undefined ? -1 : tabIndex,
     disabled: disabled,
     key: pageNameKey
-  }), pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }), pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement("div", {
+    className: _SideMenuLinkModule.default.iconContainer
+  }, !opened && status && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
+    status: status,
+    classNames: {
+      wrapper: _SideMenuLinkModule.default.statusIndicatorBlock
+    }
+  }), /*#__PURE__*/React.createElement(_Icon.Icon, {
     type: MENU_NAME_LIST[pageNameKey].iconType,
     name: MENU_NAME_LIST[pageNameKey].iconName,
     size: "medium",
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SideMenuLinkModule.default.menuIcon
-  }) : null, opened ? /*#__PURE__*/React.createElement("div", {
+  })) : null, opened ? /*#__PURE__*/React.createElement("div", {
     className: _SideMenuLinkModule.default.menuLabelContainer
   }, pageNameKey && MENU_NAME_LIST[pageNameKey] ? isGroupMenuLink ? /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
     className: _SideMenuLinkModule.default.groupMenuLinkText

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -8,6 +8,8 @@ import {ConditionalWrapper} from '../ConditionalWrapper';
 import {Icon} from '../Icon';
 import type {BaseLinkProps} from '../Link';
 import {Link} from '../Link';
+import type {StatusSemanticType} from '../StatusIndicator';
+import {StatusIndicator} from '../StatusIndicator';
 import {BodyMedium, SubTitleSmall, TEXT_COLORS} from '../Text';
 import type {BaseTooltipProps} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
@@ -181,6 +183,16 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'phone-volume',
     iconType: 'duotone',
   },
+  broadcast: {
+    title: 'Broadcast',
+    iconName: 'bullhorn',
+    iconType: 'duotone',
+  },
+  liveAgentTransfer: {
+    title: 'Live Agent Transfer',
+    iconName: 'user-headset',
+    iconType: 'duotone',
+  },
 });
 
 type ClassNames = $ReadOnly<{wrapper?: string}>;
@@ -201,6 +213,7 @@ export type SideMenuLinkProps = {
   to?: string,
   rightSlot?: React.Node,
   linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
+  status?: StatusSemanticType,
   ...
 };
 
@@ -223,8 +236,10 @@ export const SideMenuLink: React$AbstractComponent<
       rightSlot,
       to,
       customTitle,
+      status,
       ...restButtonProps
     }: SideMenuLinkProps,
+
     ref,
   ): React.Node => {
     const selected = selectedValue === pageNameKey;
@@ -279,13 +294,23 @@ export const SideMenuLink: React$AbstractComponent<
             key={pageNameKey}
           >
             {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
-              <Icon
-                type={MENU_NAME_LIST[pageNameKey].iconType}
-                name={MENU_NAME_LIST[pageNameKey].iconName}
-                size="medium"
-                color={TEXT_COLORS.inverseSecondary}
-                className={css.menuIcon}
-              />
+              <div className={css.iconContainer}>
+                {!opened && status && (
+                  <StatusIndicator
+                    status={status}
+                    classNames={{
+                      wrapper: css.statusIndicatorBlock,
+                    }}
+                  />
+                )}
+                <Icon
+                  type={MENU_NAME_LIST[pageNameKey].iconType}
+                  name={MENU_NAME_LIST[pageNameKey].iconName}
+                  size="medium"
+                  color={TEXT_COLORS.inverseSecondary}
+                  className={css.menuIcon}
+                />
+              </div>
             ) : null}
             {opened ? (
               <div className={css.menuLabelContainer}>

package/lib/components/SideMenuLink/SideMenuLink.module.css

@@ -120,3 +120,14 @@
   justify-content: space-between;
   padding-right: spaceXSmall;
 }
+
+.iconContainer {
+  display: flex;
+  position: relative;
+}
+
+.statusIndicatorBlock {
+  position: absolute;
+  top: calc(spaceNone - (spaceXXSmall/2));
+  right: calc(spaceNone - (spaceXXSmall/2));
+}

package/package.json

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