feat(WebexLocalMedia): use class prefix

webex · Mar 18, 2020 · fe6547e · fe6547e
1 parent a539699
commit fe6547e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/src/components/WebexLocalMedia/WebexLocalMedia.js b/src/components/WebexLocalMedia/WebexLocalMedia.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {Spinner} from '@momentum-ui/react';
 
+import {WEBEX_COMPONENTS_CLASS_PREFIX} from '../../constants';
 import {WebexAvatar} from '../';
 import {useElementDimensions, useMe, useMeeting, useStream} from '../hooks';
 import {PHONE_LARGE} from '../breakpoints';
@@ -21,11 +22,14 @@ export default function WebexLocalMedia({meetingID}) {
   const {ID} = useMe();
   const videoRef = useStream(localVideo);
 
-  const cssClasses = classNames({
-    'local-media': true,
-    'local-media-desktop': width >= PHONE_LARGE,
-    'no-media': localVideo === null,
-  });
+  const classBaseName = 'local-media';
+  const classObjects = {};
+
+  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}`] = true;
+  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-${classBaseName}-desktop`] = width >= PHONE_LARGE;
+  classObjects[`${WEBEX_COMPONENTS_CLASS_PREFIX}-no-media`] = localVideo === null;
+
+  const cssClasses = classNames(classObjects);
 
   const disabledVideo = ID ? <WebexAvatar personID={ID} displayStatus={false} /> : <Spinner />;
 

diff --git a/src/components/WebexLocalMedia/WebexLocalMedia.scss b/src/components/WebexLocalMedia/WebexLocalMedia.scss
@@ -1,4 +1,6 @@
-.local-media {
+@import '../../styles/variables';
+
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-local-media {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,6 +29,6 @@
   }
 }
 
-.no-media {
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-no-media {
   background: white;
 }
diff --git a/src/components/WebexLocalMedia/__snapshots__/WebexLocalMedia.test.js.snap b/src/components/WebexLocalMedia/__snapshots__/WebexLocalMedia.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Webex Local Media component snapshot matches snapshot of disabled local video 1`] = `
 <div
-  className="local-media no-media"
+  className="wxc-local-media wxc-no-media"
 >
   <WebexAvatar
     displayStatus={false}
@@ -13,7 +13,7 @@ exports[`Webex Local Media component snapshot matches snapshot of disabled local
 
 exports[`Webex Local Media component snapshot matches snapshot of local video 1`] = `
 <div
-  className="local-media"
+  className="wxc-local-media"
 >
   <video
     autoPlay={true}