@digital-ai/dot-components 3.17.1 → 3.18.0

package/index.esm.js

@@ -3933,6 +3933,38 @@ const styledListItemElement = elementType => {
         .dot-icon i:before {
           color: ${theme.palette.figma.icon.black};
         }
+
+        .left-border-with-arrow {
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          padding: 3px 0;
+          gap: 0;
+
+          .left-border,
+          .left-arrow {
+            width: 3px;
+            background-color: ${({
+    leftBorderAndArrow: color
+  }) => {
+    return color && theme.palette.avatarColors[color] ? theme.palette.avatarColors[color].backgroundColor : theme.palette.figma.typography.disabled; // grey
+  }};
+          }
+
+          .left-border {
+            height: 100%;
+            border-radius: ${theme.spacing(0, 0.5, 0.5, 0)};
+          }
+
+          .left-arrow {
+            height: 6px;
+            clip-path: polygon(0 0, 0 100%, 100% 50%);
+          }
+        }
       }
     `}
   `;
@@ -4059,6 +4091,7 @@ const DotListItem = ({
   onHrefClick,
   onMenuLeave,
   items = [],
+  leftBorderAndArrow,
   menuPlacement,
   nestedDrawerLeftSpacing,
   nestedListType,
@@ -4125,7 +4158,7 @@ const DotListItem = ({
   });
   const ListItem = onClick || href ? StyledListItemButton : StyledListItem;
   return jsxs(Fragment, {
-    children: [jsx(ListItem, {
+    children: [jsxs(ListItem, {
       "aria-label": ariaLabel || tooltip,
       autoFocus: autoFocus,
       classes: {
@@ -4136,13 +4169,21 @@ const DotListItem = ({
       "data-testid": dataTestId,
       divider: divider,
       href: onClick ? null : href,
+      leftBorderAndArrow: leftBorderAndArrow,
       onClick: !isLink ? handleClick : null,
       onKeyDown: onKeyDown,
       role: ariaRole,
       selected: isFlyout ? false : selected,
       tabIndex: isLink ? -1 : 0,
       target: target,
-      children: jsx(DotTooltip, {
+      children: [leftBorderAndArrow && jsxs("div", {
+        className: "left-border-with-arrow",
+        children: [jsx("div", {
+          className: "left-border"
+        }), jsx("div", {
+          className: "left-arrow"
+        })]
+      }), jsx(DotTooltip, {
         "data-testid": `${dataTestId}-tooltip`,
         placement: tooltipPlacement,
         title: tooltip,
@@ -4151,7 +4192,7 @@ const DotListItem = ({
             children: startIcon
           }), renderListItemText(), showEndIcon && renderListItemEndIcon()]
         })
-      })
+      })]
     }), hasChildren && jsx(NestedList, {
       anchorEl: anchorEl,
       ariaLabel: "nested list",
@@ -4280,7 +4321,8 @@ const DotList = ({
         target: item.target,
         text: item.text,
         tooltip: item.tooltip,
-        tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
+        tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT,
+        leftBorderAndArrow: item.leftBorderAndArrow
       }, item.id || item.text);
     }), children]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "3.17.1",
+  "version": "3.18.0",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [

package/src/lib/components/index.d.ts

@@ -15,7 +15,7 @@ export type { ConditionFunction, ControlClickHandler, DisabledConditionFunction,
 export type { InputTextProps } from './input-form-fields/InputText';
 export type { InputSelectProps, InputSelectOption, OptionType, } from './input-form-fields/InputSelect';
 export type { LinkUnderline } from './link/Link';
-export type { ListItemProps } from './list';
+export type { LeftBorderAndArrowColor, ListItemProps } from './list';
 export type { MenuItemProps } from './menu/Menu';
 export type { RailItem, RailItemsPosition } from './navigation-rail';
 export type { RadioButtonProps } from './radio/RadioButton';

package/src/lib/components/list/ListItem.d.ts

@@ -1,2 +1,2 @@
 import { ListItemProps } from './utils/models';
-export declare const DotListItem: ({ ariaLabel, ariaRole, autoFocus, className, component, "data-pendoid": dataPendoId, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onKeyDown, onHrefClick, onMenuLeave, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotListItem: ({ ariaLabel, ariaRole, autoFocus, className, component, "data-pendoid": dataPendoId, "data-testid": dataTestId, divider, endIcon, href, isOpened, onClick, onKeyDown, onHrefClick, onMenuLeave, items, leftBorderAndArrow, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, target, text, tooltip, tooltipPlacement, }: ListItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/components/list/utils/models.d.ts

@@ -5,6 +5,7 @@ import { LinkTarget } from '../../link/Link';
 import { TooltipPlacement } from '../../tooltip';
 export declare const DEFAULT_TOOLTIP_PLACEMENT = "top-start";
 export type NestedListType = 'drawer' | 'expandable' | 'menu';
+export type LeftBorderAndArrowColor = 'blue' | 'red' | 'orange' | 'green' | 'grey' | 'purple' | 'yellow';
 export interface ListProps extends CommonProps {
     /** string or JSX element that is displayed inside the list */
     children?: ReactNode;
@@ -44,6 +45,8 @@ export interface ListItemProps extends CommonProps {
     isOpened?: boolean;
     /** If provided, the menu item will display a nested list */
     items?: Array<ListItemProps>;
+    /** If defined, shows border with arrow on the left side of the list element */
+    leftBorderAndArrow?: LeftBorderAndArrowColor;
     /** If nested list type is 'menu', determines the placement of the menu */
     menuPlacement?: PopperPlacement;
     /** If nested type is 'drawer', determines the width of the left spacing */