@spaced-out/ui-design-system 0.1.122 → 0.1.123

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.123](https://github.com/spaced-out/ui-design-system/compare/v0.1.122...v0.1.123) (2024-08-26)
+
+
+### Features
+
+* [GDS-429] side menu link accordion and href inclusion  ([#251](https://github.com/spaced-out/ui-design-system/issues/251)) ([e54f712](https://github.com/spaced-out/ui-design-system/commit/e54f712b6e450c80ca70aad3565fe1be8820bbb9))
+
 ### [0.1.122](https://github.com/spaced-out/ui-design-system/compare/v0.1.121...v0.1.122) (2024-08-22)
 
 

package/lib/components/PageTitle/PageTitle.js

@@ -218,7 +218,9 @@ const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   }, /*#__PURE__*/React.createElement("div", {
     className: _PageTitleModule.default.headerWithBackBtn
   }, showBackButton && /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
-    title: "Navigate Back"
+    title: "Navigate Back",
+    delayMotionDuration: "slow",
+    placement: "top-start"
   }, /*#__PURE__*/React.createElement(_Button.Button, {
     onClick: handleBack,
     type: "tertiary",

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

@@ -239,7 +239,11 @@ export const PageTitle: React$AbstractComponent<
         <div className={classify(css.leftSlot, classNames?.leftSlot)}>
           <div className={css.headerWithBackBtn}>
             {showBackButton && (
-              <Tooltip title="Navigate Back">
+              <Tooltip
+                title="Navigate Back"
+                delayMotionDuration="slow"
+                placement="top-start"
+              >
                 <Button
                   onClick={handleBack}
                   type="tertiary"

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -9,6 +9,7 @@ var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Icon = require("../Icon");
+var _Link = require("../Link");
 var _Text = require("../Text");
 var _Tooltip = require("../Tooltip");
 var _SideMenuLinkModule = _interopRequireDefault(require("./SideMenuLink.module.css"));
@@ -189,6 +190,10 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange,
     tabIndex = 0,
     tooltip,
+    isGroupMenuLink = false,
+    linkComponent: LinkComponent,
+    rightSlot,
+    to,
     ...restButtonProps
   } = _ref;
   const selected = selectedValue === pageNameKey;
@@ -197,6 +202,15 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange && onChange(e, pageNameKey);
   };
   return /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
+    condition: to !== undefined,
+    wrapper: children => /*#__PURE__*/React.createElement(_Link.Link, {
+      to: to,
+      tabIndex: -1,
+      linkComponent: LinkComponent,
+      onClick: e => e.preventDefault(),
+      className: _SideMenuLinkModule.default.linkComponent
+    }, children)
+  }, /*#__PURE__*/React.createElement(_ConditionalWrapper.ConditionalWrapper, {
     condition: Boolean(!opened && !inActive),
     wrapper: children => /*#__PURE__*/React.createElement(_Tooltip.Tooltip, _extends({
       body: MENU_NAME_LIST[pageNameKey].title
@@ -219,10 +233,13 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     size: "medium",
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SideMenuLinkModule.default.menuIcon
-  }) : 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));
+  }) : 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
+  }, MENU_NAME_LIST[pageNameKey].title) : /*#__PURE__*/React.createElement(_Text.BodyMedium, {
+    className: _SideMenuLinkModule.default.menuLinkText
+  }, MENU_NAME_LIST[pageNameKey].title) : null, rightSlot ? rightSlot : null) : null)));
 });
 exports.SideMenuLink = SideMenuLink;
 SideMenuLink.displayName = 'SideMenuLink';

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

@@ -6,7 +6,9 @@ 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 {BaseLinkProps} from '../Link';
+import {Link} from '../Link';
+import {BodyMedium, SubTitleSmall, TEXT_COLORS} from '../Text';
 import type {BaseTooltipProps} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
 
@@ -189,6 +191,10 @@ export type SideMenuLinkProps = {
   onChange?: (e: SyntheticEvent<HTMLElement>, newValue: string) => mixed,
   tabIndex?: number,
   tooltip?: BaseTooltipProps,
+  isGroupMenuLink?: boolean,
+  to?: string,
+  rightSlot?: React.Node,
+  linkComponent?: React.AbstractComponent<BaseLinkProps, ?HTMLAnchorElement>,
   ...
 };
 
@@ -206,6 +212,10 @@ export const SideMenuLink: React$AbstractComponent<
       onChange,
       tabIndex = 0,
       tooltip,
+      isGroupMenuLink = false,
+      linkComponent: LinkComponent,
+      rightSlot,
+      to,
       ...restButtonProps
     }: SideMenuLinkProps,
     ref,
@@ -218,49 +228,73 @@ export const SideMenuLink: React$AbstractComponent<
 
     return (
       <ConditionalWrapper
-        condition={Boolean(!opened && !inActive)}
+        condition={to !== undefined}
         wrapper={(children) => (
-          <Tooltip body={MENU_NAME_LIST[pageNameKey].title} {...tooltip}>
+          <Link
+            to={to}
+            tabIndex={-1}
+            linkComponent={LinkComponent}
+            onClick={(e) => e.preventDefault()}
+            className={css.linkComponent}
+          >
             {children}
-          </Tooltip>
+          </Link>
         )}
       >
-        <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}
-          disabled={disabled}
-          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}
-            />
-          ) : 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}
+            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}
+              />
+            ) : null}
+            {opened ? (
+              <div className={css.menuLabelContainer}>
+                {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
+                  isGroupMenuLink ? (
+                    <SubTitleSmall className={css.groupMenuLinkText}>
+                      {MENU_NAME_LIST[pageNameKey].title}
+                    </SubTitleSmall>
+                  ) : (
+                    <BodyMedium className={css.menuLinkText}>
+                      {MENU_NAME_LIST[pageNameKey].title}
+                    </BodyMedium>
+                  )
+                ) : null}
+
+                {rightSlot ? rightSlot : null}
+              </div>
+            ) : null}
+          </UnstyledButton>
+        </ConditionalWrapper>
       </ConditionalWrapper>
     );
   },

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

@@ -8,6 +8,7 @@
   colorSideMenuBackgroundDefault,
   colorSideMenuBackgroundHovered,
   colorSideMenuBackgroundSelected,
+  colorGroupMenuTextDefault,
   colorFocusPrimary
   ) from '../../styles/variables/_color.css';
 @value ( spaceNone, spaceXXSmall, spaceXSmall, spaceSmall ) from '../../styles/variables/_space.css';
@@ -62,22 +63,47 @@
   color: colorSideMenuIconDefault;
 }
 
+.linkComponent {
+  width: sizeFluid;
+  text-decoration: none;
+}
+
 .linkWrapper.selected {
   background: colorSideMenuBackgroundSelected;
   color: colorTextInversePrimary;
 }
 
-.linkWrapper.selected .menuIcon {
+.linkWrapper.selected .menuIcon,
+.linkWrapper.selected .menuLinkText {
   color: colorSideMenuIconActive;
 }
 
-.linkWrapper:not(.inActive):hover .menuIcon {
+.linkWrapper:hover .menuIcon {
   color: colorSideMenuIconActive;
 }
 
-.menuText {
+.groupMenuLinkText {
   color: inherit;
   margin-right: spaceSmall;
   white-space: nowrap;
   padding-right: spaceXXSmall;
 }
+
+.menuLinkText {
+  color: colorGroupMenuTextDefault;
+  margin-right: spaceSmall;
+  white-space: nowrap;
+  padding-right: spaceXXSmall;
+}
+
+.linkWrapper:hover .menuLinkText {
+  color: colorSideMenuIconActive;
+}
+
+.menuLabelContainer {
+  color: inherit;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  padding-right: spaceXSmall;
+}

package/package.json

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