From 55dbec75ff78a9b313ff997a3bb142331a3f4e42 Mon Sep 17 00:00:00 2001
From: Adam Weeks <adweeks@cisco.com>
Date: Tue, 17 Mar 2020 16:58:29 -0400
Subject: [PATCH] feat(WebexInMeeting): use class prefix

---
 src/components/WebexInMeeting/WebexInMeeting.js    | 14 +++++++++-----
 src/components/WebexInMeeting/WebexInMeeting.scss  |  4 +++-
 .../__snapshots__/WebexInMeeting.test.js.snap      |  2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/WebexInMeeting/WebexInMeeting.js b/src/components/WebexInMeeting/WebexInMeeting.js
index 19ee7441e..d60182080 100644
--- a/src/components/WebexInMeeting/WebexInMeeting.js
+++ b/src/components/WebexInMeeting/WebexInMeeting.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import {WEBEX_COMPONENTS_CLASS_PREFIX} from '../../constants';
 import {WebexLocalMedia, WebexRemoteMedia} from '../';
 import {useElementDimensions} from '../hooks';
 import {TABLET, DESKTOP} from '../breakpoints';
@@ -17,11 +18,14 @@ import './WebexInMeeting.scss';
  */
 export default function WebexInMeeting({meetingID}) {
   const [meetingRef, {width}] = useElementDimensions();
-  const cssClasses = classNames({
-    'in-meeting': true,
-    'in-meeting-tablet': width >= TABLET && width < DESKTOP,
-    'in-meeting-desktop': width >= DESKTOP,
-  });
+  const classBaseName = 'in-meeting';
+  const classObjects = {};
+
+  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}`] = true;
+  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}-tablet`] = width >= TABLET && width < DESKTOP;
+  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}-desktop`] = width >= DESKTOP;
+
+  const cssClasses = classNames(classObjects);
 
   return (
     <div ref={meetingRef} className={cssClasses}>
diff --git a/src/components/WebexInMeeting/WebexInMeeting.scss b/src/components/WebexInMeeting/WebexInMeeting.scss
index 4bea97e35..aa8db0c0e 100644
--- a/src/components/WebexInMeeting/WebexInMeeting.scss
+++ b/src/components/WebexInMeeting/WebexInMeeting.scss
@@ -1,9 +1,11 @@
+@import '../../styles/variables';
+
 $shadow-offset: 0.25rem;
 $shadow-blur: 1rem;
 $shadow-spread: -0.125rem;
 $shadow-color: rgba(0, 0, 0, 0.2);
 
-.in-meeting {
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-in-meeting {
   position: relative;
   height: 100%;
   width: 100%;
diff --git a/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.test.js.snap b/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.test.js.snap
index 506c7671b..7f0576205 100644
--- a/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.test.js.snap
+++ b/src/components/WebexInMeeting/__snapshots__/WebexInMeeting.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Webex InMeeting component snapshot matches snapshot of meeting 1`] = `
 <div
-  className="in-meeting"
+  className="wxc-in-meeting"
 >
   <WebexRemoteMedia
     meetingID="remoteMedia"