feat(WebexInMeeting): use class prefix

webex · Mar 18, 2020 · 55dbec7 · 55dbec7
1 parent 44a5364
commit 55dbec7
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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"