feat(WebexActivityStream): use class prefix

webex · Mar 18, 2020 · 44a5364 · 44a5364
1 parent 7f8f920
commit 44a5364
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 97 deletions.
diff --git a/src/components/WebexActivityStream/Greeting.js b/src/components/WebexActivityStream/Greeting.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import {WEBEX_COMPONENTS_CLASS_PREFIX} from '../../constants';
 import './Greeting.scss';
 
 /**
@@ -137,7 +138,7 @@ export default function Greeting({personName}) {
   }
 
   return (
-    <div className="greeting">
+    <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-greeting`}>
       <div className="greeting-header">
         {svg}
         <div className="greeting-description">{description}</div>

diff --git a/src/components/WebexActivityStream/Greeting.scss b/src/components/WebexActivityStream/Greeting.scss
@@ -1,4 +1,6 @@
-.greeting {
+@import '../../styles/variables';
+
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-greeting {
   display: block;
   flex-direction: column;
   justify-content: center;

diff --git a/src/components/WebexActivityStream/TimeRuler.js b/src/components/WebexActivityStream/TimeRuler.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {ListSeparator} from '@momentum-ui/react';
 import {format, isSameWeek, isToday, isYesterday} from 'date-fns';
 
+import {WEBEX_COMPONENTS_CLASS_PREFIX} from '../../constants';
 import './TimeRuler.scss';
 
 /**
@@ -45,7 +46,7 @@ export function formatTimeRulerText(timestamp) {
 export default function TimeRuler({date}) {
   const text = formatTimeRulerText(new Date(date));
 
-  return <ListSeparator className="time-ruler" role="listitem" text={text} />;
+  return <ListSeparator className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-time-ruler`} role="listitem" text={text} />;
 }
 
 TimeRuler.propTypes = {

diff --git a/src/components/WebexActivityStream/TimeRuler.scss b/src/components/WebexActivityStream/TimeRuler.scss
@@ -1,85 +1,5 @@
-// For Storybook, so that activity stream loads content properly
-#root {
-  height: 100%;
-}
-
-.activity-stream {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-
-  &-loader {
-    position: relative;
-    width: 10px;
-    height: 10px;
-    margin: 1rem auto;
-    border-radius: 5px;
-    background-color: $md-gray-30;
-    color: $md-gray-30;
-    animation: dotFlashing 1s infinite linear alternate;
-    animation-delay: .5s;
-  }
-
-  &-loader::before, &-loader::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: 0;
-  }
-
-  &-loader::before {
-    left: -15px;
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
-    background-color: $md-gray-30;
-    color: $md-gray-30;
-    animation: dotFlashing 1s infinite alternate;
-    animation-delay: 0s;
-  }
-
-  &-loader::after {
-    left: 15px;
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
-    background-color: $md-gray-30;
-    color: $md-gray-30;
-    animation: dotFlashing 1s infinite alternate;
-    animation-delay: 1s;
-  }
-
-  @keyframes dotFlashing {
-    0% {
-      background-color: $md-gray-30;
-    }
-    50%,
-    100% {
-      background-color: $md-gray-10;
-    }
-  }
-}
-
-.greeting {
-  display: block;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 37.5rem;
-  text-align: center;
-  color: $gray-dark-3;
-
-  .greeting-header {
-    @include header-fonts;
-  }
-
-  .greeting-description {
-    @include body-fonts;
-    padding: 0 3.125rem;
-  }
-}
+@import '../../styles/variables';
 
-.time-ruler {
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-time-ruler {
   padding: 0 3rem;
 }
diff --git a/src/components/WebexActivityStream/WebexActivityStream.js b/src/components/WebexActivityStream/WebexActivityStream.js
@@ -2,13 +2,16 @@ import React, {Fragment, useRef} from 'react';
 import PropTypes from 'prop-types';
 import {RoomType} from '@webex/component-adapter-interfaces';
 
+import {WEBEX_COMPONENTS_CLASS_PREFIX} from '../../constants';
 import {useActivityStream, useActivityScroll, useOverflowActivities, useRoom} from '../hooks';
 import {PREPEND_ACTIVITIES} from '../hooks/useActivityStream';
 import WebexActivity from '../WebexActivity/WebexActivity';
 
 import Greeting from './Greeting';
 import TimeRuler from './TimeRuler';
 
+import './WebexActivityStream.scss';
+
 /**
  * Webex Activity Stream component displays all activities that
  * happened on the given room ID. While mounted, the component
@@ -42,8 +45,8 @@ export default function WebexActivityStream({roomID}) {
   });
 
   return (
-    <div className="activity-stream" ref={activityStreamRef}>
-      {showLoader && <div className="activity-stream-loader" />}
+    <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-activity-stream`} ref={activityStreamRef}>
+      {showLoader && <div className={`${WEBEX_COMPONENTS_CLASS_PREFIX}-activity-stream-loader`} />}
       {activities.length ? <Fragment>{activities}</Fragment> : <Greeting personName={personName} />}
       <div className="last-activity" ref={lastActivityRef} />
     </div>

diff --git a/src/components/WebexActivityStream/WebexActivityStream.scss b/src/components/WebexActivityStream/WebexActivityStream.scss
@@ -0,0 +1,64 @@
+@import '../../styles/variables';
+
+// For Storybook, so that activity stream loads content properly
+#root {
+  height: 100%;
+}
+
+.#{$WEBEX_COMPONENTS_CLASS_PREFIX}-activity-stream {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+
+  &-loader {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    margin: 1rem auto;
+    border-radius: 5px;
+    background-color: $md-gray-30;
+    color: $md-gray-30;
+    animation: dotFlashing 1s infinite linear alternate;
+    animation-delay: .5s;
+  }
+
+  &-loader::before, &-loader::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+  }
+
+  &-loader::before {
+    left: -15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: $md-gray-30;
+    color: $md-gray-30;
+    animation: dotFlashing 1s infinite alternate;
+    animation-delay: 0s;
+  }
+
+  &-loader::after {
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: $md-gray-30;
+    color: $md-gray-30;
+    animation: dotFlashing 1s infinite alternate;
+    animation-delay: 1s;
+  }
+
+  @keyframes dotFlashing {
+    0% {
+      background-color: $md-gray-30;
+    }
+    50%,
+    100% {
+      background-color: $md-gray-10;
+    }
+  }
+}
diff --git a/src/components/WebexActivityStream/__snapshots__/Greeting.test.js.snap b/src/components/WebexActivityStream/__snapshots__/Greeting.test.js.snap
@@ -138,7 +138,7 @@ exports[`Activity Stream Greeting Space SVG snapshot matches with greeting space
 
 exports[`Activity Stream Greeting component snapshot matches with empty 1:1 1`] = `
 <div
-  className="greeting"
+  className="wxc-greeting"
 >
   <div
     className="greeting-header"
@@ -155,7 +155,7 @@ exports[`Activity Stream Greeting component snapshot matches with empty 1:1 1`]
 
 exports[`Activity Stream Greeting component snapshot matches with empty space 1`] = `
 <div
-  className="greeting"
+  className="wxc-greeting"
 >
   <div
     className="greeting-header"

diff --git a/src/components/WebexActivityStream/__snapshots__/TimeRuler.test.js.snap b/src/components/WebexActivityStream/__snapshots__/TimeRuler.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Time Ruler component snapshot matches with older than a week time 1`] = `
 <ListSeparator
-  className="time-ruler"
+  className="wxc-time-ruler"
   lineColor={null}
   margin={null}
   role="listitem"
@@ -14,7 +14,7 @@ exports[`Time Ruler component snapshot matches with older than a week time 1`] =
 
 exports[`Time Ruler component snapshot matches with time from this week 1`] = `
 <ListSeparator
-  className="time-ruler"
+  className="wxc-time-ruler"
   lineColor={null}
   margin={null}
   role="listitem"
@@ -26,7 +26,7 @@ exports[`Time Ruler component snapshot matches with time from this week 1`] = `
 
 exports[`Time Ruler component snapshot matches with time from today 1`] = `
 <ListSeparator
-  className="time-ruler"
+  className="wxc-time-ruler"
   lineColor={null}
   margin={null}
   role="listitem"
@@ -38,7 +38,7 @@ exports[`Time Ruler component snapshot matches with time from today 1`] = `
 
 exports[`Time Ruler component snapshot matches with time from yesterday 1`] = `
 <ListSeparator
-  className="time-ruler"
+  className="wxc-time-ruler"
   lineColor={null}
   margin={null}
   role="listitem"

diff --git a/src/components/WebexActivityStream/__snapshots__/WebexActivityStream.test.js.snap b/src/components/WebexActivityStream/__snapshots__/WebexActivityStream.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Webex Activity Stream component snapshot matches with default stream 1`] = `
 <div
-  className="activity-stream"
+  className="wxc-activity-stream"
 >
   <WebexActivity
     activityID="default"
@@ -24,7 +24,7 @@ exports[`Webex Activity Stream component snapshot matches with default stream 1`
 
 exports[`Webex Activity Stream component snapshot matches with empty direct stream 1`] = `
 <div
-  className="activity-stream"
+  className="wxc-activity-stream"
 >
   <Greeting
     personName="Webex Component User"
@@ -37,7 +37,7 @@ exports[`Webex Activity Stream component snapshot matches with empty direct stre
 
 exports[`Webex Activity Stream component snapshot matches with empty group stream 1`] = `
 <div
-  className="activity-stream"
+  className="wxc-activity-stream"
 >
   <Greeting
     personName=""
@@ -50,7 +50,7 @@ exports[`Webex Activity Stream component snapshot matches with empty group strea
 
 exports[`Webex Activity Stream component snapshot matches with time rulers stream 1`] = `
 <div
-  className="activity-stream"
+  className="wxc-activity-stream"
 >
   <TimeRuler
     date="2019-08-20T21:00:07.047Z"