Fix storybook Notifications and Tooltips

Author: keianhzo

src/react-components/room/Notification.stories.js

@@ -3,7 +3,6 @@ import React from "react";
 import { RoomLayout } from "../layout/RoomLayout";
 import styles from "../../assets/stylesheets/presence-log.scss";
 import PermissionMessage from "../permission-message";
-import { NotificationsContainer } from "./NotificationsContainer";
 
 export default {
   title: "Room/Notifications",
@@ -54,24 +53,19 @@ const entries = [
 export const Base = () => (
   <RoomLayout
     viewport={
-      <NotificationsContainer>
-        <div
-          style={{ alignItems: "center" }}
-          className={classNames(styles.presenceLog, styles["presenceLogPermission"])}
-        >
-          {entries.map(entry => {
-            return (
-              <PermissionMessage
-                key={entry.key}
-                permission={entry.permission}
-                className={classNames(entryClasses, styles.permission)}
-                body={entry.body}
-                isMod={false}
-              />
-            );
-          })}
-        </div>
-      </NotificationsContainer>
+      <div style={{ alignItems: "center" }} className={classNames(styles.presenceLog, styles["presenceLogPermission"])}>
+        {entries.map(entry => {
+          return (
+            <PermissionMessage
+              key={entry.key}
+              permission={entry.permission}
+              className={classNames(entryClasses, styles.permission)}
+              body={entry.body}
+              isMod={false}
+            />
+          );
+        })}
+      </div>
     }
   />
 );

src/react-components/room/NotificationsContainer.js

@@ -3,9 +3,7 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import styles from "./NotificationsContainer.scss";
 
-const isMobile = AFRAME.utils.device.isMobile();
-
-export function NotificationsContainer({ className, children, ...rest }) {
+export function NotificationsContainer({ className, children, isMobile, ...rest }) {
   return (
     <div className={classNames(className, styles.content, isMobile && styles.mobile)} {...rest}>
       {children}
@@ -15,5 +13,6 @@ export function NotificationsContainer({ className, children, ...rest }) {
 
 NotificationsContainer.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
+  isMobile: PropTypes.bool
 };

src/react-components/room/Tip.stories.js

@@ -26,33 +26,32 @@ Tips.propTypes = {
 };
 
 const TOOLTIP_STEPS = {
-  "tips.desktop.welcome": "Desktop Welcome Message",
-  "tips.desktop.locomotion": "Desktop Locomotion",
-  "tips.desktop.turning": "Desktop Turning",
-  "tips.desktop.invite": "Desktop Invite",
-  "tips.desktop.end": "Desktop End",
-  "tips.desktop.menu": "Desktop Menu",
-  "tips.mobile.welcome": "Mobile Welcome Message",
-  "tips.mobile.locomotion": "Mobile Locomotion",
-  "tips.mobile.turning": "Mobile Turning",
-  "tips.mobile.end": "Mobile End",
-  "tips.mobile.menu": "Mobile Menu"
+  "tips.desktop.welcome": "Welcome Message",
+  "tips.desktop.locomotion": "Locomotion",
+  "tips.desktop.turning": "Turning",
+  "tips.desktop.invite": "Invite",
+  "tips.desktop.end": "End",
+  "tips.desktop.menu": "Menu"
 };
+const steps = Object.keys(TOOLTIP_STEPS);
 
 export const Tooltips = ({ step }) => <RoomLayout viewport={<Tooltip step={step} />} />;
 
 Tooltips.argTypes = {
   step: {
     name: "Onboarding tips step",
-    options: Object.keys(TOOLTIP_STEPS),
+    options: steps,
     control: {
       type: "select",
       labels: TOOLTIP_STEPS
-    },
-    defaultValue: Object.keys(TOOLTIP_STEPS)[0]
+    }
   }
 };
 
+Tooltips.args = {
+  step: steps[0]
+};
+
 Tooltips.propTypes = {
   step: PropTypes.string
 };

src/react-components/ui-root.js

@@ -1461,7 +1461,7 @@ class UIRoot extends Component {
                         onViewProfile={sessionId => this.setSidebar("user", { selectedUserId: sessionId })}
                       />
                     )}
-                    <NotificationsContainer>
+                    <NotificationsContainer isMobile={isMobile}>
                       {showGlobalNotification && !this.state.globalNotificationDismissed && (
                         <SystemNotification
                           body={globalNotificationBody}