Add CoursewareSearchForm component

src/course-home/courseware-search/CoursewareSearch.jsx

@@ -9,6 +9,8 @@ import { setShowSearch } from '../data/slice';
 import { useElementBoundingBox, useLockScroll } from './hooks';
 import messages from './messages';
 
+import CoursewareSearchBar from './CoursewareSearchBar';
+
 const CoursewareSearch = ({ intl, ...sectionProps }) => {
   const dispatch = useDispatch();
 
@@ -32,6 +34,11 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
       <div className="courseware-search__outer-content">
         <div className="courseware-search__content" style={{ height: '999px' }}>
           <h2>{intl.formatMessage(messages.searchModuleTitle)}</h2>
+          <CoursewareSearchBar
+            onChange={() => {}}
+            onSubmit={() => {}}
+            placeholder={intl.formatMessage(messages.searchBarPlaceholderText)}
+          />
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper rutrum odio quis congue.
             Duis sodales nibh et sapien elementum fermentum. Quisque magna urna, gravida at gravida et,

src/course-home/courseware-search/CoursewareSearchBar.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SearchField } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+const CoursewareSearchBar = ({
+  onSubmit,
+  onChange,
+  placeholder,
+}) => (
+  <SearchField.Advanced
+    onSubmit={onSubmit}
+    onChange={onChange}
+    submitButtonLocation="external"
+    className="courseware-search-bar"
+    data-testid="courseware-search-bar"
+  >
+    <div className="pgn__searchfield_wrapper">
+      <SearchField.Label />
+      <SearchField.Input placeholder={placeholder} />
+      <SearchField.ClearButton />
+    </div>
+    <SearchField.SubmitButton submitButtonLocation="external" />
+  </SearchField.Advanced>
+);
+
+CoursewareSearchBar.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string.isRequired,
+};
+
+export default CoursewareSearchBar;

src/course-home/courseware-search/CoursewareSearchBarTest.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  act,
+  initializeMockApp,
+  render,
+  screen,
+  waitFor,
+} from '../../setupTest';
+import CoursewareSearchBar from './CoursewareSearchBar';
+
+function renderComponent() {
+  const { container } = render(<CoursewareSearchBar />);
+  return container;
+}
+
+describe('CoursewareSearchToggle', () => {
+  beforeAll(async () => {
+    initializeMockApp();
+  });
+
+  it('should render', async () => {
+    await act(async () => renderComponent());
+    await waitFor(() => {
+      expect(screen.queryByTestId('courseware-search-bar')).toBeInTheDocument();
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});

src/course-home/courseware-search/messages.js

@@ -16,6 +16,11 @@ const messages = defineMessages({
     defaultMessage: 'Search this course',
     description: 'Title for the Courseware Search module.',
   },
+  searchBarPlaceholderText: {
+    id: 'learn.coursewareSerch.searchBarPlaceholderText',
+    defaultMessage: 'Search',
+    description: 'Placeholder text courseware for the search bar.',
+  },
 });
 
 export default messages;