feat(WebexInterstitialMeeting): use class prefix

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

Hide file tree

Showing 4 changed files with 25 additions and 21 deletions.
diff --git a/src/components/WebexInterstitialMeeting/WebexInterstitialMeeting.css b/src/components/WebexInterstitialMeeting/WebexInterstitialMeeting.css
diff --git a/src/components/WebexInterstitialMeeting/WebexInterstitialMeeting.js b/src/components/WebexInterstitialMeeting/WebexInterstitialMeeting.js
@@ -2,9 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Spinner} from '@momentum-ui/react';
 
+import {WEBEX_COMPONENTS_CLASS_PREFIX} from '../../constants';
+
 import {WebexLocalMedia, WebexMeetingInfo} from '..';
 
-import './WebexInterstitialMeeting.css';
+import './WebexInterstitialMeeting.scss';
 
 /**
  * Webex Interstitial component displays the user's local video and
@@ -15,7 +17,7 @@ import './WebexInterstitialMeeting.css';
  */
 export default function WebexInterstitialMeeting({meetingID}) {
   return (
-    <div className="interstitial-meeting">
+    <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-interstitial-meeting`}>
       {meetingID ? (
         <React.Fragment>
           <WebexMeetingInfo meetingID={meetingID} />

diff --git a/src/components/WebexInterstitialMeeting/WebexInterstitialMeeting.scss b/src/components/WebexInterstitialMeeting/WebexInterstitialMeeting.scss
@@ -0,0 +1,19 @@
+@import '../../styles/variables';
+
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-interstitial-meeting {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+
+  .meeting-info {
+    position: absolute;
+    align-self: flex-start;
+    width: 100%;
+    height: 25%;
+
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+}
diff --git a/src/components/WebexInterstitialMeeting/__snapshots__/WebexInterstitialMeeting.test.js.snap b/src/components/WebexInterstitialMeeting/__snapshots__/WebexInterstitialMeeting.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Webex Interstitial Meeting component snapshot matches snapshot of loading while meeting is created 1`] = `
 <div
-  className="interstitial-meeting"
+  className="wxc-interstitial-meeting"
 >
   <Spinner
     className=""
@@ -17,7 +17,7 @@ exports[`Webex Interstitial Meeting component snapshot matches snapshot of loadi
 
 exports[`Webex Interstitial Meeting component snapshot matches snapshot of meeting destination 1`] = `
 <div
-  className="interstitial-meeting"
+  className="wxc-interstitial-meeting"
 >
   <WebexMeetingInfo
     meetingID="localMedia"