feat: Add CoursewareSearchBar 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();
 
@@ -31,57 +33,15 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
       </div>
       <div className="courseware-search__outer-content">
         <div className="courseware-search__content" style={{ height: '999px' }}>
-          <h2>{intl.formatMessage(messages.searchModuleTitle)}</h2>
-          <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,
-            ultricies vel massa.Aliquam in vehicula dolor, id scelerisque felis.
-            Morbi posuere scelerisque tincidunt. Proin et gravida tortor. Vestibulum vel orci vulputate,
-            gravida justo eu, varius dolor. Etiam viverra diam sed est tincidunt, et aliquam est efficitur.
-            Donec imperdiet eros quis est condimentum faucibus.
-          </p>
-          <p>
-            In mattis, tellus ut lacinia viverra, ligula ex sagittis ex, sed mollis ex enim ut velit.
-            Nunc elementum, risus eget feugiat scelerisque, sapien felis laoreet nisl, ut pharetra neque
-            lorem a elit. Maecenas elementum, metus fringilla suscipit imperdiet, mi nunc efficitur elit,
-            sed consequat massa magna sit amet dui. Curabitur ultrices nisi vel lorem scelerisque, pharetra
-            luctus nunc pulvinar. Morbi aliquam ante eget arcu condimentum consectetur. Fusce faucibus lacus
-            sed pretium ultrices. Curabitur neque lacus, elementum convallis augue placerat, gravida
-            scelerisque ipsum. Donec bibendum lectus id ullamcorper sodales. Integer quis ante facilisis erat
-            maximus viverra. Nunc rutrum posuere lectus, aliquam congue odio blandit nec. Phasellus placerat,
-            magna non bibendum lacinia, tortor orci vulputate dui, vitae imperdiet turpis dui nec tortor.
-            Praesent porttitor mollis diam ut gravida. Praesent vitae felis dignissim sem accumsan dignissim.
-            Fusce ullamcorper bibendum ante ac pellentesque. Aliquam sed leo vel leo pellentesque cursus a at risus.
-            Donec sollicitudin maximus diam, sit amet molestie sapien commodo at.
-          </p>
-          <p>
-            Cras ornare pulvinar est id rhoncus. Aenean ut risus magna. Fusce cursus pulvinar dui ut egestas.
-            Quisque condimentum risus non mi sagittis, eu facilisis enim hendrerit. Integer faucibus dapibus rutrum.
-            Nullam vitae mollis tortor, eu lacinia mi. Nunc commodo ex id eros hendrerit, vel interdum augue tristique.
-            Suspendisse ullamcorper, purus in vestibulum auctor, justo nisi finibus dolor,
-            nec dignissim arcu enim a augue.
-          </p>
-          <p>
-            Fusce vel libero odio. Orci varius natoque penatibus et magnis dis parturient montes,
-            nascetur ridiculus mus. Pellentesque at varius turpis. Ut pulvinar efficitur congue. Vivamus cursus,
-            purus at aliquet malesuada, felis quam blandit dolor, a interdum justo est semper augue.
-            In eu lectus sit amet est pellentesque porta vel eget magna. Morbi sollicitudin turpis vitae faucibus
-            pulvinar. Etiam placerat pulvinar porta.
-          </p>
-          <p>
-            Suspendisse mattis eget felis non sagittis. Nulla facilisi. In bibendum cursus purus, non venenatis tellus
-            dignissim sit amet. Phasellus volutpat ipsum turpis, non imperdiet nisi elementum a. Nunc mollis, sapien
-            cursus vehicula consectetur, nunc turpis pulvinar mauris, at varius justo mi egestas nisi. Fusce semper
-            sapien in orci rhoncus ornare. Donec maximus mi eu pulvinar convallis.
-          </p>
-          <p>
-            Nullam tortor sem, hendrerit eu sapien ac, venenatis rhoncus ligula. Donec nibh leo, venenatis sed interdum
-            ac, pharetra sed nibh. Orci varius natoque penatibus et magnis dis parturient montes,
-            nascetur ridiculus mus. Sed congue risus eu mattis condimentum. In id nulla sit amet magna suscipit
-            consectetur. Nullam vitae augue felis. In consequat tempus diam, a eleifend ante bibendum ac.
-            Vivamus mi orci, fermentum ac viverra quis, tristique a ipsum. Morbi imperdiet porta sem, in sollicitudin
-            risus dignissim at. Nulla dapibus iaculis vestibulum.
-          </p>
+          <CoursewareSearchBar
+            placeholder={intl.formatMessage(messages.searchBarPlaceholderText)}
+            onSubmit={() => {
+              console.log('onSubmit submitted');
+            }}
+            onChange={() => {
+              console.log('onChange changed');
+            }}
+          />
         </div>
       </div>
     </section>

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 className="submit-button" />
+    </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,12 @@ 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;