From 26bf66844c6492da0298db72a131a1f4fb70db5e Mon Sep 17 00:00:00 2001
From: Adam Weeks <adweeks@cisco.com>
Date: Fri, 20 Mar 2020 10:08:08 -0400
Subject: [PATCH] feat(WebexMeetingInfo): add className prop

---
 .../WebexMeetingInfo/WebexMeetingInfo.js           | 14 ++++++++++++--
 .../WebexMeetingInfo/WebexMeetingInfo.test.js      |  4 ++++
 .../__snapshots__/WebexMeetingInfo.test.js.snap    | 10 ++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/WebexMeetingInfo/WebexMeetingInfo.js b/src/components/WebexMeetingInfo/WebexMeetingInfo.js
index f9d966172..d659b3cde 100644
--- 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
index afd9cec85..d3598ac37 100644
--- 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
index 524b70651..561af16fe 100644
--- 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"