@lumx/react 3.11.4-alpha.0 → 3.12.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.11.4-alpha.0",
-        "@lumx/icons": "^3.11.4-alpha.0",
+        "@lumx/core": "^3.12.0",
+        "@lumx/icons": "^3.12.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.11.4-alpha.0"
+    "version": "3.12.0"
 }

package/src/components/user-block/UserBlock.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { mdiStar } from '@lumx/icons';
-import { Badge, ColorPalette, Icon, Orientation, Size } from '@lumx/react';
+import { mdiMenuDown, mdiStar } from '@lumx/icons';
+import { Badge, ColorPalette, Icon, IconButton, Orientation, Size, Text } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
 import { AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
@@ -31,11 +31,38 @@ export const AvatarAndName = {
     args: { ...AvatarOnly.args, name: 'Emmitt O. Lum' },
 };
 
+/** Avatar and children */
+export const AvatarAndCustomName = {
+    args: { ...AvatarOnly.args, name: <Text as="span">Emmitt O. Lum</Text> },
+};
+
 /** Avatar, name and secondary fields */
 export const AvatarAndNameAndSecondaryFields = {
     args: { ...AvatarAndName.args, fields: ['Creative developer', 'Denpasar'] },
 };
 
+/** With Right component */
+export const WithAfter = {
+    args: {
+        ...AvatarAndName.args,
+        fields: ['Creative developer', 'Denpasar'],
+        after: <IconButton label="View" icon={mdiMenuDown} emphasis="low" />,
+    },
+};
+
+/** With after component */
+export const WithAdditionalFields = {
+    args: {
+        ...AvatarAndName.args,
+        fields: ['Creative developer', 'Denpasar'],
+        additionalFields: (
+            <Text as="span" typography="body1">
+                Works at the Toronto office
+            </Text>
+        ),
+    },
+};
+
 /** Size variants */
 export const SizesAndOrientations = {
     ...AvatarAndNameAndSecondaryFields,

package/src/components/user-block/UserBlock.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render, within } from '@testing-library/react';
+import { render, within, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { Thumbnail } from '@lumx/react';
+import { Text, Thumbnail } from '@lumx/react';
 import userEvent from '@testing-library/user-event';
 
 import { UserBlock, UserBlockProps } from './UserBlock';
@@ -22,8 +22,9 @@ const setup = (propsOverride: Partial<UserBlockProps> = {}, { wrapper }: SetupRe
     const avatar = queryByClassName(userBlock, `${CLASSNAME}__avatar`);
     const thumbnail = avatar && queryByClassName(avatar, Thumbnail.className as string);
     const fields = queryByClassName(userBlock, `${CLASSNAME}__fields`);
+    const after = queryByClassName(userBlock, `${CLASSNAME}__after`);
 
-    return { props, userBlock, name, avatar, thumbnail, fields };
+    return { props, userBlock, name, avatar, thumbnail, fields, after };
 };
 
 describe(`<${UserBlock.displayName}>`, () => {
@@ -78,6 +79,17 @@ describe(`<${UserBlock.displayName}>`, () => {
             expect(within(fields as any).getByText('Field 1')).toBeInTheDocument();
             expect(within(fields as any).getByText('Field 2')).toBeInTheDocument();
         });
+
+        it('should render additional fields', () => {
+            setup({ additionalFields: <Text as="span">Works in Toronto</Text> });
+            expect(screen.queryByText(/works in toronto/i)).toBeInTheDocument();
+        });
+
+        it('should render after', () => {
+            const { after } = setup({ after: <Text as="span">After</Text> });
+            expect(after).toBeInTheDocument();
+            expect(screen.queryByText(/after/i)).toBeInTheDocument();
+        });
     });
 
     // Common tests suite.

package/src/components/user-block/UserBlock.tsx

@@ -32,7 +32,7 @@ export interface UserBlockProps extends GenericProps, HasTheme {
     /** Multiple action toolbar content. */
     multipleActions?: ReactNode;
     /** User name. */
-    name?: string;
+    name?: React.ReactNode;
     /** Props to pass to the name block. */
     nameProps?: GenericProps;
     /** Orientation. */
@@ -47,6 +47,10 @@ export interface UserBlockProps extends GenericProps, HasTheme {
     onMouseEnter?(): void;
     /** On mouse leave callback. */
     onMouseLeave?(): void;
+    /** Display additional fields below the original name and fields */
+    additionalFields?: React.ReactNode;
+    /** Display an additional element after the entire component. (to the right if orientation is horizontal, at the bottom if orientation is vertical) */
+    after?: React.ReactNode;
 }
 
 /**
@@ -92,6 +96,9 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
         simpleAction,
         size,
         theme = defaultTheme,
+        children,
+        additionalFields,
+        after,
         ...forwardedProps
     } = props;
     let componentSize = size;
@@ -131,7 +138,9 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
         return <NameComponent {...nProps}>{name}</NameComponent>;
     }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
 
-    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && componentSize !== Size.xs && (
+    const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
+
+    const fieldsBlock: ReactNode = fields && shouldDisplayFields && (
         <div className={`${CLASSNAME}__fields`}>
             {fields.map((field: string, idx: number) => (
                 <span key={idx} className={`${CLASSNAME}__field`}>
@@ -164,16 +173,18 @@ export const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref)
                     theme={theme}
                 />
             )}
-            {(fields || name) && (
+            {(fields || name || children || additionalFields) && (
                 <div className={`${CLASSNAME}__wrapper`}>
-                    {nameBlock}
+                    {children || nameBlock}
                     {fieldsBlock}
+                    {shouldDisplayFields ? additionalFields : null}
                 </div>
             )}
             {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}
             {shouldDisplayActions && multipleActions && (
                 <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>
             )}
+            {after ? <div className={`${CLASSNAME}__after`}>{after}</div> : null}
         </div>
     );
 });