@availity/mui-spaces 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-spaces",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Availity MUI Spaces Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -33,11 +33,17 @@
   },
   "devDependencies": {
     "@availity/mui-button": "^0.6.8",
+    "@availity/mui-card": "^0.2.15",
+    "@availity/mui-chip": "^0.2.15",
     "@availity/mui-dialog": "^0.1.9",
     "@availity/mui-disclaimer": "^0.1.2",
+    "@availity/mui-favorites": "^0.1.1",
     "@availity/mui-icon": "^0.9.0",
     "@availity/mui-layout": "^0.1.6",
+    "@availity/mui-list": "^0.1.6",
     "@availity/mui-modal": "^0.1.5",
+    "@availity/mui-paper": "^0.1.9",
+    "@availity/mui-progress": "^0.1.9",
     "@availity/mui-typography": "^0.2.0",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
@@ -47,11 +53,16 @@
   },
   "peerDependencies": {
     "@availity/mui-button": "^0.6.8",
+    "@availity/mui-card": "^0.2.15",
+    "@availity/mui-chip": "^0.2.15",
     "@availity/mui-dialog": "^0.1.9",
     "@availity/mui-disclaimer": "^0.1.2",
+    "@availity/mui-favorites": "^0.1.1",
     "@availity/mui-icon": "^0.9.0",
     "@availity/mui-layout": "^0.1.6",
+    "@availity/mui-list": "^0.1.6",
     "@availity/mui-modal": "^0.1.5",
+    "@availity/mui-progress": "^0.1.9",
     "@availity/mui-typography": "^0.2.0",
     "@mui/material": "^5.11.9",
     "react": ">=16.3.0"

package/src/lib/SpacesLink/SpacesLink.test.tsx

@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SpacesLink } from './SpacesLink';
 import { Spaces } from '../Spaces';
-import { FileIcon, NavigateTopIcon } from '@availity/mui-icon';
+import { FileIcon } from '@availity/mui-icon';
 
 describe('SpacesLink', () => {
   afterEach(() => {
@@ -53,7 +53,6 @@ describe('SpacesLink', () => {
     expect(container.tagName).toBe('DIV');
 
     const linkHeader = await waitFor(() => container.querySelector('#app-title-1'));
-    expect(linkHeader?.attributes.getNamedItem('variant')?.value).toBe('h6');
     expect(linkHeader?.attributes.getNamedItem('role')?.value).toBe('link');
     expect(linkHeader?.attributes.getNamedItem('data-av-analytics-application-id')?.value).toBe('1');
     expect(linkHeader?.attributes.getNamedItem('data-av-analytics-action')?.value).toBe('click');
@@ -134,7 +133,7 @@ describe('SpacesLink', () => {
 
     const link3_header = await waitFor(() => container.querySelector('#app-title-3'));
 
-    expect(link3_header?.tagName).toBe('DIV');
+    expect(link3_header?.tagName).toBe('A');
   });
 
   it('renders link card from space with custom title class', async () => {
@@ -207,7 +206,7 @@ describe('SpacesLink', () => {
 
     const link7_newBadge = await waitFor(() => container.querySelector('#app-new-badge-7'));
 
-    expect(link7_newBadge?.className.includes('MuiChip-colorDefault')).toBeTruthy();
+    expect(link7_newBadge?.className.includes('MuiChip-colorSecondary')).toBeTruthy();
     expect(link7_newBadge?.textContent).toBe('New!');
   });
 
@@ -539,7 +538,7 @@ describe('SpacesLink', () => {
         <Spaces clientId="my-client-id" spaces={[space]}>
           <SpacesLink
             id="application-link-14"
-            icon
+            icon={FileIcon}
             space={space}
             linkAttributes={{
               spaceId: '14',
@@ -553,52 +552,10 @@ describe('SpacesLink', () => {
     );
 
     const link = await waitFor(() => container.getElementsByTagName('a'));
-    expect(link[0]?.getAttribute('href')).toContain('/public/apps/home/#!/loadApp?appUrl=%2Fpath%2Fto%2Furl');
-    const icon = await waitFor(() => container.getElementsByTagName('svg')[1]);
-
-    const { container: testContainer } = render(<FileIcon data-testid="icon" />);
-
-    expect(icon).toStrictEqual(testContainer.getElementsByTagName('svg')[0]);
-  });
-
-  it('renders icon for non file type when icon is true', async () => {
-    const space = {
-      id: 'encoded14',
-      configurationId: '14',
-      type: 'LINK',
-      name: 'file with link',
-      url: '/path/to/url',
-      icons: {
-        navigation: 'desktop',
-      },
-      description: 'This is a file',
-      link: {
-        url: '/path/to/url',
-        text: 'title',
-        target: '_self',
-      },
-    };
-    const queryClient = new QueryClient();
-    const { container } = render(
-      <QueryClientProvider client={queryClient}>
-        <Spaces clientId="my-client-id" spaces={[space]}>
-          <SpacesLink
-            id="application-link-14"
-            space={space}
-            linkAttributes={{
-              spaceId: '14',
-            }}
-            role="listitem"
-            clientId="my-client-id"
-            title={space.link.text}
-          />
-        </Spaces>
-      </QueryClientProvider>
-    );
-
+    expect(link[0]?.getAttribute('href')).toBe(space.url);
     const icon = await waitFor(() => container.getElementsByTagName('svg')[0]);
 
-    const { container: testContainer } = render(<NavigateTopIcon data-testid="icon" />);
+    const { container: testContainer } = render(<FileIcon data-testid="icon" />);
 
     expect(icon).toStrictEqual(testContainer.getElementsByTagName('svg')[0]);
   });

package/src/lib/SpacesLink/SpacesLink.tsx

@@ -1,38 +1,56 @@
+import { ElementType } from 'react';
 import dayjs from 'dayjs';
-import { Card, CardContent, CardHeader } from '@availity/mui-card';
+import { Card, CardContent } from '@availity/mui-card';
 import { Typography } from '@availity/mui-typography';
-import { NavigateTopIcon, FileIcon } from '@availity/mui-icon';
 import { useMemo, cloneElement } from 'react';
-import { StatusChip, Chip } from '@availity/mui-chip';
+import { StatusChip } from '@availity/mui-chip';
 import { CircularProgress } from '@availity/mui-progress';
-import { Link } from '@availity/mui-link';
+import Link from '@mui/material/Link';
 import { FavoriteHeart } from '@availity/mui-favorites';
 import { Grid, Box } from '@availity/mui-layout';
 import { ListItem, ListItemText } from '@availity/mui-list';
 import ReactMarkdown from 'react-markdown';
+import { styled } from '@mui/material/styles';
 import { useSpacesContext } from '../Spaces';
 import { useLink } from './useLink';
 import type { SpacesLinkWithSpace, SpacesLinkWithSpaceId, SpacesLinkVariants } from './spaces-link-types';
 import { isFunction } from '../helpers';
 
+const SpacesLinkContainer = styled(Box, { name: 'AvSpacesLink', slot: 'root' })({});
+const DateInfo = styled(Grid, { name: 'AvSpacesLink', slot: 'AvDateInfo' })({});
+const SpacesLinkFavoriteHeart = styled(Grid, { name: 'AvSpacesLink', slot: 'AvFavoriteHeart' })({});
+const IconLink = styled(Link, { name: 'AvSpacesLink', slot: 'IconLink' })({});
+
 const getDisplayDate = (date: string | null | undefined) => dayjs(date).format('MM/DD/YYYY');
 
-const getContainerTag = (propTag: string | undefined, variant: SpacesLinkVariants) => {
+const getContainerTag = (
+  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
+  variant: SpacesLinkVariants
+) => {
   if (variant && variant !== 'default') return { card: Card, list: ListItem }[variant];
   return propTag || 'div';
 };
 
-const getBodyTag = (propTag: string | undefined, variant: SpacesLinkVariants) => {
+const getBodyTag = (
+  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
+  variant: SpacesLinkVariants
+) => {
   if (variant && variant !== 'default') return { card: CardContent, list: 'div' }[variant];
   return propTag || 'div';
 };
 
-const getTitleTag = (propTag: string | undefined, variant: SpacesLinkVariants) => {
-  if (variant && variant !== 'default') return { card: CardHeader, list: Typography }[variant];
-  return propTag || 'div';
+const getTitleTag = (
+  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
+  variant: SpacesLinkVariants
+) => {
+  if (variant && variant !== 'default') return Link;
+  return propTag || Link;
 };
 
-const getTextTag = (propTag: string | undefined, variant: SpacesLinkVariants) => {
+const getTextTag = (
+  propTag: ElementType<any, keyof JSX.IntrinsicElements> | undefined,
+  variant: SpacesLinkVariants
+) => {
   if (variant && variant !== 'default') return { card: Typography, list: ListItemText }[variant];
   return propTag || 'div';
 };
@@ -43,7 +61,7 @@ export const SpacesLink = ({
   className,
   children,
   favorite,
-  icon,
+  icon: FileIcon,
   showName = true,
   showNew,
   showDate,
@@ -79,11 +97,13 @@ export const SpacesLink = ({
     () =>
       linkSpace?.configurationId &&
       favorite && (
-        <FavoriteHeart
-          id={`${idPrefix}${linkSpace?.configurationId}`}
-          name={linkSpace?.name}
-          onChange={(_, e) => e.stopPropagation()}
-        />
+        <SpacesLinkFavoriteHeart>
+          <FavoriteHeart
+            id={`${idPrefix}${linkSpace?.configurationId}`}
+            name={linkSpace?.name}
+            onChange={(_, e) => e.stopPropagation()}
+          />
+        </SpacesLinkFavoriteHeart>
       ),
     [favorite, linkSpace?.configurationId, linkSpace?.name, idPrefix]
   );
@@ -91,9 +111,9 @@ export const SpacesLink = ({
   const dateInfo = useMemo(
     () =>
       (showNew || showDate) && (
-        <Grid textAlign={stacked ? 'center' : 'inherit'}>
+        <DateInfo textAlign={stacked ? 'center' : 'right'}>
           {showNew && linkSpace?.isNew && (
-            <Chip id={`${idPrefix}app-new-badge-${linkSpace?.configurationId}`} label="New!" />
+            <StatusChip id={`${idPrefix}app-new-badge-${linkSpace?.configurationId}`} label="New!" color="secondary" />
           )}
           {showDate && (
             <Typography
@@ -104,7 +124,7 @@ export const SpacesLink = ({
               {getDisplayDate(linkSpace?.activeDate)}
             </Typography>
           )}
-        </Grid>
+        </DateInfo>
       ),
     [linkSpace?.activeDate, linkSpace?.isNew, showDate, showNew, stacked, linkSpace?.configurationId, idPrefix]
   );
@@ -114,7 +134,7 @@ export const SpacesLink = ({
       customBadgeText && (
         <Box
           textAlign={stacked ? 'center' : 'inherit'}
-          marginRight={variant !== 'card' && (showDate || (showNew && linkSpace?.isNew)) ? 2 : undefined}
+          marginRight={variant !== 'card' && (showDate || (showNew && linkSpace?.isNew)) ? 1 : undefined}
         >
           <StatusChip
             color={customBadgeColor || 'info'}
@@ -165,27 +185,36 @@ export const SpacesLink = ({
     }
   };
   return (
-    <Tag
+    <SpacesLinkContainer
+      component={Tag}
       title={linkSpace?.name}
       className={className}
       {...rest}
       style={{ ...style }}
       role={variant === 'list' ? 'listitem' : role}
     >
-      <BodyTag>
-        <Grid alignItems={!showDescription || stacked ? 'center' : 'start'} direction={stacked ? 'column' : 'row'}>
+      <BodyTag style={{ width: '100%' }}>
+        <Grid
+          alignItems={!showDescription || stacked ? 'center' : 'start'}
+          direction={stacked ? 'column' : 'row'}
+          container
+          flexWrap="nowrap"
+        >
           {!stacked && favoriteIcon}
-          {icon && linkSpace?.url && linkSpace?.type?.toUpperCase() === 'FILE' ? (
-            <Link target="_blank" href={linkSpace?.url}>
+          {FileIcon && linkSpace?.url && linkSpace?.type?.toUpperCase() === 'FILE' ? (
+            <IconLink
+              target="_blank"
+              href={linkSpace?.url}
+              role="link"
+              aria-labelledby={`${idPrefix}app-title-${linkSpace?.configurationId}`}
+            >
               <FileIcon data-testid="icon" />
-            </Link>
-          ) : (
-            <NavigateTopIcon data-testid="icon" />
-          )}
+            </IconLink>
+          ) : null}
           {children
             ? renderChildren()
             : body && (
-                <Grid id={`${idPrefix}${linkSpace?.type}-${linkSpace?.configurationId}`}>
+                <Grid id={`${idPrefix}${linkSpace?.type}-${linkSpace?.configurationId}`} flexGrow={1}>
                   <Box
                     marginBottom={!customBadgeDisplay && (!showDescription || !linkSpace?.description) ? 0 : undefined}
                     paddingTop={stacked ? 3 : undefined}
@@ -216,15 +245,18 @@ export const SpacesLink = ({
                   {stacked && dateInfo}
                   {showDescription && linkSpace?.description && (
                     <TextTag
-                      marginTop={1}
-                      textAlign={stacked ? 'center' : undefined}
-                      overflow="hidden"
-                      whiteSpace={maxDescriptionWidth ? 'nowrap' : undefined}
-                      width={maxDescriptionWidth}
-                      textOverflow="ellipsis"
+                      component={'div'}
+                      style={{
+                        marginTop: '.5rem',
+                        textAlign: stacked ? 'center' : undefined,
+                        overflow: 'hidden',
+                        whiteSpace: maxDescriptionWidth ? 'nowrap' : undefined,
+                        width: maxDescriptionWidth,
+                        textOverflow: 'ellipsis',
+                      }}
                       id={`${idPrefix}app-description-${linkSpace?.configurationId}`}
                     >
-                      <ReactMarkdown className="Card-text">{linkSpace?.description}</ReactMarkdown>
+                      <ReactMarkdown>{linkSpace?.description}</ReactMarkdown>
                     </TextTag>
                   )}
                   {variant === 'card' && customBadgeDisplay}
@@ -234,6 +266,6 @@ export const SpacesLink = ({
           {!stacked && dateInfo}
         </Grid>
       </BodyTag>
-    </Tag>
+    </SpacesLinkContainer>
   );
 };

package/src/lib/SpacesLink/spaces-link-types.tsx

@@ -1,5 +1,7 @@
 import type { StatusChipProps } from '@availity/mui-chip';
 import type { Space } from '../spaces-types';
+import { ElementType } from 'react';
+import { SvgIconProps } from '@mui/material';
 
 export type SpacesLinkVariants = 'card' | 'list' | 'default' | undefined;
 
@@ -31,24 +33,24 @@ export type SpacesLinkProps = {
   /** Children can be a react child or render prop. */
   children?: JSX.Element | ((props: any | undefined) => JSX.Element);
   /** Tag to overwrite the root component rendered. */
-  tag?: string;
+  tag?: ElementType<any, keyof JSX.IntrinsicElements>;
   /** Tag to overwrite the body component that renders the title, description and data values.
    * It defaults to CardBody or div depending on the value of the variant prop.
    */
-  bodyTag?: string;
+  bodyTag?: ElementType<any, keyof JSX.IntrinsicElements>;
   /** Tag to overwrite the title component. If variant prop is set to "card", defaults to CardTitle.
    * If variant is set to "list", defaults to ListItemHeading. Overwise, defaults to div.
    */
-  titleTag?: string;
+  titleTag?: ElementType<any, keyof JSX.IntrinsicElements>;
   /** Tag to overwrite the text component. If variant prop is set to "card", defaults to Card Text.
    * If variant is set to "list", defaults to ListItemText. Otherwise, defaults to div.
    */
-  textTag?: string;
+  textTag?: ElementType<any, keyof JSX.IntrinsicElements>;
   titleClassName?: string;
   /** When true, utilizes the Card component for styling. */
   card?: boolean;
   /** When true, renders an @availity/mui-icon next to the title if present on the Space. */
-  icon?: boolean;
+  icon?: (props: SvgIconProps) => JSX.Element;
   /** When true, renders the Spaces description beneath the title. */
   description?: boolean;
   /** When passed in, provides predefined styles for the component.

package/src/lib/SpacesLink/useLink.test.tsx

@@ -22,7 +22,7 @@ const buildSpacesLink = (space: Space | SsoTypeSpace, linkAttributes: Record<any
           space={space}
           linkAttributes={linkAttributes}
           clientId="my-client-id"
-          linkStyle="card"
+          variant="card"
           title={space.link?.text}
         />
       </Spaces>