diff --git a/i18n/en-US.properties b/i18n/en-US.properties
index 61faa80f99..0a06a437aa 100644
--- a/i18n/en-US.properties
+++ b/i18n/en-US.properties
@@ -340,6 +340,8 @@ be.contentSidebar.addTask.general = General Task
be.contentSidebar.addTask.general.description = Assignees will be responsible for marking tasks as complete
# title for general task popup
be.contentSidebar.addTask.general.title = Create General Task
+# Default message for Box AI expand button in sidebar header
+be.contentSidebar.boxAI.expand = Expand
# body for first-time user experience tooltip shown to new users of Box Sign
be.contentSidebar.boxSignFtuxBody = Sign documents or send signature requests, right from where your content lives
# title for first-time user experience tooltip shown to new users of Box Sign
diff --git a/src/elements/content-sidebar/BoxAISidebar.tsx b/src/elements/content-sidebar/BoxAISidebar.tsx
index 659cd5a87b..31be45a2c6 100644
--- a/src/elements/content-sidebar/BoxAISidebar.tsx
+++ b/src/elements/content-sidebar/BoxAISidebar.tsx
@@ -6,6 +6,8 @@ import * as React from 'react';
import flow from 'lodash/flow';
import { useIntl } from 'react-intl';
+import { ArrowsExpand } from '@box/blueprint-web-assets/icons/Fill';
+import { IconButton } from '@box/blueprint-web';
import SidebarContent from './SidebarContent';
import { withAPIContext } from '../common/api-context';
import { withErrorBoundary } from '../common/error-boundary';
@@ -15,21 +17,30 @@ import { EVENT_JS_READY } from '../common/logger/constants';
import { mark } from '../../utils/performance';
import messages from '../common/messages';
+import sidebarMessages from './messages';
const MARK_NAME_JS_READY: string = `${ORIGIN_BOXAI_SIDEBAR}_${EVENT_JS_READY}`;
mark(MARK_NAME_JS_READY);
export interface BoxAISidebarProps {
- onExpandPressed: () => void;
+ onExpandClick: () => void;
}
-function BoxAISidebar() {
+function BoxAISidebar({ onExpandClick }: BoxAISidebarProps) {
const { formatMessage } = useIntl();
return (
+ }
+ className="bcs-BoxAISidebar"
sidebarView={SIDEBAR_VIEW_BOXAI}
title={formatMessage(messages.sidebarBoxAITitle)}
>
diff --git a/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx b/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx
index 18b69db22a..f630a72bf9 100644
--- a/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx
+++ b/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx
@@ -1,19 +1,41 @@
import React from 'react';
+import { userEvent } from '@testing-library/user-event';
import { screen, render } from '../../../test-utils/testing-library';
import BoxAISidebarComponent, { BoxAISidebarProps } from '../BoxAISidebar';
+const mockOnExpandClick = jest.fn();
+
describe('elements/content-sidebar/BoxAISidebar', () => {
const renderComponent = (props = {}) => {
const defaultProps = {
- onExpandPressed: jest.fn(),
+ onExpandClick: mockOnExpandClick,
} satisfies BoxAISidebarProps;
render();
};
+ afterEach(() => {
+ jest.clearAllMocks();
+ });
+
test('should render title', () => {
renderComponent();
expect(screen.getByRole('heading', { level: 3, name: 'Box AI' })).toBeInTheDocument();
});
+
+ test('should have accessible "Expand" button', () => {
+ renderComponent();
+
+ expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument();
+ });
+
+ test('should call onExpandClick when click "Expand" button', async () => {
+ renderComponent();
+
+ const expandButton = screen.getByRole('button', { name: 'Expand' });
+ await userEvent.click(expandButton);
+
+ expect(mockOnExpandClick).toHaveBeenCalled();
+ });
});
diff --git a/src/elements/content-sidebar/messages.js b/src/elements/content-sidebar/messages.js
index ee5a9f669e..d24ba04b46 100644
--- a/src/elements/content-sidebar/messages.js
+++ b/src/elements/content-sidebar/messages.js
@@ -32,6 +32,11 @@ const messages = defineMessages({
defaultMessage: 'Tasks',
description: 'Dropdown option for filtering tasks from activity list',
},
+ boxAISidebarExpand: {
+ id: 'be.contentSidebar.boxAI.expand',
+ description: 'Default message for Box AI expand button in sidebar header',
+ defaultMessage: 'Expand',
+ },
boxSignFtuxBody: {
id: 'be.contentSidebar.boxSignFtuxBody',
defaultMessage: 'Sign documents or send signature requests, right from where your content lives',
diff --git a/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx b/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx
index 3ad83e972b..040234cc95 100644
--- a/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx
+++ b/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx
@@ -1,4 +1,4 @@
-import { expect, within } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
import { type StoryObj } from '@storybook/react';
import ContentSidebar from '../../ContentSidebar';
import BoxAISidebar from '../../BoxAISidebar';
@@ -24,3 +24,12 @@ export const BoxAIInSidebar: StoryObj = {
expect(sidebar).toBeInTheDocument();
},
};
+
+export const BoxAIWithExpandedView: StoryObj = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ const expandButton = await canvas.findByRole('button', { name: 'Expand' }, { timeout: 5000 });
+ await userEvent.click(expandButton);
+ },
+};