@digital-ai/dot-components 3.13.3 → 3.14.0

package/index.esm.js

@@ -2738,7 +2738,8 @@ const DotLink = ({
   tabIndex = 0,
   target,
   tooltip,
-  underline = 'always'
+  underline = 'always',
+  variant = 'body1'
 }) => {
   const rootClasses = useStylesWithRootClass(rootClassName$1c, className);
   useEffect(() => {
@@ -2777,6 +2778,7 @@ const DotLink = ({
       tabIndex: tabIndex,
       target: target,
       underline: underline,
+      variant: variant,
       children: children
     })
   });
@@ -2840,13 +2842,23 @@ const StyledList = styled(List)`
 `;
 
 const getChevronIcon = (nestedListType, isOpened) => {
-  if (nestedListType !== 'expandable') {
-    return 'chevron-right';
-  }
-  if (isOpened) {
-    return 'chevron-up';
+  switch (nestedListType) {
+    case 'drawer':
+      {
+        return 'chevron-right';
+      }
+    case 'expandable':
+      {
+        if (isOpened) {
+          return 'chevron-up';
+        }
+        return 'chevron-down';
+      }
+    case 'menu':
+      {
+        return 'arrow-right';
+      }
   }
-  return 'chevron-down';
 };
 // Used in DotSidebar, DotList, DotListItem to determine
 // if the sidebar should be open or closed based on what target the user clicks
@@ -3860,7 +3872,8 @@ const styledListItemElement = elementType => {
         }
 
         &.${flyoutListItemClassName} {
-          padding: 0;
+          padding: ${theme.spacing(1)};
+          text-decoration: none;
         }
 
         &:hover {
@@ -3888,7 +3901,7 @@ const styledListItemElement = elementType => {
         }
 
         .${flyoutItemLinkClassName} .MuiIcon-root {
-          margin-right: ${theme.spacing(4)};
+          margin-right: ${theme.spacing(1)};
         }
 
         .dot-icon i:before {

package/package.json

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

package/src/lib/components/link/Link.d.ts

@@ -1,5 +1,6 @@
 import { KeyboardEvent, MouseEvent, PointerEvent, ReactNode } from 'react';
 import { CommonProps } from '../CommonProps';
+import { TypographyVariant } from '../typography/Typography';
 export type LinkColor = 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
 export type LinkUnderline = 'always' | 'hover' | 'none';
 export type LinkTarget = '_blank' | '_self';
@@ -26,5 +27,7 @@ export interface LinkProps extends CommonProps {
     tooltip?: string;
     /**  underline the link */
     underline?: LinkUnderline;
+    /** Applies the theme typography styles. */
+    variant?: TypographyVariant;
 }
-export declare const DotLink: ({ ariaLabel, ariaRole, children, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DotLink: ({ ariaLabel, ariaRole, children, className, color, "data-pendoid": dataPendoId, "data-testid": dataTestId, href, onClick, onMouseEnter, onPointerDown, rel, tabIndex, target, tooltip, underline, variant, }: LinkProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,3 @@
 import { NestedListType } from './models';
-export declare const getChevronIcon: (nestedListType: NestedListType, isOpened: boolean) => "chevron-right" | "chevron-up" | "chevron-down";
+export declare const getChevronIcon: (nestedListType: NestedListType, isOpened: boolean) => "chevron-right" | "chevron-up" | "chevron-down" | "arrow-right";
 export declare const shouldToggleOpen: (classNames: string) => boolean;