feat(WebexMeetingControls): add layout styling

Author: adamweeks

src/components/WebexMeetingControl/WebexMeetingControls.js

@@ -1,5 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {WEBEX_COMPONENTS_CLASS_PREFIX} from '../../constants';
+
+import './WebexMeetingControls.scss';
 
 export const MeetingContext = React.createContext();
 
@@ -10,15 +15,25 @@ export const MeetingContext = React.createContext();
  * @param {object} props
  * @returns {object} JSX of the component
  */
-export default function WebexMeetingControls({meetingID, children}) {
+export default function WebexMeetingControls({children, className, meetingID}) {
+  const mainClasses = {
+    [`${WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-controls`]: true,
+    [className]: !!className,
+  };
+
   return (
     <MeetingContext.Provider value={meetingID}>
-      <div className="meeting-controls">{children}</div>
+      <div className={classNames(mainClasses)}>{children}</div>
     </MeetingContext.Provider>
   );
 }
 
 WebexMeetingControls.propTypes = {
-  meetingID: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  meetingID: PropTypes.string.isRequired,
+};
+
+WebexMeetingControls.defaultProps = {
+  className: '',
 };

src/components/WebexMeetingControl/WebexMeetingControls.scss

@@ -0,0 +1,11 @@
+@import '../../styles/variables';
+
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-meeting-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > * {
+    margin: 0.3125rem;
+  }
+}

src/components/WebexMeetingControl/WebexMeetingControls.test.js

@@ -4,9 +4,18 @@ import WebexMeetingControls from './WebexMeetingControls';
 
 describe('Webex Meeting Controls component', () => {
   test('matches snapshot', () => {
-    const meetingID = 'my-meeting';
     const component = shallow(
-      <WebexMeetingControls meetingID={meetingID}>
+      <WebexMeetingControls meetingID="my-meeting">
+        <div className="test" />
+      </WebexMeetingControls>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('matches snapshot with custom CSS class', () => {
+    const component = shallow(
+      <WebexMeetingControls className="my-custom-class" meetingID="my-meeting">
         <div className="test" />
       </WebexMeetingControls>
     );

src/components/WebexMeetingControl/__snapshots__/WebexMeetingControls.test.js.snap

@@ -5,7 +5,21 @@ exports[`Webex Meeting Controls component matches snapshot 1`] = `
   value="my-meeting"
 >
   <div
-    className="meeting-controls"
+    className="wxc-meeting-controls"
+  >
+    <div
+      className="test"
+    />
+  </div>
+</ContextProvider>
+`;
+
+exports[`Webex Meeting Controls component matches snapshot with custom CSS class 1`] = `
+<ContextProvider
+  value="my-meeting"
+>
+  <div
+    className="wxc-meeting-controls my-custom-class"
   >
     <div
       className="test"