@coveord/plasma-mantine 55.7.2-next.2 → 55.7.2-next.21

package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx

@@ -117,12 +117,8 @@ export const DateRangePickerInlineCalendar = ({
             </Center>
 
             <Group justify="right" gap="xs" px="md" py="sm" className={DateRangeClasses.save}>
-                <Button variant="outline" size="xs" onClick={onCancel}>
-                    Cancel
-                </Button>
-                <Button size="xs" onClick={onCalendarApply}>
-                    Apply
-                </Button>
+                <Button.Tertiary onClick={onCancel}>Cancel</Button.Tertiary>
+                <Button.Primary onClick={onCalendarApply}>Apply</Button.Primary>
             </Group>
         </>
     );

package/src/components/header/Header.module.css

@@ -6,7 +6,7 @@
 
     & .description {
         color: var(--mantine-color-dimmed);
-        font-weight: 300;
+        font-weight: 400;
     }
 }
 
@@ -19,12 +19,3 @@
     margin-left: var(--mantine-spacing-xs);
     vertical-align: middle;
 }
-
-.breadcrumbs {
-    font-size: var(--mantine-font-size-sm);
-    font-weight: 300;
-}
-
-.breadcrumbsSeparator {
-    color: var(--mantine-color-dimmed);
-}

package/src/components/header/Header.tsx

@@ -14,11 +14,11 @@ import {
 import {Children, ReactElement, ReactNode} from 'react';
 import {HeaderProvider} from './Header.context';
 import classes from './Header.module.css';
-import {HeaderActions, HeaderActionsStyleNames} from './HeaderActions/HeaderActions';
+import {HeaderRight, HeaderRightStyleNames} from './HeaderRight/HeaderRight';
 import {HeaderBreadcrumbs, HeaderBreadcrumbsStyleNames} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 import {HeaderDocAnchor, HeaderDocAnchorStyleNames} from './HeaderDocAnchor/HeaderDocAnchor';
 
-export type {HeaderActionsProps} from './HeaderActions/HeaderActions';
+export type {HeaderRightProps} from './HeaderRight/HeaderRight';
 export type {HeaderBreadcrumbsProps} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
 export type {HeaderDocAnchorProps} from './HeaderDocAnchor/HeaderDocAnchor';
 
@@ -28,11 +28,14 @@ export type HeaderStyleNames =
     | 'title'
     | 'description'
     | 'divider'
+    | 'body'
     | HeaderDocAnchorStyleNames
     | HeaderBreadcrumbsStyleNames
-    | HeaderActionsStyleNames;
+    | HeaderRightStyleNames;
 
-export interface HeaderProps extends StylesApiProps<HeaderFactory>, Omit<GroupProps, 'classNames' | 'styles' | 'vars'> {
+export interface HeaderProps
+    extends StylesApiProps<HeaderFactory>,
+        Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'variant'> {
     /**
      * The description text displayed inside the header underneath the title
      */
@@ -60,8 +63,12 @@ export type HeaderFactory = Factory<{
     stylesNames: HeaderStyleNames;
     staticComponents: {
         Breadcrumbs: typeof HeaderBreadcrumbs;
-        Actions: typeof HeaderActions;
+        Right: typeof HeaderRight;
         DocAnchor: typeof HeaderDocAnchor;
+        /**
+         * @deprecated use Header.Right instead
+         */
+        Actions: typeof HeaderRight;
     };
 }>;
 
@@ -101,10 +108,10 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
 
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);
-    const actions = convertedChildren.find((child) => child.type === HeaderActions);
+    const right = convertedChildren.find((child) => child.type === HeaderRight);
     const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);
     const otherChildren = convertedChildren.filter(
-        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,
+        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderRight && child.type !== HeaderDocAnchor,
     );
     return (
         <HeaderProvider value={{getStyles}}>
@@ -123,7 +130,7 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
                         {description}
                     </Text>
                 </Stack>
-                {actions}
+                {right}
             </Group>
             {borderBottom ? <Divider {...getStyles('divider', stylesApiProps)} size="xs" /> : null}
         </HeaderProvider>
@@ -131,5 +138,9 @@ export const Header = factory<HeaderFactory>((_props, ref) => {
 });
 
 Header.Breadcrumbs = HeaderBreadcrumbs;
-Header.Actions = HeaderActions;
+Header.Right = HeaderRight;
 Header.DocAnchor = HeaderDocAnchor;
+/**
+ * @deprecated use Header.Right instead
+ */
+Header.Actions = HeaderRight;

package/src/components/header/{HeaderActions/HeaderActions.tsx → HeaderRight/HeaderRight.tsx}

@@ -2,27 +2,27 @@ import {CompoundStylesApiProps, Factory, Group, GroupProps, factory, useProps} f
 import {ReactNode} from 'react';
 import {useHeaderContext} from '../Header.context';
 
-export type HeaderActionsStyleNames = 'actions';
+export type HeaderRightStyleNames = 'right';
 
-export interface HeaderActionsProps
+export interface HeaderRightProps
     extends Omit<GroupProps, 'classNames' | 'styles' | 'vars' | 'children'>,
-        CompoundStylesApiProps<HeaderActionsFactory> {
+        CompoundStylesApiProps<HeaderRightFactory> {
     children: ReactNode;
 }
 
-export type HeaderActionsFactory = Factory<{
-    props: HeaderActionsProps;
+export type HeaderRightFactory = Factory<{
+    props: HeaderRightProps;
     ref: HTMLDivElement;
-    stylesNames: HeaderActionsStyleNames;
+    stylesNames: HeaderRightStyleNames;
     compound: true;
 }>;
 
-const defaultProps: Partial<HeaderActionsProps> = {
+const defaultProps: Partial<HeaderRightProps> = {
     gap: 'sm',
 };
 
-export const HeaderActions = factory<HeaderActionsFactory>((_props, ref) => {
-    const props = useProps('HeaderActions', defaultProps, _props);
+export const HeaderRight = factory<HeaderRightFactory>((_props, ref) => {
+    const props = useProps('HeaderRight', defaultProps, _props);
     const {gap, className, classNames, styles, style, children, vars, ...others} = props;
     const ctx = useHeaderContext();
 
@@ -30,7 +30,7 @@ export const HeaderActions = factory<HeaderActionsFactory>((_props, ref) => {
         <Group
             ref={ref}
             gap={gap}
-            {...ctx.getStyles('actions', {className, style, classNames, styles, props})}
+            {...ctx.getStyles('right', {className, style, classNames, styles, props})}
             {...others}
         >
             {children}

package/src/components/header/__tests__/Header.spec.tsx

@@ -71,7 +71,22 @@ describe('Header', () => {
         expect(screen.getByText('description')).toBeInTheDocument();
     });
 
-    it('renders provided actions in the header', () => {
+    it('renders provided components in Header.Right', () => {
+        render(
+            <Header>
+                title
+                <Header.Right>
+                    <span>action 1</span>
+                    <span>action 2</span>
+                </Header.Right>
+            </Header>,
+        );
+
+        expect(screen.getByText('action 1')).toBeInTheDocument();
+        expect(screen.getByText('action 2')).toBeInTheDocument();
+    });
+
+    it('renders provided components in Header.Right when called as Header.Actions', () => {
         render(
             <Header>
                 title

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './action-icon';
 export * from './alert';
 export * from './badge';
@@ -10,6 +11,7 @@ export * from './copyToClipboard';
 export * from './date-range-picker';
 export * from './ellipsis-text';
 export * from './header';
+export * from './info-token';
 export * from './inline-confirm';
 export * from './menu';
 export * from './modal';

package/src/components/info-token/InfoToken.module.css

@@ -0,0 +1,8 @@
+.root {
+    --info-token-color: var(--mantine-color-primary);
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--info-token-color);
+}

package/src/components/info-token/InfoToken.tsx

@@ -0,0 +1,147 @@
+import {
+    IconAlertSquareFilled,
+    IconAlertTriangleFilled,
+    IconBulbFilled,
+    IconHelpCircle,
+    IconInfoCircleFilled,
+    TablerIcon,
+} from '@coveord/plasma-react-icons';
+import {
+    Box,
+    BoxProps,
+    createVarsResolver,
+    Factory,
+    MantineSize,
+    polymorphicFactory,
+    StylesApiProps,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+import classes from './InfoToken.module.css';
+
+export type InfoTokenFactory = Factory<{
+    props: InfoTokenProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: InfoTokenComponentStylesNames;
+    vars: InfoTokenCssVariables;
+    variant: InfoTokenVariant;
+}>;
+export type InfoTokenComponentStylesNames = 'root';
+export type InfoTokenVariant = 'information' | 'advice' | 'warning' | 'error' | 'question';
+export type InfoTokenCssVariables = {
+    root: '--info-token-color';
+};
+
+export interface InfoTokenProps extends BoxProps, StylesApiProps<InfoTokenFactory> {
+    /**
+     * The variant of the token.
+     *
+     * @default 'information'
+     */
+    variant?: InfoTokenVariant;
+    /**
+     * The size of the info token.
+     *
+     * @default 'sm'
+     */
+    size?: MantineSize;
+}
+
+const defaultProps: Partial<InfoTokenProps> = {variant: 'information', size: 'xs'};
+
+const colorResolver = (variant: InfoTokenVariant): string => {
+    switch (variant) {
+        case 'error':
+            return 'var(--mantine-color-error)';
+        case 'advice':
+            return 'var(--mantine-primary-color-filled)';
+        case 'question':
+            return 'var(--mantine-primary-color-filled)';
+        case 'warning':
+            return 'var(--mantine-color-yellow-filled)';
+        case 'information':
+        default:
+            return 'var(--mantine-color-gray-filled)';
+    }
+};
+
+const sizeResolver = (size: MantineSize): number => {
+    if (typeof size === 'number') {
+        return size;
+    }
+    switch (size) {
+        case 'sm':
+            return 20;
+        case 'md':
+            return 24;
+        case 'lg':
+            return 32;
+        case 'xl':
+            return 40;
+        case 'xs':
+        default:
+            return 16;
+    }
+};
+
+const iconResolver = (variant: InfoTokenVariant): TablerIcon => {
+    switch (variant) {
+        case 'error':
+            return IconAlertSquareFilled;
+        case 'information':
+            return IconInfoCircleFilled;
+        case 'question':
+            return IconHelpCircle;
+        case 'warning':
+            return IconAlertTriangleFilled;
+        case 'advice':
+        default:
+            return IconBulbFilled;
+    }
+};
+
+const varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {variant}) => {
+    const color = colorResolver(variant);
+    return {
+        root: {
+            '--info-token-color': color,
+        },
+    };
+});
+
+export const InfoToken: ReturnType<typeof polymorphicFactory<InfoTokenFactory>> = polymorphicFactory<InfoTokenFactory>(
+    (_props, ref) => {
+        const props = useProps('InfoToken', defaultProps, _props);
+        const {variant, vars, className, style, unstyled, styles, classNames, size, ...others} = props;
+        const getStyles = useStyles<InfoTokenFactory>({
+            name: 'InfoToken',
+            classes,
+            className,
+            props,
+            style,
+            styles,
+            unstyled,
+            vars,
+            varsResolver,
+        });
+        const IconComponent = iconResolver(variant);
+        return (
+            <Box
+                ref={ref}
+                variant={variant}
+                role="img"
+                size={size}
+                {...getStyles('root', {
+                    className,
+                    style,
+                    styles,
+                    classNames,
+                })}
+                {...others}
+            >
+                <IconComponent size={sizeResolver(size)} />
+            </Box>
+        );
+    },
+);

package/src/components/info-token/index.ts

@@ -0,0 +1 @@
+export * from './InfoToken';

package/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -15,13 +15,13 @@ interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'>, InlineC
     /**
      * Confirm button element
      *
-     * @default <Button color="red">Delete</Button>
+     * @default <Button.DestructivePrimary>Delete</Button.DestructivePrimary>
      */
     confirm?: ReactElement;
     /**
      * Cancel button element
      *
-     * @default <Button variant="outline">Cancel</Button>
+     * @default <Button.Tertiary>Cancel</Button.Tertiary>
      */
     cancel?: ReactElement;
     /**
@@ -42,8 +42,8 @@ export type InlineConfirmPromptFactory = Factory<{
 
 const defaultProps: Partial<InlineConfirmPromptProps> = {
     label: 'Are you sure?',
-    confirm: <Button color="red">Delete</Button>,
-    cancel: <Button variant="outline">Cancel</Button>,
+    confirm: <Button.DestructivePrimary>Delete</Button.DestructivePrimary>,
+    cancel: <Button.Tertiary>Cancel</Button.Tertiary>,
     gap: 'xs',
     wrap: 'nowrap',
 };

package/src/components/modal/Modal.module.css

@@ -1,5 +1,5 @@
 .footer {
-    border-top: 1px solid var(--mantine-color-gray-3);
+    border-top: 1px solid var(--mantine-color-default-border);
 }
 
 .modalFooterSticky {

package/src/components/prompt/Prompt.tsx

@@ -11,6 +11,7 @@ import {
     useStyles,
 } from '@mantine/core';
 import {Children, ReactElement, ReactNode} from 'react';
+import {Header} from '../header';
 import {Modal} from '../modal';
 import Critical from './icons/critical.svg';
 import Info from './icons/info.svg';
@@ -24,7 +25,7 @@ import {PromptConfirmButton, PromptConfirmButtonStylesNamesVariant} from './Prom
 export type PromptVariant = 'success' | 'warning' | 'critical' | 'info';
 export type PromptVars = {root: '--prompt-icon-size'};
 export type PromptStylesNames =
-    | ModalStylesNames
+    | Exclude<ModalStylesNames, 'title'>
     | 'icon'
     | PromptCancelButtonStylesNamesVariant
     | PromptConfirmButtonStylesNamesVariant;
@@ -98,9 +99,25 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
         (child.type === Modal.Footer ? footers : otherChildren).push(child);
     });
 
+    const titleContent =
+        typeof title === 'string' ? (
+            <Modal.Title
+                component={Header}
+                renderRoot={(p) => (
+                    <Header variant="secondary" {...p}>
+                        {p.children}
+                    </Header>
+                )}
+            >
+                {title}
+            </Modal.Title>
+        ) : (
+            title
+        );
+
     return (
         <PromptContextProvider value={{variant, getStyles}}>
-            <Modal.Root ref={ref} variant="prompt" size="lg" {...others} {...getStyles('root')}>
+            <Modal.Root ref={ref} variant="prompt" size="sm" {...others} {...getStyles('root')}>
                 <Modal.Overlay {...getStyles('overlay', stylesApiProps)} />
                 <Modal.Content {...getStyles('content', stylesApiProps)}>
                     <Modal.Header {...getStyles('header', stylesApiProps)}>
@@ -114,7 +131,7 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
                                 src={PROMPT_VARIANT_ICONS_SRC[variant]}
                             />
                         )}
-                        <Modal.Title {...getStyles('title', stylesApiProps)}>{title}</Modal.Title>
+                        {titleContent}
                         <Modal.CloseButton {...getStyles('close', stylesApiProps)} />
                     </Modal.Header>
                     <Modal.Body {...getStyles('body', stylesApiProps)}>

package/src/components/prompt/PromptCancelButton.tsx

@@ -1,5 +1,5 @@
-import {Button, CompoundStylesApiProps, factory, Factory, useProps} from '@mantine/core';
-import {ButtonProps} from '../button/Button';
+import {CompoundStylesApiProps, factory, Factory, useProps} from '@mantine/core';
+import {Button, ButtonProps} from '../button/Button';
 import {usePromptContext} from './Prompt.context';
 
 export type PromptCancelButtonStylesNamesVariant = 'cancel';
@@ -22,12 +22,5 @@ export const PromptCancelButton = factory<PromptCancelButtonFactory>((_props, re
     const props = useProps('PromptCancelButton', defaultProps, _props);
     const {className, classNames, style, styles, unstyled, vars, ...others} = props;
 
-    return (
-        <Button
-            ref={ref}
-            variant="outline"
-            {...others}
-            {...getStyles('cancel', {style, styles, className, classNames})}
-        />
-    );
+    return <Button.Tertiary ref={ref} {...others} {...getStyles('cancel', {style, styles, className, classNames})} />;
 });

package/src/components/prompt/PromptConfirmButton.tsx

@@ -1,4 +1,5 @@
-import {CompoundStylesApiProps, factory, Factory, useProps} from '@mantine/core';
+import {CompoundStylesApiProps, factory, Factory, PolymorphicComponentProps, useProps} from '@mantine/core';
+import {JSXElementConstructor, ReactElement} from 'react';
 import {Button, ButtonProps} from '../button/Button';
 import {PromptVariant} from './Prompt';
 import {usePromptContext} from './Prompt.context';
@@ -16,11 +17,16 @@ export type PromptConfirmButtonFactory = Factory<{
     compound: true;
 }>;
 
-const COLOR_BY_VARIANT: Record<PromptVariant, string> = {
-    success: 'var(--mantine-primary-color-filled)',
-    info: 'var(--mantine-primary-color-filled)',
-    warning: 'var(--mantine-color-error)',
-    critical: 'var(--mantine-color-error)',
+const COMPONENT_BY_VARIANT: Record<
+    PromptVariant,
+    <L = 'button'>(
+        props: PolymorphicComponentProps<L, ButtonProps>,
+    ) => ReactElement<any, string | JSXElementConstructor<any>>
+> = {
+    success: Button.Primary,
+    info: Button.Primary,
+    warning: Button.DestructivePrimary,
+    critical: Button.DestructivePrimary,
 };
 
 const defaultProps: Partial<PromptConfirmButtonProps> = {};
@@ -40,12 +46,10 @@ export const PromptConfirmButton = factory<PromptConfirmButtonFactory>((_props,
         disabledTooltipProps,
         ...others
     } = props;
-
+    const Component = COMPONENT_BY_VARIANT[variant];
     return (
-        <Button
+        <Component
             ref={ref}
-            variant="filled"
-            color={COLOR_BY_VARIANT[variant]}
             disabled={disabled}
             disabledTooltip={disabledTooltip}
             disabledTooltipProps={disabledTooltipProps}

package/src/components/prompt/__tests__/Prompt.spec.tsx

@@ -9,6 +9,7 @@ describe('Prompt', () => {
                 <Prompt.Footer>footer content</Prompt.Footer>
             </Prompt>,
         );
+        expect(screen.getByRole('dialog', {name: /title modal/i})).toBeInTheDocument();
         expect(screen.getByText(/content modal/i)).toBeInTheDocument();
         expect(screen.getByText(/footer content/i)).toBeInTheDocument();
         expect(screen.getByText(/title modal/i)).toBeInTheDocument();

package/src/components/table/Table.module.css

@@ -61,14 +61,14 @@
 }
 
 .filterEmpty {
-    color: var(--mantine-color-gray-5);
+    color: var(--mantine-color-dimmed);
 }
 
 /* Table.Header */
 .headerRoot {
     border-bottom: 1px solid var(--mantine-color-default-border);
     border-top: 1px solid var(--mantine-color-default-border);
-    background-color: var(--mantine-color-gray-1);
+    background-color: var(--mantine-color-gray-light);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
     min-height: 69px;
@@ -100,11 +100,11 @@
         padding-right: var(--mantine-spacing-xl);
     }
 
-    background-color: var(--mantine-color-gray-0);
+    background-color: var(--mantine-color-gray-light);
 
     &[data-control='true'] {
         @mixin hover {
-            background-color: var(--mantine-color-gray-1);
+            background-color: var(--mantine-color-gray-light-hover);
         }
     }
 }

package/src/components/table/Table.types.ts

@@ -1,4 +1,4 @@
-import {Icon} from '@coveord/plasma-react-icons';
+import {TablerIcon} from '@coveord/plasma-react-icons';
 import {BoxProps, StylesApiProps} from '@mantine/core';
 import {ColumnDef, CoreOptions, Row, TableOptions} from '@tanstack/table-core';
 import {ReactElement, ReactNode} from 'react';
@@ -23,7 +23,7 @@ export interface TableLayout {
      * Icon illustrating the layout.
      * Will be displayed in the layout control
      */
-    Icon?: Icon;
+    Icon?: TablerIcon;
     /**
      * Header portion of the table.
      * In the standard row layout that is where column headers would be displayed.

package/src/components/table/__tests__/TableFilter.spec.tsx

@@ -76,7 +76,7 @@ describe('Table.Filter', () => {
         };
         render(<Fixture />);
         expect(screen.getByRole('textbox')).toHaveValue('foo');
-        await user.click(screen.getByRole('button', {name: /cross/i}));
+        await user.click(screen.getByRole('button', {name: /clear/i}));
         expect(screen.getByRole('textbox')).toHaveValue('');
     });
 

package/src/components/table/layouts/TableLayoutControl.tsx

@@ -13,7 +13,7 @@ export const TableLayoutControl = () => {
                         <Center>
                             {Icon ? (
                                 <>
-                                    <Icon height={16} />
+                                    <Icon size={16} />
                                     <Space w="xs" />
                                 </>
                             ) : null}

package/src/components/table/layouts/__tests__/RowLayout.spec.tsx

@@ -111,11 +111,11 @@ describe('RowLayout', () => {
         render(<Fixture />);
 
         // wait for the collapsible icon to show
-        await screen.findByRole('button', {name: 'arrowHeadDown'});
+        await screen.findByRole('button', {name: 'Expand'});
 
         expect(screen.queryByText('Collapsible content: last')).not.toBeVisible();
 
-        await user.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(screen.getByRole('button', {name: 'Expand'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: last')).toBeVisible();
         });
@@ -156,9 +156,9 @@ describe('RowLayout', () => {
         render(<Fixture />);
 
         // wait for the collapsible icon to show
-        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+        await screen.findAllByRole('button', {name: 'Expand'});
 
-        const allRows = screen.getAllByRole('button', {name: 'arrowHeadDown'});
+        const allRows = screen.getAllByRole('button', {name: 'Expand'});
         expect(allRows).toHaveLength(2);
     });
 
@@ -190,18 +190,18 @@ describe('RowLayout', () => {
         render(<Fixture />);
 
         // wait for the collapsible icon to show
-        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+        await screen.findAllByRole('button', {name: 'Expand'});
 
         expect(screen.queryByText('Collapsible content: Russel')).not.toBeVisible();
         expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
 
-        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(within(screen.getAllByRole('row')[1]).getByRole('button', {name: 'Expand'}));
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: Russel')).toBeVisible();
         });
         expect(screen.queryByText('Collapsible content: Retriever')).not.toBeVisible();
 
-        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'arrowHeadDown'}));
+        await user.click(within(screen.getAllByRole('row')[3]).getByRole('button', {name: 'Expand'}));
 
         await waitFor(() => {
             expect(screen.queryByText('Collapsible content: Retriever')).toBeVisible();