feat(WebexMeetingInfo): add className prop

webex · Mar 20, 2020 · 26bf668 · 26bf668
1 parent 08ca8ec
commit 26bf668
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/src/components/WebexMeetingInfo/WebexMeetingInfo.js b/src/components/WebexMeetingInfo/WebexMeetingInfo.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import {format} from 'date-fns';
 import {Spinner} from '@momentum-ui/react';
 
@@ -31,9 +32,13 @@ export function formatMeetingTime(startDate, endDate) {
  * @param {object} props
  * @returns {object} JSX of the component
  */
-export default function WebexMeetingInfo({meetingID}) {
+export default function WebexMeetingInfo({className, meetingID}) {
   const {ID, startTime, endTime, title} = useMeeting(meetingID);
   let infoComponent;
+  const mainClasses = {
+    [`${WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-info`]: true,
+    [className]: !!className,
+  };
 
   if (ID) {
     const meetingTime = startTime ? <h3>{formatMeetingTime(new Date(startTime), new Date(endTime))}</h3> : null;
@@ -53,9 +58,14 @@ export default function WebexMeetingInfo({meetingID}) {
     );
   }
 
-  return <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-info`}>{infoComponent}</div>;
+  return <div className={classNames(mainClasses)}>{infoComponent}</div>;
 }
 
 WebexMeetingInfo.propTypes = {
+  className: PropTypes.string,
   meetingID: PropTypes.string.isRequired,
 };
+
+WebexMeetingInfo.defaultProps = {
+  className: '',
+};
diff --git a/src/components/WebexMeetingInfo/WebexMeetingInfo.test.js b/src/components/WebexMeetingInfo/WebexMeetingInfo.test.js
@@ -10,6 +10,10 @@ describe('Webex Meeting Info component', () => {
       expect(shallow(<WebexMeetingInfo meetingID="scheduledMeeting" />)).toMatchSnapshot();
     });
 
+    test('matches snapshot of scheduled meeting with custom CSS class', () => {
+      expect(shallow(<WebexMeetingInfo className="my-custom-class" meetingID="scheduledMeeting" />)).toMatchSnapshot();
+    });
+
     test('matches snapshot of one on one meeting', () => {
       expect(shallow(<WebexMeetingInfo meetingID="oneOnOneMeeting" />)).toMatchSnapshot();
     });

diff --git a/src/components/WebexMeetingInfo/__snapshots__/WebexMeetingInfo.test.js.snap b/src/components/WebexMeetingInfo/__snapshots__/WebexMeetingInfo.test.js.snap
@@ -45,6 +45,16 @@ exports[`Webex Meeting Info component snapshot matches snapshot of scheduled mee
 </div>
 `;
 
+exports[`Webex Meeting Info component snapshot matches snapshot of scheduled meeting with custom CSS class 1`] = `
+<div
+  className="wxc-meeting-info my-custom-class"
+>
+  <h2>
+    Our Scheduled Meeting
+  </h2>
+</div>
+`;
+
 exports[`Webex Meeting Info component snapshot matches snapshot of space meeting 1`] = `
 <div
   className="wxc-meeting-info"