@spaced-out/ui-design-system 0.1.94-beta.6 → 0.1.94-beta.8

package/lib/components/Menu/Menu.module.css

@@ -22,6 +22,7 @@
   size160,
   size42,
   size34,
+  size50,
   size300,
   size240,
   size228,
@@ -34,12 +35,12 @@
   spaceSmall,
   spaceXSmall,
   spaceXXSmall,
-  spaceMedium,
-  spaceNone
+  spaceMedium
 ) from '../../styles/variables/_space.css';
 
 @value (
-  elevationMenu
+  elevationMenu,
+  elevationCard
 ) from '../../styles/variables/_elevation.css';
 
 .menuCard {
@@ -49,13 +50,21 @@
   background-color: colorBackgroundTertiary;
   display: flex;
   flex-flow: column;
-  padding: spaceSmall spaceXSmall;
+  padding: spaceXSmall;
   min-width: size160;
   border-radius: borderRadiusMedium;
   overflow: auto;
   z-index: elevationMenu;
 }
 
+.menuCardTopPaddingZero {
+  padding-top: spaceNone;
+}
+
+.menuCardBottomPaddingZero {
+  padding-bottom: spaceNone;
+}
+
 .menuCard:empty {
   padding: spaceNone;
   border: none;
@@ -67,12 +76,30 @@
   max-height: size276;
 }
 
+.mediumWithHeader,
+.mediumWithFooter {
+  max-height: calc(size276 + size50);
+}
+
+.mediumWithHeaderAndFooter {
+  max-height: calc(size276 + size50 + size50);
+}
+
 .small {
   width: size240;
   min-width: size240;
   max-height: size228;
 }
 
+.smallWithHeader,
+.smallWithHeaderAndFooter {
+  max-height: calc(size228 + size50);
+}
+
+.smallWithHeaderAndFooter {
+  max-height: calc(size228 + size50 + size50);
+}
+
 .fluid {
   width: sizeFluid;
   min-width: size160;
@@ -223,3 +250,42 @@
   margin-bottom: spaceXSmall;
   margin-left: spaceSmall;
 }
+
+.menuHeader {
+  position: sticky;
+  background-color: colorBackgroundTertiary;
+  padding: spaceXSmall spaceNone;
+  top: spaceNone;
+  margin-bottom: spaceXSmall;
+  z-index: calc(elevationCard/4);
+  min-height: size50;
+  max-height: size50;
+}
+
+.menuHeader::after {
+  content: '';
+  position: absolute;
+  left: calc(spaceXSmall * -1);
+  right: calc(spaceXSmall * -1);
+  bottom: spaceNone;
+  border-bottom: borderWidthPrimary solid colorBorderPrimary;
+}
+
+.menuFooter {
+  position: sticky;
+  background-color: colorBackgroundTertiary;
+  padding: spaceXSmall spaceNone;
+  bottom: spaceNone;
+  margin-top: spaceXSmall;
+  min-height: size50;
+  max-height: size50;
+}
+
+.menuFooter::before {
+  content: '';
+  position: absolute;
+  left: calc(spaceXSmall * -1);
+  right: calc(spaceXSmall * -1);
+  top: spaceNone;
+  border-top: borderWidthPrimary solid colorBorderPrimary;
+}

package/lib/components/OptionButton/OptionButton.js

@@ -34,7 +34,8 @@ const OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ariaLabel,
     actionType,
     tooltip,
-    classNames
+    classNames,
+    clickAwayRef
   } = _ref;
   const [iconName, setIconName] = React.useState('chevron-down');
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
@@ -87,7 +88,8 @@ const OptionButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onMenuClose && onMenuClose();
     },
     onOptionSelect: onOptionSelect,
-    size: size
+    size: size,
+    clickAwayRef: clickAwayRef
   }));
 });
 exports.OptionButton = OptionButton;

package/lib/components/OptionButton/OptionButton.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import type {ClickAwayRefType} from '../../utils/click-away';
 import type {ButtonProps} from '../Button';
 import {Button} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
@@ -39,6 +40,7 @@ export type OptionButtonProps = {
   onMenuClose?: () => mixed,
   tooltip?: OptionButtonTooltipProps,
   classNames?: ClassNames,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -66,6 +68,7 @@ export const OptionButton: React$AbstractComponent<
       actionType,
       tooltip,
       classNames,
+      clickAwayRef,
     }: OptionButtonProps,
     ref,
   ): React.Node => {
@@ -142,6 +145,7 @@ export const OptionButton: React$AbstractComponent<
           }}
           onOptionSelect={onOptionSelect}
           size={size}
+          clickAwayRef={clickAwayRef}
         />
       </div>
     );

package/lib/components/OptionButton/SimpleOptionButton.js

@@ -28,6 +28,10 @@ const SimpleOptionButtonBase = (props, ref) => {
     resolveSecondaryLabel,
     children,
     menuSize = 'small',
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...buttonProps
   } = props;
   const [optionButtonSelectedKeys, setOptionButtonSelectedKeys] = React.useState(selectedKeys);
@@ -59,6 +63,7 @@ const SimpleOptionButtonBase = (props, ref) => {
     onOptionSelect: handleOptionChange,
     onMenuOpen: onMenuOpen,
     onMenuClose: onMenuClose,
+    clickAwayRef: clickAwayRef,
     menu: {
       isFluid: false,
       options,
@@ -67,7 +72,10 @@ const SimpleOptionButtonBase = (props, ref) => {
       allowSearch,
       resolveLabel,
       resolveSecondaryLabel,
-      size: menuSize
+      size: menuSize,
+      virtualization: menuVirtualization,
+      header,
+      footer
     }
   }), children);
 };

package/lib/components/OptionButton/SimpleOptionButton.js.flow

@@ -2,10 +2,11 @@
 
 import * as React from 'react';
 
+import type {ClickAwayRefType} from '../../utils/click-away';
 import {getSelectedKeysFromSelectedOption} from '../../utils/menu';
 import type {ButtonProps} from '../Button';
 import type {AnchorType} from '../ButtonDropdown';
-import type {MenuOption, MenuOptionsVariant} from '../Menu';
+import type {MenuOption, MenuOptionsVariant, Virtualization} from '../Menu';
 
 import type {OptionButtonTooltipProps} from './OptionButton';
 import {OptionButton} from './OptionButton';
@@ -36,10 +37,12 @@ export type SimpleOptionButtonProps = {
 
   // Menu props
   options?: Array<MenuOption>,
-
   optionsVariant?: MenuOptionsVariant,
   allowSearch?: boolean,
   selectedKeys?: Array<string>,
+  menuVirtualization?: Virtualization,
+  header?: React.Node,
+  footer?: React.Node,
 
   // events
   onOptionSelect?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -50,6 +53,7 @@ export type SimpleOptionButtonProps = {
   // Resolvers
   resolveLabel?: (option: MenuOption) => string | React.Node,
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  clickAwayRef?: ClickAwayRefType,
   ...
 };
 
@@ -71,6 +75,10 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
     resolveSecondaryLabel,
     children,
     menuSize = 'small',
+    menuVirtualization,
+    header,
+    footer,
+    clickAwayRef,
     ...buttonProps
   } = props;
 
@@ -116,6 +124,7 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
       onOptionSelect={handleOptionChange}
       onMenuOpen={onMenuOpen}
       onMenuClose={onMenuClose}
+      clickAwayRef={clickAwayRef}
       menu={{
         isFluid: false,
         options,
@@ -125,6 +134,9 @@ const SimpleOptionButtonBase = (props: SimpleOptionButtonProps, ref) => {
         resolveLabel,
         resolveSecondaryLabel,
         size: menuSize,
+        virtualization: menuVirtualization,
+        header,
+        footer,
       }}
     >
       {children}

package/lib/components/PageTitle/PageTitle.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exports.PAGE_NAME_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _PageTitleModule = _interopRequireDefault(require("./PageTitle.module.css"));
@@ -187,7 +188,9 @@ const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     classNames,
     children,
-    pageNameKey
+    pageNameKey,
+    showBackButton,
+    onBack
   } = _ref4;
   const getNamedComp = comp => {
     const childrenArray = React.Children.toArray(children);
@@ -202,19 +205,28 @@ const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     }
     return null;
   };
+  const handleBack = () => {
+    onBack && onBack();
+  };
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "PageTitle",
     className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper),
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot)
-  }, pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _PageTitleModule.default.headerWithBackBtn
+  }, showBackButton && /*#__PURE__*/React.createElement(_Button.Button, {
+    onClick: handleBack,
+    type: "tertiary",
+    iconLeftName: "chevron-left"
+  }), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
     type: PAGE_NAME_LIST[pageNameKey].iconType,
     name: PAGE_NAME_LIST[pageNameKey].iconName,
     size: "medium",
     color: _Text.TEXT_COLORS.primary,
     swapOpacity: PAGE_NAME_LIST[pageNameKey].iconSwapOpacity
-  })) : getNamedComp('PageName'), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
+  })) : getNamedComp('PageName')), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot)
   }, getNamedComp('RightSlot')));
 });

package/lib/components/PageTitle/PageTitle.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {TEXT_COLORS, TitleMedium} from '../Text';
 
@@ -19,6 +20,8 @@ export type PageTitleProps = {
   classNames?: ClassNames,
   children?: React.Node,
   pageNameKey?: string,
+  showBackButton?: boolean,
+  onBack?: () => void,
 };
 
 export const PAGE_NAME_LIST = Object.freeze({
@@ -204,7 +207,10 @@ export const PageTitle: React$AbstractComponent<
   PageTitleProps,
   HTMLDivElement,
 > = React.forwardRef<PageTitleProps, HTMLDivElement>(
-  ({classNames, children, pageNameKey}: PageTitleProps, ref): React.Node => {
+  (
+    {classNames, children, pageNameKey, showBackButton, onBack}: PageTitleProps,
+    ref,
+  ): React.Node => {
     const getNamedComp = (comp: string) => {
       const childrenArray = React.Children.toArray(children);
       if (childrenArray.length) {
@@ -219,6 +225,10 @@ export const PageTitle: React$AbstractComponent<
       return null;
     };
 
+    const handleBack = () => {
+      onBack && onBack();
+    };
+
     return (
       <div
         data-testid="PageTitle"
@@ -226,20 +236,29 @@ export const PageTitle: React$AbstractComponent<
         ref={ref}
       >
         <div className={classify(css.leftSlot, classNames?.leftSlot)}>
-          {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
-            <PageName>
-              <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
-              <Icon
-                type={PAGE_NAME_LIST[pageNameKey].iconType}
-                name={PAGE_NAME_LIST[pageNameKey].iconName}
-                size="medium"
-                color={TEXT_COLORS.primary}
-                swapOpacity={PAGE_NAME_LIST[pageNameKey].iconSwapOpacity}
+          <div className={css.headerWithBackBtn}>
+            {showBackButton && (
+              <Button
+                onClick={handleBack}
+                type="tertiary"
+                iconLeftName="chevron-left"
               />
-            </PageName>
-          ) : (
-            getNamedComp('PageName')
-          )}
+            )}
+            {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
+              <PageName>
+                <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
+                <Icon
+                  type={PAGE_NAME_LIST[pageNameKey].iconType}
+                  name={PAGE_NAME_LIST[pageNameKey].iconName}
+                  size="medium"
+                  color={TEXT_COLORS.primary}
+                  swapOpacity={PAGE_NAME_LIST[pageNameKey].iconSwapOpacity}
+                />
+              </PageName>
+            ) : (
+              getNamedComp('PageName')
+            )}
+          </div>
           {getNamedComp('TabSlot')}
         </div>
         <div className={classify(css.rightSlot, classNames?.rightSlot)}>

package/lib/components/PageTitle/PageTitle.module.css

@@ -1,7 +1,7 @@
 @value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
-@value (spaceNone, spaceXSmall, spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';
+@value (spaceNone, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
 
-@value (sizeFluid, size60) from '../../styles/variables/_size.css';
+@value (sizeFluid) from '../../styles/variables/_size.css';
 
 .pageTitleWrapper {
   composes: borderBottomPrimary from '../../styles/border.module.css';
@@ -10,9 +10,8 @@
   flex-direction: row;
   justify-content: space-between;
   box-sizing: border-box;
-  padding: spaceSmall spaceLarge spaceXSmall spaceLarge;
+  padding: spaceSmall spaceMedium;
   width: sizeFluid;
-  min-height: size60;
   gap: spaceMedium;
   height: fit-content;
 }
@@ -21,6 +20,7 @@
   display: flex;
   flex-direction: column;
   gap: spaceXSmall;
+  justify-content: center;
 }
 
 .pageTitle {
@@ -36,3 +36,9 @@
   flex-direction: column;
   justify-content: flex-end;
 }
+
+.headerWithBackBtn {
+  display: flex;
+  gap: spaceXSmall;
+  align-items: center;
+}

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -7,8 +7,10 @@ exports.SideMenuLink = exports.MENU_NAME_LIST = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
+var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
 var _SideMenuLinkModule = _interopRequireDefault(require("./SideMenuLink.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); }
@@ -41,7 +43,7 @@ const MENU_NAME_LIST = Object.freeze({
     iconType: 'duotone'
   },
   analytics: {
-    title: 'Analytics',
+    title: 'Analytics & Data',
     iconName: 'chart-column',
     iconType: 'duotone'
   },
@@ -50,6 +52,11 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'messages',
     iconType: 'duotone'
   },
+  messages: {
+    title: 'Messaging',
+    iconName: 'messages',
+    iconType: 'duotone'
+  },
   chatbot: {
     title: 'Chatbot',
     iconName: 'message-bot',
@@ -145,13 +152,18 @@ const MENU_NAME_LIST = Object.freeze({
     iconName: 'pager',
     iconType: 'duotone'
   },
+  sourcing: {
+    title: 'Sourcing',
+    iconName: 'browser',
+    iconType: 'duotone'
+  },
   earnings: {
     title: 'Earnings',
     iconName: 'wallet',
     iconType: 'duotone'
   },
   settings: {
-    title: 'Settings',
+    title: 'Configuration',
     iconName: 'gear',
     iconType: 'duotone'
   }
@@ -166,6 +178,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     selectedValue,
     onChange,
     tabIndex = 0,
+    tooltip,
     ...restButtonProps
   } = _ref;
   const selected = selectedValue === pageNameKey;
@@ -173,7 +186,12 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const onChangeHandler = e => {
     onChange && onChange(e, pageNameKey);
   };
-  return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
+  return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: Boolean(!opened && !inActive),
+    wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({
+      body: MENU_NAME_LIST[pageNameKey].title
+    }, tooltip), children)
+  }, /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, restButtonProps, {
     className: (0, _classify.default)(_SideMenuLinkModule.default.linkWrapper, {
       [_SideMenuLinkModule.default.selected]: selected,
       [_SideMenuLinkModule.default.disabled]: disabled,
@@ -182,7 +200,8 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }, classNames?.wrapper),
     onClick: onChangeHandler,
     ref: ref,
-    tabIndex: disabled ? -1 : tabIndex
+    tabIndex: disabled ? -1 : tabIndex,
+    disabled: disabled
   }), pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     type: MENU_NAME_LIST[pageNameKey].iconType,
     name: MENU_NAME_LIST[pageNameKey].iconName,
@@ -192,6 +211,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }) : null, pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SideMenuLinkModule.default.menuText
-  }, MENU_NAME_LIST[pageNameKey].title) : null);
+  }, MENU_NAME_LIST[pageNameKey].title) : null));
 });
-exports.SideMenuLink = SideMenuLink;
+exports.SideMenuLink = SideMenuLink;
+SideMenuLink.displayName = 'SideMenuLink';

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

@@ -4,8 +4,11 @@ import * as React from 'react';
 
 import classify from '../../utils/classify';
 import {UnstyledButton} from '../Button';
+import {ConditionalWrapper} from '../ConditionalWrapper';
 import {Icon} from '../Icon';
 import {SubTitleSmall, TEXT_COLORS} from '../Text';
+import type {BaseTooltipProps} from '../Tooltip';
+import {Tooltip} from '../Tooltip';
 
 import css from './SideMenuLink.module.css';
 
@@ -37,7 +40,7 @@ export const MENU_NAME_LIST = Object.freeze({
     iconType: 'duotone',
   },
   analytics: {
-    title: 'Analytics',
+    title: 'Analytics & Data',
     iconName: 'chart-column',
     iconType: 'duotone',
   },
@@ -46,6 +49,11 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'messages',
     iconType: 'duotone',
   },
+  messages: {
+    title: 'Messaging',
+    iconName: 'messages',
+    iconType: 'duotone',
+  },
   chatbot: {
     title: 'Chatbot',
     iconName: 'message-bot',
@@ -141,13 +149,18 @@ export const MENU_NAME_LIST = Object.freeze({
     iconName: 'pager',
     iconType: 'duotone',
   },
+  sourcing: {
+    title: 'Sourcing',
+    iconName: 'browser',
+    iconType: 'duotone',
+  },
   earnings: {
     title: 'Earnings',
     iconName: 'wallet',
     iconType: 'duotone',
   },
   settings: {
-    title: 'Settings',
+    title: 'Configuration',
     iconName: 'gear',
     iconType: 'duotone',
   },
@@ -165,6 +178,7 @@ export type SideMenuLinkProps = {
   opened?: boolean,
   onChange?: (e: SyntheticEvent<HTMLElement>, newValue: string) => mixed,
   tabIndex?: number,
+  tooltip?: BaseTooltipProps,
   ...
 };
 
@@ -181,6 +195,7 @@ export const SideMenuLink: React$AbstractComponent<
       selectedValue,
       onChange,
       tabIndex = 0,
+      tooltip,
       ...restButtonProps
     }: SideMenuLinkProps,
     ref,
@@ -190,41 +205,54 @@ export const SideMenuLink: React$AbstractComponent<
     const onChangeHandler = (e: SyntheticEvent<HTMLElement>) => {
       onChange && onChange(e, pageNameKey);
     };
+
     return (
-      <UnstyledButton
-        {...restButtonProps}
-        className={classify(
-          css.linkWrapper,
-          {
-            [css.selected]: selected,
-            [css.disabled]: disabled,
-            [css.inActive]: inActive,
-            [css.closed]: !opened,
-          },
-          classNames?.wrapper,
+      <ConditionalWrapper
+        condition={Boolean(!opened && !inActive)}
+        wrapper={(children) => (
+          <Tooltip body={MENU_NAME_LIST[pageNameKey].title} {...tooltip}>
+            {children}
+          </Tooltip>
         )}
-        onClick={onChangeHandler}
-        ref={ref}
-        tabIndex={disabled ? -1 : tabIndex}
       >
-        {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}
-          />
-        ) : null}
-        {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
-          <SubTitleSmall
-            color={TEXT_COLORS.inverseSecondary}
-            className={css.menuText}
-          >
-            {MENU_NAME_LIST[pageNameKey].title}
-          </SubTitleSmall>
-        ) : null}
-      </UnstyledButton>
+        <UnstyledButton
+          {...restButtonProps}
+          className={classify(
+            css.linkWrapper,
+            {
+              [css.selected]: selected,
+              [css.disabled]: disabled,
+              [css.inActive]: inActive,
+              [css.closed]: !opened,
+            },
+            classNames?.wrapper,
+          )}
+          onClick={onChangeHandler}
+          ref={ref}
+          tabIndex={disabled ? -1 : tabIndex}
+          disabled={disabled}
+        >
+          {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}
+            />
+          ) : null}
+          {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
+            <SubTitleSmall
+              color={TEXT_COLORS.inverseSecondary}
+              className={css.menuText}
+            >
+              {MENU_NAME_LIST[pageNameKey].title}
+            </SubTitleSmall>
+          ) : null}
+        </UnstyledButton>
+      </ConditionalWrapper>
     );
   },
 );
+
+SideMenuLink.displayName = 'SideMenuLink';